/* =============================================================================
   SUN LU · AUGE — PUERTA DE ENTRADA (v1.1)
   -----------------------------------------------------------------------------
   Hoja de la pantalla de inicio de sesión y de la pantalla de seguridad
   (setup-password.html), que comparten el mismo cascarón.

   Sustituye a la versión anterior, que era una copia de la estética de iCloud:
   gris #f5f5f7, azul de selección #007aff y rojo #ff3b30. Era limpia, pero era
   la marca de otra compañía. Aquí manda la paleta corporativa de Sun Lu:
   negro ejecutivo, oro y blanco roto, la misma del resto del ERP.

   SE CONSERVAN TODOS LOS NOMBRES DE CLASE de la hoja anterior
   —login-container, login-card, brand-header, logo-box, input-group,
   btn-primary, error-box, hidden— porque `app.js` busca `.btn-primary` y
   alterna `.hidden`, y `setup-password.html` usa el mismo cascarón. Cambiar el
   aspecto no debía obligar a tocar la lógica de autenticación.

   Cuatro decisiones que conviene dejar escritas:

   · `.hidden` LLEVA !important. La caja de error es un contenedor flex; sin la
     prioridad, `display: flex` le ganaría a `display: none` y el recuadro rojo
     se quedaría visible y vacío desde que carga la página. Es exactamente el
     fallo que tuvo el modal de la Fase 13.

   · EL BOTÓN NO PUEDE LLEVAR HIJOS QUE IMPORTEN. `app.js` hace
     `boton.textContent = 'Autenticando...'`, lo que borra cualquier elemento
     interno. Por eso el barrido dorado y el destello de espera son
     pseudo-elementos CSS: sobreviven a ese borrado.

   · LAS TIPOGRAFÍAS LLEVAN RESPALDO REAL. Playfair Display y Plus Jakarta Sans
     vienen de Google Fonts; si la red corporativa las bloquea, la pantalla debe
     seguir viéndose compuesta y no caer en Times New Roman.

   · SE RESPETA `prefers-reduced-motion`. El brillo del panel y el barrido del
     botón se detienen para quien haya pedido menos movimiento en su sistema.
   ============================================================================= */

:root {
    --sl-negro:      #0a0a0a;
    --sl-negro-2:    #141414;
    --sl-oro:        #C5A47E;
    --sl-oro-claro:  #E0C9A6;
    --sl-blanco:     #ffffff;
    --sl-hueso:      #FBFAF8;   /* blanco roto */
    --sl-borde:      #E8E4DD;
    --sl-texto:      #6B6B6B;
    --sl-rojo:       #C62828;
    --sl-verde:      #2E7D32;

    --sl-serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --sl-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--sl-hueso);
    color: var(--sl-negro);
    font-family: var(--sl-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

/* -----------------------------------------------------------------------------
   PANEL IZQUIERDO — LA MARCA

   Negro ejecutivo con un resplandor dorado muy tenue. El resplandor se dibuja
   con gradientes, no con imágenes: la pantalla de acceso no debe depender de
   que un archivo externo cargue.
   -------------------------------------------------------------------------- */
.sl-marca {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3.5rem 3.2rem;
    background: var(--sl-negro);
    color: var(--sl-blanco);
    overflow: hidden;
}

.sl-marca::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 50% at 18% 12%, rgba(197, 164, 126, 0.22) 0%, transparent 62%),
        radial-gradient(55% 45% at 88% 85%, rgba(197, 164, 126, 0.13) 0%, transparent 60%);
    animation: sl-respirar 14s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Retícula finísima: da profundidad sin añadir un elemento más. */
.sl-marca::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

@keyframes sl-respirar {
    from { opacity: 0.72; transform: scale(1); }
    to   { opacity: 1;    transform: scale(1.06); }
}

.sl-marca > * { position: relative; z-index: 1; }

.sl-marca-alto {
    display: flex; align-items: center; gap: 0.85rem;
}

.sl-sello {
    width: 42px; height: 42px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(197, 164, 126, 0.55);
    border-radius: 3px;
    font-family: var(--sl-serif);
    font-size: 0.92rem; font-weight: 600; letter-spacing: 1px;
    color: var(--sl-oro);
}

.sl-marca-sistema {
    font-size: 0.58rem; font-weight: 700;
    letter-spacing: 3.4px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.48);
}

.sl-marca-centro { max-width: 30rem; }

/* El nombre de la compañía: un <img> con el logotipo y, debajo, el respaldo
   tipográfico para mientras el archivo no exista.

   `object-fit: contain` con altura acotada hace que encaje cualquier
   proporción que suba el CEO —cuadrado, apaisado, con margen propio— sin
   deformarse. El ancho máximo evita que un logotipo muy alargado empuje el
   panel y descuadre la pantalla dividida. */
.sl-marca-nombre {
    font-family: var(--sl-serif);
    font-size: clamp(2.6rem, 5.2vw, 4.4rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    color: var(--sl-blanco);
    margin-bottom: 1.1rem;
}
.sl-marca-nombre .logo-empresa {
    display: block;
    width: auto; max-width: min(340px, 100%);
    max-height: clamp(56px, 9vw, 96px);
    height: auto; object-fit: contain; object-position: left center;
}
.sl-marca-nombre .logo-empresa[hidden] { display: none !important; }
.sl-marca-respaldo[hidden] { display: none !important; }
.sl-marca-respaldo { display: block; }

/* Filete dorado bajo el nombre. */
.sl-marca-filete {
    width: 62px; height: 2px; margin-bottom: 1.3rem;
    background: linear-gradient(90deg, var(--sl-oro), rgba(197, 164, 126, 0));
}

.sl-marca-sub {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 4.4px; text-transform: uppercase;
    color: var(--sl-oro);
    margin-bottom: 1.6rem;
}

.sl-marca-texto {
    font-size: 0.88rem; line-height: 1.85;
    color: rgba(255, 255, 255, 0.62);
    max-width: 27rem;
}

.sl-marca-pie {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    font-size: 0.62rem; letter-spacing: 1.3px; text-transform: uppercase;
    /* v1.8 · al 34 % daba 3,0:1. Sigue siendo el renglón más discreto de la
       pantalla —lo dicen el tamaño y el interletraje—, pero ahora se lee. */
    color: rgba(255, 255, 255, 0.62);
}

.sl-marca-pie strong { color: rgba(255, 255, 255, 0.58); font-weight: 600; }

/* -----------------------------------------------------------------------------
   PANEL DERECHO — EL FORMULARIO
   -------------------------------------------------------------------------- */
.login-container {
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 2rem;
    width: 100%;
}

/* El cristal: fondo translúcido y desenfoque sobre el blanco roto. Donde el
   navegador no soporte backdrop-filter queda un blanco sólido, que también se
   ve bien; por eso el color de respaldo es opaco. */
.login-card {
    width: 100%; max-width: 26rem;
    padding: 3rem 2.6rem;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--sl-borde);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(10, 10, 10, 0.03),
        0 12px 32px rgba(10, 10, 10, 0.06),
        0 32px 64px rgba(10, 10, 10, 0.04);
    animation: sl-entrar 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@supports not (backdrop-filter: blur(1px)) {
    .login-card { background: var(--sl-blanco); }
}

@keyframes sl-entrar {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.brand-header { margin-bottom: 2.2rem; }

/* El cuadro del logotipo, ahora con marco dorado en vez de bloque negro. */
.logo-box {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.5rem;
    background: var(--sl-negro);
    color: var(--sl-oro);
    border-radius: 4px;
    font-family: var(--sl-serif);
    font-size: 1rem; font-weight: 600; letter-spacing: 1px;
}

.brand-header h1 {
    font-family: var(--sl-serif);
    font-size: 1.72rem; font-weight: 600; letter-spacing: 0.2px;
    line-height: 1.2;
    color: var(--sl-negro);
}

.brand-header p {
    margin-top: 0.6rem;
    font-size: 0.82rem; line-height: 1.7;
    color: var(--sl-texto);
}

/* --- Campos --- */
.input-group { margin-bottom: 1.1rem; }

.input-group label {
    display: block; margin-bottom: 0.42rem;
    font-size: 0.57rem; font-weight: 700;
    letter-spacing: 1.7px; text-transform: uppercase;
    color: var(--sl-texto);
}

.input-group input {
    width: 100%;
    padding: 0.92rem 1rem;
    background: var(--sl-blanco);
    border: 1px solid var(--sl-borde);
    border-radius: 8px;
    color: var(--sl-negro);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.input-group input::placeholder { color: #B4AFA6; }

.input-group input:hover { border-color: #D8D2C8; }

.input-group input:focus {
    border-color: var(--sl-oro);
    box-shadow: 0 0 0 3px rgba(197, 164, 126, 0.16);
}

/* El autocompletado de Chrome pinta el campo de amarillo y se lleva por
   delante el diseño. Se neutraliza con una sombra interior del color correcto. */
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--sl-blanco) inset !important;
    -webkit-text-fill-color: var(--sl-negro) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- El botón --- */
.btn-primary {
    position: relative;
    width: 100%;
    margin-top: 1.4rem;
    padding: 1rem;
    background: var(--sl-negro);
    color: var(--sl-blanco);
    border: 1px solid var(--sl-negro);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 2.2px; text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.14s ease, box-shadow 0.22s ease, color 0.22s ease;
}

/* El barrido dorado. Es un pseudo-elemento porque `app.js` reemplaza el
   textContent del botón y borraría cualquier <span> que se pusiera dentro. */
.btn-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(197, 164, 126, 0) 18%,
        rgba(197, 164, 126, 0.95) 50%,
        rgba(197, 164, 126, 0) 82%);
    transform: translateX(-105%);
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 10px 26px rgba(10, 10, 10, 0.20);
    transform: translateY(-1px);
}
.btn-primary:hover:not(:disabled)::before { transform: translateX(105%); }

.btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.988);
    box-shadow: 0 3px 10px rgba(10, 10, 10, 0.16);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--sl-oro);
    outline-offset: 3px;
}

/* Mientras autentica: el botón queda inerte pero vivo. El destello recorre el
   borde superior, de nuevo sin necesitar un elemento interno. */
.btn-primary:disabled {
    cursor: progress;
    opacity: 0.92;
}
.btn-primary:disabled::after {
    content: '';
    position: absolute; left: 0; top: 0; height: 2px; width: 34%;
    background: linear-gradient(90deg, rgba(197, 164, 126, 0), var(--sl-oro-claro), rgba(197, 164, 126, 0));
    animation: sl-recorrer 1.15s linear infinite;
}

@keyframes sl-recorrer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(394%); }
}

/* --- Mensajes --- */
.error-box {
    display: flex; align-items: flex-start; gap: 0.6rem;
    margin-top: 1.3rem;
    padding: 0.85rem 1rem;
    background: rgba(198, 40, 40, 0.06);
    border-left: 3px solid var(--sl-rojo);
    border-radius: 6px;
    color: #8A2020;
    font-size: 0.78rem; line-height: 1.6;
}

/* Tiene que ganarle al `display: flex` de arriba. Sin !important, la caja de
   error se quedaría visible y vacía al cargar la pantalla. */
.hidden { display: none !important; }

.sl-ayuda {
    margin-top: 1.8rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--sl-borde);
    font-size: 0.72rem; line-height: 1.7;
    color: var(--sl-texto);
}
.sl-ayuda strong { color: var(--sl-negro); font-weight: 600; }

/* Selector de idioma de la puerta de entrada. Comparte la lógica de lang.js
   con el resto del sistema, pero aquí va en claro sobre el panel blanco. */
.sl-idiomas {
    display: inline-flex; gap: 2px;
    padding: 3px; margin-bottom: 1.8rem;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid var(--sl-borde);
    border-radius: 8px;
}

.sl-idioma-btn {
    display: inline-flex; align-items: center; gap: 0.34rem;
    padding: 0.34rem 0.6rem;
    border: none; border-radius: 6px; background: transparent;
    font-family: inherit; font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.8px; color: var(--sl-texto);
    cursor: pointer; line-height: 1;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.sl-idioma-btn:hover { background: rgba(10, 10, 10, 0.06); color: var(--sl-negro); }
.sl-idioma-btn:focus-visible { outline: 2px solid var(--sl-oro); outline-offset: 1px; }
.sl-idioma-btn.activo {
    background: var(--sl-negro); color: var(--sl-oro); font-weight: 800;
}
.sl-idioma-bandera { font-size: 0.86rem; line-height: 1; }

.sl-solo-lectores {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   LA PANTALLA DE SEGURIDAD (setup-password.html)

   Comparte cascarón con el login. El sello cambia de color porque ahí el
   mensaje es una advertencia, no una bienvenida.
   -------------------------------------------------------------------------- */
.logo-box.alerta {
    background: var(--sl-rojo);
    color: var(--sl-blanco);
    font-family: var(--sl-sans);
    font-size: 1.3rem; font-weight: 700;
}

/* -----------------------------------------------------------------------------
   PANTALLAS ANGOSTAS

   Por debajo de 900 px el panel de marca deja de ser una columna y pasa a ser
   una cabecera: mantiene la identidad sin robarle sitio al formulario, que es
   lo único que hay que usar en un teléfono.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    body { grid-template-columns: 1fr; }

    .sl-marca {
        padding: 2rem 1.6rem;
        gap: 1.2rem;
    }
    .sl-marca-pie,
    .sl-marca-texto { display: none; }
    .sl-marca-nombre { font-size: clamp(2rem, 9vw, 2.8rem); margin-bottom: 0.8rem; }
    .sl-marca-filete { margin-bottom: 0.9rem; }
    .sl-marca-sub { margin-bottom: 0; font-size: 0.64rem; letter-spacing: 3.4px; }

    .login-container { padding: 2rem 1.2rem 3rem; align-items: flex-start; }
    .login-card {
        max-width: 30rem;
        padding: 2.2rem 1.6rem;
        background: var(--sl-blanco);
        box-shadow: 0 6px 22px rgba(10, 10, 10, 0.05);
    }
}

@media (max-width: 420px) {
    .sl-marca { padding: 1.6rem 1.2rem; }
    .login-container { padding: 1.6rem 1rem 2.4rem; }
    .login-card { padding: 1.8rem 1.3rem; }
    .brand-header h1 { font-size: 1.45rem; }
}

/* -----------------------------------------------------------------------------
   MENOS MOVIMIENTO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sl-marca::before { animation: none; }
    .login-card { animation: none; }
    .btn-primary::before { transition: none; }
    .btn-primary:disabled::after { animation: none; }
    .btn-primary, .input-group input { transition: none; }
}