/* ============================================================
   SIGI — estilos propios para la pantalla de acceso (login.php)
   ------------------------------------------------------------
   Autocontenido: no depende de Bootstrap ni de Sneat (ninguno de
   los dos se carga en esta página). Define desde cero solo las
   clases que login.php realmente usa. Mismo lenguaje visual
   skeuomorphic suave del resto del sistema.
   ============================================================ */

:root {
    --sk-surface: #eef1f6;
    --sk-shadow-light: rgba(255, 255, 255, 0.85);
    --sk-shadow-dark: rgba(163, 177, 198, 0.5);
    --sk-primary-from: #7477ff;
    --sk-primary-to: #5f62e8;
    --sk-radius-lg: 20px;
    --sk-radius-md: 12px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    background: var(--sk-surface);
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #3d4552;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ---------- Estructura de la tarjeta de acceso ---------- */
.authentication-wrapper {
    width: 100%;
    max-width: 420px;
}

.authentication-inner {
    width: 100%;
}

.card {
    background: linear-gradient(145deg, #f7f9fc, #e9edf3);
    border-radius: var(--sk-radius-lg);
    box-shadow:
        10px 10px 24px var(--sk-shadow-dark),
        -8px -8px 20px var(--sk-shadow-light);
    overflow: hidden;
}

.card-header {
    padding: 1.75rem 1.75rem 0.5rem;
    text-align: center;
}

.card-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

/* ---------- Encabezado / marca ---------- */
.title-sigi {
    font-size: 1rem;
    font-weight: 500;
    color: #566a7f;
    margin: 0 0 0.5rem;
    line-height: 1.6;
}

.title-sigi .inicial {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sk-primary-to);
    display: inline-block;
    margin: 0 1px;
}

.decorative-line {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--sk-primary-to), transparent);
    margin: 1rem auto;
    border-radius: 2px;
}

.app-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.app-brand img {
    filter: drop-shadow(0 4px 8px rgba(95, 98, 232, 0.25));
}

/* ---------- Formulario ---------- */
.mb-3 {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: #4a5262;
}

.form-control {
    width: 100%;
    background-color: var(--sk-surface);
    border: none;
    border-radius: var(--sk-radius-md);
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    color: #3d4552;
    box-shadow:
        inset 3px 3px 6px var(--sk-shadow-dark),
        inset -3px -3px 6px var(--sk-shadow-light);
    transition: box-shadow 0.15s ease;
}

.form-control:focus {
    outline: none;
    box-shadow:
        inset 2px 2px 5px var(--sk-shadow-dark),
        inset -2px -2px 5px var(--sk-shadow-light),
        0 0 0 3px rgba(105, 108, 255, 0.18);
}

.form-control.is-invalid {
    box-shadow:
        inset 3px 3px 6px rgba(255, 62, 29, 0.3),
        inset -3px -3px 6px var(--sk-shadow-light);
}

.invalid-feedback {
    display: none;
    color: #ff3e1d;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Envoltorio del campo de contraseña con botón de mostrar/ocultar */
.sk-password-wrap {
    position: relative;
}

.sk-password-wrap .form-control {
    padding-right: 2.75rem;
}

.sk-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #8592a3;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}

.sk-password-toggle:hover {
    color: #4b4ec9;
}

/* ---------- Botón de ingreso ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--sk-radius-md);
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.btn.w-100 {
    width: 100%;
}

.btn-primary {
    background: linear-gradient(145deg, var(--sk-primary-from), var(--sk-primary-to));
    color: #fff;
    box-shadow:
        5px 5px 10px var(--sk-shadow-dark),
        -5px -5px 10px var(--sk-shadow-light),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(145deg, #7d80ff, #6669f0);
}

.btn-primary:active {
    box-shadow:
        inset 3px 3px 6px rgba(0, 0, 0, 0.25),
        inset -2px -2px 4px rgba(255, 255, 255, 0.15);
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sk-spin 0.75s linear infinite;
}

.spinner-border-sm {
    width: 0.85rem;
    height: 0.85rem;
}

.me-2 {
    margin-right: 0.5rem;
}

@keyframes sk-spin {
    to { transform: rotate(360deg); }
}

/* ---- Utilidades mínimas (páginas de recuperación de contraseña) ---- */
.text-center { text-align: center; }
.text-end { text-align: right; }

.sk-forgot-link {
    font-size: 0.8rem;
    color: var(--sk-primary-to);
    text-decoration: none;
}
.sk-forgot-link:hover {
    text-decoration: underline;
}