/* ============================================================================
   PALETA Y PIEL DE AUTENTICACION (login, registro, recuperar pass).
   Fuente UNICA de color para las paginas de auth. Se carga en el <head> de
   layoutBase.jsp DESPUES de bootstrap/plugins/p4sBlack4 para que sus reglas
   ganen en cascada a los azules por defecto de Bootstrap (#007bff).
   No usar hex sueltos fuera de este archivo ni <style> inline en las vistas.
   ========================================================================== */

/* ----- Paleta: ya NO vive aqui ----------------------------------------------
   Los colores se movieron a css/p4s-tokens.css, fuente unica de toda la
   plataforma (app Java + WordPress). Este archivo conserva los nombres
   --auth-* porque sus 542 lineas estan escritas contra ellos; ahora son
   alias declarados en p4s-tokens.css y apuntan a los tokens --p4s-*.

   layoutBase.jsp carga p4s-tokens.css ANTES que este archivo, e incluye
   component/tema.jsp al inicio del <body>: ese fragmento es el punto UNICO
   donde se decide claro/oscuro en toda la plataforma, y lo unico que hace es
   poner (o no) la clase `dark` en el <body>. Estas paginas son anonimas y no
   tienen conmutador manual, asi que sigue al sistema operativo.

   Para cambiar un color: editar css/p4s-tokens.css, nunca aqui. */

/* ----- Marco de pagina (antes inline en layoutBase.jsp) ----- */
body {
    background-color: var(--auth-bg);
    min-height: 100vh;
}

.auth-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-logo {
    text-align: center;
}

.main-logo img {
    width: 160px;
    height: auto;
}

.auth-cover-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Logo + tarjeta se mueven y centran como un solo bloque (antes el logo
   quedaba fijo arriba y la tarjeta se centraba sola en el espacio restante,
   dejando un hueco enorme entre ambos en pantallas altas). */
.auth-cover-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

/* Tarjeta unica: superficie solida un paso por encima del fondo */
.auth-cover {
    background: var(--auth-card);
    border-radius: 12px;
    border: 1px solid var(--auth-card-border);
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.55);
}

/* Resplandor en el mismo teal del primario, centrado detras de la tarjeta
   (antes pegado arriba del todo) para dar profundidad al fondo plano */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 65% 50% at 50% 40%, var(--auth-primary-glow), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.footer-wrapper {
    background: transparent;
    border-top: 1px solid var(--auth-divider);
    padding: 1.5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-wrapper p {
    color: var(--auth-muted);
    margin: 0;
}

.footer-wrapper .footer-section {
    display: inline-block;
    margin: 0 10px;
}

/* Cualquier enlace dentro de la tarjeta hereda el primario de la paleta
   (mata el #007bff por defecto de Bootstrap en <a> sin clase) */
.auth-cover a {
    color: var(--auth-primary);
}

.auth-cover a:hover {
    color: var(--auth-primary-light);
}

/* ----- Formulario ----- */
.auth-form-container {
    width: 100%;
    margin: 0 auto;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Dentro de .auth-form el ritmo vertical lo da el gap del flex;
   se anula el margin-bottom de .form-group de Bootstrap para no duplicarlo */
.auth-form .form-group {
    margin-bottom: 0;
}

.form-title {
    color: var(--auth-text);
    text-align: left;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

.form-subtitle {
    color: var(--auth-muted);
    font-size: 0.9rem;
    margin: 0 0 1.75rem;
}

.form-label {
    color: var(--auth-text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
    display: block;
}

/* Marca de campo obligatorio (asteriscos del registro).
   Antes esto enganchaba por `span[style*="color"]`, un parche para alcanzar los
   hex inline de la vista. Al pasar los asteriscos a .required-mark el parche
   dejo de tener sentido y el color vuelve a salir del token. */
.form-label .required-mark {
    color: var(--auth-danger);
    margin-left: 0.15rem;
}

/* En el grid de 2 columnas algunas preguntas envuelven a 2 lineas (p.ej.
   "cargo") y otras no, y los inputs de una misma fila deben quedar igualados.

   Antes esto se resolvia dando `display:flex` a la etiqueta con una altura
   minima de dos lineas. Efecto colateral: al volverse contenedor flex, el
   texto y el <span> del asterisco pasan a ser DOS items distintos, asi que
   en las etiquetas de dos lineas el asterisco salia disparado al borde
   derecho, separado de la pregunta a la que pertenece.

   La etiqueta vuelve a ser texto normal (el asterisco queda pegado a su
   palabra) y la altura se reserva con min-height, no con flex: si TODAS las
   etiquetas ocupan dos lineas de alto, todos los inputs de la fila arrancan
   a la misma altura, envuelva el texto o no.

   Se descarto pegar el input abajo con `margin-top:auto`: los grupos que
   llevan una ayuda debajo (contrasena) reparten el sobrante distinto que los
   que no la llevan, y los dos campos de una misma fila quedaban a distinta
   altura. La altura fija en la etiqueta no depende de lo que venga despues. */
.auth-form--grid .form-label {
    min-height: 2.6em;
    line-height: 1.3;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    right: 14px;
    color: var(--auth-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* ----- Accion dentro del campo (mostrar/ocultar contrasena) -----------------
   Ocupa el mismo sitio que .input-icon, pero es un <button> de verdad: llega
   por teclado, tiene area tactil real (36px) y anuncia su estado con
   aria-pressed. El candado decorativo que habia antes no hacia ninguna de
   las tres cosas. */
.input-action {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--auth-muted);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.input-action:hover {
    color: var(--auth-text);
    background: var(--auth-primary-glow);
}

.input-action:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 1px;
    color: var(--auth-text);
}

/* Un solo boton, dos iconos: se muestra el que corresponde al estado. */
.input-action .icon-ojo-off { display: none; }
.input-action[aria-pressed="true"] .icon-ojo { display: none; }
.input-action[aria-pressed="true"] .icon-ojo-off { display: block; }

/* El campo deja hueco para el boton (48px) igual que lo dejaba para el icono.
   El input va ANTES del boton en el DOM, asi que hace falta :has() -- un `~`
   no mira hacia atras. Donde :has() no exista, el 2.75rem de .custom-input
   sigue siendo suficiente para no pisar el icono. */
.input-group:has(.input-action) .custom-input {
    padding-right: 3rem;
}

/* ----- Ayuda bajo un campo -------------------------------------------------
   Requisitos de contrasena y confirmaciones neutras. Mismo sitio y ritmo que
   .field-error, pero en gris: es informacion, no un reproche. */
.form-hint {
    display: block;
    margin: 0.35rem 0 0;
    color: var(--auth-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.form-hint:empty { display: none; }

/* ----- Campos: una sola piel para input, select y date ----- */
.form-control,
.custom-input {
    background-color: var(--auth-field);
    border: 1px solid var(--auth-field-border);
    color: var(--auth-text);
    height: 45px;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    width: 100%;
    /* Sombra interna sutil: crea el "hueco" del campo en vez de una superficie
       plana casi identica a la tarjeta que lo contiene */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-input {
    padding-right: 2.75rem;
}

.form-control::placeholder,
.custom-input::placeholder {
    color: var(--auth-muted);
    opacity: 1;
}

.form-control:focus,
.custom-input:focus {
    background-color: var(--auth-field);
    border-color: var(--auth-primary);
    color: var(--auth-text);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--auth-primary-glow);
    outline: none;
}

.custom-input:focus + .input-icon,
.input-group:focus-within .input-icon {
    color: var(--auth-primary);
}

.custom-input[readonly] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Selects (registro) con la misma piel que los inputs.
   El chevron va incrustado como data-URI y ahi NO se puede leer una variable
   CSS, asi que su hex (#888ea8 = --p4s-slate-400) queda escrito a mano. Es la
   unica excepcion a "no hex fuera de tokens" y se sostiene porque es un
   grafico, no texto: el minimo es 3:1 y lo cumple en los dos temas
   (3.24:1 sobre campo blanco, 4.21:1 sobre campo oscuro). */
select.custom-input,
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888ea8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

select.custom-input option,
select.form-control option {
    background-color: var(--auth-field);
    color: var(--auth-text);
}

/* El icono nativo del calendario sigue el tema del sistema,
   igual que la paleta (prefers-color-scheme) */
input[type="date"].custom-input {
    color-scheme: light dark;
}

/* ----- El boton: ya NO vive aqui ----------------------------------------
   `.btn-login` y su `.btn-primary` estaban definidos aqui con su relleno,
   hover, focus, active y disabled -- una copia entera del boton de la
   plataforma, escrita contra los alias --auth-*.

   Ahora todo eso esta en css/p4s-boton.css, que cargan los DOS layouts, y
   `.btn-login` se queda solo como MODIFICADOR de disposicion (ancho completo y
   elevacion), que es lo unico propio de auth. El color lo pone `.btn-primary`,
   igual que en el dashboard.

   Tres copias del mismo boton ya habian divergido: la del dashboard usaba el
   acento de TEXTO como relleno y fallaba AA en oscuro. Ref ENA-1.17 (#163). */


/* ----- Enlaces de auth ----- */
.auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    margin-top: 0.5rem;
}

.auth-link {
    color: var(--auth-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.2s ease;
    position: relative;
}

.auth-link:hover {
    color: var(--auth-primary-light);
    text-decoration: none;
}

.auth-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.auth-link:hover::after {
    transform: scaleX(1);
}

/* ----- Alertas (gana a .alert-danger de Bootstrap por orden de carga) ----- */
.auth-cover .alert,
.auth-cover .alert-danger {
    background: var(--auth-danger-tint);
    border: 1px solid var(--auth-danger-edge);
    color: var(--auth-danger);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ----- Toasts (jquery.notice) ------------------------------------------------
   El plugin base (scripts/jquery/jquery-notice/jquery.notice.css) trae colores
   fijos (#333/#2b65ae/#900), Arial y text-shadow, con varias reglas !important.
   layoutBase.jsp ahora carga su CSS ANTES de este archivo (ver comentario ahi)
   para que estas reglas ganen la cascada; se conserva !important en las mismas
   propiedades igual que hace .btn-login, por si el orden vuelve a romperse.
   El borde de 1px (no una barra lateral gruesa tipo "side-tab") es el mismo
   tratamiento que ya usa .auth-cover .alert-danger de mas abajo, en vez de
   inventar un lenguaje visual nuevo para el error. */
.notice-wrap {
    /* Ancho segun contenido (con techo), no fijo -- un mensaje corto como
       "Enviado" no debe reservar el mismo ancho que uno largo. */
    width: fit-content;
    max-width: calc(100vw - 40px);
}

.notice-item {
    background: var(--auth-card) !important;
    border: 1px solid var(--auth-card-border);
    border-radius: 8px;
    /* Texto casi-blanco/casi-negro sobre tarjeta solida (no un fondo tintado
       translucido): ~13:1 de contraste en vez de ~4.2:1, muy por encima del
       minimo AA (4.5:1). El tipo de aviso se distingue por el color del
       borde (1px, parejo en los 4 lados), no por bajar el contraste del texto. */
    color: var(--auth-text) !important;
    max-width: 320px;
    padding: 0.875rem 2rem 0.875rem 1rem;
    font-family: inherit;
    font-size: 0.9rem !important;
    font-weight: 600;
    text-shadow: none;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
}

.notice-item p {
    color: inherit !important;
    width: auto;
    /* El plugin genera un <p> plano; sin resetear su margen, el margin-top
       por defecto del navegador (~1em) se suma al padding del contenedor y
       rompe la simetria vertical arriba/abajo. */
    margin: 0;
}

.notice-item-close {
    font-family: inherit;
    font-weight: 700;
    color: var(--auth-muted);
    right: 10px;
    top: 8px;
}

.notice-item-close:hover {
    color: var(--auth-text);
}

.notice-success {
    border-color: var(--auth-primary);
}

.notice-error {
    border-color: var(--auth-danger);
}

/* ----- Formulario en 2 columnas (registro) -----
   .auth-cover--wide ensancha la tarjeta solo para el formulario de registro
   (marcada desde layoutBase.jsp segun ctrlServ); el resto de vistas de auth
   (login, recuperar pass) siguen con el ancho angosto de .auth-cover. */
.auth-cover--wide {
    max-width: 720px;
}

.auth-form--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
}

.auth-form--grid .form-group--full {
    grid-column: 1 / -1;
}

/* Encabezados de sección (registro): agrupan campos relacionados en la misma
   pantalla de un solo paso, sin convertirla en un wizard multi-step. */
.auth-form--grid .form-section-title {
    grid-column: 1 / -1;
    color: var(--auth-text);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--auth-card-border);
}

.auth-form--grid .form-section-title:not(:first-child) {
    margin-top: 0.5rem;
}

/* ----- Responsividad ----- */
@media (max-width: 991px) {
    .auth-cover {
        padding: 2rem;
    }
}

@media (max-width: 767px) {
    .auth-cover {
        padding: 1.5rem;
        margin: 1rem;
    }

    .main-logo img {
        width: 150px;
    }

    .auth-form {
        gap: 1rem;
    }

    .auth-form--grid {
        grid-template-columns: 1fr;
    }

    .form-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .auth-cover {
        padding: 1rem;
    }
}

/* ----- Estado de error por campo (HU-1.1) -----------------------------------
   Antes, un error solo aparecia como toast en una esquina: el usuario leia
   "Celular Vacio!" y tenia que adivinar cual de los diez campos era. Ahora el
   campo culpable se marca en sitio.

   El enganche es `aria-invalid="true"`, no una clase: asi el estado visual y el
   estado que anuncia el lector de pantalla no pueden desincronizarse — es
   imposible pintar el borde rojo y olvidar el atributo, porque son lo mismo. */

.custom-input[aria-invalid="true"],
.form-control[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--auth-danger);
    /* Halo tenue del mismo rojo: senala sin gritar. */
    box-shadow: 0 0 0 3px var(--auth-danger-ring);
}

.custom-input[aria-invalid="true"]:focus,
.form-control[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
    border-color: var(--auth-danger);
    box-shadow: 0 0 0 3px var(--auth-danger-edge);
}

.field-error {
    display: block;
    margin-top: 0.35rem;
    color: var(--auth-danger);
    font-size: 0.8rem;
    line-height: 1.35;
}

/* El color por si solo no es un canal accesible (daltonismo, alto contraste):
   el triangulo de advertencia acompana al rojo.

   Va como escape CSS (\26A0 = triangulo, \00A0 = espacio duro) y no como el
   caracter literal: este archivo se sirve con "Content-Type: text/css" SIN
   charset, asi que hereda la codificacion del documento -- windows-1252 -- y
   el simbolo escrito tal cual se pintaba como "âš ". El escape lo resuelve el
   motor de CSS, no el decodificador, asi que es inmune a eso.
   Mismo problema y misma familia de solucion que en scripts/myAlrt.js.
   La causa de raiz esta en ENA-0.26. */
.field-error::before {
    content: "\26A0\00A0";
}
