/* ============================================================
   NOVA360 — Login (rediseño visual)
   Prefijo .n360-  |  Solo se carga desde templates/base_auth.html.
   Los tokens se declaran en .n360-auth (clase del body), no en :root,
   para que no puedan filtrarse a otras páginas.
   La franja de logos conserva sus clases .sacc-* originales (markup
   intacto) y se estiliza aquí con selectores anidados bajo .n360-brand-panel.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
.n360-auth {
    /* Color */
    --n360-navy-950:           #061B33;
    --n360-navy-900:           #0A2545;
    --n360-navy-800:           #103A70;
    --n360-orange:             #E8902E;   /* acentos sobre fondo oscuro */
    --n360-orange-ink:         #A85E12;   /* naranja para texto/anillos sobre fondo claro */
    --n360-navy-btn:           #0F3B74;
    --n360-surface:            #FFFFFF;
    --n360-panel:              #F2F5FA;
    --n360-text:               #1F2937;
    --n360-text-muted:         #4B5563;
    --n360-text-on-dark:       #FFFFFF;
    --n360-text-on-dark-muted: #BFD2E8;
    --n360-border:             #7C8899;   /* bordes de campos: ~3.6:1 sobre blanco (WCAG 1.4.11) */
    --n360-divider:            #E5E7EB;   /* solo líneas no esenciales (borde de la card) */
    --n360-danger:             #B91C1C;
    --n360-warning:            #92400E;

    /* Radios */
    --n360-radius-md: 10px;
    --n360-radius-lg: 16px;

    /* Sombras */
    --n360-shadow-card: 0 24px 48px -12px rgba(2, 20, 40, 0.45);
    --n360-glow-focus:  0 0 0 4px rgba(232, 144, 46, 0.20);   /* decorativo, nunca el único indicador */

    /* Espaciado (escala de 4pt) */
    --n360-space-1:  4px;
    --n360-space-3:  12px;
    --n360-space-4:  16px;
    --n360-space-5:  20px;
    --n360-space-6:  24px;
    --n360-space-8:  32px;
    --n360-space-10: 40px;

    /* Tipografía (stack del sistema, sin archivos de fuentes) */
    --n360-font: 'Segoe UI', system-ui, -apple-system, sans-serif;

    --n360-transition: 0.15s ease;

    /* Imagen de fondo: única referencia al archivo. Reemplazar el archivo
       en la misma ruta no requiere tocar markup ni otras reglas. */
    --n360-bg-image: url("../../img/auth/nova360-login-bg.8378f4d8342f.webp");
    --n360-bg-position: 12% center;   /* encuadre y origen del zoom */
    --n360-bg-zoom: 1.2;              /* transform: scale() de la capa de imagen */

    /* Transición del borde derecho del panel hacia el panel claro.
       El RGB 26,107,196 (#1A6BC4) se repite en el primer stop del
       degradado (::after): si cambia el tono, cambiar ambos o la rampa pasa
       por gris. El resplandor del degradado móvil usa el mismo tono. */
    --n360-edge-fade-start: 80%;
    --n360-edge-fade-color: rgba(26, 107, 196, 0.4);   /* #1A6BC4 a 0.40 */

    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    background-color: var(--n360-panel);
    font-family: var(--n360-font);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--n360-text);
    -webkit-font-smoothing: antialiased;
}

/* ── Split layout ───────────────────────────────────────────── */
.n360-auth-split {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
}

/* ════════════════════════════════════════════════════════════
   PANEL IZQUIERDO — Marca sobre imagen (solo ≥ 992px)
   ════════════════════════════════════════════════════════════ */
.n360-brand-panel {
    position: relative;
    isolation: isolate;
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 0;
    flex-direction: column;
    padding: var(--n360-space-10) clamp(32px, 4vw, 64px);
    background-color: var(--n360-navy-950);
    color: var(--n360-text-on-dark);
    overflow: hidden;
}

/* Capa de imagen (z-index -2). El zoom es transform: scale() con origen en
   el mismo punto del encuadre: un background-size en % se mide contra el
   ancho del panel y deja bandas vacías en paneles altos. overflow: hidden
   del panel recorta lo que el zoom saca de los bordes. */
.n360-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: var(--n360-bg-position);
    background-repeat: no-repeat;
    transform: scale(var(--n360-bg-zoom));
    transform-origin: var(--n360-bg-position);
    pointer-events: none;
}

/* La imagen solo se declara en desktop: en móvil el <aside> está oculto
   y así el navegador nunca la descarga. */
@media (min-width: 992px) {
    .n360-brand-panel::before {
        background-image: var(--n360-bg-image);
    }
}

/* Overlay (z-index -1) en tres capas (la primera se pinta encima):
   1. Borde derecho: transparente hasta --n360-edge-fade-start y luego
      --n360-edge-fade-color en el borde. Suaviza el paso al panel claro.
   2. Viñeta radial detrás del titular: elipse 58% × 42% centrada en
      26% 50%, 0.62 → 0.38 (45%) → 0.
   3. Global: 0.52 → 0.35 (55%) → 0.50 (100%). */
.n360-brand-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(26, 107, 196, 0) var(--n360-edge-fade-start),
            var(--n360-edge-fade-color) 100%
        ),
        radial-gradient(
            ellipse 58% 42% at 26% 50%,
            rgba(6, 27, 51, 0.62) 0%,
            rgba(6, 27, 51, 0.38) 45%,
            rgba(6, 27, 51, 0) 100%
        ),
        linear-gradient(
            90deg,
            rgba(10, 37, 69, 0.52) 0%,
            rgba(10, 37, 69, 0.35) 55%,
            rgba(10, 37, 69, 0.50) 100%
        );
    pointer-events: none;
}

/* Bloques de contenido limitados al 60% del ancho útil del panel */
.n360-brand-header,
.n360-brand-body,
.n360-brand-panel .sacc-logo-strip {
    max-width: 60%;
    min-width: 0;
}

/* Cabecera: NOVA [360] + firma "by SERDAN" */
.n360-brand-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--n360-space-2);
}

.n360-brand-word {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--n360-text-on-dark);
}

.n360-brand-badge {
    display: inline-block;
    padding: 2px 10px;
    border: 1.5px solid var(--n360-orange);
    border-radius: 999px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--n360-orange);
}

.n360-brand-mark {
    position: relative;
    display: flex;
}

.n360-brand-byline {
    position: absolute;
    top: calc(100% - 4px);   
    left: calc(100% + 2px);  
}

.n360-brand-byline,
.n360-mobile-byline {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--n360-text-on-dark-muted);
}

/* Cuerpo central */
.n360-brand-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--n360-space-8);
}

.n360-brand-title {
    max-width: 22ch;
    margin: 0 0 var(--n360-space-4);
    font-size: clamp(1.75rem, 2.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--n360-text-on-dark);
    overflow-wrap: break-word;
}

.n360-brand-subtitle {
    margin: 0;
    max-width: 28rem;
    font-size: clamp(0.95rem, 1.1vw, 1.125rem);
    line-height: 1.6;
    color: var(--n360-text-on-dark-muted);
}

/* Barras decorativas */
.n360-deco-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--n360-space-8);
}

.n360-deco-bar {
    display: block;
    height: 2px;
    border-radius: 2px;
    background-color: var(--n360-text-on-dark-muted);
    opacity: 0.2;
}

/* Un solo acento naranja, claramente más corto que el resto (mínimo 36%) */
.n360-deco-bar:nth-child(1) { width: 16%; background-color: var(--n360-orange); opacity: 0.8; }
.n360-deco-bar:nth-child(2) { width: 48%; opacity: 0.16; }
.n360-deco-bar:nth-child(3) { width: 72%; opacity: 0.22; }
.n360-deco-bar:nth-child(4) { width: 36%; opacity: 0.14; }
.n360-deco-bar:nth-child(5) { width: 56%; opacity: 0.18; }

/* Franja de logos (markup original con clases .sacc-*) */
.n360-brand-panel .sacc-logo-strip {
    margin-top: var(--n360-space-8);
    padding-top: var(--n360-space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.n360-brand-panel .sacc-logo-label {
    margin: 0 0 25px;   
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--n360-text-on-dark-muted);
}

.n360-brand-panel .sacc-logos-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--n360-space-4) var(--n360-space-8);
}

/* display:block sin !important: el onerror inline (display:none) sigue ganando */
.n360-brand-panel .sacc-brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 55px;
    max-width: 165px;
    object-fit: contain;
    opacity: 0.75;
}

.n360-brand-panel .sacc-brand-logo--mision {
    max-height: 65px;
    max-width: 195px;
}

/* ════════════════════════════════════════════════════════════
   PANEL DERECHO — Formulario
   ════════════════════════════════════════════════════════════ */
.n360-login-panel {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px clamp(16px, 3vw, 40px);   /* vertical ajustado a mano */
    background-color: var(--n360-panel);
}

/* Card blanca opaca */
.n360-login-card {
    width: 100%;
    max-width: 420px;
    min-width: 0;
    padding: clamp(24px, 4vw, 40px) clamp(20px, 3.5vw, 36px);
    background-color: var(--n360-surface);
    border: 1px solid var(--n360-divider);
    border-radius: var(--n360-radius-lg);
    box-shadow: var(--n360-shadow-card);
}

.n360-login-heading {
    margin: 0 0 var(--n360-space-1);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--n360-text);
}

.n360-login-subheading {
    margin: 0 0 var(--n360-space-6);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--n360-text-muted);
}

/* Labels */
.n360-login-card .form-label {
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--n360-text);
}

/* ── Campo (icono + input [+ toggle]) como una sola caja ────── */
.n360-login-card .input-group {
    flex-wrap: nowrap;
    min-width: 0;
    background-color: var(--n360-surface);
    border: 1px solid var(--n360-border);
    border-radius: var(--n360-radius-md);
    transition: border-color var(--n360-transition), box-shadow var(--n360-transition);
}

/* Icono inicial dentro del campo */
.n360-login-card .input-group > .input-group-text {
    padding: 0 var(--n360-space-1) 0 14px;
    font-size: 1rem;
    color: var(--n360-text-muted);
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

/* Input: 16px evita el zoom automático de iOS Safari al enfocar */
.n360-login-card .input-group > .form-control {
    min-width: 0;
    padding: 11px var(--n360-space-3);
    font-size: 1rem;
    color: var(--n360-text);
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Reserva el espacio del icono de error que Bootstrap pinta con .is-invalid */
.n360-login-card .input-group > .form-control.is-invalid {
    padding-right: calc(1.5em + 0.75rem);
}

.n360-login-card .input-group > .form-control::placeholder {
    color: var(--n360-text-muted);
    opacity: 1;   /* Firefox reduce la opacidad del placeholder por defecto */
}

.n360-login-card .input-group > .form-control:focus {
    background-color: transparent;
    box-shadow: none;
}

/* Autofill: mantiene el fondo blanco dentro de la caja redondeada */
.n360-login-card .input-group > .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--n360-surface) inset;
    -webkit-text-fill-color: var(--n360-text);
}

/* Botón mostrar/ocultar contraseña (vía variables de Bootstrap para
   que hover/active/focus no hereden el gris de .btn-outline-secondary) */
.n360-login-card .input-group > .btn {
    --bs-btn-color:               var(--n360-text-muted);
    --bs-btn-bg:                  transparent;
    --bs-btn-border-width:        0;
    --bs-btn-border-color:        transparent;
    --bs-btn-hover-color:         var(--n360-text);
    --bs-btn-hover-bg:            var(--n360-panel);
    --bs-btn-hover-border-color:  transparent;
    --bs-btn-active-color:        var(--n360-text);
    --bs-btn-active-bg:           var(--n360-panel);
    --bs-btn-active-border-color: transparent;
    padding: 0 14px;
    border-radius: 0 calc(var(--n360-radius-md) - 1px) calc(var(--n360-radius-md) - 1px) 0;
    transition: background-color var(--n360-transition), color var(--n360-transition);
}

.n360-login-card .input-group > .btn:focus-visible {
    z-index: 5;
    outline: 2px solid var(--n360-orange-ink);
    outline-offset: 0;
    box-shadow: var(--n360-glow-focus);
}

/* ── Anillo de foco del campo completo ──────────────────────────
   Navegadores con :has(): el grupo dibuja borde + anillo; el input
   no dibuja su propio outline (evita el doble anillo).
   Navegadores sin :has(): el input dibuja el anillo de tinta. */
@supports selector(:has(*)) {
    .n360-login-card .input-group:has(> .form-control.is-invalid) {
        border-color: var(--n360-danger);
    }

    .n360-login-card .input-group:has(> .form-control:focus) {
        border-color: var(--n360-orange);
        outline: 2px solid var(--n360-orange-ink);
        outline-offset: 0;
        box-shadow: var(--n360-glow-focus);
    }

    .n360-login-card .input-group > .form-control:focus {
        outline: none;   /* reemplazado por el anillo del grupo */
    }
}

@supports not (selector(:has(*))) {
    .n360-login-card .input-group:focus-within {
        border-color: var(--n360-orange);
    }

    .n360-login-card .input-group > .form-control:focus {
        outline: 2px solid var(--n360-orange-ink);
        outline-offset: 0;
    }
}

/* ── Botón principal ───────────────────────────────────────────
   Se usan las variables de Bootstrap: así :hover, :active y
   :focus-visible conservan el navy y no quedan transparentes. */
.n360-btn-submit {
    --bs-btn-color:               var(--n360-text-on-dark);
    --bs-btn-bg:                  var(--n360-navy-btn);
    --bs-btn-border-color:        var(--n360-navy-btn);
    --bs-btn-hover-color:         var(--n360-text-on-dark);
    --bs-btn-hover-bg:            var(--n360-navy-800);
    --bs-btn-hover-border-color:  var(--n360-navy-800);
    --bs-btn-active-color:        var(--n360-text-on-dark);
    --bs-btn-active-bg:           var(--n360-navy-950);
    --bs-btn-active-border-color: var(--n360-navy-950);
    --bs-btn-padding-y:           var(--n360-space-3);
    --bs-btn-padding-x:           var(--n360-space-4);
    --bs-btn-font-size:           0.9375rem;
    --bs-btn-font-weight:         600;
    --bs-btn-border-radius:       var(--n360-radius-md);
    letter-spacing: 0.01em;
}

.n360-login-card .n360-btn-submit:focus-visible {
    border-color: var(--n360-orange);
    outline: 2px solid var(--n360-orange-ink);
    outline-offset: 0;
    box-shadow: var(--n360-glow-focus);
}

/* ── Alertas (error y bloqueo axes) ────────────────────────────── */
.n360-login-card .alert {
    font-size: 0.875rem;
    padding: var(--n360-space-3) 14px;
    border-radius: var(--n360-radius-md);
    border-left-width: 4px;
}

.n360-login-card .alert-danger {
    --bs-alert-color:        var(--n360-danger);
    --bs-alert-bg:           rgba(185, 28, 28, 0.06);
    --bs-alert-border-color: rgba(185, 28, 28, 0.25);
    border-left-color: var(--n360-danger);
}

.n360-login-card .alert-warning {
    --bs-alert-color:        var(--n360-warning);
    --bs-alert-bg:           rgba(146, 64, 14, 0.07);
    --bs-alert-border-color: rgba(146, 64, 14, 0.25);
    border-left-color: var(--n360-warning);
}

/* ── Línea de ayuda ────────────────────────────────────────────── */
.n360-help-link {
    margin: var(--n360-space-5) 0 0;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--n360-text-muted);
}

.n360-help-link a {
    font-weight: 600;
    color: var(--n360-orange-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    border-radius: 2px;
}

.n360-help-link a:hover {
    color: var(--n360-navy-800);
}

.n360-help-link a:focus-visible {
    outline: 2px solid var(--n360-orange-ink);
    outline-offset: 2px;
}

/* ── Footer ────────────────────────────────────────────────────── */
.n360-auth-footer {
    width: 100%;
    max-width: 420px;
    margin: var(--n360-space-6) 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
    color: var(--n360-text-muted);
}

/* ── Encabezado compacto (solo < 992px, ver d-lg-none en el markup) ── */
.n360-mobile-brand {
    width: 100%;
    max-width: 420px;
    margin-bottom: var(--n360-space-6);
    text-align: center;
}

.n360-mobile-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--n360-space-3);
    font-size: 1.5rem;
    color: var(--n360-orange);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1.5px solid var(--n360-orange);
    border-radius: var(--n360-radius-lg);
}

.n360-mobile-title {
    max-width: 280px;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--n360-text-on-dark);
}

.n360-mobile-byline {
    display: block;
    margin-top: var(--n360-space-1);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Sin imagen en móvil/tablet: degradado navy en CSS */
    .n360-auth {
        background-color: var(--n360-navy-950);
    }

    .n360-login-panel {
        justify-content: flex-start;
        padding: var(--n360-space-10) var(--n360-space-4);
        background-color: var(--n360-navy-950);
        background-image:
            radial-gradient(
                circle at 85% 0%,
                rgba(26, 107, 196, 0.45) 0%,
                transparent 55%
            ),
            linear-gradient(
                165deg,
                var(--n360-navy-800) 0%,
                var(--n360-navy-900) 50%,
                var(--n360-navy-950) 100%
            );
    }

    .n360-auth-footer {
        color: var(--n360-text-on-dark-muted);
    }
}

@media (max-width: 360px) {
    .n360-login-panel {
        padding-top: var(--n360-space-8);
    }

    .n360-login-card {
        padding: var(--n360-space-6) var(--n360-space-4);
    }
}

/* ── Movimiento reducido ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .n360-auth *,
    .n360-auth *::before,
    .n360-auth *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Colores forzados (Windows Alto Contraste) ─────────────────────
   box-shadow se elimina en este modo: el outline es el indicador. */
@media (forced-colors: active) {
    .n360-login-card .input-group {
        border-color: CanvasText;
    }

    .n360-login-card .input-group > .btn:focus-visible,
    .n360-login-card .n360-btn-submit:focus-visible,
    .n360-help-link a:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

@supports selector(:has(*)) {
    @media (forced-colors: active) {
        .n360-login-card .input-group:has(> .form-control:focus) {
            outline: 2px solid Highlight;
            outline-offset: 2px;
        }
    }
}

@supports not (selector(:has(*))) {
    @media (forced-colors: active) {
        .n360-login-card .input-group > .form-control:focus {
            outline: 2px solid Highlight;
            outline-offset: 2px;
        }
    }
}