/* ============================================================
   LA PANTALLA DE INGRESO — y sólo ella
   ============================================================
   ARCHIVO APARTE, Y NO UN TROZO DE componentes.css, por dos razones:

   1. Es la única pantalla del sistema que NO es una superficie de trabajo.
      Las demás se tienen abiertas ocho horas y por eso van claras, apretadas
      y sin adorno; ésta se mira cuatro segundos, una vez al día, y es lo
      primero que ve alguien de fuera.
   2. componentes.css lo carga TODA pantalla. Meter aquí dentro el azul de
      esta portada sería repartirlo por el sistema entero para que lo use una
      sola plantilla — y R-029 acaba de dejar ese archivo con capturas antes
      y después que tienen que seguir saliendo idénticas.

   ⚠️ EL AZUL NO ESTÁ EN LOS TOKENS DEL SISTEMA, Y ES DELIBERADO QUE SE VEA.
   Los valores de abajo son de la marca de DC Tech, no de la paleta de Nexum,
   y por eso se declaran UNA vez, con nombre, y acotados a `.ingreso-pagina`:
   ninguna otra pantalla puede alcanzarlos ni por error. El día que se
   aprueben como paleta suben a design-tokens.css y este bloque desaparece.
   Mientras tanto están aquí y a la vista, que es mejor que repartidos por
   veinte reglas.
   ============================================================ */
.ingreso-pagina {
  /* SUBIDOS UN PUNTO RESPECTO DEL PRIMER INTENTO. Aquel azul se iba al negro
     y la pantalla quedaba hundida; éste sigue siendo el azul de la marca,
     pero con luz. La distancia entre los cinco es la misma, así que la
     jerarquía —fondo, tarjeta, hueco de entrada— se lee igual. */
  --marino-hondo: #0D2542;   /* el fondo del panel del formulario */
  --marino:       #17457C;   /* el fondo del panel de la marca */
  --marino-carta: #163864;   /* la tarjeta, un punto por encima del fondo */
  --marino-linea: #315A8C;   /* bordes sobre azul */
  --marino-campo: #12304F;   /* el hueco de una entrada */
  /* EL BOTÓN NO ES EL CELESTE DEL DIBUJO, Y NO ES UN CAPRICHO: con texto
     blanco, aquel celeste daba 2,77:1 y el sistema no baja de 4,5:1. Éste da
     4,60:1 — es el azul más claro que pasa. Ver el comentario de
     accesibilidad en design-tokens.css. */
  --azul-accion:  #1976D2;
  --azul-accion-encima: #2C88E4;
  /* La cinta de la marca: los mismos colores del isotipo. Se usa dos veces
     —el filo de la tarjeta y la raya sobre «Sistema Nexum»— y por eso se
     escribe una sola. */
  --cinta-de-marca: linear-gradient(
    90deg, #4CAF50 0%, #CDDC39 22%, #FFC107 45%, #FF7043 68%, #42A5F5 100%
  );
}

/* ── El reparto: marca a la izquierda, formulario a la derecha ─────────── */
.ingreso-pagina {
  min-height: 100vh;
  min-height: 100dvh;   /* el alto real del móvil, sin la barra del navegador */
  display: flex;
  color: #FFFFFF;
  background: var(--marino-hondo);
}

.ingreso__marca {
  flex: 0 0 40%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-8);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(66, 165, 245, .22), transparent 60%),
    linear-gradient(160deg, var(--marino) 0%, var(--marino-hondo) 100%);
}

/* La hoja de fondo: una cotización insinuada, no un dibujo. Es CSS, así que
   no cuesta ni una petición ni un archivo que alguien tenga que mantener. */
.ingreso__papel {
  position: absolute;
  left: 30%;
  top: 13%;
  width: 82%;
  height: 76%;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .035);
  transform: rotate(-4deg);
  pointer-events: none;
}

.ingreso__papel span {
  position: absolute;
  height: 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .05);
}

/* El color se fuerza porque primitivas.css le da a todo h1/h2/h3 el color de
   texto del sistema, que es casi negro: sobre el azul de esta pantalla no se
   leía. Es la única pantalla sobre oscuro, así que la excepción vive aquí y
   no allí. */
.ingreso__identidad {
  position: relative;
  margin: 0;
  color: #FFFFFF;
}

.ingreso__logotipo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.ingreso__logotipo svg { width: 34px; height: 34px; flex: none; }

.ingreso__pie-de-marca {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  font-size: var(--texto-etiqueta);
  color: var(--text-inverse-soft);
}

.ingreso__sistema { position: relative; }

/* La raya corta sobre el nombre del sistema: la misma cinta del filo de la
   tarjeta, para que las dos mitades de la pantalla se reconozcan. */
.ingreso__sistema::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--cinta-de-marca);
  margin-bottom: var(--space-5);
}

.ingreso__sistema h2 {
  margin: 0;
  color: #FFFFFF;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.5px;
}

/* ── El panel del formulario ────────────────────────────────────────────── */
.ingreso__panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  overflow-y: auto;   /* un portátil bajo no recorta la tarjeta */
}

.ingreso__tarjeta {
  position: relative;
  width: 100%;
  max-width: var(--ancho-tarjeta-angosta);
  padding: var(--space-8);
  border: 1px solid var(--marino-linea);
  border-radius: var(--radius-lg);
  background: var(--marino-carta);
  box-shadow: var(--shadow-lg);
}

.ingreso__tarjeta::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--cinta-de-marca);
}

.ingreso__titulo {
  margin: 0 0 var(--space-1);
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 700;
}

.ingreso__entradilla {
  margin: 0 0 var(--space-6);
  font-size: var(--texto-chico);
  color: var(--text-inverse-soft);
}

/* ── Los campos, con su icono dentro ───────────────────────────────────── */
.ingreso__campo { margin-bottom: var(--space-4); }

.ingreso__campo label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--texto-etiqueta);
  font-weight: 600;
  color: #FFFFFF;
}

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

.ingreso__hueco > svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-inverse-soft);
  pointer-events: none;   /* el icono no roba el clic que va a la entrada */
}

/* Se escribe por etiqueta y no por clase: los controles los pinta Django, y
   ponerles una clase obligaría a tocar el formulario que él ya trae hecho —
   que es justo lo que esta pantalla NO hace, para que una cuenta desactivada
   siga recibiendo su propio mensaje. */
.ingreso-pagina input[type="text"],
.ingreso-pagina input[type="password"] {
  width: 100%;
  min-height: 42px;
  padding: 0 40px 0 36px;
  font-family: var(--font-sans);
  font-size: var(--texto-cuerpo);
  color: #FFFFFF;
  background: var(--marino-campo);
  border: 1px solid var(--marino-linea);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--easing),
              box-shadow var(--motion-fast) var(--easing);
}

.ingreso-pagina input[type="text"]:focus,
.ingreso-pagina input[type="password"]:focus {
  outline: none;
  border-color: var(--azul-accion);
  box-shadow: 0 0 0 3px rgba(74, 160, 240, .25);
}

/* El ojo de ver la contraseña. Es un botón de verdad y no un icono suelto:
   se alcanza con el tabulador y se anuncia como control. */
.ingreso__ojo {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-inverse-soft);
  cursor: pointer;
}

.ingreso__ojo:hover { color: #FFFFFF; }
.ingreso__ojo svg { width: 17px; height: 17px; }

/* Los dos iconos viven en el mismo botón y se turnan con el atributo
   `hidden`. Se escribe la regla en vez de confiar en la del navegador: el
   `display: grid` del botón la gana, y sin esto se pintaban LOS DOS
   encimados — un ojo tachado sobre un ojo abierto. */
.ingreso__ojo svg[hidden] { display: none; }
.ingreso__ojo:focus-visible { outline: 2px solid var(--azul-accion); outline-offset: 1px; }

/* ── La fila de «Recordarme» ────────────────────────────────────────────── */
.ingreso__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
  font-size: var(--texto-chico);
}

.ingreso__recordarme {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #FFFFFF;
  cursor: pointer;
}

.ingreso__recordarme input {
  width: 16px;
  height: 16px;
  accent-color: var(--azul-accion);
  cursor: pointer;
}

.ingreso__ayuda-enlace {
  color: var(--text-inverse-soft);
  text-decoration: none;
}

.ingreso__ayuda-enlace:hover { color: #FFFFFF; text-decoration: underline; }

/* ── El botón de entrar ─────────────────────────────────────────────────── */
.ingreso__entrar {
  display: block;
  width: 100%;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: var(--texto-cuerpo);
  font-weight: 700;
  color: #FFFFFF;
  background: var(--azul-accion);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing);
}

.ingreso__entrar:hover { background: var(--azul-accion-encima); }
.ingreso__entrar:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* ── El pie de la tarjeta ───────────────────────────────────────────────── */
.ingreso__cierre {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--marino-linea);
  text-align: center;
  font-size: var(--texto-etiqueta);
  color: var(--text-inverse-soft);
}

.ingreso__cierre strong { color: #FFFFFF; font-weight: 700; }

/* ── Los errores, sobre azul ────────────────────────────────────────────── */
.ingreso__error {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--danger-bd);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger-fg);
  font-size: var(--texto-chico);
  font-weight: 600;
}

.ingreso__campo .ingreso__error { margin: var(--space-2) 0 0; }

/* ── De dos columnas a una ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ingreso-pagina { flex-direction: column; }

  .ingreso__marca {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }

  /* La hoja de fondo y la raya se van: en una banda de 80px de alto no caben,
     y forzarlas sería enseñar dos cosas recortadas en vez de una entera. La
     marca, que es lo que identifica la pantalla, se queda. */
  .ingreso__papel,
  .ingreso__sistema::before { display: none; }

  .ingreso__logotipo { font-size: 22px; }
  .ingreso__logotipo svg { width: 26px; height: 26px; }
  .ingreso__sistema h2 { font-size: var(--texto-cuerpo); }
  .ingreso__pie-de-marca { display: none; }
  .ingreso__panel { align-items: flex-start; padding: var(--space-6) var(--space-4); }
  .ingreso__tarjeta { padding: var(--space-6); }
}