/* =========================================================================================
   DP — hoja de estilos de la aplicación
   =========================================================================================
   POR QUÉ ESTE ARCHIVO EXISTE, Y POR QUÉ NO ES UN BUNDLE

   Todo el sistema visual de DP vivía dentro de las vistas, en bloques `<style>`: 17 archivos
   con su propia copia. Eso es lo que permitió que la paleta de la pantalla de acceso se
   rompiera —38 tokens definidos en términos de sí mismos— sin que nadie se enterara, y que
   el acceso se alejara del patrón acordado sin que ningún archivo lo delatara.

   El documento de patrón lo dice en una línea: «Se puede cambiar el valor de un token; no se
   puede escribir un #hex en una vista».

   Se sirve como archivo estático con `asset()`, igual que Font Awesome, y NO por Vite. El
   motivo es el mismo que llevó a traerse los iconos al servidor: esto corre en la red del
   colegio. Un paso de compilación añade node al despliegue y una forma más de que el día de
   producción falle algo que no es el código. `resources/css/app.css` sigue siendo el arranque
   de Laravel sin estrenar, y `public/build` no existe: aquí no se compila nada.

   ORDEN DEL ARCHIVO
     1 · Tokens        — la paleta, única fuente
     2 · Base          — tipografía y reglas que valen en todas partes
     3 · Acceso        — la pantalla de entrada
   ========================================================================================= */

/* ============================================================================ 1 · TOKENS */
/*
   El azul y oro que el centro lleva veinte años usando. Estaban correctos dentro de
   `layouts/app.blade.php` y se trasladaron tal cual: no son valores nuevos ni inventados.
*/
:root {
    --navy: #0c2340;
    --navy-light: #1a3a6e;
    --navy-dark: #061526;
    --navy-mid: #143057;
    --gold: #c9a84c;
    --gold-light: #e3d08a;
    --gold-dark: #a88830;
    --bg: #f0f2f5;
    --surface: #ffffff;
    --text: #1e293b;
    --text-secondary: #64748b;
    --border: #d1d5db;
    --border-light: #e5e7eb;
    --success: #0d9488;
    --warning: #d97706;
    --danger: #dc2626;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
}

/* ============================================================================== 2 · BASE */

.dp-pagina {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.dp-pagina *, .dp-pagina *::before, .dp-pagina *::after { box-sizing: border-box; }

/* ============================================================================ 3 · ACCESO */
/*
   Una columna centrada. No es gusto: el panel de marca a la izquierda con la tarjeta a la
   derecha es el molde que sale por defecto, y otro sistema del mismo equipo ya lo tenía
   idéntico. Lo que esta pantalla tiene que decir es qué sistema es, de quién es y dónde se
   entra — no vender nada, porque quien llega aquí ya trabaja en el centro.

   Sin degradados, sin patrón de puntos, sin lema, sin animación de entrada y sin relieve.
   Una sola nota de color: la línea de arriba.
*/

.acceso {
    /* La única nota de color de la pantalla. Institucional, no decorativa. */
    border-top: 4px solid var(--navy);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem 3rem;
}

/* --- La marca: arriba y SIEMPRE visible, también en el teléfono --------------------- */
.acceso-marca {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.acceso-marca img { width: 2.5rem; height: 2.5rem; display: block; }

.acceso-marca .sistema {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.2;
}

.acceso-marca .institucion {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* --- La tarjeta ------------------------------------------------------------------- */
/* Plana: un borde de 1 px y nada más. Sin sombra de varias capas ni degradado. */
.acceso-caja {
    width: 100%;
    max-width: 23rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

.acceso-caja h1 {
    margin: 0;
    font-size: 1.25rem;     /* 20 px */
    font-weight: 600;
    color: var(--navy);
}

/* Una línea bajo el título, no un párrafo que explique el proceso. */
.acceso-caja .pista {
    margin: 0.25rem 0 1.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* --- Avisos ----------------------------------------------------------------------- */
/*
   Un aviso por evento. El de error muestra el PRIMER error de cualquier campo: cuando solo
   se miraba el del usuario, dejar la contraseña vacía devolvía la pantalla sin decir nada.
*/
.acceso-caja .aviso {
    margin-bottom: 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    border-left: 3px solid;
}

.acceso-caja .aviso.error { background: #fef2f2; border-left-color: var(--danger); color: #991b1b; }
.acceso-caja .aviso.exito { background: #f0fdfa; border-left-color: var(--success); color: #115e59; }

/* --- Campos ----------------------------------------------------------------------- */
/* Etiqueta visible y campo con borde de 1 px. Sin iconos dentro: la etiqueta ya lo nombra. */
.acceso-caja label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.acceso-caja input[type="text"],
.acceso-caja input[type="password"] {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.6rem 0.7rem;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.acceso-caja input::placeholder { color: #94a3b8; }

/* Foco visible: borde de acento y halo de 2 px. Es el único efecto de la pantalla. */
.acceso-caja input:focus-visible {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 2px rgba(12, 35, 64, 0.18);
}

/* --- El botón --------------------------------------------------------------------- */
/* Uno solo, plano, a todo el ancho y con texto. Sin flecha, sin degradado, sin levantarse. */
.acceso-caja button {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.7rem;
    font: inherit;
    font-weight: 600;
    color: var(--navy);
    background: var(--gold);
    border: 1px solid var(--gold-dark);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.acceso-caja button:hover { background: var(--gold-dark); }

.acceso-caja button:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

/* --- Pies ------------------------------------------------------------------------- */
/* Qué hace el sistema, en sus palabras. No es un lema: es para qué sirve. */
.acceso-quehace {
    margin: 0;
    max-width: 23rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/*
   Texto, no un enlace. La contraseña se pide en persona y un `href="#"` promete una pantalla
   que no existe.
*/
.acceso-pie {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .dp-pagina * { animation: none !important; transition: none !important; }
}