:root {
  --fondo: #101418;
  --panel: #1a2027;
  --borde: #2b3440;
  --texto: #dbe4ee;
  --tenue: #8b98a8;
  --azul: #3d9df2;
  --verde: #35b06f;
  --naranja: #e08a2e;
  --rojo: #d4544f;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 0 34px;
  background: var(--fondo); color: var(--texto);
  font: 13px/1.45 system-ui, "Segoe UI", sans-serif;
}
#pie {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 10px; border-top: 1px solid var(--borde);
  background: var(--fondo); color: var(--tenue);
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.pie-sep { opacity: .5; }
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--borde);
}
h1 { font-size: 15px; margin: 0; }
h2 { font-size: 13px; margin: 4px 0 8px; color: var(--azul); }
h3 { font-size: 12px; margin: 14px 0 6px; color: var(--tenue); }

nav { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
.tab {
  flex: 1; padding: 6px 4px; background: none; border: 1px solid var(--borde);
  border-radius: 6px; color: var(--tenue); cursor: pointer; font-size: 12px;
}
.tab.activo { background: var(--panel); color: var(--texto); border-color: var(--azul); }

.vista { padding: 12px 14px; }
.oculta { display: none !important; }

.badge {
  font-size: 11px; padding: 3px 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--borde); color: var(--tenue);
}
.badge.viva   { color: #fff; background: var(--verde); border-color: var(--verde); }
.badge.caida  { color: #fff; background: var(--rojo);  border-color: var(--rojo); }

label { display: block; margin: 8px 0; font-size: 12px; color: var(--tenue); }
input, select {
  width: 100%; margin-top: 3px; padding: 7px 9px;
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 6px; font-size: 13px;
}
label.check { display: flex; gap: 8px; align-items: flex-start; color: var(--texto); }
label.check input { width: auto; margin-top: 2px; }

button {
  padding: 8px 12px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--panel); color: var(--texto); cursor: pointer; font-size: 12px;
}
button:hover { border-color: var(--azul); }
button.primario { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; width: 100%; margin-top: 10px; }
button.peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; font-weight: 700; }
button:disabled { opacity: .5; cursor: wait; }
.fila-botones { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }

.nota { font-size: 11px; color: var(--tenue); }
.nota.alerta { color: var(--naranja); }
.estado { font-size: 12px; margin: 8px 0; white-space: pre-wrap; }
.estado.err { color: var(--rojo); }
.estado.ok { color: var(--verde); }

.paso { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed var(--borde); }
.dosCol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* calendario */
.campo-cal { margin: 10px 0; }
.cal-label { font-size: 12px; color: var(--tenue); margin-bottom: 4px; }
.cal-resumen {
  padding: 8px 10px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.cal-resumen::after { content: '📅'; opacity: .7; font-weight: 400; }
.mini-cal { margin-top: 6px; background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 8px; }
.mini-cal.oculta { display: none; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 600; font-size: 12px; text-transform: capitalize; }
.cal-nav { padding: 2px 10px; font-size: 15px; line-height: 1; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-size: 10px; color: var(--tenue); padding: 2px 0; }
.cal-day {
  padding: 6px 0; font-size: 12px; border: 1px solid transparent;
  background: none; color: var(--texto); border-radius: 5px; cursor: pointer;
}
.cal-day:hover { border-color: var(--azul); }
.cal-day.sel { background: var(--azul); color: #fff; font-weight: 700; }
.cal-day.inrango { background: rgba(61, 157, 242, .22); }
.cal-day.pasada { opacity: .25; cursor: default; }

/* tarjetas de grupo y de operacion */
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  padding: 10px 12px; margin: 8px 0; cursor: pointer;
}
.tarjeta:hover { border-color: var(--azul); }
.tarjeta.sel { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.tarjeta .tit { font-weight: 700; margin-bottom: 3px; }
.tarjeta .sub { font-size: 11px; color: var(--tenue); }
.tarjeta .txt { font-size: 11px; color: var(--tenue); margin-top: 5px; max-height: 48px; overflow: hidden; }

/* ------------------------------------------- TARJETA DE GRUPO (paso 2)
 * Jerarquia deliberada: el NOMBRE manda, porque es el unico dato con el que se
 * puede confirmar sin equivocarse; la cita desempata entre homonimos; los IDs
 * quedan de ultimos, en gris, para cotejar y no para leer. */
.tarjeta.grp { padding: 12px 14px; }
.grp-nombre { font-size: 16px; font-weight: 700; color: var(--texto); line-height: 1.25; }
.grp-mas { font-size: 12px; font-weight: 400; color: var(--tenue); }
.grp-anon { color: var(--naranja); font-style: italic; }
.grp-gente { font-size: 12px; color: var(--tenue); margin-top: 2px; }
.grp-cita { font-size: 13px; color: var(--texto); margin-top: 7px; }
.grp-cita.dudosa { color: var(--tenue); }
.grp-dudosa {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
  color: var(--naranja); border: 1px solid var(--naranja); border-radius: 8px; padding: 1px 6px;
}
.grp-et { color: var(--tenue); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.grp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.grp-chip {
  font-size: 10px; padding: 2px 8px; border-radius: 8px;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--tenue);
}
.grp-ids {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--borde);
  font-size: 10px; color: var(--tenue); font-variant-numeric: tabular-nums;
}
.tarjeta.grp.sel .grp-nombre { color: var(--azul); }

/* Diagnóstico del paso 2: texto crudo, para leer y copiar */
.diag {
  text-align: left; margin: 10px 0; padding: 9px 11px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 6px;
}
.diag b { color: var(--texto); font-size: 12px; }
.diag .nota { margin: 3px 0 0; word-break: break-word; }
.diag code { font-size: 11px; color: var(--azul); }
.diag .ok-txt { color: var(--verde); font-size: 12px; margin-top: 3px; }
.diag-vent { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--borde); }
.diag-vent code { display: block; margin-top: 2px; color: var(--texto); font-size: 10px; line-height: 1.35; }

@media (min-width: 760px) {
  .grp-nombre { font-size: 17px; }
  .grp-cita { font-size: 14px; }
  .grp-chip, .grp-ids { font-size: 11px; }
}

.op-card { cursor: default; }
.op-card .estado-chip {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 8px; margin-left: 6px; vertical-align: middle;
}
.chip-buscando       { background: var(--verde); color: #fff; }
.chip-pausada,
.chip-pausada-sesion { background: var(--naranja); color: #fff; }
.chip-apartada       { background: var(--azul); color: #fff; }
.chip-sin-confirmar  { background: var(--rojo); color: #fff; }
/* En verificación NO es un final: el monitor sigue trabajando, así que el chip
   se lee como actividad (naranja, no rojo) y late para que no parezca colgado. */
.chip-verificando    { background: var(--naranja); color: #fff; animation: latido 1.6s ease-in-out infinite; }
.chip-detenida       { background: var(--borde); color: var(--texto); }
.op-card .datos { font-size: 11px; color: var(--tenue); margin: 6px 0; }
.op-card .datos b { color: var(--texto); }

/* Contador al proximo check. Al llegar a cero pasa a "buscando" con latido y
   puntos animados, para que se lea como actividad y no como un contador pegado. */
.op-card .datos .prox.buscando {
  color: var(--azul); font-weight: 700;
  animation: latido 1.2s ease-in-out infinite;
}
.op-card .datos .prox.buscando::after {
  content: '…'; display: inline-block; width: 10px; text-align: left;
  animation: puntos 1.2s steps(1, end) infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes puntos {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '…'; }
}
@media (prefers-reduced-motion: reduce) {
  .op-card .datos .prox.buscando,
  .op-card .datos .prox.buscando::after { animation: none; }
}
.op-card .acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.op-card .acciones button { font-size: 11px; padding: 4px 8px; }
.op-card .acciones button.autorizar { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 700; }
.modo-aparta { font-size: 10px; font-weight: 700; color: var(--verde); }

/* -------------------------------------------------- MODO DE LA OPERACION
 * Observacion: la operacion mide y no aparta. Se pinta en azul (el color de lo
 * informativo en esta app) y NUNCA en verde, que aca significa "va a apartar":
 * confundir esos dos estados de un vistazo es justo lo que no puede pasar. */
.modo-observa {
  font-size: 10px; font-weight: 700; color: var(--azul);
  border: 1px solid var(--azul); border-radius: 8px; padding: 2px 8px;
}
.op-card.observa { border-left: 3px solid var(--azul); }

/* Selector de modo del asistente: dos tarjetas, no dos radios sueltos — la
 * eleccion cambia que campos existen, asi que tiene que verse como una
 * bifurcacion, no como una casilla mas del formulario. */
.modos { display: grid; gap: 8px; margin: 10px 0 14px; }
.modo-op {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--panel);
}
.modo-op.sel { border-color: var(--azul); }
.modo-op input { width: auto; flex: 0 0 auto; margin-top: 2px; accent-color: var(--azul); }
.modo-op b { color: var(--texto); }
.modo-op .nota { display: block; margin: 3px 0 0; }

@media (min-width: 760px) {
  .modos { grid-template-columns: 1fr 1fr; }
  .modo-observa { font-size: 12px; }
}
.op-card.exito { border-color: var(--verde); }
/* Acceso rapido al datepicker del portal: boton destacado, aparte de las
   acciones chicas de la operacion. */
.op-card .abrirCal {
  display: block; width: 100%; margin-top: 8px; padding: 9px 12px;
  font-size: 13px; font-weight: 700; text-align: center;
  background: var(--azul); border-color: var(--azul); color: #fff;
}
.op-card .abrirCal:hover { filter: brightness(1.12); }
.op-card .intento {
  font-size: 11px; color: var(--texto); margin: 6px 0;
  background: #0d1117; border: 1px solid var(--borde); border-radius: 6px; padding: 6px 8px;
}
.op-card .intento b { color: var(--azul); }
.op-card .verTraza {
  display: inline-block; margin-top: 5px; font-size: 10px; padding: 2px 8px;
}

.aviso-sesion {
  background: rgba(212, 84, 79, .15); border: 1px solid var(--rojo);
  border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; font-size: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.aviso-sesion button { background: var(--rojo); border-color: var(--rojo); color: #fff; font-weight: 700; font-size: 11px; white-space: nowrap; }

.ritmo { font-size: 11px; padding: 5px 8px 5px 10px; border-radius: 6px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ritmo.normal { color: var(--tenue); border: 1px solid var(--borde); }
.ritmo.turbo { color: #fff; background: var(--naranja); border: 1px solid var(--naranja); font-weight: 700; }
.ritmo button { font-size: 10px; padding: 3px 8px; white-space: nowrap; }
.ritmo.turbo button { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.4); color: #fff; }

/* log */
#filtroLog { margin: 8px 0; }
.ev {
  font-family: Consolas, monospace; font-size: 11px;
  padding: 4px 6px; border-bottom: 1px solid var(--borde); word-break: break-all;
}
.ev .t { color: var(--azul); font-weight: 700; }
.ev.err .t { color: var(--rojo); }
.ev.hit .t { color: var(--verde); }
.ev.dim { opacity: .5; }

/* ==========================================================================
 * Añadidos de la PWA (el resto viene del side panel de la extensión, que ya
 * estaba diseñado para ~360px de ancho = ancho de celular).
 * ========================================================================*/

/* En un teléfono el texto de 13px se lee chico y los botones de 6px de alto no
 * se aciertan con el dedo: la guía de accesibilidad pide 44px de alto mínimo. */
body {
  font-size: 15px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;      /* sin "rebote" raro al llegar al final */
}
/* En pantalla grande no estirar todo a lo ancho: se lee mal */
#app { max-width: 620px; margin: 0 auto; }

header, nav, .vista { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
header { padding-top: max(10px, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 5; background: var(--fondo); }
nav { position: sticky; top: 0; z-index: 4; background: var(--fondo); overflow-x: auto; }
#pie { padding-bottom: calc(7px + env(safe-area-inset-bottom)); }

h1 { font-size: 17px; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }

button, .tab { min-height: 44px; font-size: 14px; }
.tab { flex: 0 0 auto; padding: 6px 12px; }
input, select { min-height: 44px; font-size: 16px; }   /* 16px: menos y iOS hace zoom al enfocar */
.cal-day, .cal-nav { min-height: 38px; min-width: 38px; font-size: 15px; }
.acciones button { margin: 3px 3px 0 0; }

/* --------------------------------------------------------------- ACCESO */
.vista-acceso {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px max(20px, env(safe-area-inset-left));
}
.acceso-caja {
  width: 100%; max-width: 340px; text-align: center;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 26px 20px;
}
.acceso-caja img { margin-bottom: 10px; }
.acceso-caja h1 { margin-bottom: 6px; }
.acceso-caja input { width: 100%; margin: 14px 0 10px; text-align: center; }
.acceso-caja button { width: 100%; }

/* ------------------------------------------------------- ESTADO DE CONEXIÓN */
#conexion.bien { color: var(--verde); }
#conexion.mal  { color: var(--naranja); }
/* Ojo: sin min-height quedaba en 24x11 px — intocable con el dedo. El área
 * táctil llega a 44px con padding aunque el texto siga chico como el resto
 * del pie. */
.enlace {
  background: none; border: 0; margin: -14px 0; padding: 14px 10px;
  min-height: 44px; color: var(--tenue); text-decoration: underline;
  cursor: pointer; font-size: 10px;
}

/* El log en pantallas angostas: que no desborde a lo ancho */
.ev { overflow-wrap: anywhere; }
#agregados { overflow-x: auto; }

/* ==========================================================================
 * PC / tablet — el panel nacio para 360px de ancho. En pantalla grande se
 * aprovecha el espacio: se programa una operacion desde la compu (calendarios
 * y wizard comodos) y se sigue revisando desde el celular con el mismo HTML.
 * ========================================================================*/
@media (min-width: 760px) {
  body { font-size: 15px; }
  #app { max-width: 1500px; padding: 0 12px; }

  /* Rejilla con auto-FIT (no auto-fill): auto-fill deja columnas vacias
   * reservadas y las tarjetas quedan chiquitas en una pantalla ancha; auto-fit
   * colapsa lo que sobra y las dos tarjetas se reparten el 100% del ancho. */
  #listaOps { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; align-items: start; }
  #listaOps .op-card { margin: 0; padding: 16px 18px; }
  #listaOps > .nota { grid-column: 1 / -1; }

  /* con tarjetas grandes, el contenido tambien crece */
  #listaOps .op-card .tit { font-size: 18px; }
  #listaOps .op-card .sub { font-size: 13px; }
  #listaOps .op-card .datos { font-size: 14px; }
  #listaOps .op-card .estado-chip { font-size: 12px; padding: 3px 10px; }
  #listaOps .op-card .acciones button { font-size: 13px; padding: 8px 12px; }
  #listaOps .op-card .intento { font-size: 12px; }

  /* el wizard: los dos calendarios lado a lado */
  #paso3 .campo-cal { display: inline-block; width: calc(50% - 8px); vertical-align: top; margin-right: 6px; }
  #calCita.oculta { display: none !important; }

  /* con mouse los objetivos no necesitan 44px, pero tampoco molestan */
  nav { gap: 6px; }
  .tab { flex: 1 1 auto; }

  /* listas de cuentas y grupos tambien en dos columnas */
  #listaCuentas, #listaGrupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }

  #listaLog { max-height: none; }
}

/* Pantallas muy anchas: que el log no quede en lineas kilometricas */
@media (min-width: 1200px) {
  .ev { max-width: 1100px; }
}

/* ------------------------------------------------- FECHAS DISPONIBLES
 * Reemplaza al boton que abria el portal (pedia login: la cookie del portal es
 * de su dominio y el navegador no la comparte). Estos son los mismos datos que
 * lee el monitor. */
.fechas-panel {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: #0d1117; border: 1px solid var(--borde);
}
.fechas-resumen { font-size: 13px; margin-bottom: 6px; }
.fechas-hit {
  font-size: 13px; font-weight: 700; color: #fff; background: var(--verde);
  border-radius: 6px; padding: 6px 10px; margin: 6px 0;
}
.fechas-mes { margin-top: 8px; font-size: 12px; }
.fechas-dias { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fechas-dias .dia {
  min-width: 30px; text-align: center; padding: 4px 6px; border-radius: 5px;
  background: var(--panel); border: 1px solid var(--borde);
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--tenue);
}
.fechas-dias .dia.mejor { color: var(--texto); border-color: var(--azul); }
.fechas-dias .dia.en-ventana { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 700; }
.fechas-dias .dia.fantasma { opacity: .35; text-decoration: line-through; }

/* Pantallas grandes: mas aire dentro de las tarjetas y de los dias */
@media (min-width: 760px) {
  .fechas-resumen { font-size: 14px; }
  .fechas-dias .dia { min-width: 34px; padding: 5px 8px; font-size: 13px; }
}

/* ------------------------------- INTENTOS Y RITMO POR OPERACION
 * Los intentos son 3 por vida: si bajan del minimo la operacion se detiene
 * sola, asi que el numero va SIEMPRE visible en el titulo de la tarjeta. */
.chip-intentos {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 8px;
  font-size: 10px; font-weight: 700; vertical-align: middle;
  background: var(--panel); border: 1px solid var(--azul); color: var(--azul);
}
.chip-intentos.pocos { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* Cada operacion puede ir a su propio ritmo: un cliente con la cita encima en
 * turbo y el resto tranquilo, sin tocar el ajuste general. */
.op-ritmo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0; padding: 6px 10px; border-radius: 6px;
  font-size: 11px; background: var(--panel); border: 1px solid var(--borde); color: var(--tenue);
}
.op-ritmo.turbo { border-color: var(--naranja); color: var(--naranja); font-weight: 700; }
.op-ritmo button { font-size: 11px; padding: 4px 8px; min-height: 32px; }
.op-ritmo span { flex: 1 1 auto; }

@media (min-width: 760px) {
  .chip-intentos { font-size: 12px; padding: 3px 10px; }
  .op-ritmo { font-size: 13px; }
  .op-ritmo button { font-size: 12px; min-height: 36px; }
}

/* ---------------------------------------------- HORARIO DE TRABAJO */
.dias-semana { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.dia-btn {
  flex: 1 1 auto; min-width: 44px; padding: 8px 6px; font-size: 12px;
  background: var(--panel); border: 1px solid var(--borde); color: var(--tenue); border-radius: 6px;
}
.dia-btn.on { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 700; }

/* ------------------------------------- MAPA DE CALOR DE LIBERACIONES
 * Verde = mas fechas liberadas por hora observada. Gris rayado = sin datos
 * (nadie estaba mirando esa franja), que NO es lo mismo que cero. */
.patrones { font-size: 12px; }
.patrones-tit { font-weight: 700; margin-bottom: 8px; color: var(--texto); }
.cal-fila { display: flex; gap: 2px; align-items: center; margin-bottom: 2px; }
.cal-dia { width: 34px; flex: 0 0 34px; font-size: 11px; color: var(--tenue); }
.cal-celda {
  flex: 1 1 auto; height: 18px; border-radius: 3px;
  border: 1px solid var(--borde); min-width: 8px;
}
.cal-celda.sin {
  border-style: dashed; opacity: .5;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--borde) 3px, var(--borde) 4px);
}
.cal-horas .cal-celda { height: 12px; border: 0; font-size: 9px; color: var(--tenue); text-align: center; }
.patrones-pie { margin-top: 10px; color: var(--tenue); }
.patrones-pie b { color: var(--texto); }
.patrones-top { margin-top: 10px; }
.patrones-top ol { margin: 6px 0 0; padding-left: 20px; color: var(--tenue); }
.patrones-top li { margin: 2px 0; }

@media (min-width: 760px) {
  .cal-celda { height: 24px; }
  .patrones { font-size: 13px; }
}

/* El estado de sesión vive en cada tarjeta (hay varias cuentas a la vez) y se
 * ancla a la derecha del título; el badge de la cabecera pasó a ser un resumen. */
.op-card .tit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.op-card .tit .badge-sesion { margin-left: auto; }
@media (max-width: 420px) {
  .op-card .tit .badge-sesion { margin-left: 0; }   /* en pantalla angosta, que baje en vez de apretar el nombre */
}

/* Las casillas y los radios NO deben crecer a 44px como los campos de texto: se
 * ven como cuadros negros enormes. El área táctil la da la etiqueta, que sí es
 * grande (en el selector de modo, la tarjeta entera). */
input[type="checkbox"],
input[type="radio"] {
  min-height: 0; width: 20px; height: 20px; flex: 0 0 auto;
  accent-color: var(--azul); cursor: pointer;
}
label.check { align-items: center; min-height: 44px; cursor: pointer; }

/* ==========================================================================
 * HISTÓRICO — gráficos sin dependencias.
 * Rampa de un solo tono validada contra este fondo (validate_palette.js):
 * luminosidad monótona, saltos visibles, el extremo claro despega del fondo.
 * Marcas finas, extremos redondeados, ejes discretos: el dato manda, no la tinta.
 * ========================================================================*/
.filtros-historico { margin: 10px 0 16px; }
.filtros-historico label { max-width: 320px; }

/* --- tarjetas de resumen --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tile {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.tile-n { font-size: 26px; font-weight: 700; color: var(--texto); line-height: 1.1; }
.tile-de { font-size: 13px; font-weight: 400; color: var(--tenue); margin-left: 2px; }
.tile-t { font-size: 11px; color: var(--tenue); }

.graf { margin: 0 0 22px; }
.graf h3 { margin: 0 0 4px; color: var(--texto); font-size: 14px; }
.graf .nota { margin: 0 0 10px; }

/* --- barras horizontales --- */
.barras { display: flex; flex-direction: column; gap: 6px; }
.barra-fila { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 8px; }
.barra-et { font-size: 12px; color: var(--tenue); }
.barra-pista { height: 14px; background: rgba(255,255,255,.04); border-radius: 4px; overflow: hidden; }
.barra-fill { display: block; height: 100%; background: #3987e5; border-radius: 0 4px 4px 0; }
.barra-sin {
  display: block; height: 100%; border-radius: 4px; opacity: .5;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--borde) 3px, var(--borde) 4px);
}
.barra-val { font-size: 12px; color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; }

/* --- barras verticales (24 horas) --- */
.barrasv { display: flex; align-items: flex-end; gap: 2px; height: 130px; }
.barrav-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.barrav-pista { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; }
.barrav-fill { width: 100%; background: #3987e5; border-radius: 4px 4px 0 0; }
.barrav-sin {
  width: 100%; height: 100%; opacity: .5;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--borde) 3px, var(--borde) 4px);
}
.barrav-et { font-size: 9px; color: var(--tenue); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* --- mapa de calor --- */
.scroll-x { overflow-x: auto; }
.mapa-calor { min-width: 340px; }
.leyenda { display: flex; align-items: center; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.leyenda .cal-celda { flex: 0 0 auto; width: 16px; }
.ley-sep { width: 10px; }

.top-franjas { margin: 6px 0 0; padding-left: 20px; color: var(--tenue); font-size: 12px; }
.top-franjas li { margin: 3px 0; }
.top-franjas b { color: var(--texto); }

@media (min-width: 760px) {
  .tile-n { font-size: 32px; }
  .tile-t { font-size: 12px; }
  .barra-fila { grid-template-columns: 120px 1fr 80px; }
  .barra-et, .barra-val { font-size: 13px; }
  .barra-pista { height: 18px; }
  .barrasv { height: 170px; gap: 3px; }
  .barrav-et { font-size: 11px; }
  .graf h3 { font-size: 16px; }
}

/* En pantalla ancha los gráficos NO deben estirarse sin límite: una celda de
 * mapa de 57px de ancho por 24 de alto se lee como una barra, no como una
 * franja horaria. Se les pone tope y quedan con proporción legible. */
@media (min-width: 760px) {
  .tiles { max-width: 940px; }
  .barras, .barrasv { max-width: 720px; }
  .mapa-calor { max-width: 760px; min-width: 0; }
  .graf .nota { max-width: 720px; }
  .cal-fila .cal-celda { height: 22px; }
  .cal-horas .cal-celda { height: 14px; }
  .leyenda .cal-celda { height: 16px; }
}

/* ---------------------------------------------- AVISO AL ENTRAR (modal)
 * Un resultado (cita apartada o "revisar a mano") no puede pasar inadvertido
 * porque la notificación se perdió: al abrir la app, esto es lo primero. */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.72);
}
.modal-caja {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 24px 20px;
  max-height: 88vh; overflow-y: auto;
}
.modal-icono { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.modal-caja h2 { color: var(--texto); font-size: 20px; margin: 0 0 4px; }
.modal-quien { color: var(--tenue); font-size: 13px; margin: 0 0 12px; }
.modal-cita {
  font-size: 18px; font-weight: 700; color: var(--verde);
  background: rgba(53,176,111,.12); border: 1px solid var(--verde);
  border-radius: 8px; padding: 12px 10px; margin-bottom: 12px;
}
.modal-caja .nota { text-align: left; margin: 6px 0; }

/* pasos del ensayo: lista a la izquierda, todo visible sin scroll */
.ensayo-pasos {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; font-size: 14px; line-height: 1.35;
}

/* --- casos de éxito: pocos por naturaleza, se leen como una bitácora --- */
.exitos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.exitos li {
  background: var(--panel); border: 1px solid var(--verde);
  border-left-width: 4px; border-radius: 8px; padding: 12px 14px;
}
.exito-cuando { font-size: 12px; color: var(--verde); font-weight: 700; text-transform: capitalize; }
.exito-quien { font-size: 12px; color: var(--tenue); margin-top: 2px; }
.exito-cita { font-size: 16px; font-weight: 700; color: var(--texto); margin: 6px 0 4px; }
.exitos .nota { margin: 0; }

@media (min-width: 760px) {
  .exitos { max-width: 720px; }
  .exito-cuando { font-size: 13px; }
  .exito-cita { font-size: 18px; }
}

/* ==========================================================================
 * TARJETA DE OPERACIÓN — rediseño para celular.
 * El problema: nombre, estado, intentos, modo y sesión competían en el mismo
 * renglón, y los datos del check corrían seguidos separados por puntos en gris
 * de 11px. Resultado: un párrafo, no una ficha. Ahora hay tres alturas claras
 * (nombre / etiquetas / datos) y los valores van en pares etiqueta-valor.
 * ========================================================================*/
.op-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.op-nombre { font-size: 17px; font-weight: 700; color: var(--texto); line-height: 1.25; }
.op-cab .badge-sesion { flex: 0 0 auto; margin-left: 0; }

.op-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.op-chips .estado-chip, .op-chips .chip-intentos { margin-left: 0; }

/* pares etiqueta–valor: se escanean, no se leen */
.datos-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  align-items: baseline; margin: 8px 0;
}
.dg-et { font-size: 12px; color: var(--tenue); }
.dg-v { font-size: 14px; color: var(--texto); font-weight: 600; text-align: right; }
.dg-v.hit { color: var(--verde); }
.dg-v.dg-prox { font-weight: 700; font-variant-numeric: tabular-nums; }
.datos-grid.ficha {
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--borde);
}
.datos-grid.ficha .dg-v { font-weight: 500; }
/* el contador ya trae su propio " · Próximo: ~14s": aquí sobra el prefijo */
.dg-prox .prox::before { content: none; }

@media (min-width: 760px) {
  .op-nombre { font-size: 19px; }
  .dg-et { font-size: 13px; }
  .dg-v { font-size: 15px; }
}

/* La barra de navegación tiene 6 pestañas: en un celular no caben en una fila
 * y se cortaba la última. Mejor que envuelva a que quede una pestaña partida. */
@media (max-width: 620px) {
  nav { flex-wrap: wrap; }
  .tab { flex: 1 1 30%; padding: 8px 6px; font-size: 13px; }
}

/* Ventana vencida: se agotó el rango sin encontrar cupo. No es un error ni un
 * éxito — es una búsqueda que llegó a su fin, y se marca como tal. */
.chip-vencida { background: var(--naranja); color: #fff; }

/* ==========================================================================
 * LEGIBILIDAD EN CELULAR — segunda pasada.
 * El CSS venía del side panel de Chrome, donde todo lo explicativo era de 11px
 * porque el panel medía 360px en una pantalla de escritorio a 30cm de los ojos.
 * En un teléfono en la mano eso es demasiado chico: se sube el piso a 13px y
 * los valores a 16px, que es el tamaño con el que iOS ya no ofrece hacer zoom.
 * ========================================================================*/
@media (max-width: 759px) {
  .nota { font-size: 13px; line-height: 1.5; }
  .sub { font-size: 13px; }
  .estado { font-size: 13px; }
  label { font-size: 13px; }

  .dg-et { font-size: 14px; }
  .dg-v { font-size: 16px; }

  .op-nombre { font-size: 19px; }
  .op-card .estado-chip { font-size: 12px; padding: 3px 10px; }
  .chip-intentos { font-size: 12px; padding: 3px 10px; }
  .modo-aparta { font-size: 12px; }
  .badge, .badge-sesion { font-size: 12px; }
  .op-ritmo { font-size: 13px; }
  .op-card .acciones button { font-size: 13px; padding: 8px 12px; }
  .op-card .abrirCal { font-size: 15px; }
  .op-card .intento { font-size: 13px; }
  .op-card .verTraza { font-size: 12px; padding: 6px 10px; }

  .tarjeta .tit { font-size: 16px; }
  .tarjeta .sub, .tarjeta .txt { font-size: 13px; }

  .fechas-resumen { font-size: 15px; }
  .fechas-hit { font-size: 15px; }
  .fechas-mes { font-size: 14px; }
  .fechas-dias .dia { font-size: 14px; min-width: 34px; padding: 6px 8px; }

  .ev { font-size: 12px; }
  #pie { font-size: 12px; }
  .enlace { font-size: 12px; }
  .tile-t { font-size: 12px; }
  .barra-et, .barra-val { font-size: 13px; }
  .exito-cuando, .exito-quien { font-size: 13px; }
}

/* Pausada porque la clave del portal ya no sirve: no es un fallo del monitor
 * sino algo que solo un humano puede arreglar. Rojo, como corresponde. */
.chip-pausada-login { background: var(--rojo); color: #fff; }

/* --- Lista de números de WhatsApp -------------------------------------- */
/* El país en un selector y el número aparte: tecleado a mano, el "506" se
   olvida o se repite, y un destino mal escrito no da error — el aviso
   simplemente no le llega a nadie. */
.telefonos { margin: 8px 0; }
.tel-fila { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.tel-fila .tel-pais { flex: 0 1 auto; width: auto; min-width: 0; max-width: 52%; }
.tel-fila .tel-num  { flex: 1 1 auto; min-width: 0; }
.tel-quitar {
  flex: 0 0 auto; padding: 0 10px; line-height: 1;
  color: var(--tenue); background: transparent;
}
.tel-quitar:hover { color: var(--rojo); border-color: var(--rojo); }
.tel-agregar { font-size: 12px; padding: 6px 10px; }