:root {
  color-scheme: light dark;
  --fondo: #F7F4EE;
  --superficie: #FFFDF9;
  --tinta: #1D2430;
  --marino: #01203F;
  --sobre-marino: #F7F4EE;
  --secundario: #5F5A4E;
  --linea: #CFC7B6;
  --verde: #2F6B3A;
  --rojo: #9B3A32;
  --rojo-suave: #F4E4DF;
  --ambar: #8A5A12;
  --dato-1: #01203F;
  --dato-2: #7C93AB;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12171F;
    --superficie: #1A212C;
    --tinta: #ECE7DC;
    --marino: #27476B;
    --sobre-marino: #F7F4EE;
    --secundario: #A9A392;
    --linea: #39424F;
    --verde: #79B886;
    --rojo: #E08D82;
    --rojo-suave: #3A2422;
    --ambar: #D9A95C;
    --dato-1: #B9CBDD;
    --dato-2: #5F7C9A;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.45 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
a { color: inherit; }
p { margin: 0.4rem 0; }
ul { padding-left: 1.2rem; margin: 0.4rem 0; }

.secundario { color: var(--secundario); }
.pequeno { font-size: 0.82rem; }
.vencida { color: var(--rojo); font-weight: 600; }
.vacio { padding: 3rem 1rem; text-align: center; color: var(--secundario); }
.aviso-error { color: var(--rojo); min-height: 0; }
.aviso-error:empty { display: none; }
.solo-imprimir { display: none; }

input, select, textarea {
  font: inherit; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 4px; padding: 0.4rem 0.5rem; width: 100%; min-height: 2.25rem;
}
input[type="checkbox"] { width: auto; min-height: 0; }
textarea { resize: vertical; }
:focus-visible { outline: 2px solid var(--dato-2); outline-offset: 1px; }
label { display: block; font-size: 0.85rem; color: var(--secundario); margin-bottom: 0.15rem; }

.boton {
  display: inline-block; font: inherit; color: var(--tinta); background: transparent; border: 1px solid var(--linea);
  border-radius: 4px; padding: 0.4rem 0.8rem; cursor: pointer; text-decoration: none; min-height: 2.25rem; white-space: nowrap;
}
.boton:hover { border-color: var(--secundario); }
.boton.primario { background: var(--marino); color: var(--sobre-marino); border-color: var(--marino); }
.boton.peligro { background: var(--rojo); color: var(--fondo); border-color: var(--rojo); }
.boton:disabled { opacity: 0.6; cursor: default; }
.boton-texto { font: inherit; color: var(--secundario); background: none; border: 0; padding: 0.2rem; cursor: pointer; text-decoration: underline; }
.boton-purga { font: inherit; font-size: 0.85rem; color: var(--secundario); background: none; border: 0; cursor: pointer; text-decoration: underline; margin-left: auto; }
.enlace { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--linea); }

/* Entrada */
.pagina-entrada { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrada { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; max-width: 26rem; }
.entrada-logo { width: 240px; height: auto; display: block; }
.entrada h1 { font-size: 1.4rem; color: var(--secundario); }

/* Encabezado */
.encabezado { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 16px; border-bottom: 1px solid var(--linea); background: var(--fondo); }
.logo { height: 32px; width: auto; display: block; }
.pestanas { display: flex; gap: 0.2rem; flex: 1; min-width: 0; overflow-x: auto; }
.pestana { padding: 0.35rem 0.7rem; text-decoration: none; color: var(--secundario); border-bottom: 2px solid transparent; white-space: nowrap; }
.pestana[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--dato-1); font-weight: 600; }
.usuario { display: flex; align-items: center; gap: 0.5rem; }
.usuario form { margin: 0; }

/* Resumen */
.resumen { padding: 0.7rem 16px; border-bottom: 1px solid var(--linea); background: var(--superficie); }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 1rem; }
.cifra { display: flex; flex-direction: column; }
.cifra span { font-size: 0.8rem; }
.cifra strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.barra { display: flex; gap: 2px; height: 8px; margin-top: 0.5rem; background: var(--linea); border-radius: 4px; overflow: hidden; }
.barra-firmado { background: var(--dato-1); }
.barra-comprometido { background: var(--dato-2); }
.leyenda { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--secundario); margin-top: 0.25rem; }
.muestra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.3rem; }
.muestra-firmado { background: var(--dato-1); }
.muestra-comprometido { background: var(--dato-2); }
.resumen-pie { display: flex; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; margin-top: 0.4rem; align-items: center; }
.conteos { display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; font-size: 0.82rem; color: var(--secundario); }
.conteos strong { color: var(--tinta); }
.contadores { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.contador { font: inherit; font-size: 0.85rem; color: var(--tinta); background: none; border: 1px solid var(--linea); border-radius: 4px; padding: 0.15rem 0.55rem; cursor: pointer; }
.contador:hover { border-color: var(--secundario); }
.contador-alerta { color: var(--rojo); border-color: var(--rojo); }

/* Vistas y filtros */
.vista { padding: 0.8rem 16px 2rem; }
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: flex-end; margin-bottom: 0.8rem; }
.filtro { margin: 0; min-width: 8.5rem; }
.filtro-busqueda { flex: 1 1 14rem; max-width: 24rem; }
.filtro-casilla { display: flex; align-items: center; gap: 0.3rem; margin: 0 0 0.5rem; color: var(--tinta); font-size: 0.9rem; }

/* Tablero */
.tablero { display: flex; gap: 0.6rem; overflow-x: auto; align-items: flex-start; padding-bottom: 0.6rem; }
.columna { flex: 0 0 15.5rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 4px; }
.columna-destino { outline: 2px solid var(--dato-2); }
.columna-salida { opacity: 0.92; }
.columna-encabezado { background: var(--marino); color: var(--sobre-marino); padding: 0.4rem 0.6rem; border-radius: 3px 3px 0 0; min-height: 3.4rem; }
.columna-encabezado h3 { font-size: 0.92rem; }
.columna-datos { display: flex; justify-content: space-between; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.columna-tarjetas { padding: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; min-height: 4rem; }
.tarjeta { background: var(--fondo); border: 1px solid var(--linea); border-radius: 4px; padding: 0.45rem 0.55rem; cursor: grab; }
.tarjeta-atorada { border-left: 3px solid var(--ambar); }
.tarjeta-vencida { border-left: 3px solid var(--rojo); }
.tarjeta-nombre { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; width: 100%; overflow-wrap: anywhere; }
.tarjeta-nombre:hover { text-decoration: underline; }
.tarjeta-firma { font-size: 0.85rem; overflow-wrap: anywhere; }
.tarjeta-fila { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: center; font-size: 0.85rem; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.tarjeta-fila .marca:first-of-type { margin-left: auto; }
.tarjeta-fila.secundario .marca:first-of-type { margin-left: 0; }
.marca { font-size: 0.72rem; border: 1px solid var(--linea); border-radius: 3px; padding: 0 0.3rem; color: var(--secundario); }
.marca-atorado { color: var(--ambar); border-color: var(--ambar); }
.mover-a { display: none; margin: 0.35rem 0 0; font-size: 0.78rem; }
.plegar-salidas { flex: 0 0 auto; font: inherit; color: var(--secundario); background: none; border: 1px dashed var(--linea); border-radius: 4px; padding: 0.7rem 0.6rem; cursor: pointer; white-space: nowrap; }

/* Tabla */
.tabla-marco { overflow-x: auto; }
.tabla { border-collapse: collapse; width: 100%; background: var(--superficie); font-size: 0.88rem; }
.tabla th, .tabla td { border-bottom: 1px solid var(--linea); padding: 0.35rem 0.5rem; text-align: left; vertical-align: middle; }
.tabla th { background: var(--marino); color: var(--sobre-marino); font-weight: 600; white-space: nowrap; }
.orden { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tabla select, .tabla input { min-height: 1.9rem; padding: 0.15rem 0.3rem; font-size: 0.85rem; min-width: 7.5rem; }
.tabla td[data-col="accion"] input { min-width: 12rem; }
.tabla td[data-col="dias"] .marca { margin-left: 0.3rem; }
.fila-vencida { background: var(--rojo-suave); }
.tabla-fija td { font-variant-numeric: tabular-nums; }
.fila-inactiva td { color: var(--secundario); }

/* Panel de detalle */
.panel-fondo { position: fixed; inset: 0; background: rgba(10, 14, 20, 0.35); z-index: 10; }
.panel { position: fixed; inset: 0 0 0 auto; width: min(38rem, 100%); background: var(--fondo); border-left: 1px solid var(--linea); z-index: 11; display: flex; flex-direction: column; }
.panel-encabezado { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 16px; border-bottom: 1px solid var(--linea); }
.panel-encabezado h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.guardado { font-size: 0.8rem; color: var(--verde); }
.guardado-error { color: var(--rojo); }
.panel-contenido { overflow-y: auto; padding: 0.4rem 16px 2rem; flex: 1; }
.panel-seccion { padding: 0.8rem 0; border-bottom: 1px solid var(--linea); }
.panel-seccion h3 { margin-bottom: 0.5rem; }
.panel-seccion:last-child { border-bottom: 0; }
.panel-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rejilla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.8rem; }
.campo-ancho { grid-column: 1 / -1; }
.etapa-linea { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: center; }
.etapa-linea .boton { margin-left: auto; }
.conflicto { border: 1px solid var(--rojo); background: var(--rojo-suave); border-radius: 4px; padding: 0.6rem; margin: 0.6rem 0; }
.materiales { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.materiales li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--linea); }
.bitacora { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.bitacora li { padding: 0.45rem 0; border-top: 1px solid var(--linea); }
.bitacora-cabeza { display: flex; gap: 0.4rem; }
.bitacora-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.fila-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.4rem; }

/* Diálogos y formularios */
.dialogo { border: 1px solid var(--linea); border-radius: 6px; background: var(--fondo); color: var(--tinta); padding: 1rem; width: min(28rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.dialogo-ancho { width: min(36rem, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(10, 14, 20, 0.45); }
.dialogo h2 { margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.formulario > label, .campos-apilados > label { margin-top: 0.5rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-top: 0.8rem; }
.acciones-izq { justify-content: flex-start; }

.avisos { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.4rem; z-index: 40; width: min(30rem, calc(100vw - 32px)); }
.aviso { background: var(--marino); color: var(--sobre-marino); border-radius: 4px; padding: 0.5rem 0.8rem; }
.aviso-error { }
.aviso.aviso-error { background: var(--rojo); color: var(--fondo); }

/* Análisis y configuración */
.bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: 4px; padding: 0.9rem; margin-bottom: 0.9rem; }
.bloque h2 { margin-bottom: 0.3rem; }
.bloque .tabla { background: transparent; margin-top: 0.5rem; }
.configuracion { max-width: 56rem; }
.analisis { max-width: 60rem; }
.grafica { display: block; width: 100%; max-width: 620px; margin-top: 0.5rem; }
.grafica-zona { fill: transparent; }
.grafica-zona:hover { fill: var(--linea); fill-opacity: 0.25; }
.grafica-barra { fill: var(--dato-1); pointer-events: none; }
.grafica-texto, .grafica-valor { font: 12px var(--sans); pointer-events: none; }
.grafica-texto { fill: var(--secundario); }
.grafica-valor { fill: var(--tinta); font-variant-numeric: tabular-nums; }

/* Teléfono */
@media (max-width: 760px), (pointer: coarse) {
  .mover-a { display: block; }
  .tarjeta { cursor: default; }
}

@media (max-width: 760px) {
  .encabezado { gap: 0.5rem; }
  .logo { height: 26px; }
  .pestanas { order: 3; flex-basis: 100%; }
  .usuario { margin-left: auto; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra strong { font-size: 1.1rem; }
  .conteos { display: none; }
  .filtro { flex: 1 1 42%; min-width: 0; }
  .filtro-busqueda { flex-basis: 100%; max-width: none; }
  .columna { flex-basis: 82vw; }
  .tablero { scroll-snap-type: x proximity; }
  .columna { scroll-snap-align: start; }
  .panel { width: 100%; border-left: 0; }
  .rejilla-campos { grid-template-columns: minmax(0, 1fr); }
  .grafica-texto, .grafica-valor { font-size: 14px; }

  /* La tabla se vuelve lista de tarjetas compactas. */
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { border: 1px solid var(--linea); border-radius: 4px; margin-bottom: 0.5rem; padding: 0.4rem 0.5rem; background: var(--superficie); }
  .tabla tr.fila-vencida { background: var(--rojo-suave); }
  .tabla td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.4rem; align-items: center; border: 0; padding: 0.12rem 0; overflow-wrap: anywhere; }
  .tabla td::before { content: attr(data-etiqueta); color: var(--secundario); font-size: 0.78rem; }
  .tabla td:empty { display: none; }
  .tabla td[data-col="nombre"] { display: block; font-size: 1rem; }
  .tabla td[data-col="nombre"]::before { content: none; }
  .tabla select, .tabla input, .tabla td[data-col="accion"] input { min-width: 0; }
}

/* Impresión: una página limpia de Análisis. */
@media print {
  :root { --fondo: #fff; --superficie: #fff; --tinta: #000; --marino: #fff; --sobre-marino: #000; --secundario: #333; --linea: #999; --dato-1: #01203F; }
  body { font-size: 10.5px; background: #fff; }
  .encabezado, #resumen, .no-imprimir, .avisos { display: none !important; }
  .solo-imprimir { display: block; font-size: 15px; margin-bottom: 6px; }
  .vista { padding: 0; }
  .analisis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; }
  .bloque { margin: 0; padding: 6px; border: 0; break-inside: avoid; }
  .bloque h2 { font-size: 12px; }
  .grafica { max-height: 110px; }
  .tabla { font-size: 9.5px; }
  .tabla th { border-bottom: 1px solid #000; }
  @page { size: letter; margin: 12mm; }
}