/* ==========================================================================
   ventanilla.css — Atención al Emprendedor (SDDE)

   Criterios de diseño:
   - El asesor LEE la pantalla en voz alta. Lo que debe decir va en .lectura,
     visualmente inconfundible respecto de los datos de apoyo.
   - Tipografía grande y alto contraste: pantallas de punto de atención,
     iluminación variable, uso prolongado.
   - Sin dependencias externas: una CSP estricta y una conectividad irregular
     hacen que no valga la pena cargar fuentes ni CSS de terceros.
   ========================================================================== */

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

:root {
  --tinta:        #12263f;
  --tinta-suave:  #5a6b80;
  --linea:        #d9e1ea;
  --fondo:        #f4f7fa;
  --superficie:   #ffffff;

  --acento:       #1f4e79;
  --acento-claro: #e8f0f8;

  --ok:           #1c7c54;
  --ok-fondo:     #e6f4ed;
  --alerta:       #a15c00;
  --alerta-fondo: #fdf3e3;
  --error:        #b3261e;
  --error-fondo:  #fdeceb;

  --radio: 10px;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Barra superior ─────────────────────────────────────────────────────── */

.barra {
  background: var(--acento);
  color: #fff;
  padding: 14px 0;
}
.barra-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.marca { text-decoration: none; color: inherit; }
.marca-titulo { display: block; font-size: 1.15rem; font-weight: 700; }
.marca-sub    { display: block; font-size: 0.8rem; opacity: 0.85; }

.sesion { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; }
.sesion-nombre { font-weight: 600; }
.sesion-punto, .sesion-rol {
  background: rgba(255,255,255,0.18);
  padding: 2px 9px; border-radius: 999px; font-size: 0.78rem;
}
.salir {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
.salir:hover { opacity: 0.8; }

/* ── Estructura ─────────────────────────────────────────────────────────── */

.contenido {
  flex: 1;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px;
}

h1 { font-size: 1.35rem; margin-bottom: 16px; }
h2 { font-size: 1.5rem; line-height: 1.25; }

.pie {
  text-align: center;
  font-size: 0.78rem;
  color: var(--tinta-suave);
  padding: 20px;
  border-top: 1px solid var(--linea);
}

.sep { margin: 0 6px; color: var(--linea); }

/* ── Buscador ───────────────────────────────────────────────────────────── */

.fila-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

.campo { display: flex; flex-direction: column; gap: 5px; flex: 1 1 190px; }
.campo > span { font-size: 0.82rem; font-weight: 600; color: var(--tinta-suave); }
.campo-numero { flex: 2 1 240px; }

select, input[type="text"] {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: #fff;
  color: var(--tinta);
  width: 100%;
}
input[type="text"] { font-size: 1.15rem; letter-spacing: 0.02em; }
select:focus, input:focus {
  outline: 3px solid var(--acento-claro);
  border-color: var(--acento);
}

button {
  font: inherit;
  font-weight: 600;
  padding: 12px 26px;
  border: none;
  border-radius: 8px;
  background: var(--acento);
  color: #fff;
  cursor: pointer;
  min-height: 46px;
}
button:hover { background: #17405f; }
button:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 2px; }

/* ── Distintivo de la instancia GOLD ────────────────────────────────────── */

.insignia-gold {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #b8860b;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}
.corte-gold {
  margin: -6px 0 14px;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.aviso {
  margin-top: 16px;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 0.92rem;
  border-left: 4px solid;
}
.aviso-error  { background: var(--error-fondo);  border-color: var(--error);  color: #7d1b15; }
.aviso-espera { background: var(--alerta-fondo); border-color: var(--alerta); color: #6d3e00; }
.aviso-info   { background: var(--acento-claro); border-color: var(--acento); color: #163d5c; }

/* El aviso de tipo de documento va pegado al bloque de identidad, no suelto. */
.ciudadano + .aviso-info { margin-top: 14px; }

/* ── Resultado ──────────────────────────────────────────────────────────── */

.ciudadano { padding-bottom: 18px; border-bottom: 2px solid var(--linea); }
.ciudadano-meta { color: var(--tinta-suave); font-size: 0.9rem; margin-top: 4px; }

.bloque { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--linea); }
.bloque:first-of-type { border-top: none; }
.bloque-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 14px;
}

/* ── DIME ───────────────────────────────────────────────────────────────── */

.dime-cabecera {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
}
.dime-dato {
  flex: 1 1 150px;
  background: var(--acento-claro);
  border-radius: 8px;
  padding: 14px 16px;
}
.dato-valor { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.dato-fecha { font-size: 1.15rem; }
.dato-etiqueta {
  display: block; font-size: 0.75rem; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px;
}

.modulos { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.modulo {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) 3fr 44px;
  align-items: center;
  gap: 12px;
  padding: 5px 8px;
  border-radius: 6px;
}
.modulo-nombre { font-size: 0.92rem; }
.modulo-barra {
  height: 9px; background: var(--linea); border-radius: 999px; overflow: hidden;
}
.modulo-relleno {
  display: block; height: 100%; background: var(--acento); border-radius: 999px;
}
.modulo-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.modulo-debil { background: var(--alerta-fondo); }
.modulo-debil .modulo-nombre { font-weight: 700; }
.modulo-debil .modulo-relleno { background: var(--alerta); }

/* ── La frase que se lee en voz alta ────────────────────────────────────── */

.lectura {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--ok-fondo);
  border-left: 5px solid var(--ok);
  border-radius: 8px;
  font-size: 1.08rem;
  line-height: 1.6;
}
.lectura::before {
  content: "Para decirle al ciudadano";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ok);
  margin-bottom: 6px;
}

/* Notas internas: NO se leen al ciudadano. */
.nota {
  margin-top: 10px;
  font-size: 0.83rem;
  color: var(--tinta-suave);
  font-style: italic;
}

.sin-dato { font-size: 1.05rem; }
.resultado-vacio h2 { margin-bottom: 14px; }

/* ── Listas ─────────────────────────────────────────────────────────────── */

.lista-up, .lista-programas { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lista-up li, .lista-programas li {
  padding: 11px 14px; background: var(--fondo); border-radius: 8px;
}
.up-nombre, .prog-nombre { display: block; font-weight: 600; }
.up-meta, .prog-meta { display: block; font-size: 0.85rem; color: var(--tinta-suave); }
/* Convenio bajo la iniciativa, «en letra chiquita» (acta 2026-08-21). */
.prog-convenio { display: block; font-size: 0.8rem; color: var(--tinta-suave); }

/* ── Ventanilla de arrastre (solo rol editar) ──────────────────────────── */
.lista-archivos { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.archivo-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px;
}
.archivo-tipo { display: block; font-weight: 600; }
.archivo-detalle { display: block; font-size: 0.85rem; color: var(--tinta-suave); }
.archivo-falta { font-style: italic; }
.archivo-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-carga { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.zona-arrastre {
  display: inline-flex; flex-direction: column; gap: 4px;
  border: 1.5px dashed var(--acento); border-radius: 8px;
  background: var(--acento-claro); padding: 8px 12px; cursor: pointer;
  font-size: 0.8rem; color: var(--acento);
}
.zona-arrastre input[type="file"] { font-size: 0.8rem; max-width: 230px; }
.zona-limite { display: block; font-size: 0.72rem; opacity: 0.75; font-weight: 600; }
.boton-retirar {
  background: transparent; color: #b3261e; border: 1px solid #e3b3b0;
  border-radius: 8px; padding: 7px 14px; font-size: 0.85rem; cursor: pointer;
}
.boton-retirar:hover { background: #fdecea; }

/* ── Datos de contacto + correcciones (Fase 2) ─────────────────────────── */
.lista-contacto { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.contacto-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px;
}
.contacto-etiqueta { display: block; font-weight: 600; }
.contacto-valor { display: block; font-size: 0.95rem; }
.contacto-pendiente {
  display: block; font-size: 0.78rem; color: var(--alerta); margin-top: 2px;
}
/* ── Edición estandarizada ─────────────────────────────────────────────── */
.ciudadano-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
}
.form-editar { margin: 0; }
.boton-editar {
  background: var(--acento); color: #fff; border: 0; border-radius: 8px;
  padding: 9px 18px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.boton-editar:hover { opacity: 0.9; }

.editor { display: flex; flex-direction: column; gap: 18px; margin: 20px 0; }
.editor-campo { display: flex; flex-direction: column; gap: 5px; }
.editor-campo label { font-weight: 600; }
.editor-campo .req { font-weight: 400; color: var(--tinta-suave); }
.editor-actual { font-size: 0.85rem; color: var(--tinta-suave); }
.editor-badge { display: block; color: var(--alerta); }
.editor-campo input[type="text"] {
  border: 1px solid var(--linea); border-radius: 6px; padding: 9px 10px;
  font-size: 0.95rem; max-width: 420px;
}
.editor-acciones { display: flex; gap: 12px; margin: 18px 0; }
.editor-previos {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.previos-titulo { font-size: 0.8rem; color: var(--tinta-suave); }
.boton-previo {
  background: var(--acento-claro); color: var(--acento);
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 4px 12px; font-size: 0.8rem; cursor: pointer;
}
.boton-previo:hover { background: #dbe8f4; }

/* ── Últimas consultas ─────────────────────────────────────────────────── */
.lista-recientes { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.reciente form { margin: 0; }
.boton-reciente {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 8px; padding: 10px 14px;
}
.boton-reciente:hover { background: var(--acento-claro); border-color: var(--acento); }
.reciente-doc { display: block; font-weight: 600; color: var(--tinta); }
.reciente-meta { display: block; font-size: 0.82rem; color: var(--tinta-suave); }

/* ── Envío al sistema de origen (acción irreversible de un clic) ────────── */
.boton-peligro {
  background: #b3261e; color: #fff; border: 0; border-radius: 8px;
  padding: 11px 20px; font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.boton-peligro:hover { background: #8f1e18; }
.form-enviar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linea);
}
.enviar-nota { font-size: 0.82rem; color: var(--tinta-suave); max-width: 420px; }
.aviso-peligro {
  background: #fdecea; border-left: 4px solid #b3261e; color: #7f1d1a;
  padding: 14px 16px; border-radius: 6px; margin: 16px 0;
}

.lista-cambios { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.lista-cambios li {
  border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px;
}
.cambio-campo { display: block; font-weight: 600; }
.cambio-valores { display: block; font-size: 0.9rem; color: var(--tinta-suave); }
.flecha { color: var(--acento); font-weight: 700; }
/* El historial tiene 7 columnas: que ruede él, nunca la página. */
.tabla-scroll { overflow-x: auto; }
.historial-correcciones .tabla-envios { min-width: 680px; }

/* ── Habilitantes ───────────────────────────────────────────────────────── */

.habilitantes { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; }
.hab {
  flex: 1 1 170px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--linea);
  background: var(--fondo);
}
.hab-nombre {
  display: block; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tinta-suave); font-weight: 700;
}
.hab-estado { display: block; font-weight: 600; margin-top: 3px; }

.hab-si   { background: var(--ok-fondo);     border-color: #bfe0cf; }
.hab-si   .hab-estado { color: var(--ok); }
.hab-no   { background: var(--superficie); }
.hab-no   .hab-estado { color: var(--tinta-suave); }
.hab-duda { background: var(--alerta-fondo); border-color: #eddcbb; }
.hab-duda .hab-estado { color: var(--alerta); }

/* ── Selector de registros (varios asociados a un documento) ────────────── */

.selector-titulo { font-size: 1.2rem; }
.opciones { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 8px;
}
.opcion:hover { border-color: var(--acento); }
.opcion-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion-nombre  { font-weight: 700; }
.opcion-empresa { font-size: 0.92rem; }
.opcion-meta    { font-size: 0.82rem; color: var(--tinta-suave); }
.opcion-dime {
  margin-top: 4px; align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 10px; border-radius: 999px;
}
.opcion-dime-si { background: var(--ok-fondo);  color: var(--ok); }
.opcion-dime-no { background: var(--alerta-fondo); color: var(--alerta); }

.opcion-coincide {
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.opcion:has(.opcion-coincide) { border-color: var(--acento); }
.opcion button { flex-shrink: 0; }

/* Tarjeta relacionada inerte: mismo lenguaje visual, sin interacción. */
.opcion-inerte { cursor: default; }
.opcion-inerte:hover { border-color: var(--linea); }

/* Ficha pequeña del registro silver que coincidió (rama de respaldo).
   Compacta y sin puntajes, a propósito. */
.ficha-silver { padding: 16px 20px; background: var(--fondo); }
.ficha-cuerpo { display: flex; flex-direction: column; gap: 3px; }
.ficha-nombre { font-weight: 700; }
.ficha-meta   { font-size: 0.85rem; color: var(--tinta-suave); }

.barra-seleccion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.form-volver { margin: 0; }
.boton-secundario {
  background: transparent;
  color: var(--acento);
  border: 1px solid var(--acento);
  padding: 8px 16px;
  min-height: 0;
}
.boton-secundario:hover { background: var(--acento-claro); }

/* ── Envíos ─────────────────────────────────────────────────────────────── */

.envios { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }
.envios summary {
  cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--acento);
  padding: 4px 0;
}
.tabla-envios { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.88rem; }
.tabla-envios th, .tabla-envios td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea);
}
.tabla-envios th { font-size: 0.75rem; text-transform: uppercase; color: var(--tinta-suave); }

.acciones-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.boton-enlace {
  display: inline-block;
  color: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 8px;
  padding: 9px 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--superficie);
}
.boton-enlace:hover { background: var(--acento-claro); }
.cronometro { font-size: 0.75rem; color: var(--tinta-suave); }

/* ── Login ──────────────────────────────────────────────────────────────── */

.login { max-width: 480px; margin: 40px auto; text-align: center; }
.login-intro { color: var(--tinta-suave); margin-bottom: 22px; }
.boton-google {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.boton-google:hover { background: #17405f; }
.login .nota { margin-top: 20px; }

/* ── Responsivo ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .panel { padding: 18px; }
  .modulo { grid-template-columns: 1fr 40px; grid-template-areas: "nombre valor" "barra barra"; }
  .modulo-nombre { grid-area: nombre; }
  .modulo-valor  { grid-area: valor; }
  .modulo-barra  { grid-area: barra; }
  .fila-form { flex-direction: column; align-items: stretch; }
  button { width: 100%; }
}

@media print {
  .barra, .pie, .buscador, .cronometro, .nota { display: none; }
  .panel { border: none; }
}

/* ── Verificación de identidad (paso 1 del diagrama de Nicolás) ────────────
   Va inmediatamente bajo la cabecera del ciudadano porque condiciona todo lo
   que el asesor haga después. Nunca contiene nombres: solo el veredicto y
   qué parte del nombre falla (ver ventanilla_app/registraduria.py). */
.verificacion {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-left: 5px solid var(--tinta-suave);
  border-radius: var(--radio);
  background: var(--fondo);
}
.verificacion-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}
.verificacion-titulo { font-weight: 700; }
.verificacion-fecha  { font-size: 0.8rem; color: var(--tinta-suave); }
.verificacion-detalle { margin-top: 4px; }

.verificacion-partes { margin: 8px 0 0; padding-left: 18px; font-size: 0.9rem; }
.verificacion-partes .parte-ok    { color: var(--tinta-suave); }
.verificacion-partes .parte-falla { color: var(--error); font-weight: 600; }

.verificacion-ok {
  background: var(--ok-fondo);
  border-color: #bfe0cf;
  border-left-color: var(--ok);
}
.verificacion-ok .verificacion-titulo { color: var(--ok); }

.verificacion-aviso {
  background: var(--alerta-fondo);
  border-color: #eddcbb;
  border-left-color: var(--alerta);
}
.verificacion-aviso .verificacion-titulo { color: var(--alerta); }

.verificacion-alerta {
  background: var(--error-fondo);
  border-color: #f2c9c6;
  border-left-color: var(--error);
}
.verificacion-alerta .verificacion-titulo { color: var(--error); }

.verificacion-neutro .verificacion-titulo { color: var(--tinta-suave); }

/* ── Pantalla de verificación de identidad (diagrama 2026-09-17) ───────────
   El asesor la lee en voz alta al ciudadano, así que los textos van en
   .lectura y los campos son grandes: se teclea de pie, en un punto de
   atención, con el documento en la mano. */
.aviso-ok { background: var(--ok-fondo); border-color: var(--ok); color: #14563a; }

.form-verificacion .bloque:first-of-type { border-top: none; padding-top: 0; }

.check-seguro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}
.check-seguro input { width: 22px; height: 22px; }

.rejilla-nombres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.rejilla-nombres label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--tinta-suave);
}
.rejilla-nombres input {
  font-size: 1.15rem;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-transform: uppercase;
}
.rejilla-nombres input:focus-visible {
  outline: 3px solid var(--acento-claro);
  outline-offset: 1px;
  border-color: var(--acento);
}

.lista-opciones { list-style: none; margin: 16px 0 0; padding: 0; }
.lista-opciones li { margin-bottom: 10px; }
.lista-opciones label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  cursor: pointer;
}
.lista-opciones label:hover { background: var(--acento-claro); }
.lista-opciones input { width: 22px; height: 22px; }
.opcion-partes { display: flex; flex-wrap: wrap; gap: 14px; }
.opcion-parte {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.boton-principal {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radio);
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.boton-principal:hover { background: #17405f; }