/* Sistema de diseño SMARTFENSE — variante LIGHT.
 *
 * Tokens tomados del manual de marca v1.0 (2026-07): "Color y tipografía".
 * Se eligió la variante light porque el manual se la asigna a web y lectura
 * larga; dark queda para presentaciones y bright para heros de landing.
 *
 * Reglas del manual que se respetan acá y conviene NO romper al extender:
 *  - Amarillo es el CTA sobre fondo dark/bright; azul es el CTA sobre claro.
 *  - Cyan es acento de ambiente (líneas, links en dark). NUNCA un CTA.
 *  - Inter solo en títulos grandes; el cuerpo entero va en Open Sans.
 *  - Los gradientes son fondo de hero/página completa, nunca detrás de
 *    bloques chicos de texto.
 *  - La paleta legacy (oro #D9C19B / beige #F2E1B6) no se usa en piezas nuevas.
 */

:root {
  /* --- Paleta oficial --- */
  --brand-blue: #0052f7;
  --yellow: #fbbf24;
  --violet: #7c3aed;
  --violet-bg: #f5f3ff;
  --navy: #030342;
  --cyan: #00c7f5;
  --white: #ffffff;
  --light-gray: #f6f6f6;

  /* Texto secundario oficial: navy al 70 % sobre claro, blanco al 70 % sobre dark. */
  --navy-70: rgba(3, 3, 66, 0.7);
  --white-70: rgba(255, 255, 255, 0.7);

  /* --- Roles semánticos (usar estos en los componentes, no los crudos) --- */
  --bg: var(--light-gray);
  --surface: var(--white);
  --text: var(--navy);
  --text-muted: var(--navy-70);
  --accent: var(--brand-blue);
  --border: rgba(3, 3, 66, 0.12);
  --border-strong: rgba(3, 3, 66, 0.24);
  --focus-ring: rgba(0, 82, 247, 0.7);
  --danger: #b3261e;
  --danger-bg: #fdeceb;

  /* Estados. No están en el manual de marca (que no contempla esta app), así que
     se derivan de la paleta: el azul y el violeta son de marca, y el verde y el
     ámbar se eligieron para dar >= 4.5:1 sobre su fondo, igual que el danger. */
  --ok: #12674a;
  --ok-bg: #e8f6f0;
  --warn: #8a5300;
  --warn-bg: #fdf2e2;

  /* --- Tipografía --- */
  --font-display: "Inter", system-ui, sans-serif;   /* solo títulos grandes */
  --font-body: "Open Sans", system-ui, sans-serif;  /* todo lo demás */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* --- Escala y forma --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(3, 3, 66, 0.06), 0 4px 16px rgba(3, 3, 66, 0.06);
  --maxw: 1120px;
}

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

/* El navegador aplica `hidden` con `[hidden] { display: none }` desde la hoja del
   user agent, y cualquier regla de autor le gana. Sin este `!important`, todo lo
   que declare `display` (`.campo` es flex, `.campos` es grid) ignora el atributo
   y se dibuja igual, lo esconda el server o el JS. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* Gradient Light oficial, como fondo de página completa. */
  background: linear-gradient(180deg, var(--white) 0%, var(--light-gray) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
}

h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 var(--sp-3);
}

p { margin: 0 0 var(--sp-4); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.lead { color: var(--text-muted); max-width: 60ch; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }

/* ---------- Layout ---------- */

.contenedor {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.contenido { padding: var(--sp-6) 0 var(--sp-7); }

/* ---------- Barra superior (variante dark: logo blanco, CTA amarillo) ---------- */

.topbar {
  background: var(--navy);
  color: var(--white);
  padding: var(--sp-4) 0;
}

.topbar .contenedor {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.topbar__marca {
  display: inline-flex;
  text-decoration: none;
}

/* Mismo criterio que en la pantalla de ingreso: el logo de origen es azul y la
   barra es navy, así que se invierte a blanco (variante del manual para fondo
   dark). Ver el comentario de `.ingreso__logo`. */
.topbar__logo {
  display: block;
  width: 7.5rem;
  height: auto;
  filter: brightness(0) invert(1);
}

.topbar__nav {
  display: flex;
  gap: var(--sp-4);
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
}

/* Links sobre dark: cyan, que es su rol de ambiente en el manual. */
.topbar__nav a {
  color: var(--white-70);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: var(--sp-1) 0;
  border-bottom: 2px solid transparent;
}

.topbar__nav a:hover { color: var(--white); border-bottom-color: var(--cyan); }
.topbar__nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--cyan); }
.topbar__usuario { color: var(--white-70); font-size: 0.875rem; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* CTA sobre fondo claro: azul de marca. */
.btn--primario { background: var(--brand-blue); color: var(--white); }
.btn--primario:hover { background: #0043cc; }

/* CTA sobre fondo dark/bright: amarillo con texto navy (regla del manual). */
.btn--dark { background: var(--yellow); color: var(--navy); }
.btn--dark:hover { background: #eaad10; }

.btn--secundario {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--secundario:hover { border-color: var(--navy); }

.btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.acciones {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Tarjetas ---------- */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
}

.tarjeta + .tarjeta { margin-top: var(--sp-5); }

/* ---------- Formulario ---------- */

.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.campo { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.campo .requerido { color: var(--brand-blue); margin-left: 2px; }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="url"],
.campo input[type="date"],
.campo select,
.campo textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  width: 100%;
}

.campo textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--brand-blue);
}

.campo .ayuda { font-size: 0.8125rem; color: var(--text-muted); }

/* Campos congelados por el estado (ver `forms.bloqueo_de`). Que se vean claramente
   inertes: si parecen editables, la persona escribe y después descubre que no se
   guardó nada. */
.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled {
  background: var(--light-gray);
  color: var(--text-muted);
  border-style: dashed;
  cursor: not-allowed;
}

.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--danger); }

.campo .error { font-size: 0.8125rem; color: var(--danger); font-weight: 600; }

.aviso {
  border-left: 4px solid var(--brand-blue);
  background: var(--light-gray);
  padding: var(--sp-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--sp-5);
}

.aviso--error { border-left-color: var(--danger); background: var(--danger-bg); }
.aviso--violeta { border-left-color: var(--violet); background: var(--violet-bg); }

/* ---------- Resumen de errores ---------- */

.lista-errores {
  margin: 0;
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.lista-errores a {
  color: var(--danger);
  font-weight: 600;
}

/* ---------- Secciones del formulario ---------- */

.seccion__titulo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

/* ---------- Buscador de organizaciones ---------- */

.buscador-org { position: relative; }
.buscador-org .campo { position: relative; }

.campo--casilla { margin-top: var(--sp-4); }

.campo--casilla label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  cursor: pointer;
}

.campo--casilla input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--brand-blue);
  flex: none;
}

/* ---------- Ficha de un requerimiento ---------- */

.ficha__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* Dos columnas en pantalla ancha, una sola en angosta. El `dd` empieza en la
   segunda columna, así las etiquetas quedan alineadas entre sí. */
.ficha {
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
}

.ficha dt {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.ficha dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .ficha { grid-template-columns: 1fr; gap: var(--sp-1) 0; }
  .ficha dd { margin-bottom: var(--sp-3); }
}

.compartir { align-items: center; }

/* Se ve, no se esconde: sin JS es la única forma de copiar el enlace. */
.compartir__url {
  flex: 1;
  min-width: 12rem;
  max-width: 34rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: var(--white);
}

.compartir__aviso {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-blue);
}

.compartir__aviso--error { color: var(--danger); }

/* ---------- Adjuntos ---------- */

.adjuntos__titulo {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.adjuntos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.adjuntos__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* El nombre empuja al resto a la derecha, y se corta si es larguísimo en vez de
   desbordar la tarjeta. */
.adjuntos__item > a {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.adjuntos__borrar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
}

.adjuntos__borrar input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--danger);
  flex: none;
}

.buscador-org__resultados {
  list-style: none;
  margin: var(--sp-1) 0 0;
  padding: var(--sp-1);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 19rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.buscador-org__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.buscador-org__item:hover,
.buscador-org__item:focus-visible {
  background: var(--light-gray);
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.buscador-org__nombre { font-weight: 600; }

.buscador-org__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

.buscador-org__estado {
  margin: var(--sp-1) 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-blue);
}

/* ---------- Listado ---------- */

.tabla-wrap { overflow-x: auto; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabla th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.tabla td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.tabla tbody tr:hover { background: var(--light-gray); }
.tabla .col-id { font-family: var(--font-mono); white-space: nowrap; font-size: 0.875rem; }

.etiqueta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px var(--sp-2);
  border-radius: 999px;
  background: var(--light-gray);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.etiqueta--propio { background: var(--violet-bg); border-color: var(--violet); color: var(--violet); }

/* Tonos de estado. El color ACOMPAÑA al texto, nunca lo reemplaza: el nombre del
   estado se lee igual, así que quien no distingue estos colores no pierde nada.
   El mapeo vive en `templatetags/estados.py`; un valor desconocido queda neutro. */
.etiqueta--pendiente { background: var(--light-gray); border-color: var(--border-strong); color: var(--text-muted); }
.etiqueta--analisis  { background: #eaf1ff; border-color: var(--brand-blue); color: var(--brand-blue); }
.etiqueta--avanza    { background: var(--violet-bg); border-color: var(--violet); color: var(--violet); }
.etiqueta--listo     { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.etiqueta--cerrado   { background: var(--light-gray); border-color: var(--border); color: var(--text-muted); }
.etiqueta--rechazado { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.etiqueta--alta  { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.etiqueta--media { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.etiqueta--baja  { background: var(--light-gray); border-color: var(--border); color: var(--text-muted); }

/* «Archivado» y «Sin analizar» comparten el gris. Se distinguen porque el
   archivado va tachado: si no, son dos chips idénticos con textos distintos. */
.etiqueta--cerrado { text-decoration: line-through; }

.celda-estado {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: flex-start;
}

.celda-estado__etapa { font-size: 0.8125rem; color: var(--text-muted); }

.vacio {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  color: var(--text-muted);
}

/* ---------- Ingreso (pantallas de login) ---------- */

/* Tarjeta centrada sobre el gradiente de página: la banda navy pone la marca
   arriba y el cuerpo blanco deja el CTA solo, sin nada que compita. El cyan es
   el filo entre las dos, su rol de acento de ambiente del manual (nunca CTA). */

.ingreso {
  min-height: 100dvh;
  /* Flex y no grid: la tarjeta tiene un ancho máximo fijo y, como ítem
     flexible, encoge sola cuando la ventana es más angosta que ese máximo. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.ingreso__caja { width: 100%; max-width: 27rem; }

.ingreso__tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;                 /* la banda respeta el radio de la tarjeta */
}

.ingreso__banda {
  /* Gradient Dark del manual, en su rol de fondo de bloque de marca. */
  background: linear-gradient(135deg, var(--navy) 0%, #10106b 100%);
  border-bottom: 3px solid var(--cyan);
  padding: var(--sp-5);
}

/* El logo de marca viene en azul sobre transparente y la banda es navy: azul
   sobre azul no se lee. `brightness(0) invert(1)` lo lleva a blanco puro
   respetando el canal alfa, que es la variante que el manual usa sobre fondo
   dark (la misma idea que el logo blanco de la barra superior). Si algún día
   hay un archivo blanco de origen, se cambia el src y se saca el filtro. */
.ingreso__logo {
  display: block;
  width: 9.5rem;
  height: auto;
  filter: brightness(0) invert(1);
}

.ingreso__cuerpo { padding: var(--sp-6) var(--sp-5) var(--sp-5); }

.ingreso__titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
}

.ingreso__bajada {
  color: var(--text-muted);
  margin: 0 0 var(--sp-5);
}
.ingreso__bajada:empty { display: none; }

.ingreso__form { margin: 0; }
.ingreso__form .btn { width: 100%; }

.ingreso__nota {
  margin: var(--sp-4) 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
}

/* Separador con texto al medio, para el ingreso alternativo del admin. */
.ingreso__separador {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-4);
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.ingreso__separador::before,
.ingreso__separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ingreso__form--clave { display: flex; flex-direction: column; gap: var(--sp-4); }

.ingreso__pie {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-size: 0.875rem;
}
.ingreso__pie:empty { display: none; }
.ingreso__pie a { color: var(--text-muted); }
.ingreso__pie a:hover { color: var(--accent); }

/* Botón de Google: blanco con borde, como pide su guía de marca (el logo va
   sobre blanco). Por eso no usa los colores de CTA del manual propio. */
.btn--google {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  padding: var(--sp-3) var(--sp-4);
}
.btn--google:hover { background: var(--light-gray); border-color: var(--navy); }
.btn__logo { flex: none; }

/* ---------- Accesibilidad ---------- */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Responsivo ---------- */

@media (max-width: 720px) {
  .campos { grid-template-columns: minmax(0, 1fr); }
  .contenedor { padding: 0 var(--sp-4); }
  .topbar__nav { margin-left: 0; width: 100%; }
  .ingreso { padding: var(--sp-4); padding-top: var(--sp-6); align-items: flex-start; }
  .ingreso__cuerpo { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
}

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