/*
 * portal-acceso.css — Ventanas de acceso de la portada (2026-09-24)
 *
 * El login de cada escuela y "¿Olvidaste tu contraseña?" (index.php), y la
 * página del enlace del correo (<escuela>/restablecer.php). Reemplaza a
 * modal.css en la portada. Los banderines siguen en menuindex2.css.
 *
 * Criterio (lo pidió el dueño): SENCILLO Y LIMPIO. Tarjeta blanca, una línea
 * delgada del color de la escuela arriba, escudo pequeño a la izquierda del
 * título. Sin bandas de color, degradados ni adornos: se probaron y se veía
 * recargado.
 *
 *   .acceso-tarjeta            --acento = color de la escuela
 *     .acceso-cerrar           (solo en la portada)
 *     .acceso-cabecera         escudo + escuela + título, en renglón
 *     .acceso-cuerpo           los formularios
 *
 * --acento son tonos oscuros de los banderines: con texto blanco dan 5:1 o
 * más (los originales daban 2.3–2.5:1). Tema oscuro según el sistema.
 */

:root {
    --superficie:   #ffffff;
    --campo:        #ffffff;
    --borde:        #dfe4ec;
    --borde-fuerte: #c3cbd8;
    --texto:        #111827;
    --texto-suave:  #6b7280;
    --ok-texto:     #166534;
    --ok-fondo:     #f0fdf4;
    --ok-borde:     #bbf7d0;
    --error-texto:  #991b1b;
    --error-fondo:  #fef2f2;
    --error-borde:  #fecaca;
    --velo:         rgba(17, 24, 39, 0.45);
    --acento:       #1d4ed8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --superficie:   #111827;
        --campo:        #0b1220;
        --borde:        #263244;
        --borde-fuerte: #334155;
        --texto:        #e5e7eb;
        --texto-suave:  #9ca3af;
        --ok-texto:     #bbf7d0;
        --ok-fondo:     rgba(22, 101, 52, 0.22);
        --ok-borde:     rgba(34, 197, 94, 0.35);
        --error-texto:  #fecaca;
        --error-fondo:  rgba(153, 27, 27, 0.22);
        --error-borde:  rgba(248, 113, 113, 0.35);
        --velo:         rgba(2, 6, 23, 0.7);
    }
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Colores derivados del acento, por tarjeta */
.acceso-tarjeta {
    --acento-texto: var(--acento);
    --acento-halo:  color-mix(in srgb, var(--acento) 16%, transparent);
}

@media (prefers-color-scheme: dark) {
    .acceso-tarjeta {
        /* El acento oscuro no se lee como texto sobre fondo oscuro */
        --acento-texto: color-mix(in srgb, var(--acento) 45%, #ffffff);
        --acento-halo:  color-mix(in srgb, var(--acento) 30%, transparent);
    }
}

/* ================= La ventana (modal de la portada) ================= */

.modal.acceso {
    display: none;                 /* setupForm() la muestra con .abierto */
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 16px;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
    background: var(--velo);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.modal.acceso.abierto {
    display: flex;
}

/* ================= La tarjeta ================= */

.acceso-tarjeta {
    position: relative;
    width: min(390px, 100%);
    margin: auto;
    background: var(--superficie);
    color: var(--texto);
    border-radius: 16px;
    border-top: 3px solid var(--acento);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 20px 50px rgba(17, 24, 39, 0.18);
    padding: 30px 30px 24px;
    box-sizing: border-box;
    animation: acceso-entra 0.2s ease-out;
}

@keyframes acceso-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .acceso-tarjeta { animation: none; }
}

.acceso-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--texto-suave);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.acceso-cerrar:hover { background: var(--acento-halo); color: var(--texto); }
.acceso-cerrar:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; }

/* ---------- Cabecera: escudo a la izquierda, texto a la derecha ---------- */

.acceso-cabecera {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    margin: 0 0 26px;
    padding-right: 26px;          /* no chocar con la X */
}

.acceso-escudo {
    grid-row: 1 / span 2;
    width: 44px;
    height: 56px;
    object-fit: contain;          /* el escudo es vertical: completo, no recortado */
    background: #ffffff;
    border-radius: 8px;
    padding: 3px;
    box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
    .acceso-escudo { box-shadow: 0 0 0 1px var(--borde); }
}

.acceso-escuela {
    align-self: end;
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acento-texto);
}

.acceso-titulo {
    align-self: start;
    margin: 2px 0 0;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--texto);
}

/* ================= Formularios ================= */

.acceso-cuerpo { margin: 0; }

.acceso-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.acceso-form[hidden] { display: none; }

.acceso-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acceso-etiqueta {
    font-size: 13px;
    font-weight: 500;
    color: var(--texto-suave);
}

/* Contenedor del input: ícono a la izquierda, (ojo a la derecha) */
.acceso-input {
    position: relative;
    display: block;
}

.acceso-icono {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--texto-suave);
    opacity: 0.75;
    pointer-events: none;
    transition: color 0.15s, opacity 0.15s;
}

.acceso-input input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 13px 11px 40px;
    font-size: 16px;               /* 16px: iOS no hace zoom al enfocar */
    color: var(--texto);
    background: var(--campo);
    border: 1px solid var(--borde);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.acceso-input input::placeholder { color: var(--texto-suave); opacity: 0.55; }
.acceso-input input:hover { border-color: var(--borde-fuerte); }

.acceso-input input:focus {
    outline: none;
    border-color: var(--acento-texto);
    box-shadow: 0 0 0 3px var(--acento-halo);
}

.acceso-input:focus-within .acceso-icono { color: var(--acento-texto); opacity: 1; }

.acceso-clave input { padding-right: 46px; }

.acceso-ver {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 0.15s;
}

.acceso-ver:hover { color: var(--texto); }
.acceso-ver:focus-visible { outline: 2px solid var(--acento-texto); }
.acceso-ver svg { width: 18px; height: 18px; }

/* ---------- Botón principal ---------- */

.acceso-boton {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 0;
    padding: 12px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--acento);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12);
    transition: filter 0.15s, box-shadow 0.15s;
}

.acceso-boton:hover { filter: brightness(1.1); box-shadow: 0 4px 12px var(--acento-halo); }
.acceso-boton:active { filter: brightness(0.95); }
.acceso-boton:focus-visible { outline: 3px solid var(--acento-halo); outline-offset: 2px; }
.acceso-boton[disabled] { opacity: 0.7; cursor: wait; }

/* ---------- Enlace secundario ---------- */

.acceso-enlace {
    align-self: center;
    margin: 2px 0 0;
    padding: 4px 6px;
    width: auto;
    border: 0;
    background: none;
    color: var(--texto-suave);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}

.acceso-enlace:hover { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
.acceso-enlace:focus-visible { outline: 2px solid var(--acento-texto); border-radius: 6px; }

/* ---------- Textos de ayuda y mensajes ---------- */

.acceso-ayuda {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--texto-suave);
}

.acceso-ayuda--centro { text-align: center; margin-top: 14px; font-size: 13.5px; }

.acceso-mensaje {
    margin: 0;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 13.5px;
    line-height: 1.55;
}

.acceso-mensaje[hidden] { display: none; }

.acceso-mensaje--ok {
    background: var(--ok-fondo);
    color: var(--ok-texto);
    border-color: var(--ok-borde);
}

.acceso-mensaje--error {
    background: var(--error-fondo);
    color: var(--error-texto);
    border-color: var(--error-borde);
}

.acceso-cuerpo > .acceso-mensaje + .acceso-boton { margin-top: 16px; }

/* Campo trampa contra robots: fuera de la vista, no display:none */
.acceso-trampa {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ================= restablecer.php: la tarjeta sola ================= */

.acceso-pagina {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    background: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
    .acceso-pagina { background: #030712; }
}

/* ================= Pantallas chicas ================= */

@media (max-width: 400px) {
    .acceso-tarjeta { padding: 26px 20px 20px; }
    .acceso-titulo  { font-size: 19px; }
}