/* ==========================================================================
   Lector de cedulas
   Paleta clara y oscura. Se cambia poniendo data-tema="oscuro" en <html>.
   ========================================================================== */

/* Neutros con sesgo frio, del color de un documento escaneado en gris. El azul
   es de tinta, no de enlace: tiene que convivir con el verde, el ambar y el
   rojo de los estados sin pelearse con ellos, porque esos tres significan algo
   y el azul solo acompana. */
:root {
  --fondo:        #eceff4;
  --papel:        #ffffff;
  --papel-2:      #f5f7fa;
  --borde:        #d7dde6;
  --borde-suave:  #e7ebf1;
  --texto:        #0f1729;
  --texto-2:      #46536b;
  --suave:        #8b96a8;

  --azul:         #2f4bb8;
  --azul-2:       #243991;
  --azul-claro:   #e9edfc;
  --rojo:         #b42318;
  --rojo-claro:   #fdeceb;
  --ambar:        #8a5a06;
  --ambar-claro:  #fdf2da;
  --verde:        #0d7346;
  --verde-claro:  #e2f4ea;

  --visor:        #232a35;
  --visor-2:      #1a2029;

  --sombra:       0 1px 2px rgba(15,23,41,.05), 0 2px 8px rgba(15,23,41,.05);
  --sombra-alta:  0 10px 34px rgba(15,23,41,.18);
  --radio:        8px;
  --radio-ch:     6px;

  /* Tipografia. En Windows 11 esta Segoe UI Variable, que tiene un corte
     optico para titulos y otro para texto corrido; en el resto cae a Segoe UI.
     El monoespaciado es para los datos: documentos, fechas y edades, que se
     leen mucho mejor cuando las cifras se alinean en columna. */
  --fuente:       "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --fuente-tit:   "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI",
                  system-ui, sans-serif;
  --fuente-dato:  "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
}

html[data-tema="oscuro"] {
  --fondo:        #0e131b;
  --papel:        #171d27;
  --papel-2:      #1e2531;
  --borde:        #2a3341;
  --borde-suave:  #222a36;
  --texto:        #e8edf4;
  --texto-2:      #a3b0c2;
  --suave:        #75849a;

  --azul:         #8ba6ff;
  --azul-2:       #a7bcff;
  --azul-claro:   #1a2340;
  --rojo:         #ff8a80;
  --rojo-claro:   #351d1c;
  --ambar:        #f2c161;
  --ambar-claro:  #302610;
  --verde:        #5fd6a0;
  --verde-claro:  #102d21;

  --visor:        #0a0e14;
  --visor-2:      #05080c;

  --sombra:       0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
  --sombra-alta:  0 12px 36px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

/* El atributo hidden lo esconde todo. Sin esto, cualquier regla de display que
   pongamos abajo (flex, inline-block...) le gana y el elemento sigue a la vista. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.22; font-weight: 600;
  font-family: var(--fuente-tit); letter-spacing: -.011em; }

/* Los datos se leen en columna, asi que las cifras tienen que ocupar todas lo
   mismo: si no, el ojo no puede comparar dos documentos de un vistazo. */
.doc, .ch-doc, .hist-pie, .tj b, .cifra, input[data-c="documento"],
input[data-c="nacimiento"], input[data-c="expedicion"], .cmp .val {
  font-variant-numeric: tabular-nums;
}

/* Los rotulos en versalitas necesitan aire entre letras para no apelmazarse. */
.campo-tit, .f label {
  font-feature-settings: "case" 1;
}
em { font-style: normal; color: var(--suave); font-weight: 400; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; }

#app { display: flex; flex-direction: column; height: 100vh; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--suave); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ botones */
.b {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--azul); color: #fff; border: 1px solid transparent;
  border-radius: var(--radio-ch); padding: .5rem .85rem;
  font-size: .87rem; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .06s;
}
.b:hover { background: var(--azul-2); }
.b:active { transform: translateY(1px); }
.b.sec { background: var(--papel); color: var(--texto-2); border-color: var(--borde); }
.b.sec:hover { background: var(--papel-2); color: var(--texto); border-color: var(--suave); }
.b:disabled { opacity: .45; cursor: default; }
.b:disabled:hover { background: var(--azul); }
.b.grande { padding: .8rem 2rem; font-size: 1rem; width: 100%; justify-content: center; }
.b.ico { padding: .5rem; }
.b.ico svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------ menu lateral
   El mismo en todas las pantallas (plantillas/_menu.html). Reemplaza la barra de
   arriba: cada boton con su nombre debajo, para entenderlo sin pasar el raton.
   En una ventana estrecha baja al pie. */
:root { --ml-ancho: 80px; }
body.con-menu { padding-left: var(--ml-ancho); }
.ml {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: var(--ml-ancho);
  display: flex; flex-direction: column; gap: .2rem; padding: .8rem .45rem;
  background: var(--papel); border-right: 1px solid var(--borde);
}
.ml-marca { display: grid; place-items: center; height: 46px; margin-bottom: .5rem; }
.logo { width: 30px; height: 30px; color: var(--azul); flex-shrink: 0; }
.ml-item {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .55rem .15rem .5rem; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: .69rem; font-weight: 600; line-height: 1.15; text-align: center;
  color: var(--texto-2); text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.ml-item svg { width: 21px; height: 21px; flex-shrink: 0; }
.ml-item:hover { background: var(--papel-2); color: var(--texto); }
/* la pantalla en la que se esta: la marca aria-current, que tambien la oye un lector de pantalla */
.ml-item[aria-current="page"] { background: var(--azul-claro); color: var(--azul); }
.ml-item:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ml-hueco { flex: 1; }
@media (max-width: 640px) {
  body.con-menu { padding-left: 0; padding-bottom: 64px; }
  body.con-menu #app { height: calc(100vh - 64px); }
  .ml { top: auto; right: 0; width: auto; height: 64px; flex-direction: row;
    padding: .3rem .4rem; border-right: 0; border-top: 1px solid var(--borde); }
  .ml-marca, .ml-hueco { display: none; }
  .ml-item { flex: 1; justify-content: center; }
}

/* ------------------------------------------------------ la barra de la ficha
   Solo al revisar: la ficha, cuantas van revisadas, si se guardo y descargar. */
.cab {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--papel); border-bottom: 1px solid var(--borde);
  padding: .45rem 1.1rem; min-height: 50px; flex-shrink: 0; z-index: 30;
}
.cab-tit { min-width: 0; font-size: 1.02rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-acc { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.cab-izq { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cab-volver { padding: .38rem .7rem .38rem .45rem; flex-shrink: 0; }
.cab-volver svg { width: 17px; height: 17px; }
.guardado { font-size: .77rem; color: var(--verde); min-width: 5.5rem; text-align: right; }

/* cuantas van revisadas: un anillo chico y la cuenta al lado, dicha en palabras */
.progreso { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0;
  font-size: .8rem; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anillo { width: 22px; height: 22px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 3.4; }
.anillo-fondo { stroke: var(--borde); }
.anillo-linea { stroke: var(--verde); stroke-linecap: round;
  stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .4s; }

/* menu de descargas */
.menu { position: relative; }
.ico-flecha { width: 14px; height: 14px; }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-alta);
  min-width: 250px; padding: .35rem; display: none;
}
.menu.abierto .menu-lista { display: block; }
.menu-lista a {
  display: block; padding: .5rem .65rem; border-radius: var(--radio-ch);
  text-decoration: none; color: var(--texto); cursor: pointer;
}
.menu-lista a:hover { background: var(--azul-claro); }
.menu-lista strong { display: block; font-size: .87rem; font-weight: 600; }
.menu-lista span { display: block; font-size: .76rem; color: var(--suave); }

.menu-pie { margin: .35rem .3rem .1rem; padding-top: .45rem; font-size: .74rem;
  color: var(--suave); border-top: 1px solid var(--borde-suave); text-align: center; }
.menu-pie b { color: var(--texto-2); }

/* --------------------------------------------- la esquina de avisos

   Los dos avisos van apilados en la MISMA esquina. Antes cada uno se colocaba
   por su cuenta con position:fixed y se pisaban: al terminar de leer salen los
   dos a la vez -"Lectura terminada" y, si hay alguien descolgado, la tarjeta-.
   column-reverse pone el ultimo que llega arriba, que es el que se mira. */
.avisos {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: flex; flex-direction: column-reverse; align-items: flex-end;
  gap: .55rem; pointer-events: none;
}
.avisos > * { pointer-events: auto; }

/* La tarjeta de "sin pareja".

   Fue un modal a pantalla completa y no debia serlo: un modal PARA el trabajo
   -hay que contestarle antes de seguir- y esto no es una pregunta, es una nota.
   Ahora es una tarjeta que entra por el lado, se puede cerrar con la X y se va
   sola a los diez segundos. Si se cierra sola no se pierde nada: el filtro
   "Sin pareja" sigue ahi con su numero, que es donde vive de verdad. */
.tarjeta-aviso {
  position: relative; width: min(340px, calc(100vw - 2.2rem));
  background: var(--papel); border: 1px solid var(--borde);
  border-left: 4px solid var(--ambar); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); padding: .8rem .9rem .85rem;
  animation: ta-entra .3s cubic-bezier(.2, .9, .3, 1);
  overflow: hidden;
}
.tarjeta-aviso.yendose { animation: ta-sale .28s ease-in forwards; }
@keyframes ta-entra { from { opacity: 0; transform: translateX(24px); } }
@keyframes ta-sale { to { opacity: 0; transform: translateX(24px); } }

.ta-cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
  padding-right: 1.2rem; }
.ta-cab strong { font-family: var(--fuente-tit); font-size: .92rem; color: var(--texto); }
.ta-ico {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--ambar-claro); color: var(--ambar);
  display: flex; align-items: center; justify-content: center;
}
.ta-ico svg { width: 15px; height: 15px; stroke-width: 2; }

/* Las dos direcciones, una debajo de otra y con la cifra a la izquierda: se ve
   de un vistazo por que lado esta el desajuste sin leer la frase entera. */
.ta-cuerpo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .6rem; }
.ta-fila { display: flex; align-items: baseline; gap: .5rem; font-size: .8rem;
  color: var(--texto-2); line-height: 1.35; }
.ta-fila b {
  font-family: var(--fuente-dato); font-variant-numeric: tabular-nums;
  font-size: .95rem; color: var(--ambar); min-width: 1.3rem; text-align: right;
  flex-shrink: 0;
}
.ta-ver { width: 100%; justify-content: center; }

/* La barrita del fondo que se vacia: dice sin palabras cuanto le queda a la
   tarjeta antes de irse sola. */
.ta-tiempo {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--ambar); transform-origin: left;
  animation: ta-cuenta 10s linear forwards;
}
@keyframes ta-cuenta { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-aviso, .tarjeta-aviso.yendose { animation: none; }
  .ta-tiempo { display: none; }
}

/* aviso de "archivo guardado" */
.aviso {
  display: flex; align-items: center; gap: .7rem; max-width: min(560px, 92vw);
  background: var(--papel); border: 1px solid var(--verde);
  border-left: 4px solid var(--verde); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); padding: .7rem .8rem .7rem .9rem;
  font-size: .85rem; animation: entra .22s ease-out;
}
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
.aviso.malo { border-color: var(--rojo); border-left-color: var(--rojo); }
.aviso-ico { width: 18px; height: 18px; color: var(--verde); stroke-width: 2.6; flex-shrink: 0; }
.aviso.malo .aviso-ico { display: none; }
.aviso span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aviso b { font-weight: 600; }
.aviso small { display: block; color: var(--suave); font-size: .76rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-x { background: none; border: 0; color: var(--suave); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 0 .2rem; }

.ico-luna { display: none; }
html[data-tema="oscuro"] .ico-sol { display: none; }
html[data-tema="oscuro"] .ico-luna { display: block; }

/* ----------------------------------------------------- pantalla de arranque */
/* Desde la 2.21 la portada es su propia pantalla (/), y aqui (/leer) se sueltan
   la ficha y su Excel lado a lado, cada uno con lo que se va a subir debajo. */
.vacio { flex: 1; overflow-y: auto; display: flex; justify-content: center;
  padding: 1.8rem 1rem 3rem; }
.soltar { width: 100%; max-width: 980px; }

.sb-cabeza { margin-bottom: 1.2rem; }
.sb-titulo { font-family: var(--pt-letra-portada); font-weight: 800; font-size: 1.75rem;
  letter-spacing: -.022em; line-height: 1.1; }
.sb-sub { margin: .35rem 0 0; color: var(--texto-2); font-size: .9rem; max-width: 64ch; }
/* La otra forma de leer, la camara del celular (/celular). Discreta: la de
   siempre sigue siendo soltar el PDF. */
.sb-celular { display: inline-flex; align-items: center; gap: .5rem; margin-top: .7rem;
  padding: .45rem .8rem; border-radius: 999px; background: var(--azul-claro); color: var(--azul);
  font-size: .84rem; text-decoration: none; }
.sb-celular:hover { background: var(--azul); color: var(--papel); }
.sb-celular svg { width: 18px; height: 18px; flex: none; }
.sb-celular b { font-weight: 650; }
.sb-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.sb-col { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.sb-rotulo { display: flex; align-items: center; gap: .45rem; font-size: .87rem; font-weight: 600; }
.sb-rotulo b { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--azul-claro); color: var(--azul); font-size: .74rem; }
.sb-rotulo em { font-style: normal; font-weight: 400; color: var(--suave); }
/* el recuadro del Excel lleva en el icono el verde de las hojas de calculo: de
   un vistazo se sabe cual recuadro es cual, sin leer */
.sb-caja-excel .soltar-ico { color: var(--verde); }
.sb-par .soltar-caja { min-height: 196px; padding: 1.6rem 1.2rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
/* Con el archivo ya elegido el recuadro se encoge: lo que importa entonces es la
   vista previa de debajo, y soltar otro encima sigue funcionando. */
.sb-par .soltar-caja.sb-lleno { min-height: 0; padding: .7rem 1rem; flex-direction: row; gap: .6rem;
  border-style: solid; }
.soltar-caja.sb-lleno .soltar-ico { width: 24px; height: 24px; margin: 0; }
.soltar-caja.sb-lleno .soltar-tit { font-size: .9rem; margin: 0; }
.soltar-caja.sb-lleno .soltar-sub, .soltar-caja.sb-lleno .soltar-elegido { display: none; }

.sb-vista { border: 1px solid var(--borde); border-radius: 12px; background: var(--papel);
  padding: .85rem .95rem; box-shadow: var(--sombra); min-width: 0; }
.sb-vista-cab { display: flex; align-items: flex-start; gap: .6rem; }
.sb-vista-texto { min-width: 0; }
.sb-vista-nombre { font-weight: 650; font-size: .92rem; overflow-wrap: anywhere; }
.sb-vista-det { margin-top: .1rem; font-size: .78rem; color: var(--texto-2); }
.sb-quitar { margin-left: auto; flex: none; padding: .1rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .76rem; color: var(--suave); text-decoration: underline; }
.sb-quitar:hover { color: var(--rojo); }
.sb-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.sb-chip { padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--borde-suave);
  background: var(--papel-2); font-size: .72rem; color: var(--texto-2); }
.sb-chip-ficha { border-color: transparent; background: var(--azul-claro); color: var(--azul); font-weight: 650; }
.sb-programa { margin: .45rem 0 0; font-size: .8rem; font-weight: 600; color: var(--texto); }
.sb-miniaturas { display: flex; gap: .45rem; margin-top: .65rem; overflow-x: auto; padding-bottom: .1rem; }
.sb-miniatura { flex: none; width: 92px; height: auto; border-radius: 6px; border: 1px solid var(--borde);
  background: #fff; }
.sb-mas { margin: .4rem 0 0; font-size: .74rem; color: var(--suave); }
.sb-ya { margin: .65rem 0 0; padding: .45rem .6rem; border-radius: 8px; background: var(--ambar-claro);
  font-size: .78rem; color: var(--ambar); }
.sb-tabla-caja { margin-top: .65rem; overflow-x: auto; border: 1px solid var(--borde-suave); border-radius: 8px; }
.sb-tabla { width: 100%; border-collapse: collapse; font-size: .74rem; }
.sb-tabla th, .sb-tabla td { padding: .3rem .5rem; border-bottom: 1px solid var(--borde-suave);
  text-align: left; white-space: nowrap; }
.sb-tabla th { background: var(--papel-2); color: var(--suave); font-weight: 600; }
.sb-cargando { margin: 0; font-size: .82rem; color: var(--suave); }
.sb-error { margin: .5rem 0 0; font-size: .82rem; color: var(--rojo); }

.sb-aviso { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; padding: .7rem .9rem;
  border-radius: 10px; font-size: .87rem; }
.sb-aviso-ojo { background: var(--ambar-claro); color: var(--ambar);
  border: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent); }
.sb-aviso-bien { background: var(--verde-claro); color: var(--verde);
  border: 1px solid color-mix(in srgb, var(--verde) 30%, transparent); }
.sb-aviso-marca { display: inline-grid; place-items: center; flex: none; width: 1.3rem; height: 1.3rem;
  border-radius: 50%; border: 1.5px solid currentColor; font-size: .78rem; }
.sb-releer { margin-top: 1.2rem; }
.sb-botones { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.1rem; }
.sb-botones .b { min-width: 11rem; justify-content: center; }
@media (max-width: 760px) {
  .sb-par { grid-template-columns: 1fr; }
  .sb-botones { flex-direction: column-reverse; }
  .sb-botones .b { width: 100%; }
}
.soltar-caja {
  border: 2px dashed var(--borde); border-radius: 16px; background: var(--papel);
  padding: 2.8rem 2rem; cursor: pointer; text-align: center;
  transition: border-color .18s, background .18s, transform .18s;
}
.soltar-caja:hover { border-color: var(--azul); background: var(--papel-2); }
.soltar-caja.encima { border-color: var(--azul); background: var(--azul-claro);
  transform: scale(1.015); }
.soltar-ico { width: 46px; height: 46px; color: var(--azul); stroke-width: 1.5;
  margin-bottom: .5rem; }
.soltar-tit { font-size: 1.12rem; font-weight: 650; margin: 0 0 .25rem; }
.soltar-sub { margin: 0; color: var(--suave); font-size: .87rem; }
.soltar-elegido {
  margin-top: 1.1rem; font-weight: 600; color: var(--azul); font-size: .88rem;
  background: var(--azul-claro); border-radius: var(--radio-ch);
  padding: .5rem .85rem; display: inline-block;
}

.soltar-extra { margin: 1.5rem 0 1.2rem; }
.campo-tit { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; }
.picker {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--papel); padding: .65rem .8rem; font-size: .88rem;
  color: var(--texto-2); transition: border-color .15s, background .15s;
}
.picker:hover { border-color: var(--azul); background: var(--papel-2); }
.picker svg { width: 18px; height: 18px; color: var(--suave); flex-shrink: 0; }
.picker.puesto { border-color: var(--azul); color: var(--texto); }
.picker.puesto svg { color: var(--azul); }
.campo-ayuda { display: block; color: var(--suave); font-size: .79rem; margin-top: .4rem; }

.check { display: flex; align-items: center; gap: .5rem; cursor: pointer;
  color: var(--texto-2); font-size: .85rem; margin-top: .9rem; }
.check input { width: 16px; height: 16px; accent-color: var(--azul); cursor: pointer; }
.check.destacado { color: var(--texto); font-weight: 600; margin-top: 0; }
.check.destacado input { accent-color: var(--verde); }

.aviso-error {
  background: var(--rojo-claro); color: var(--rojo); border: 1px solid var(--rojo);
  border-radius: var(--radio); padding: .65rem .9rem; margin: 0 0 1rem; font-size: .87rem;
}

/* ------------------------------------------------------------------ entrar
   Solo en la web (web.py): la contrasena, sola en el centro. */
body.en-cuerpo { min-height: 100vh; margin: 0; display: grid; place-items: center;
  background: var(--fondo); color: var(--texto); font-family: var(--fuente); }
.en { width: 100%; padding: 1rem; }
.en-caja { max-width: 360px; margin: 0 auto; padding: 2rem 1.6rem 1.6rem; display: flex;
  flex-direction: column; gap: .9rem; background: var(--papel); border: 1px solid var(--borde);
  border-radius: 14px; box-shadow: var(--sombra); }
.en-logo { width: 40px; height: 40px; }
.en-titulo { margin: 0; font-family: var(--fuente-tit); font-size: 1.35rem; }
.en-sub { margin: -.4rem 0 .2rem; color: var(--texto-2); font-size: .88rem; }
.en-caja .aviso-error { margin: 0; }
.en-campo { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; color: var(--texto-2); }
.en-campo input { padding: .65rem .75rem; border: 1px solid var(--borde); border-radius: var(--radio-ch);
  background: var(--papel-2); color: var(--texto); font: inherit; font-size: 1rem; }
.en-campo input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.ml-salir { margin: 0; }
.ml-salir .ml-item { width: 100%; }

/* ---------------------------------------------------------------- mis fichas
   El historial, con tres cifras encima y en que va cada ficha. */
.mf-caja { width: 100%; max-width: 980px; }
.mf-cabeza { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .6rem 1rem; margin-bottom: 1.1rem; }
.mf-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 0; }
.mf-cifras > div { padding: .8rem 1rem; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--papel); }
.mf-cifras dt { font-size: .78rem; color: var(--texto-2); }
.mf-cifras dd { margin: .15rem 0 0; font-family: var(--pt-letra-portada); font-weight: 800;
  font-size: 1.6rem; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mf-pie { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--borde-suave); }
.mf-vacia { padding: 2.4rem 1rem; text-align: center; color: var(--texto-2);
  border: 1px dashed var(--borde); border-radius: 12px; }
.mf-vacia p { margin: 0 0 1rem; }
@media (max-width: 640px) { .mf-cifras { grid-template-columns: 1fr; } }
.anteriores { margin-top: 1.4rem; }

/* La barra de encima del historial: marcar todas, y que hacer con lo marcado.
   Las acciones aparecen solo cuando hay algo marcado; un boton que no puede
   hacer nada es un boton que hay que leer cada vez para nada. */
.hist-barra {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .5rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--borde-suave);
}
.hist-barra .hist-todas { font-size: .78rem; color: var(--texto-2); }
.hist-acciones { display: flex; flex-wrap: wrap; gap: .35rem; }
.hist-acciones button {
  font-family: inherit; font-size: .76rem; font-weight: 600;
  padding: .26rem .55rem; border-radius: var(--radio-ch);
  border: 1px solid var(--azul); background: var(--papel); color: var(--azul);
  cursor: pointer;
}
.hist-acciones button:hover { background: var(--azul); color: var(--papel); }
.hist-acciones button.peligro { border-color: var(--rojo); color: var(--rojo); }
.hist-acciones button.peligro:hover { background: var(--rojo); color: var(--papel); }
.hist-acciones button:disabled { opacity: .5; cursor: default; }

/* Borrar todo se va al otro extremo de la barra, lejos del resto. No es
   decoracion: es el unico boton de esta pantalla que se lleva por delante
   horas de revision hechas a mano, y no puede estar pegado a los demas. */
.hist-todo {
  margin-left: auto; font-family: inherit; font-size: .74rem;
  background: none; border: 0; color: var(--suave); cursor: pointer;
  text-decoration: underline; padding: .2rem;
}
.hist-todo:hover { color: var(--rojo); }
.hist-todo:disabled { opacity: .5; cursor: default; }

/* la casilla de cada lectura, en su propia columna a la izquierda */
.hist-marca {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 30px; cursor: pointer;
}
.hist-marca input { cursor: pointer; }
/* Las casillas en el color de la aplicacion y no en el azul del sistema: son
   parte de la pantalla, no del navegador. */
.hist-sel, #hist-todas { accent-color: var(--azul); width: 15px; height: 15px; }

ul.hist { list-style: none; margin: 0; padding: 0; }
ul.hist li { display: flex; align-items: stretch; gap: .3rem;
  border-radius: var(--radio-ch); }
ul.hist li:hover { background: var(--papel); }
ul.hist li > a, ul.hist li > .hist-rota {
  flex: 1; min-width: 0; display: block; padding: .5rem .7rem;
  color: var(--texto); text-decoration: none; font-size: .86rem;
}
ul.hist strong { display: block; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* El programa de formacion, debajo del numero de ficha: es lo que distingue
   dos fichas seguidas cuando el numero no dice nada por si solo. */
.hist-programa { display: block; color: var(--azul); font-size: .76rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-det, .hist-pie { display: block; color: var(--suave); font-size: .77rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-pie { font-size: .73rem; opacity: .85; }
.hist-rota strong { color: var(--suave); font-weight: 500; }

/* En que va cada ficha. Lleva texto siempre, no solo color: tambien en el inicio. */
.estado-ficha { align-self: center; flex: none; padding: .16rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.estado-pendiente { background: var(--ambar-claro); color: var(--ambar); }
.estado-lista { background: var(--verde-claro); color: var(--verde); }
.estado-descargada { background: var(--azul-claro); color: var(--azul); }
.estado-rota { background: var(--papel-2); color: var(--suave); }
.estado-leyendo { background: var(--azul-claro); color: var(--azul); }
.estado-reemplazada { background: var(--papel-2); color: var(--suave); font-weight: 500; }

/* el bote de basura: siempre visible pero discreto, y se enciende al apuntarlo */
.hist-x {
  flex-shrink: 0; width: 38px; border: 0; background: none; cursor: pointer;
  border-radius: var(--radio-ch); color: var(--suave); opacity: .45;
  transition: opacity .12s, color .12s, background .12s;
}
ul.hist li:hover .hist-x, .hist-x:focus-visible { opacity: 1; }
.hist-x:hover { color: var(--rojo); background: var(--rojo-claro); }
.hist-x:disabled { opacity: .4; cursor: default; }
.hist-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------- barra mientras lee */
.leyendo {
  display: flex; align-items: center; gap: .7rem; flex-shrink: 0;
  background: var(--ambar-claro); color: var(--ambar);
  border-bottom: 1px solid var(--borde); padding: .45rem 1.1rem; font-size: .84rem;
}
.leyendo.malo { background: var(--rojo-claro); color: var(--rojo); }
.leyendo-punto {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  flex-shrink: 0; animation: latido 1.1s ease-in-out infinite;
}
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.leyendo-barra { flex: 1; max-width: 220px; height: 5px; border-radius: 3px;
  background: rgba(150,101,10,.2); overflow: hidden; }
.leyendo-barra span { display: block; height: 100%; width: 0;
  background: currentColor; transition: width .35s; }

/* Cancelar la lectura. Al final de la barra y discreto -del color de la barra,
   sin relleno-: es para cuando alguien se equivoco de archivo, no algo que haya
   que pulsar en cada lectura. Con la lectura en error ya no hay nada que parar,
   asi que se esconde. */
.leyendo-cancelar {
  margin-left: auto; flex-shrink: 0; font-family: inherit; font-size: .8rem;
  font-weight: 600; color: inherit; background: transparent; cursor: pointer;
  border: 1px solid currentColor; border-radius: var(--radio-ch);
  padding: .22rem .75rem;
}
.leyendo-cancelar:hover { background: var(--rojo); border-color: var(--rojo);
  color: var(--papel); }
.leyendo-cancelar:disabled { opacity: .6; cursor: default; }
.leyendo.malo .leyendo-cancelar { display: none; }

/* ------------------------------------------------------------------ cuerpo
   Tabla arriba, ficha abajo. Con cien cedulas hay que poder ver el conjunto y
   elegir, no ir pasando una por una a ciegas. */
/* ------------------------------------------------------------------ cuerpo
   Tres columnas a lo alto: la lista de cedulas, la imagen y los campos. Se
   volvio a esto despues de probar la tabla arriba con la ficha abajo: repartir
   la altura entre imagen y campos dejaba las dos mitades estrechas, y en un
   portatil se veia todo apretado. A lo ancho hay sitio de sobra; a lo alto no. */
.cuerpo { display: flex; flex: 1; min-height: 0; }

/* ---- izquierda: todas las cedulas */
.lista {
  width: var(--ancho-lista, 330px); flex-shrink: 0; display: flex;
  flex-direction: column; min-width: 0;
  background: var(--papel); border-right: 1px solid var(--borde);
}
.buscador { position: relative; padding: .6rem .65rem .35rem; flex-shrink: 0; }
.buscador svg { position: absolute; left: 1.25rem; top: 1.15rem;
  width: 15px; height: 15px; color: var(--suave); pointer-events: none; }
.buscador input {
  width: 100%; padding: .48rem .6rem .48rem 2rem; font-size: .85rem;
  font-family: inherit; color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio-ch);
  background: var(--papel-2);
}
.buscador input:focus { outline: 2px solid var(--azul); outline-offset: -1px;
  border-color: var(--azul); background: var(--papel); }

.filtros { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem .65rem .5rem;
  flex-shrink: 0; }
.filtros button {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--borde); background: var(--papel); color: var(--texto-2);
  border-radius: 20px; padding: .22rem .55rem; font-size: .73rem;
  font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s;
}
.filtros button:hover { border-color: var(--suave); }
/* inline-flex le gana a [hidden]; sin esto, esconder un filtro no lo esconde */
.filtros button[hidden] { display: none; }
.filtros button.on { background: var(--azul-claro); color: var(--azul);
  border-color: var(--azul); font-weight: 600; }
.filtros b { font-weight: 700; opacity: .7; font-size: .71rem; }

/* Cabecera de la lista, no una frase suelta encima de ella: pone nombre a lo
   que viene debajo y deja el numero donde se busca, al final del renglon. */
.cuentas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin: .1rem .75rem .2rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--borde-suave); flex-shrink: 0;
  font-size: .67rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--suave);
}
.cuentas b { color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* la lista propiamente dicha, que es lo que crece */
ul.per { list-style: none; margin: 0; padding: .15rem 0 .5rem; flex: 1;
  overflow-y: auto; min-height: 0; }
/* Tres columnas fijas: el punto de estado, lo que se lee, y a la derecha la
   pagina y el visto. Con todo en una fila suelta, la pagina caia donde acabara
   el nombre -distinto en cada cedula- y para recorrer la lista buscando una
   pagina habia que ir leyendo. En columna se recorren de un vistazo. */
ul.per li {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start; gap: .55rem;
  padding: .45rem .75rem; cursor: pointer; border-left: 4px solid transparent;
  transition: background .12s;
}
/* Cada tarjeta lleva el color de su estado: una franja a la izquierda y un
   fondo apenas tenido. Con veinticinco cedulas en pantalla, el estado tiene que
   verse SIN leer -de un barrido de arriba abajo-, y un punto de ocho pixeles no
   da para eso.

   El tinte se subio: estaba tan bajo que en la pantalla de quien lo usa no se
   distinguia. Ahora el color de estado va ENTERO -sin diluir en el fondo- y al
   pasar el raton se le echa encima un poco del color fuerte. Sigue sin gritar
   -es una lista para trabajar, no un semaforo- pero ya se ve de un barrido.

   Los dos tonos por estado -normal y al pasar el raton- se escriben enteros en
   vez de calcularlos, porque asi se ve de un vistazo cual es cual. */
ul.per li[data-e="ok"] {
  --rail: var(--verde);
  --tinte:  var(--verde-claro);
  --tinte2: color-mix(in srgb, var(--verde) 16%, var(--verde-claro));
}
/* Completada con el Excel va en el MISMO verde que correcta: en las dos no
   queda nada por hacer, que es lo unico que el color tiene que decir. Lo que
   las diferencia se dice con palabras -el sello "del Excel" en el campo- y no
   con un segundo verde que hubiera que distinguir. */
ul.per li[data-e="completada"] {
  --rail: var(--verde);
  --tinte:  var(--verde-claro);
  --tinte2: color-mix(in srgb, var(--verde) 16%, var(--verde-claro));
}
ul.per li[data-e="revisar"] {
  --rail: var(--rojo);
  --tinte:  var(--rojo-claro);
  --tinte2: color-mix(in srgb, var(--rojo) 16%, var(--rojo-claro));
}
/* No estar en el listado es tan serio como no cuadrar con el, asi que va en el
   mismo rojo. Estuvo en ambar, y el ambar en esta pantalla quiere decir "se
   resuelve de un boton": esto no se resuelve de ninguno. */
ul.per li[data-e="sin_listado"] {
  --rail: var(--rojo);
  --tinte:  var(--rojo-claro);
  --tinte2: color-mix(in srgb, var(--rojo) 16%, var(--rojo-claro));
}
/* Una fila del Excel de la que no llego la cedula va en esta misma lista, y en
   ambar: no hay nada mal leido que corregir -no hay cedula-, hay una hoja que
   falta por escanear o un numero que se leyo con un digito cambiado. */
ul.per li[data-e="solo_excel"] {
  --rail: var(--ambar);
  --tinte:  var(--ambar-claro);
  --tinte2: color-mix(in srgb, var(--ambar) 16%, var(--ambar-claro));
}
ul.per li { background: var(--tinte, transparent); border-left-color: var(--rail, transparent); }
ul.per li:hover { background: var(--tinte2, var(--papel-2)); }

/* La elegida se marca con un anillo y no cambiandole el fondo: cambiandoselo
   perderia su color de estado justo en la que se esta mirando. */
ul.per li.on {
  outline: 2px solid var(--azul); outline-offset: -2px;
  border-left-color: var(--rail, var(--azul));
}
ul.per li.off { display: none; }

/* Una ya revisada se apaga: sigue teniendo su color, mas flojo, para que las
   que faltan resalten sobre las hechas. */
ul.per li.lista-revisada { opacity: .62; }
ul.per li.lista-revisada:hover, ul.per li.lista-revisada.on { opacity: 1; }
ul.per li.lista-revisada .nom { color: var(--texto-2); font-weight: 500; }

.pt { width: 8px; height: 8px; border-radius: 50%; margin-top: .36rem; }
.pt.ok { background: var(--verde); }
.pt.revisar { background: var(--rojo); }
.pt.sin_listado { background: var(--rojo); }
.pt.solo_excel { background: var(--ambar); }
/* completada va en el mismo verde que correcta: ver el comentario de arriba */
.pt.completada { background: var(--verde); }
.pt.leida { background: var(--azul); }
.pt.dudosa { box-shadow: 0 0 0 3px var(--ambar-claro); }

.per-txt { min-width: 0; }
.nom { display: block; font-weight: 600; font-size: .85rem; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Los datos en un solo renglon seguido, "CC · 1120304053 · 23 años". El tipo
   iba en una pastilla azul que llevaban TODAS las filas: un color fuerte
   repetido veinticinco veces no distingue nada, solo hace ruido. */
.doc { display: block; color: var(--suave); font-size: .74rem;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc .tp.mano {
  margin-left: .35rem; color: var(--azul); font-weight: 600;
  display: inline-flex; align-items: center; gap: .15rem; letter-spacing: 0;
}
.doc .tp.mano svg { width: 10px; height: 10px; stroke-width: 2.4; }
.nov-corta { display: block; margin-top: .12rem; font-size: .72rem;
  color: var(--ambar); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nov-corta::before { content: "\26a0\fe0e\a0"; }

/* la pagina y el visto, en su propia columna y alineados a la derecha */
.per-der { display: flex; flex-direction: column; align-items: flex-end;
  gap: .1rem; padding-top: .08rem; }
.per-der .pag { font-size: .72rem; color: var(--suave);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.per-der .pag::before { content: "p. "; opacity: .65; }
/* En la tercera columna, una fila del Excel no tiene pagina que enseñar: tiene
   justo lo contrario, y eso es lo que dice. */
.per-der .sin-hoja { font-size: .72rem; color: var(--ambar); font-weight: 600;
  white-space: nowrap; }
/* La papelera de cada fila. Solo se ve al pasar por encima o en la que esta
   abierta: veinticinco papeleras a la vista invitan a pulsar una sin querer. */
.per-der .borrar { display: grid; place-items: center; width: 24px; height: 24px;
  margin-top: .1rem; padding: 0; border: 0; border-radius: 6px; background: none;
  color: var(--suave); cursor: pointer; opacity: 0; transition: opacity .12s; }
ul.per li:hover .borrar, ul.per li.on .borrar, .per-der .borrar:focus-visible { opacity: 1; }
.per-der .borrar:hover { background: var(--rojo-claro); color: var(--rojo); }
.per-der .borrar svg { width: 15px; height: 15px; }
ul.per.eligiendo .borrar { display: none; }
.visto { color: var(--verde); }
.visto svg { width: 13px; height: 13px; stroke-width: 2.6; }

/* ---- elegir quienes van en el Excel

   La casilla de cada fila solo se enseña mientras se elige. Siempre a la vista
   hubiera ahorrado un clic, pero cada clic en la lista abre una cedula, y con
   veinticinco filas es facil quitar a alguien sin querer: un error que no se ve
   hasta que falta en el Excel que ya se entrego. */
.va-caja { display: none; }
ul.per.eligiendo li { grid-template-columns: 18px 8px minmax(0, 1fr) auto; }
ul.per.eligiendo .va-caja {
  display: flex; justify-content: center; padding-top: .1rem; cursor: pointer;
}
.va-caja .va { width: 16px; height: 16px; margin: 0; cursor: pointer;
  accent-color: var(--azul); }
.va-caja .va:disabled { cursor: not-allowed; }
.va-caja .va:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* la que no va se apaga mientras se elige: se ve de un barrido quienes van */
ul.per.eligiendo li.fuera,
ul.per.eligiendo li.fuera.lista-revisada { opacity: .45; }
ul.per.eligiendo li.fuera:hover,
ul.per.eligiendo li.fuera.on { opacity: .8; }

/* Fuera de la eleccion, la que no va lo dice en su renglon. La marca se guarda
   con la lectura, y quien vuelva otro dia tiene que verla sin entrar a elegir.
   En ambar: se arregla de un clic, igual que lo demas que va en ese color. */
.doc .tp.fuera { margin-left: .35rem; color: var(--ambar); font-weight: 600;
  letter-spacing: 0; }
ul.per.eligiendo .tp.fuera { display: none; }
/* Mientras se elige quien va en el Excel, las filas del Excel sin cedula se
   quitan de la lista: no hay nada que marcar en ellas -no son cedulas- y una
   fila con la casilla vacia, entre veinticinco con casilla, solo hace dudar. */
ul.per.eligiendo li[data-e="solo_excel"] { display: none; }

/* la barra de elegir, encima de la lista */
.elegir {
  display: flex; flex-direction: column; gap: .45rem; flex-shrink: 0;
  margin: 0 .65rem .45rem; padding: .55rem .6rem;
  background: var(--azul-claro); border: 1px solid var(--azul);
  border-radius: var(--radio-ch);
}
/* display:flex le gana a [hidden]; sin esto la barra no se esconderia nunca */
.elegir[hidden] { display: none; }
.elegir-cab { display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; font-size: .8rem; color: var(--azul); }
.elegir-cuenta { font-size: .76rem; color: var(--texto-2); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.elegir-cuenta b { color: var(--texto); }
.elegir-acc { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.elegir-acc button:not(.b) {
  border: 1px solid var(--borde); background: var(--papel); color: var(--texto-2);
  border-radius: 20px; padding: .2rem .6rem; font-size: .74rem;
  font-family: inherit; cursor: pointer;
}
.elegir-acc button:not(.b):hover { border-color: var(--azul); color: var(--azul); }
.elegir-acc button[hidden] { display: none; }
.elegir-acc .b { margin-left: auto; padding: .28rem .85rem; font-size: .78rem; }

/* "12/25" pegado a Descargar: que nadie entregue una parte creyendo que van
   todas. Sobre el papel y no en blanco fijo, para que en el tema oscuro -donde
   el azul es claro- no quede azul sobre blanco. */
.exportar-cuenta {
  font-size: .7rem; font-weight: 700; line-height: 1.35; padding: 0 .4rem;
  border-radius: 10px; background: var(--papel); color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.exportar-cuenta[hidden] { display: none; }
.menu-elegidas {
  margin: .1rem .1rem .35rem; padding: .4rem .6rem; font-size: .76rem;
  color: var(--ambar); background: var(--ambar-claro); border-radius: var(--radio-ch);
}
.menu-elegidas[hidden] { display: none; }
.menu-lista a.menu-elegir { margin-top: .3rem; padding-top: .6rem;
  border-top: 1px solid var(--borde-suave); }

/* ---- el divisor, ahora vertical */
.divisor {
  flex: 0 0 6px; background: var(--borde); cursor: col-resize; position: relative;
  transition: background .15s;
}
.divisor::after {
  content: ""; position: absolute; top: 50%; left: 50%; height: 40px; width: 3px;
  transform: translate(-50%, -50%); border-radius: 2px; background: var(--suave);
  opacity: .5;
}
.divisor:hover, .divisor.arrastrando { background: var(--azul); }
.divisor:hover::after, .divisor.arrastrando::after { background: #fff; opacity: .9; }

/* ---- derecha: la cedula elegida, a lo alto */
.det { flex: 1; display: flex; min-width: 0; }

.lista-vacia { padding: 1.5rem 1rem; text-align: center; color: var(--suave); font-size: .84rem; }

/* ---- panel de abajo: la cedula elegida */
.panel-ficha { flex: 1 1 auto; min-height: 12rem; display: flex; min-width: 0; }

/* divisor entre las dos mitades */
.divisor {
  flex: 0 0 7px; background: var(--borde); cursor: row-resize; position: relative;
  transition: background .15s;
}
.divisor::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 3px;
  transform: translate(-50%, -50%); border-radius: 2px; background: var(--suave);
  opacity: .5;
}
.divisor:hover, .divisor.arrastrando { background: var(--azul); }
.divisor:hover::after, .divisor.arrastrando::after { background: #fff; opacity: .9; }

/* ----------------------------------------- la fila del Excel, a la derecha
   Ocupa el mismo sitio que la cedula y su ficha: se mira una cosa o la otra. */
.sinced { flex: 1; min-width: 0; overflow-y: auto; padding: 1rem 1.1rem 1.6rem;
  background: var(--fondo); display: flex; flex-direction: column; gap: .8rem; }
.sinced[hidden] { display: none; }
.sc-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.sc-cab h2 { font-size: 1.15rem; }
.sc-doc { margin: .15rem 0 0; font-size: .82rem; color: var(--suave);
  font-variant-numeric: tabular-nums; }
.sc-cerrar { flex: none; border: 0; background: none; color: var(--suave);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.sc-cerrar:hover { color: var(--rojo); }
/* El aviso va en la misma barra que el "en que quedo" de las cedulas, pero sin
   su margen: aqui el hueco lo pone la caja. */
.sinced .estado-grande { margin: 0; }

/* ------------------------------------------------- menores de edad para la ficha
   Lo unico de esta pantalla que se dice a tamano de titular: no es un dato que
   no cuadre, es una persona que no puede estar en la ficha. */
.alerta-menor {
  display: flex; align-items: center; gap: .8rem; margin: 0 0 .7rem;
  padding: .85rem 1rem; border-radius: var(--radio);
  background: var(--rojo-claro); border: 2px solid var(--rojo);
}
.am-ico { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--rojo); color: #fff;
  font-size: 1.4rem; font-weight: 800; }
.am-txt { display: flex; flex-direction: column; min-width: 0; }
.am-txt > b { font-family: var(--fuente-tit); font-size: 1.15rem; color: var(--rojo);
  letter-spacing: -.01em; text-transform: uppercase; }
.am-txt > span { font-size: .85rem; color: var(--texto-2); }
.am-txt b { color: var(--rojo); }
.tp.prohibido { background: var(--rojo); color: #fff; font-weight: 700; }
.per li.menor { border-left: 4px solid var(--rojo); }
.filtro-menores b { background: var(--rojo-claro); color: var(--rojo); }
.aviso-menores { margin: 0 .6rem .4rem; }

/* ---- visor de la imagen */
.visor { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--visor); }
/* Con el menu de la izquierda el visor quedo mas estrecho, y «Frente y reverso»
   se partia en tres renglones. Ahora cada boton va en una sola linea y, si no
   caben todos, la barra baja a una segunda fila en vez de apretarlos. */
.vbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: .4rem .5rem; padding: .4rem .6rem; background: var(--visor-2); flex-shrink: 0; }
.tabs button { white-space: nowrap; }
.vbar button {
  background: rgba(255,255,255,.09); color: #cfd8e3; border: 0;
  border-radius: 6px; padding: .3rem .6rem; font-size: .78rem;
  font-family: inherit; cursor: pointer; transition: background .14s;
  display: inline-flex; align-items: center;
}
.vbar button:hover { background: rgba(255,255,255,.18); color: #fff; }
.vbar button.on { background: var(--azul); color: #fff; }
.vbar button svg { width: 15px; height: 15px; }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.vbar-der { display: flex; gap: .3rem; }

/* El 'safe' de aqui no es un adorno: es lo unico que deja llegar al borde de
   arriba de la hoja. Centrando a secas, cuando la hoja es mas grande que el
   hueco -que es lo normal en cuanto se acerca- el sobrante se reparte por los
   cuatro lados, y la mitad de arriba y la de la izquierda quedan FUERA de lo
   que se puede desplazar: por mucho que se arrastre, no se llega. Con 'safe',
   en cuanto deja de caber se alinea al principio y todo queda alcanzable. */
.lienzo { flex: 1; overflow: auto; display: grid;
  align-items: safe center; justify-items: safe center;
  padding: 1rem; cursor: grab; }
.lienzo.arrastrando { cursor: grabbing; }
.marco { position: relative; display: inline-block; line-height: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.35); border-radius: 4px; overflow: hidden; }
.marco img { display: block; max-width: 100%; height: auto; background: #fff;
  user-select: none; -webkit-user-drag: none; }
.cajas { position: absolute; inset: 0; pointer-events: none; }
.caja {
  position: absolute; border: 2px solid #ffd23f; border-radius: 3px;
  background: rgba(255,210,63,.18);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.42);
  animation: aparece .18s ease-out;
}
@keyframes aparece { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; } }
.pista-visor { margin: 0; padding: .4rem .8rem; background: var(--visor-2);
  color: #8b97a6; font-size: .74rem; text-align: center; flex-shrink: 0; }

/* ---- panel de campos */
.campos { width: 408px; flex-shrink: 0; background: var(--papel);
  border-left: 1px solid var(--borde); display: flex; flex-direction: column;
  overflow-y: auto; }
/* El nombre y el numero. Antes esto era una fila con las pastillas de estado
   a la derecha; ahora el estado tiene su propia barra debajo y aqui solo queda
   quien es la persona, en una columna. */
.ch { padding: .85rem 1rem .1rem; }
.ch h2 { font-size: 1rem; letter-spacing: -.01em; }
.ch-doc { margin: .1rem 0 0; font-size: .8rem; color: var(--suave);
  font-variant-numeric: tabular-nums; }
/* En que quedo esta cedula, dicho para que se vea.

   Antes eran tres pastillas de 0.7rem apiladas en el rincon de arriba a la
   derecha: el dato mas importante de la ficha, escrito en la letra mas chica de
   la pantalla y en el sitio donde menos mira nadie. Ahora es una barra ancha
   debajo del nombre, del color de su estado, que se lee desde lejos. */
.estado-grande {
  display: flex; align-items: center; gap: .6rem;
  margin: .5rem 1rem .1rem; padding: .55rem .75rem;
  border-radius: var(--radio-ch); border-left: 4px solid var(--rail, var(--borde));
  background: var(--tinte, var(--papel-2));
}
.estado-grande .eg-ico {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rail, var(--suave)); color: var(--papel);
  font-weight: 800; font-size: .95rem; line-height: 1;
}
.estado-grande .eg-txt { min-width: 0; }
.estado-grande .eg-tit {
  display: block; font-size: 1rem; font-weight: 800; line-height: 1.15;
  color: var(--rail, var(--texto)); letter-spacing: -.01em;
}
.estado-grande .eg-sub {
  display: block; font-size: .78rem; color: var(--texto-2); margin-top: .1rem;
}
.estado-grande[data-e="ok"] {
  --rail: var(--verde); --tinte: var(--verde-claro);
}
.estado-grande[data-e="completada"] {
  --rail: var(--verde); --tinte: var(--verde-claro);
}
.estado-grande[data-e="revisar"] {
  --rail: var(--rojo); --tinte: var(--rojo-claro);
}
.estado-grande[data-e="sin_listado"] {
  --rail: var(--rojo); --tinte: var(--rojo-claro);
}
/* Sin Excel de inscritos: leida, sin nada con que compararla. Azul, no alarma. */
.estado-grande[data-e="leida"] {
  --rail: var(--azul); --tinte: var(--azul-claro);
}
/* En una ficha del celular, lo que no cuadra con el Excel se mira, no asusta. */
.cuerpo.con-tarjetas .estado-grande[data-e="revisar"],
.cuerpo.con-tarjetas .estado-grande[data-e="sin_listado"] {
  --rail: var(--ambar); --tinte: var(--ambar-claro);
}
/* Una fila del Excel de la que no llego la cedula no es el estado de una cedula,
   pero se dice en esta misma barra y en ambar: hay que mirarlo, no esta mal leido. */
.estado-grande[data-e="solo_excel"] {
  --rail: var(--ambar); --tinte: var(--ambar-claro);
}

/* El boton de enseñar los datos que no se verifican contra el listado. */
.ver-mas {
  grid-column: 1 / -1; justify-self: start;
  margin: .1rem 0 .6rem; padding: .32rem .7rem;
  font-family: inherit; font-size: .78rem; font-weight: 600;
  color: var(--texto-2); background: var(--papel-2);
  border: 1px solid var(--borde); border-radius: 20px; cursor: pointer;
}
.ver-mas:hover { border-color: var(--suave); color: var(--texto); }

/* La nota de los datos que no se comparan con el listado. Sale SOLO al abrir
   "ver mas datos", y va justo encima de ellos.

   Es una nota, no una tira: en ambar suave, sin icono de alerta y sin boton.
   No frena a nadie, no cuenta como trabajo pendiente y no pinta la cedula de
   rojo; solo avisa de que en el trozo que se acaba de abrir hay algo que no
   cuadra consigo mismo. */
.nota-ocultos {
  grid-column: 1 / -1; margin: .2rem 0 .8rem;
  background: color-mix(in srgb, var(--ambar-claro) 70%, var(--papel));
  border: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
  border-left: 3px solid var(--ambar);
  border-radius: var(--radio-ch); padding: .55rem .7rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.nota-ocultos > b { font-size: .8rem; color: var(--ambar); }
.nota-ocultos .por-que { font-size: .74rem; line-height: 1.45; color: var(--texto-2); }
.nota-ocultos .rara { font-size: .78rem; line-height: 1.4; display: flex;
  flex-wrap: wrap; gap: .35rem; }
.nota-ocultos .rara .de { font-weight: 600; color: var(--texto-2); }
.nota-ocultos .rara .val { color: var(--texto-2); min-width: 0; }

/* ---- tipo de documento, edad y avisos */
.ch-meta { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem 1rem 0; margin: 0; }
.meta { font-size: .72rem; padding: .18rem .5rem; border-radius: var(--radio-ch);
  font-weight: 600; background: var(--papel-2); border: 1px solid var(--borde);
  color: var(--texto-2); }
.meta.tipo { background: var(--azul-claro); border-color: transparent; color: var(--azul);
  font-weight: 700; letter-spacing: .03em; }
.meta.edad { background: var(--verde-claro); border-color: transparent; color: var(--verde); }
.meta.alerta { background: var(--ambar-claro); border-color: transparent; color: var(--ambar); }
.meta.hueco { border-style: dashed; color: var(--suave); font-weight: 500; }

/* ============================================================== confianza
   Cuanto se fia el programa de lo que leyo. Es lo que permite entregar un
   archivo nunca visto sin mentir: las dudosas salen marcadas. */


/* aviso arriba de la lista: por donde empezar cuando llegan cuarenta cedulas */
/* Cuando lo que se ve en pantalla no se acaba de leer, sino que viene de una
   lectura anterior. Va en azul y no en ambar: no es un problema de las cedulas,
   es una nota sobre de donde salen los datos. */
/* ---------------------------------------------------------------------------
   EN QUE QUEDO ESTA CEDULA

   Un solo bloque en lugar de los cuatro que habia -novedad, dudas, decidir y
   rellenar-, todas las tiras cortadas por el mismo patron y separadas nada mas
   que por el color: rojo lo que hay que mirar, ambar lo que se resuelve de un
   boton, verde lo que ya esta.

   La barra de decidir se quito: la diferencia con el listado se cuenta en la
   tira roja y se corrige a mano en la casilla.
   --------------------------------------------------------------------------- */
.festado { margin: .6rem 1rem 0; display: flex; flex-direction: column; gap: .4rem; }

.tira {
  border-radius: var(--radio-ch); padding: .5rem .65rem;
  border: 1px solid transparent; font-size: .8rem; line-height: 1.45;
  display: flex; flex-direction: column; gap: .35rem;
}
.tira .tit { font-weight: 700; font-size: .75rem; letter-spacing: .01em;
  text-transform: uppercase; }
.tira .dice { color: var(--texto-2); }
.tira.mal  { background: var(--rojo-claro);  color: var(--rojo);
  border-color: color-mix(in srgb, var(--rojo) 22%, transparent); }
.tira.ojo  { background: var(--ambar-claro); color: var(--ambar);
  border-color: color-mix(in srgb, var(--ambar) 24%, transparent); }
.tira.bien { background: var(--verde-claro); color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 20%, transparent); }
.tira.paso { background: var(--papel-2); color: var(--texto-2);
  border-color: var(--borde-suave); flex-direction: row; align-items: center;
  justify-content: space-between; gap: .5rem; }
/* el simbolo va delante del titulo sin tener que escribirlo en cada sitio */
.tira.bien .tit::before { content: "\2713\a0"; }
.tira.ojo .tit::before { content: "\26a0\fe0e\a0"; }

/* Version de una sola linea, para los avisos de encima de la lista. Ahi lo que
   escasea es el alto: cada parrafo por encima de la lista se come una cedula de
   las que se ven sin bajar. */
.tira.compacta {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .4rem .55rem;
}
.tira.compacta .tit {
  text-transform: none; letter-spacing: 0; font-size: .78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tira.compacta .botones { flex-shrink: 0; }
.tira.compacta button { padding: .18rem .5rem; font-size: .73rem; }

/* una linea de "campo -> que le pasa": las dudas y el detalle de lo prestado */
.tira .dato { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem;
  font-size: .78rem; }
.tira .dato .de { font-weight: 600; }
.tira .dato .val { color: var(--texto-2); }
.tira .detalle { display: flex; flex-direction: column; gap: .2rem;
  padding-top: .1rem; }

.tira .botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.tira .botones button {
  font-family: inherit; font-size: .76rem; font-weight: 600;
  padding: .3rem .6rem; border-radius: var(--radio-ch);
  border: 1px solid currentColor; background: var(--papel);
  color: inherit; cursor: pointer;
}
.tira .botones button:hover { background: currentColor; color: var(--papel); }
/* currentColor NO vale aqui: en esta misma regla se cambia color, y entonces
   el fondo y la letra salen del mismo color. El boton se veia como un
   rectangulo vacio -asi estaba el de "Tomarlo del Excel"-. Se toma el color de
   la tira del elemento padre, que si conserva el suyo. */
.tira .botones button.principal {
  background: var(--acento, var(--azul)); color: var(--papel);
  border-color: transparent;
}
.tira.mal  .botones button.principal { background: var(--rojo); }
.tira.ojo  .botones button.principal { background: var(--ambar); }
.tira.bien .botones button.principal { background: var(--verde); }
.tira .botones button.principal:hover { filter: brightness(1.12); }
.tira .botones button.flojo { border-color: var(--borde); color: var(--suave); }
/* la tecla que hace lo mismo, para no tener que soltar el teclado */
.tira .botones button.tecla::after {
  content: attr(data-tecla); margin-left: .35rem;
  font-family: var(--fuente-dato); font-size: .68rem; opacity: .6;
}

/* campo que NO salio de la cedula sino del listado: se ve distinto de uno
   leido y distinto de uno escrito a mano, porque las tres cosas no valen igual */
.f.del-excel input[type=text] {
  border-color: var(--ambar); background: var(--ambar-claro); border-style: solid;
}

/* Los sellos de la etiqueta de un campo: de donde salio ese dato. Van en una
   sola regla porque son la misma cosa dicha de tres maneras -lo escribio una
   persona, lo puso el Excel, o el Excel lo confirma- y separarlos ya costo una
   vez que al borrar uno se cayeran los otros dos.

   El tamano del icono NO es decoracion. Un <svg> sin width ni height mide
   300x150 px por defecto, y como estos viven dentro de la etiqueta de un campo,
   uno solo sin medidas abre un agujero de media pantalla entre dos casillas. */
.marca-mano, .marca-excel, .marca-cuadra {
  display: inline-flex; align-items: center; gap: .22rem; margin-left: .38rem;
  font-size: .67rem; font-weight: 700;
  text-transform: none; letter-spacing: 0; vertical-align: baseline;
}
.marca-mano   { color: var(--azul); }
.marca-excel  { color: var(--ambar); }
.marca-cuadra { color: var(--verde); font-weight: 600; }
.marca-mano svg, .marca-excel svg, .marca-cuadra svg {
  width: 11px; height: 11px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.cmp .rot.resuelto { color: var(--verde); font-weight: 600; }

/* El boton que dice que la vista va siguiendo a la lectura, en la barra del
   visor. Late mientras sigue, para que se vea que la pantalla se mueve sola. */
.siguiendo {
  border: 0; border-radius: 20px; padding: .28rem .7rem; cursor: pointer;
  font-family: inherit; font-size: .75rem; font-weight: 600; white-space: nowrap;
  background: rgba(255,255,255,.09); color: #cfd8e3;
}
.siguiendo:hover { background: rgba(255,255,255,.2); color: #fff; }
.siguiendo.on { background: var(--ambar); color: #1b1206; }
.siguiendo.on::before {
  content: "\25cf"; margin-right: .35rem; animation: latido 1.4s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .siguiendo.on::before { animation: none; } }

/* cuanto lleva y cuanto le falta, mientras lee */
.tiempos { font-size: .78rem; color: var(--ambar); opacity: .85;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* punto de la lista cuando la cedula tiene dudas graves */
.pt.dudosa { box-shadow: 0 0 0 3px var(--ambar-claro); }

/* la edad recalculada mientras se corrige la fecha */
.edad-viva { margin-top: .32rem; font-size: .78rem; color: var(--texto-2); }
.edad-viva b { color: var(--verde); font-size: .9rem; }
.edad-viva.hueco { color: var(--suave); }
.edad-viva.mala { color: var(--rojo); }

/* Los campos van en dos columnas: los cortos (tipo, RH, fechas) comparten fila
   y los largos (nombres, ciudad) la ocupan entera. Asi cabe la cedula completa
   sin tener que bajar. */
/* minmax(0,1fr) y no 1fr: si no, el texto de la edad ensancha su columna y la
   de al lado queda apretada */
.lc { padding: .8rem 1rem 1rem; flex: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 .7rem; align-content: start; }
.f { margin-bottom: .95rem; grid-column: 1 / -1; min-width: 0; }
.f.corto { grid-column: span 1; }
/* ojo con el nombre: ya existe un .vacio (la pantalla de subir y Mis fichas) que es flex */
.f.sin-leer input[type=text] { border-style: dashed; }
.f input::placeholder { color: var(--suave); font-style: italic; opacity: .8; }
/* una sola linea siempre: si un rotulo se parte en dos, la fila de al lado le
   queda desalineada */
.f label { display: block; font-weight: 600; font-size: .77rem; margin-bottom: .25rem;
  color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f input[type=text] {
  width: 100%; padding: .55rem .65rem; font-size: .95rem; font-family: inherit;
  color: var(--texto); background: var(--papel-2);
  border: 1px solid var(--borde); border-radius: var(--radio-ch);
  transition: border-color .15s, background .15s;
}
.f input[type=text]:hover { border-color: var(--suave); }
.f input[type=text]:focus { outline: 2px solid var(--azul); outline-offset: -1px;
  border-color: var(--azul); background: var(--papel); }
.f.difiere input { border-color: var(--rojo); background: var(--rojo-claro); }
.f.no_leido input { border-color: var(--ambar); background: var(--ambar-claro); }
.f.tocado input { border-color: var(--verde); background: var(--verde-claro); }

.cmp { margin-top: .32rem; font-size: .78rem; display: flex; align-items: center;
  gap: .4rem; flex-wrap: wrap; }
.cmp .rot { color: var(--suave); }
.cmp .val { font-weight: 600; }
.cmp.difiere .val { color: var(--rojo); }
/* El dato que puso el listado. En verde y con el valor en peso normal: lo que
   se resalta es de donde viene, no lo que decia el papel. */
.cmp.prestado .rot { color: var(--verde); font-weight: 600; }
.cmp.prestado .val { font-weight: 400; color: var(--texto-2); }

/* Por que lo escrito no puede ser: una fecha que no existe, un RH que no es un
   RH. Va debajo de la casilla y en rojo, pero NO impide seguir: quien revisa
   tiene el papel delante y manda sobre el programa. */
.mal-campo {
  margin: .3rem 0 0; font-size: .76rem; line-height: 1.4; color: var(--rojo);
}
.f.mal input { border-color: var(--rojo); }
.f.mal input:focus { outline-color: var(--rojo); }
.usar { background: var(--azul-claro); color: var(--azul); border: 1px solid var(--azul);
  border-radius: 5px; padding: .1rem .45rem; font-size: .72rem; font-family: inherit;
  cursor: pointer; font-weight: 600; }
.usar:hover { background: var(--azul); color: #fff; }
.alt { font-size: .75rem; color: var(--suave); margin-top: .25rem; }
.alt button { background: none; border: 0; color: var(--azul); cursor: pointer;
  text-decoration: underline; font-size: .75rem; font-family: inherit; padding: 0 .2rem; }

.pie { border-top: 1px solid var(--borde); padding: .85rem 1rem;
  background: var(--papel-2); }
.nav { display: flex; gap: .5rem; margin-top: .85rem; }
.nav button { flex: 1; padding: .5rem; border: 1px solid var(--borde);
  background: var(--papel); color: var(--texto-2); border-radius: var(--radio-ch);
  cursor: pointer; font-size: .84rem; font-family: inherit; transition: background .14s; }
.nav button:hover { background: var(--azul-claro); color: var(--azul);
  border-color: var(--azul); }
.atajos { margin: .7rem 0 0; font-size: .72rem; color: var(--suave); text-align: center; }
.atajos b { display: inline-block; background: var(--papel); border: 1px solid var(--borde);
  border-radius: 4px; padding: 0 .25rem; font-weight: 600; margin: 0 .05rem;
  font-size: .7rem; color: var(--texto-2); }

@media (max-width: 1180px) {
  .det { flex-direction: column; }
  .campos { width: auto; border-left: 0; border-top: 1px solid var(--borde); }
  .lista { width: 230px; }
}

/* La fila de "El Excel dice: X" debajo de un campo. Solo informa: se lee lo que
   trae el listado y se teclea al lado, mirando la cedula. El unico boton que
   queda es el de un campo que el OCR no pudo leer -"Tomarlo"-, que no es
   elegir entre dos valores, es ahorrarse escribirlo. */
.botones { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Los tres avisos de encima de la lista -lectura reusada, por donde empezar y
   marcar en bloque- no tienen aspecto propio: son tiras, las mismas que la
   ficha de la derecha. Aqui solo se les da el hueco.

   Antes cada uno iba por su cuenta: un parrafo ambar con el boton metido a
   mitad de frase, una barra verde de ancho completo y un tercero distinto de
   los dos. Tres maneras de decir lo mismo en una columna de 330 pixeles. */
.aviso-reuso, .resumen-dudas, .marcar-ok {
  margin: 0 .65rem .4rem; flex-shrink: 0;
}


/* ------------------------------------------------- ver el Excel en el visor
   El listado se mira en el mismo sitio que la cedula, cambiando de pestana.
   Cuando los dos no coinciden, ver la hoja entera -la fila, sus columnas y sus
   vecinas- explica mucho mas que la linea suelta que cabe al lado del campo. */

.vistas { display: flex; gap: 2px; background: rgba(255,255,255,.08);
  border-radius: 7px; padding: 2px; }
.vistas button {
  border: 0; background: none; color: #cfd8e3; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 600;
  padding: .26rem .7rem; border-radius: 5px; white-space: nowrap;
}
.vistas button:hover { background: rgba(255,255,255,.10); }
.vistas button.puesta { background: var(--papel); color: var(--texto); }

/* La vista del Excel es una columna: arriba la barra de buscar, quieta, y
   debajo la tabla, que es lo unico que se desplaza. Asi la barra no se va al
   bajar por la hoja, y los encabezados pegajosos de la tabla se pegan al borde
   de la tabla y no por debajo de la barra. */
.hoja { flex: 1; display: flex; flex-direction: column; min-height: 0;
  overflow: hidden; background: var(--papel); }
.hoja-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: .8rem; }

.hoja-buscar {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
  padding: .55rem .8rem; background: var(--papel);
  border-bottom: 1px solid var(--borde);
}
.hoja-buscar svg { width: 16px; height: 16px; color: var(--suave); flex-shrink: 0; }
.hoja-buscar input {
  flex: 1; min-width: 0; font-family: inherit; font-size: .86rem;
  color: var(--texto); background: var(--papel-2);
  border: 1px solid var(--borde); border-radius: var(--radio-ch);
  padding: .42rem .6rem;
}
.hoja-buscar input::placeholder { color: var(--suave); }
.hoja-buscar input:focus {
  outline: 2px solid color-mix(in srgb, var(--azul) 40%, transparent);
  outline-offset: 0; border-color: var(--azul);
}
.hoja-limpiar { background: none; border: 0; color: var(--suave); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 0 .2rem; }
.hoja-limpiar:hover { color: var(--texto); }
.hoja-cuenta { font-size: .76rem; color: var(--suave); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.hoja-cuenta.nada { color: var(--ambar); font-weight: 600; }

/* La celda donde esta lo que se busco. En azul, que en esta pantalla es el
   color de "lo que tu señalaste", para no confundirlo con el ambar de la fila
   de la cedula que se esta revisando. */
.hoja-tabla td.coincide {
  background: var(--azul-claro); color: var(--texto);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--azul) 45%, transparent);
}
.hoja-tabla tr.suya td.coincide { box-shadow: inset 0 0 0 1px var(--azul); }
.hoja-cab { font-size: .78rem; color: var(--texto-2); margin-bottom: .5rem;
  font-weight: 600; }
.hoja-vacia { font-size: .85rem; color: var(--suave); padding: .6rem 0; }

.hoja-tabla { border-collapse: collapse; font-size: .82rem; width: 100%; }
.hoja-tabla th, .hoja-tabla td {
  border: 1px solid var(--borde-suave); padding: .3rem .5rem;
  text-align: left; white-space: nowrap;
}
/* Las dos filas de encabezado se quedan pegadas arriba, y la columna de los
   numeros pegada a la izquierda: es lo que hace que una hoja larga se pueda
   recorrer sin perder de vista de que columna es cada cosa. */
.hoja-tabla thead th {
  position: sticky; background: var(--papel-2); font-weight: 700;
  color: var(--texto-2); z-index: 2;
}
.hoja-tabla thead tr.letras th {
  top: 0; height: 20px; padding: .1rem .5rem; text-align: center;
  font-size: .7rem; letter-spacing: .06em; color: var(--suave);
  background: var(--borde-suave);
}
.hoja-tabla thead tr:not(.letras) th { top: 20px; }
.hoja-tabla .nfila, .hoja-tabla thead th:first-child {
  position: sticky; left: 0; z-index: 3;
  color: var(--suave); text-align: right; width: 2.6rem;
  font-variant-numeric: tabular-nums; background: var(--papel-2);
}
.hoja-tabla thead th:first-child { z-index: 4; }
.hoja-suya { color: var(--ambar); }
/* la fila de la cedula que se esta revisando */
.hoja-tabla tr.suya td {
  background: var(--ambar-claro); font-weight: 700; color: var(--texto);
  box-shadow: inset 0 1px 0 var(--ambar), inset 0 -1px 0 var(--ambar);
}
.hoja-tabla tr.suya td:first-child { color: var(--ambar); }

/* El aviso de las lecturas viejas, encima del historial.

   Dentro de cada una hay cedulas escaneadas de personas de verdad. El programa
   no las borra por su cuenta -eso seria borrarle a alguien su trabajo sin
   preguntar- pero callarselas tampoco vale: se acumulan sin que nadie se de
   cuenta. Va en ambar, no en rojo: no es un error, es una recomendacion. */
.viejas {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 .9rem; padding: .65rem .8rem;
  background: var(--ambar-claro);
  border: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
  border-left: 3px solid var(--ambar); border-radius: var(--radio-ch);
}
.viejas-txt { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.viejas-txt b { font-size: .84rem; color: var(--ambar); }
.viejas-txt span { font-size: .78rem; line-height: 1.45; color: var(--texto-2); }
.viejas button {
  flex-shrink: 0; font-family: inherit; font-size: .78rem; font-weight: 600;
  padding: .35rem .75rem; border-radius: var(--radio-ch); cursor: pointer;
  color: var(--rojo); background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--rojo) 45%, transparent);
}
.viejas button:hover { background: var(--rojo); color: var(--papel);
  border-color: transparent; }


/* ---------------------------------------------------- el codigo de barras */
.marca-codigo { margin-left: .4rem; display: inline-flex; align-items: center; gap: .15rem;
  font-size: .68rem; font-weight: 600; color: var(--azul); letter-spacing: 0; }
.marca-codigo svg { width: 11px; height: 11px; stroke-width: 2; }
.cmp.codigo .rot { color: var(--azul); font-weight: 600; }
.cmp.codigo .val { font-weight: 400; color: var(--texto-2); }

/* -------------------------------------------------- la revision en columna */
.columna { flex: 1; display: flex; flex-direction: column; min-height: 0;
  background: var(--papel-2); }
/* display:flex le gana a [hidden]; sin esto la columna no se esconde nunca */
.columna[hidden] { display: none; }
.columna-bar { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem; padding: .45rem .8rem; background: var(--papel);
  border-bottom: 1px solid var(--borde); }
.columna-campos { display: flex; gap: 2px; padding: 2px; background: var(--papel-2);
  border: 1px solid var(--borde); border-radius: var(--radio-ch); }
.columna-campos button { border: 0; background: transparent; color: var(--texto-2);
  font: inherit; font-size: .78rem; padding: .25rem .65rem; border-radius: 4px; cursor: pointer; }
.columna-campos button:hover { color: var(--texto); }
.columna-campos button.puesta { background: var(--azul); color: #fff; font-weight: 600; }
.columna-cuenta { font-size: .76rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.columna-cuerpo { flex: 1; overflow: auto; padding: .45rem .6rem .9rem;
  display: flex; flex-direction: column; gap: .3rem; }
/* Tres columnas fijas: la pagina, el recorte y la casilla. El recorte se lleva
   lo que sobre, que es lo que se mira. */
.col-fila { display: grid; grid-template-columns: 3.4rem minmax(0, 1.25fr) minmax(10rem, 1fr);
  align-items: center; gap: .6rem; padding: .35rem .5rem; background: var(--papel);
  border: 1px solid var(--borde-suave); border-left: 4px solid transparent;
  border-radius: var(--radio-ch); }
.col-fila.on { outline: 2px solid var(--azul); outline-offset: -2px; }
.col-fila.difiere { border-left-color: var(--rojo); }
.col-fila.no_leido { border-left-color: var(--ambar); }
.col-fila.igual, .col-fila.prestado { border-left-color: var(--verde); }
.col-pag { border: 0; background: none; padding: 0; color: var(--suave); font: inherit;
  font-size: .72rem; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.col-pag:hover { color: var(--azul); text-decoration: underline; }
/* El recorte va sobre blanco en los dos temas: es papel escaneado, y sobre fondo
   oscuro los bordes grises del escaneo se veian como una mancha. */
.col-recorte { min-width: 0; height: 54px; display: flex; align-items: center;
  overflow: hidden; background: #fff; border-radius: 4px; }
.col-recorte img { display: block; max-height: 54px; max-width: 100%; object-fit: contain;
  object-position: left center; cursor: zoom-in; }
.col-sin { padding: 0 .5rem; font-size: .74rem; font-style: italic; color: var(--suave); }
.columna .f.col-dato { margin: 0; grid-column: auto; }
.col-nota { display: block; margin-top: .2rem; font-size: .72rem; color: var(--texto-2); }
.col-fila.difiere .col-nota { color: var(--rojo); font-weight: 600; }
.col-fila.igual .col-nota { color: var(--verde); }
@media (max-width: 900px) {
  .col-fila { grid-template-columns: 3rem minmax(0, 1fr); }
  .columna .f.col-dato { grid-column: 1 / -1; }
}

/* ------------------------------------------------ comprobar un Excel entregado */
.comprobar { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem;
  margin: 0 0 .7rem; }
.comprobar-boton { font-family: inherit; font-size: .76rem; font-weight: 600;
  padding: .26rem .6rem; border-radius: var(--radio-ch); cursor: pointer;
  border: 1px solid var(--azul); background: var(--papel); color: var(--azul); }
.comprobar-boton:hover { background: var(--azul); color: var(--papel); }
.comprobar-nota { font-size: .76rem; color: var(--suave); }
.comprobacion { margin: 0 0 .9rem; }

/* ------------------------------------------------- las fichas del celular
   Una tarjeta por aprendiz (app.js, «LAS FICHAS DEL CELULAR, POR TARJETAS»).
   La rejilla ocupa el sitio de la lista, la imagen y los campos; al abrir una
   tarjeta, el detalle de siempre se queda a todo el ancho, sin la lista. */
.tj { display: none; flex: 1; flex-direction: column; min-width: 0; overflow-y: auto;
  background: var(--fondo); }
.cuerpo.en-tarjetas > .tj { display: flex; }
.cuerpo.en-tarjetas > :not(.tj) { display: none !important; }
.cuerpo.con-tarjetas:not(.en-tarjetas):not(.con-lista) > .lista,
.cuerpo.con-tarjetas:not(.en-tarjetas):not(.con-lista) > .divisor { display: none; }

.tj-cab {
  position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: .9rem 1.4rem; padding: 1.3rem 1.7rem 1rem;
  background: linear-gradient(var(--fondo) 82%, transparent);
}
.tj-tit { margin: 0 0 .55rem; font-family: var(--fuente-tit); font-size: 1.25rem; letter-spacing: -.01em; }
.tj-resumen { display: flex; flex-wrap: wrap; gap: .45rem; }
.tj-cifra { display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .75rem;
  border-radius: 999px; background: var(--papel); border: 1px solid var(--borde);
  font-size: .8rem; color: var(--texto-2); }
.tj-cifra b { color: var(--texto); font-variant-numeric: tabular-nums; }
.tj-cifra.e-lista b { color: var(--verde); }
.tj-cifra.e-mirar b { color: var(--ambar); }
.tj-cifra.e-leida { background: var(--azul-claro); border-color: transparent; color: var(--azul); }
.tj-acciones { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tj-buscar { position: relative; display: block; }
.tj-buscar svg { position: absolute; left: .7rem; top: 50%; width: 16px; height: 16px;
  transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.tj-buscar input { width: 16rem; max-width: 100%; padding: .55rem .8rem .55rem 2.1rem;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--papel);
  color: var(--texto); font: inherit; font-size: .87rem; }
.tj-buscar input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }

.tj-rejilla { list-style: none; margin: 0; padding: .3rem 1.7rem 2.2rem; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.tj-t { position: relative; display: flex; background: var(--papel); border: 1px solid var(--borde);
  border-radius: 14px; overflow: hidden; box-shadow: var(--sombra);
  transition: transform .14s, box-shadow .14s, border-color .14s; }
.tj-t:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--azul); }
.tj-t:focus-within { border-color: var(--azul); }
.tj-abrir { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tj-abrir:focus-visible { outline: none; }
.tj-foto { display: block; aspect-ratio: 85.6 / 54; background: var(--visor); overflow: hidden; }
.tj-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tj-foto.sin { display: grid; place-items: center; color: var(--suave); font-size: .8rem; }
.tj-cuerpo { display: flex; flex-direction: column; gap: .12rem; padding: .8rem .95rem .9rem; flex: 1; }
.tj-nom { font-weight: 700; font-size: .96rem; line-height: 1.2; overflow-wrap: anywhere; }
.tj-ape { font-size: .86rem; color: var(--texto-2); overflow-wrap: anywhere; }
.tj-doc { margin-top: .25rem; font-family: var(--fuente-dato); font-size: .76rem; color: var(--texto-2); }
.tj-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap; margin-top: auto; padding-top: .7rem; }
.tj-chip { padding: .2rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 650;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-chip.e-lista { background: var(--verde-claro); color: var(--verde); }
.tj-chip.e-mirar { background: var(--ambar-claro); color: var(--ambar); }
.tj-chip.e-leida { background: var(--azul-claro); color: var(--azul); }
.tj-chip.e-menor { background: var(--rojo-claro); color: var(--rojo); }
.tj-chip.e-gris { background: var(--papel-2); color: var(--suave); }
.tj-caras { display: flex; gap: .25rem; }
.tj-cara { padding: .08rem .42rem; border-radius: 6px; border: 1px dashed var(--borde);
  font-size: .66rem; color: var(--suave); }
.tj-cara.si { border-style: solid; background: var(--papel-2); color: var(--texto-2); }
.tj-visto { position: absolute; top: .55rem; left: .55rem; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--verde); color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.tj-visto svg { width: 15px; height: 15px; stroke-width: 2.6; }
.tj-borrar { position: absolute; top: .5rem; right: .5rem; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(15, 23, 41, .6); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s; }
.tj-borrar svg { width: 17px; height: 17px; }
.tj-t:hover .tj-borrar, .tj-borrar:focus-visible { opacity: 1; }
.tj-borrar:hover { background: var(--rojo); }
.tj-t.faltante { border-style: dashed; background: transparent; box-shadow: none; }
.tj-t.faltante .tj-foto { background: var(--papel-2); }
.tj-vacia { margin: 0 1.7rem; color: var(--texto-2); }
@media (hover: none) { .tj-borrar { opacity: 1; } }
@media (max-width: 640px) {
  .tj-cab { padding: 1rem 1rem .8rem; }
  .tj-rejilla { padding: .2rem 1rem 1.6rem; grid-template-columns: 1fr; }
  .tj-buscar input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tj-t { transition: none; } .tj-t:hover { transform: none; } }