/* ═══════════════════════════════════════════════════════════════════════════
   BRAIN · panel
   Modo Operate: esto se escanea y se opera, no se lee. La marca vive en los
   detalles precisos, no en decoración.
   Paleta medida del logotipo de VIVVO fit. Tema claro únicamente.
   Los tres estados de aforo están validados para daltonismo y separación:
   además del color, SIEMPRE llevan cifra y texto.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* marca (medida del logotipo) */
  --pizarra:  #373643;
  --menta:    #95C2B1;
  --salvia:   #6B8F88;
  --arena:    #E9E4DA;
  --crema:    #F9F8F4;
  --piedra:   #B4AEA2;
  --grafito:  #636363;

  /* superficies */
  --lienzo:   #F5F3EE;
  --panel:    #FFFFFF;
  --hueco:    #EFEBE2;
  --linea:    #E2DCCF;
  --linea-sutil: #EDE8DD;

  /* tinta */
  --tinta:      #373643;
  --tinta-2:    #55545F;
  --tinta-3:    #837F8C;

  /* estados de aforo — validados: ΔE normal 25.8, protan 16.2 */
  --libre:    #1F7F57;
  --justo:    #D99A1C;
  --completo: #A33A1F;
  --alerta:   #9E4F52;
  /* versiones para texto (el ámbar puro no llega a contraste sobre crema) */
  --libre-t:    #186545;
  --justo-t:    #8A6011;
  --completo-t: #8C3219;

  /* tintes de fondo de celda: el color presente sin gritar */
  --libre-bg:    #EAF3EE;
  --justo-bg:    #FAF1DE;
  --completo-bg: #F6E8E3;

  --sans: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* escala de 4 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --r-s: 4px; --r-m: 7px; --r-l: 11px;

  --sombra-1: 0 1px 2px rgba(55, 54, 67, .05), 0 2px 8px rgba(55, 54, 67, .04);
  --sombra-2: 0 2px 4px rgba(55, 54, 67, .06), 0 8px 24px rgba(55, 54, 67, .07);

  --curva: cubic-bezier(.16, 1, .3, 1);   /* ease-out exponencial */
}

/* ── superficies del navegador: lo que no dibujas también es el diseño ── */
::selection { background: var(--menta); color: var(--pizarra); }
* { scrollbar-width: thin; scrollbar-color: var(--piedra) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--piedra); border-radius: 99px;
  border: 3px solid var(--lienzo); }
*::-webkit-scrollbar-thumb:hover { background: var(--salvia); }
:focus-visible { outline: 2px solid var(--salvia); outline-offset: 2px; border-radius: var(--r-s); }
input, select, button { accent-color: var(--salvia); }
a { color: var(--salvia); text-underline-offset: 3px; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--lienzo);
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; color: var(--tinta); font-weight: 600; text-wrap: balance;
  letter-spacing: -.012em; }
p { margin: 0; }
button { font: inherit; }

/* ══════════════════════════════════════════════════════ ESTRUCTURA ══ */
/* Los módulos viven a la izquierda, como en el portal de CIFRA: una columna
   fija que no se mueve al bajar por el contenido. En pantalla estrecha no
   desaparecen ni se esconden detrás de una hamburguesa — se encogen a solo
   iconos. El sitio de los módulos no cambia nunca; cambia lo que cabe. */
.app { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.tronco { display: grid; grid-template-rows: auto 1fr; min-width: 0; }

.modulos {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); border-right: 1px solid var(--linea);
  padding: var(--e4) var(--e3) var(--e5);
  display: flex; flex-direction: column; gap: var(--e5);
  z-index: 35;
}
.modulos .marca { padding: 0 var(--e2) var(--e1); }

.grupo-mod { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tit-grupo { font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--tinta-3); padding: 0 var(--e2) var(--e2); }

.modulos button {
  position: relative; display: flex; align-items: center; gap: var(--e3);
  border: none; background: none; cursor: pointer; text-align: left;
  color: var(--tinta-2); font-size: .92rem; font-weight: 600;
  padding: 9px var(--e3); border-radius: var(--r-m); min-width: 0;
  transition: background .16s var(--curva), color .16s var(--curva);
}
.modulos button .ic { flex: none; color: var(--tinta-3); transition: color .16s var(--curva); }
.modulos button .etq-mod { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.modulos button:hover { background: var(--hueco); color: var(--tinta); }
.modulos button:hover .ic { color: var(--salvia); }
/* el módulo abierto: fondo pizarra. No hace falta más — es el único oscuro */
.modulos button[aria-selected="true"] { background: var(--pizarra); color: var(--crema); }
.modulos button[aria-selected="true"] .ic { color: var(--menta); }
.modulos .cuenta { margin-left: auto; flex: none; font-family: var(--mono); font-size: .7rem;
  font-weight: 600; background: var(--completo); color: #fff; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 99px; display: inline-flex; align-items: center;
  justify-content: center; }
.modulos .cuenta.amarilla { background: var(--justo); color: var(--pizarra); }
.modulos .cuenta[hidden] { display: none; }

/* ── barra superior: ya sin la marca, que se ha ido a la izquierda ── */
.barra {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  padding: var(--e3) var(--e5);
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  min-height: 56px;
}
.marca { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.marca .wm { font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--tinta); line-height: 1; white-space: nowrap; }
.marca .wm i { font-style: normal; font-weight: 300; font-size: .56em; color: var(--tinta-3); }
.marca .prod { font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--salvia); padding-left: var(--e2);
  border-left: 1px solid var(--linea); margin-left: var(--e1); }

.barra-fin { margin-left: auto; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

/* dónde estás. En móvil es la única etiqueta del módulo que se ve */
.donde { font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--tinta-2); white-space: nowrap; }

/* frescura del espejo: tiene que decir si el dato no es de ahora */
.frescura { display: inline-flex; align-items: center; gap: var(--e2);
  font-size: .78rem; color: var(--tinta-3); }
.frescura .pulso { width: 7px; height: 7px; border-radius: 99px; background: var(--libre); flex: none; }
.frescura[data-fresco="no"] { color: var(--justo-t); }
.frescura[data-fresco="no"] .pulso { background: var(--justo); }

.sel-centro { position: relative; display: flex; align-items: center; }
select.centro {
  appearance: none; font-family: var(--sans); font-size: .9rem; font-weight: 600;
  color: var(--tinta); background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-m); padding: var(--e2) var(--e6) var(--e2) var(--e3);
  cursor: pointer; max-width: 15rem;
}
select.centro:hover { border-color: var(--piedra); }
.sel-centro .flecha { position: absolute; right: var(--e3); pointer-events: none; color: var(--tinta-3); }

/* aviso de demo: honesto y visible, sin robar protagonismo */
.aviso-demo.ojo { color: var(--justo-t); background: var(--justo-bg); }
.aviso-demo { font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinta-3); background: var(--hueco);
  padding: var(--e1) var(--e2); border-radius: var(--r-s); }

/* ── zona de trabajo ── */
main { padding: var(--e5); display: grid; gap: var(--e5); align-content: start;
  max-width: 1320px; margin: 0 auto; width: 100%; min-width: 0; }
/* En grid y flex los hijos traen min-width:auto, y el cuadrante (ancho fijo,
   con su propio scroll) estiraría la página entera. Se anula en la cadena. */
main > *, .vista, .vista > *, .cabecera, .cifras, .cuadrante-caja, .barra, .barra-fin,
.tronco, .modulos, .grupo-mod,
.cuadrante-scroll, .bloque, .lista, .item, .item > * { min-width: 0; }
.vista[hidden] { display: none; }

/* ══════════════════════════════════════════════════════ CIFRAS ══ */
/* No es la fila de KPIs de plantilla: la cifra principal manda y las demás
   la acompañan en línea, con su unidad, porque se leen juntas. */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap; }
.titulo-zona h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.1; }
.titulo-zona p { color: var(--tinta-3); font-size: .9rem; margin-top: var(--e1); }

.cifras { display: flex; gap: var(--e6); flex-wrap: wrap; }
.cifra { display: flex; flex-direction: column; gap: 2px; }
.cifra .v { font-size: 2rem; font-weight: 700; color: var(--tinta); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra .v .u { font-size: .5em; font-weight: 600; color: var(--tinta-3); margin-left: 2px; }
.cifra .k { font-size: .78rem; color: var(--tinta-3); }
.cifra.destaca .v { color: var(--salvia); }

/* ═════════════════════════════════════════════ EL CUADRANTE ══ */
/* Es como piensa un centro: horas en vertical, días en horizontal.
   El estado va en el tinte de la celda y en su barra, nunca solo en un borde. */
.cuadrante-caja { background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-l); box-shadow: var(--sombra-1); overflow: hidden; }
.cuadrante-cab { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding: var(--e4) var(--e5) var(--e3); flex-wrap: wrap; }
.cuadrante-cab h2 { font-size: 1.02rem; }
.leyenda { display: flex; gap: var(--e4); flex-wrap: wrap; }
.leyenda span { display: inline-flex; align-items: center; gap: var(--e2);
  font-size: .78rem; color: var(--tinta-3); }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ── mover la semana ──
   Los botones se apagan donde se acaba la copia del horario, y el pie de abajo
   dice hasta dónde llega: una semana vacía por no estar sincronizada se ve
   igual que una sin clases, y no es lo mismo.                              */
.mover-semana { display: flex; gap: var(--e2); align-items: center; }
.mover-semana button {
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  min-width: 34px; padding: 6px 10px; border-radius: var(--r-s);
  border: 1px solid var(--linea); background: var(--panel); color: var(--tinta-2);
  transition: border-color .16s var(--curva), background .16s var(--curva);
}
.mover-semana button.suave { font-weight: 500; }
.mover-semana button:hover:not(:disabled) { border-color: var(--salvia); background: var(--crema); }
.mover-semana button:disabled { opacity: .4; cursor: default; }
.mover-semana button:focus-visible { outline: 2px solid var(--pizarra); outline-offset: 2px; }
.nota-espejo {
  margin: 0; padding: 0 var(--e5) var(--e4);
  font-size: 12px; line-height: 1.5; color: var(--tinta-3); max-width: 78ch;
}

.cuadrante-scroll { overflow-x: auto; padding: 0 var(--e5) var(--e5); }
.cuadrante { display: grid; gap: var(--e1); min-width: 640px; }
.cuadrante .fila-cab, .cuadrante .celda-hora { font-family: var(--mono); font-size: .72rem;
  color: var(--tinta-3); display: flex; align-items: center; }
.cuadrante .fila-cab { justify-content: center; padding-bottom: var(--e2);
  text-transform: uppercase; letter-spacing: .07em; }
.cuadrante .fila-cab b { color: var(--tinta); font-weight: 700; font-size: 1.15em; margin-left: 4px; }
.cuadrante .fila-cab[data-hoy="si"] { color: var(--salvia); }

.celda {
  position: relative; border: 1px solid var(--linea-sutil); border-radius: var(--r-m);
  background: var(--panel); padding: var(--e2) var(--e2) 7px; min-height: 58px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e1);
  cursor: pointer; text-align: left; width: 100%;
  transition: transform .18s var(--curva), box-shadow .18s var(--curva), border-color .18s var(--curva);
}
.celda:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); border-color: var(--piedra); }
.celda:active { transform: translateY(0); }
.celda.vacia { background: transparent; border-style: dashed; border-color: var(--linea-sutil);
  cursor: default; min-height: 58px; }
.celda.vacia:hover { transform: none; box-shadow: none; border-color: var(--linea-sutil); }

.celda[data-estado="libre"]    { background: var(--libre-bg); }
.celda[data-estado="justo"]    { background: var(--justo-bg); }
.celda[data-estado="completo"] { background: var(--completo-bg); }

.celda .plazas { font-family: var(--mono); font-size: .84rem; font-weight: 600;
  color: var(--tinta); letter-spacing: -.02em; }
.celda .etq { font-size: .7rem; line-height: 1.25; color: var(--tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celda .medidor { height: 4px; border-radius: 99px; background: rgba(55,54,67,.09); overflow: hidden; }
.celda .medidor i { display: block; height: 100%; border-radius: 99px;
  transform-origin: left; transition: width .5s var(--curva); }
.celda[data-estado="libre"]    .medidor i { background: var(--libre); }
.celda[data-estado="justo"]    .medidor i { background: var(--justo); }
.celda[data-estado="completo"] .medidor i { background: var(--completo); }
.celda .cola { position: absolute; top: 5px; right: 6px; font-family: var(--mono);
  font-size: .62rem; font-weight: 600; color: var(--justo-t);
  background: var(--panel); border-radius: 99px; padding: 1px 5px; }
.celda.sel { border-color: var(--salvia); box-shadow: 0 0 0 2px color-mix(in srgb, var(--salvia) 28%, transparent); }

/* ═══════════════════════════════════════════════ GRÁFICO ══ */
/* Una sola serie (ocupación por hora): sin leyenda, el título la nombra.
   Etiquetas directas solo en el máximo y el mínimo; el resto, al pasar por encima. */
.grafico-caja { background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-l); box-shadow: var(--sombra-1); padding: var(--e4) var(--e5) var(--e5); }
.grafico-caja h2 { font-size: 1.02rem; }
.grafico-caja .pie { font-size: .8rem; color: var(--tinta-3); margin-top: var(--e2); }
.grafico { width: 100%; height: auto; display: block; margin-top: var(--e4); overflow: visible; }
.grafico .rejilla { stroke: var(--linea-sutil); stroke-width: 1; }
.grafico .eje-txt { font-family: var(--mono); font-size: 10px; fill: var(--tinta-3); }
.grafico .barra { fill: var(--salvia); transition: fill .16s var(--curva); }
.grafico .barra-zona:hover .barra { fill: var(--pizarra); }
.grafico .valor { font-family: var(--mono); font-size: 10px; font-weight: 600; fill: var(--tinta-2); }
.grafico .barra-zona { cursor: default; }

.pista { position: fixed; z-index: 60; background: var(--pizarra); color: var(--crema);
  border-radius: var(--r-m); padding: var(--e2) var(--e3); font-size: .8rem; line-height: 1.35;
  pointer-events: none; box-shadow: var(--sombra-2); max-width: 220px; }
.pista[hidden] { display: none; }
.pista b { color: #fff; font-family: var(--mono); }

/* ═══════════════════════════════════════════ DETALLE DE SESIÓN ══ */
.cajon { position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: flex-end; justify-content: center; background: rgba(55,54,67,.34); }
.cajon[hidden] { display: none; }
@media (min-width: 640px) { .cajon { align-items: center; } }
.cajon-panel { background: var(--panel); width: 100%; max-width: 460px;
  border-radius: var(--r-l) var(--r-l) 0 0; padding: var(--e5);
  max-height: 84vh; overflow-y: auto; box-shadow: var(--sombra-2); }
@media (min-width: 640px) { .cajon-panel { border-radius: var(--r-l); } }
.cajon-panel h3 { font-size: 1.14rem; }
.cajon-panel .sub { color: var(--tinta-3); font-size: .86rem; margin: 2px 0 var(--e4); }

.persona { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) 0;
  border-bottom: 1px solid var(--linea-sutil); }
.persona:last-of-type { border-bottom: none; }
.persona .ini { width: 30px; height: 30px; border-radius: 99px; background: var(--hueco);
  color: var(--salvia); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .76rem; flex: none; }
.persona .nm { flex: 1; color: var(--tinta); font-size: .9rem; }
.persona .marca-est { font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 7px; border-radius: 99px; }
.marca-est.ok { background: var(--libre-bg); color: var(--libre-t); }
.marca-est.cola { background: var(--justo-bg); color: var(--justo-t); }

.veredicto { margin-top: var(--e4); padding: var(--e3); border-radius: var(--r-m);
  font-size: .86rem; display: flex; gap: var(--e2); align-items: flex-start; }
.veredicto.si { background: var(--libre-bg); color: var(--libre-t); }
.veredicto.no { background: var(--hueco); color: var(--tinta-2); }

.btn { border: none; border-radius: var(--r-m); padding: var(--e3) var(--e5);
  font-size: .92rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: var(--e4);
  background: var(--salvia); color: #fff;
  transition: background .16s var(--curva); }
.btn:hover { background: var(--pizarra); }
.btn.suave { background: transparent; color: var(--tinta-2); border: 1px solid var(--linea); }
.btn.suave:hover { background: var(--hueco); color: var(--tinta); }
.btn:disabled { opacity: .5; cursor: default; }

/* ═══════════════════════════════════════════════ LISTAS ══ */
.bloque { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-1); overflow: hidden; }
.bloque > header { padding: var(--e4) var(--e5) var(--e3); display: flex;
  align-items: baseline; justify-content: space-between; gap: var(--e3); }
.bloque > header h2 { font-size: 1.02rem; }
.bloque > header .nota { font-size: .8rem; color: var(--tinta-3); }
.lista { padding: 0 var(--e5) var(--e4); }
.item { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0;
  border-bottom: 1px solid var(--linea-sutil); }
.item:last-child { border-bottom: none; }
.item .cuando { font-family: var(--mono); font-size: .8rem; color: var(--tinta-2);
  min-width: 7.5rem; }
.item .qué { flex: 1; color: var(--tinta); font-size: .9rem; }
.item .cuanto { font-family: var(--mono); font-size: .8rem; color: var(--tinta-3); }

/* ── estado vacío: dice qué pasará, no "no hay datos" ── */
.vacio { padding: var(--e7) var(--e5); text-align: center; color: var(--tinta-3); }
.vacio svg { display: block; margin: 0 auto var(--e3); color: var(--menta); }
.vacio p { font-size: .9rem; max-width: 34ch; margin: 0 auto; }

/* ── cargando: sin saltos de layout ── */
.esqueleto { background: linear-gradient(90deg, var(--hueco) 25%,
  color-mix(in srgb, var(--hueco) 55%, var(--panel)) 50%, var(--hueco) 75%);
  background-size: 260% 100%; border-radius: var(--r-s); color: transparent !important; }
@media (prefers-reduced-motion: no-preference) {
  .esqueleto { animation: barrido 1.3s ease-in-out infinite; }
  @keyframes barrido { from { background-position: 130% 0; } to { background-position: -130% 0; } }
}

/* ── error: nombra el problema y la salida ── */
.fallo { background: var(--completo-bg); color: var(--completo-t); border-radius: var(--r-m);
  padding: var(--e3) var(--e4); font-size: .88rem; display: flex; gap: var(--e2);
  align-items: flex-start; }
.fallo button { background: none; border: none; color: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer; padding: 0; }

/* ── un solo momento de entrada, desde un estado ya visible ── */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: subir .5s var(--curva) both; }
  @keyframes subir { from { opacity: .55; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 720px) {
  main { padding: var(--e4); gap: var(--e4); }
  .barra { padding: var(--e3) var(--e4); }
  .cifras { gap: var(--e5); }
  .cifra .v { font-size: 1.7rem; }
  .cuadrante-scroll { padding: 0 var(--e4) var(--e4); }
  .cuadrante-cab { padding: var(--e4) var(--e4) var(--e3); }
  .lista, .bloque > header { padding-left: var(--e4); padding-right: var(--e4); }
}

/* ═══════════════════════════════════════════ EL HILO DEL PORTERO ══ */
/* No imita WhatsApp con su verde: es el hilo dentro del panel del centro,
   en la paleta de la casa. Lo que importa es leer quién dijo qué. */
.hilo-caja { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-1); overflow: hidden; display: flex; flex-direction: column;
  height: min(62vh, 560px); min-height: 380px; min-width: 0; }
.hilo-cab { flex: none; display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea-sutil); background: var(--crema); }
.hilo-cab .av { width: 30px; height: 30px; border-radius: 99px; background: var(--hueco);
  color: var(--salvia); display: flex; align-items: center; justify-content: center; flex: none; }
.hilo-cab .quien { font-weight: 600; color: var(--tinta); font-size: .92rem; line-height: 1.1; }
.hilo-cab .est { font-size: .74rem; color: var(--tinta-3); }
.hilo-cab .borrar { margin-left: auto; background: none; border: 1px solid var(--linea);
  color: var(--tinta-3); font-size: .78rem; padding: 5px 11px; border-radius: var(--r-m); cursor: pointer; }
.hilo-cab .borrar:hover { color: var(--tinta); border-color: var(--piedra); }

.hilo { flex: 1; overflow-y: auto; padding: var(--e4); display: flex; flex-direction: column;
  gap: var(--e2); min-width: 0; }
.burbuja { max-width: 80%; padding: var(--e2) var(--e3); border-radius: var(--r-m);
  font-size: .92rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja.suya { background: var(--hueco); color: var(--tinta); align-self: flex-start;
  border-top-left-radius: 2px; }
.burbuja.mia { background: var(--salvia); color: #fff; align-self: flex-end;
  border-top-right-radius: 2px; }
.burbuja.sistema { align-self: center; background: transparent; border: 1px dashed var(--linea);
  color: var(--tinta-3); font-size: .8rem; text-align: center; max-width: 92%; }
.burbuja.sistema b { color: var(--salvia); }
.burbuja .pensando { color: var(--tinta-3); font-style: italic; }
/* `--surface-2` no existe: se usaba en tres sitios y no estaba declarado en
   ninguna parte, así que estos tres fondos salían TRANSPARENTES. Se ve poco
   —son chips pequeños sobre panel blanco— y por eso llevaba semanas así. */
.paso { align-self: flex-start; font-family: var(--mono); font-size: .7rem; color: var(--tinta-3);
  background: var(--hueco); padding: 3px 9px; border-radius: 99px; }

.sugerencias { flex: none; display: flex; gap: var(--e2); flex-wrap: wrap;
  padding: 0 var(--e4) var(--e3); background: var(--panel); }
.sugerencias button { border: 1px solid var(--linea); background: var(--crema); color: var(--salvia);
  border-radius: 99px; padding: 6px 13px; font-size: .8rem; cursor: pointer; font-family: var(--sans); }
.sugerencias button:hover { border-color: var(--salvia); color: var(--pizarra); }

.hilo-in { flex: none; display: flex; gap: var(--e2); padding: var(--e3) var(--e4) var(--e4);
  background: var(--panel); border-top: 1px solid var(--linea-sutil); }
.hilo-in input { flex: 1; min-width: 0; border: 1px solid var(--linea); border-radius: 99px;
  padding: 11px 16px; font-family: var(--sans); font-size: .92rem; color: var(--tinta);
  background: var(--crema); }
.hilo-in input:focus { border-color: var(--salvia); }
.hilo-in button { flex: none; width: 42px; height: 42px; border-radius: 99px; border: none;
  background: var(--salvia); color: #fff; cursor: pointer; display: flex;
  align-items: center; justify-content: center; }
.hilo-in button:hover { background: var(--pizarra); }
.hilo-in button:disabled { opacity: .45; cursor: default; }
.nota-pie { font-size: .8rem; color: var(--tinta-3); text-align: center; }

/* ═══════════════════════════════════ BANDEJA DE APROBACIONES ══ */
/* Pensada para el móvil: un botón grande y el contexto a la vista. */
.pila-aprob { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.tarjeta-aprob { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-1); overflow: hidden; min-width: 0; }
.tarjeta-aprob > header { display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4) var(--e4) var(--e3); }
.tarjeta-aprob .ini { width: 38px; height: 38px; border-radius: 99px; background: var(--hueco);
  color: var(--salvia); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .84rem; flex: none; }
.tarjeta-aprob .quien { flex: 1; min-width: 0; }
.tarjeta-aprob .quien strong { display: block; color: var(--tinta); font-size: 1.02rem; }
.tarjeta-aprob .quien span { font-size: .85rem; color: var(--tinta-3); }
.sello { font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .07em; padding: 4px 9px; border-radius: 99px; flex: none; white-space: nowrap; }
.sello.prueba { background: var(--libre-bg); color: var(--libre-t); }
.sello.lista_espera { background: var(--justo-bg); color: var(--justo-t); }
.sello.salud { background: #F6E8E3; color: var(--completo-t); }

.cuando-aprob { margin: 0 var(--e4) var(--e3); padding: var(--e3);
  background: var(--crema); border-radius: var(--r-m); display: flex; align-items: center;
  gap: var(--e3); flex-wrap: wrap; }
.cuando-aprob .fecha { font-family: var(--mono); font-weight: 600; color: var(--tinta); font-size: .95rem; }
.cuando-aprob .plazas { font-family: var(--mono); font-size: .82rem; color: var(--tinta-3); }
.cuando-aprob .que { font-size: .88rem; color: var(--tinta-2); }

.aviso-timp { margin: 0 var(--e4) var(--e3); padding: var(--e3); border-radius: var(--r-m);
  background: var(--justo-bg); color: var(--justo-t); font-size: .85rem;
  display: flex; gap: var(--e2); align-items: flex-start; }

.contexto { margin: 0 var(--e4) var(--e3); }
.contexto summary { font-size: .84rem; color: var(--salvia); cursor: pointer; padding: var(--e2) 0;
  font-weight: 600; }
.contexto summary::marker { color: var(--piedra); }
.contexto .hilo-mini { display: flex; flex-direction: column; gap: 5px; padding: var(--e2) 0 0; }
.contexto .mini { font-size: .84rem; line-height: 1.4; padding: 6px 10px; border-radius: var(--r-s);
  max-width: 88%; overflow-wrap: anywhere; }
.contexto .mini.suya { background: var(--hueco); color: var(--tinta); align-self: flex-start; }
.contexto .mini.mia { background: var(--crema); color: var(--tinta-2); align-self: flex-end;
  border: 1px solid var(--linea-sutil); }
/* quién firma cada mensaje que sale: el Portero, la recepción, el pregonero */
.contexto .mini .firma { display: block; font-family: var(--mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-3); margin-bottom: 2px; }
.contexto .mini .dicho { display: block; }

.acciones-aprob { display: flex; gap: var(--e2); padding: 0 var(--e4) var(--e4); }
.acciones-aprob .btn { margin: 0; }
.acciones-aprob .btn.ok { flex: 2; }
.acciones-aprob .btn.suave { flex: 1; }

.resuelta { padding: var(--e3) var(--e4) var(--e4); font-size: .88rem; color: var(--libre-t);
  display: flex; gap: var(--e2); align-items: flex-start; }
.resuelta.problema { color: var(--justo-t); }
.tarjeta-aprob.hecha { opacity: .74; }

@media (max-width: 720px) {
  .hilo-caja { height: min(66vh, 520px); }
  .acciones-aprob { flex-direction: column; }
  .acciones-aprob .btn.ok, .acciones-aprob .btn.suave { flex: none; width: 100%; }
}

/* el mensaje que se va a enviar, antes de aprobarlo */
.mensaje-previo { margin: 0 var(--e4) var(--e3); padding: var(--e3); border-radius: var(--r-m);
  background: var(--hueco); display: flex; flex-direction: column; gap: 5px; }
.mensaje-previo .et { font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tinta-3); }
.mensaje-previo .txt { font-size: .9rem; color: var(--tinta); line-height: 1.45; }

/* QUÉ PASA AL FIRMAR, antes de firmar. Un mensaje que no va a salir no puede
   parecerse a uno que sí: el borde de la izquierda lo dice sin leer. */
.mensaje-previo[data-llega="si"] { border-left: 3px solid var(--libre); }
.mensaje-previo[data-llega="si"] .et { color: var(--libre-t); }
.mensaje-previo[data-llega="no"] { border-left: 3px solid var(--justo);
                                   background: var(--justo-bg); }
.mensaje-previo[data-llega="no"] .et { color: var(--justo-t); font-weight: 700; }
.mensaje-previo[data-llega="nadie"] { border-left: 3px solid var(--linea); }
.mensaje-previo .porque { font-size: .78rem; line-height: 1.45; color: var(--justo-t); }
.mensaje-previo .btn-linea { align-self: flex-start; margin-top: 2px; }

/* ═══════════════════════════════════════════════════ RETENCIÓN ══ */
.tira .cuenta.amarilla { background: var(--justo); color: #3a2f12; }

.btn-linea { background: none; border: 1px solid var(--linea); color: var(--salvia);
  font-size: .84rem; font-weight: 600; padding: 7px 14px; border-radius: var(--r-m);
  cursor: pointer; font-family: var(--sans); white-space: nowrap; }
.btn-linea:hover { border-color: var(--salvia); background: var(--crema); color: var(--pizarra); }
.btn-linea:disabled { opacity: .5; cursor: default; }

.pila-fuga { display: flex; flex-direction: column; min-width: 0; }
/* Cada fila es una persona. El nivel va en una franja de color a la izquierda
   del nombre —no un borde de tarjeta— y siempre con su palabra al lado. */
.fila-fuga { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e2) var(--e3);
  align-items: start; padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linea-sutil);
  min-width: 0; }
.fila-fuga:last-child { border-bottom: none; }
.fila-fuga .puesto { font-family: var(--mono); font-size: .8rem; color: var(--tinta-3);
  width: 1.6rem; text-align: right; padding-top: 3px; }
.fila-fuga .cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fila-fuga .nombre { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.fila-fuga .nombre strong { color: var(--tinta); font-size: 1rem; }
.fila-fuga .nivel { font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .08em; padding: 3px 8px; border-radius: 99px; }
.nivel.alto  { background: var(--completo-bg); color: var(--completo-t); }
.nivel.medio { background: var(--justo-bg); color: var(--justo-t); }
.nivel.bajo  { background: var(--hueco); color: var(--tinta-3); }
.fila-fuga .senales { display: flex; gap: var(--e1); flex-wrap: wrap; }
.fila-fuga .senal { font-family: var(--mono); font-size: .64rem; color: var(--tinta-3);
  background: var(--hueco); padding: 2px 7px; border-radius: var(--r-s); }
.fila-fuga .motivo { font-size: .89rem; color: var(--tinta-2); line-height: 1.45; }
.fila-fuga .mensaje { font-size: .85rem; color: var(--tinta-3); font-style: italic;
  border-left: 2px solid var(--menta); padding-left: var(--e3); }
.fila-fuga .puntos { font-family: var(--mono); font-size: .82rem; color: var(--tinta-3);
  padding-top: 3px; white-space: nowrap; }

.aviso-suave { background: var(--justo-bg); color: var(--justo-t); border-radius: var(--r-m);
  padding: var(--e3) var(--e4); font-size: .88rem; display: flex; gap: var(--e2);
  align-items: flex-start; }

@media (max-width: 720px) {
  .fila-fuga { grid-template-columns: auto 1fr; padding: var(--e3) var(--e4); }
  .fila-fuga .puntos { grid-column: 2; }
  .bloque > header { flex-wrap: wrap; }
}

/* ═════════════════════════════════════════════════════ REGLAS ══ */
.solo-sentado { display: none; }
@media (max-width: 720px) {
  .solo-sentado { display: flex; gap: var(--e2); background: var(--hueco); color: var(--tinta-2);
    font-size: .85rem; padding: var(--e3) var(--e4); border-radius: var(--r-m); }
}

/* El efecto de las reglas, siempre visible mientras se editan. */
.efecto { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e3);
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  padding: var(--e4) var(--e5); box-shadow: var(--sombra-1); min-width: 0; }
.efecto .dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.efecto .n { font-family: var(--sans); font-weight: 700; font-size: 1.5rem; color: var(--tinta);
  font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: baseline; gap: var(--e2); }
.efecto .n .delta { font-family: var(--mono); font-size: .68rem; font-weight: 600;
  padding: 2px 6px; border-radius: 99px; }
.efecto .n .delta.sube { background: var(--libre-bg); color: var(--libre-t); }
.efecto .n .delta.baja { background: var(--completo-bg); color: var(--completo-t); }
.efecto .k { font-size: .78rem; color: var(--tinta-3); line-height: 1.3; }

.grupos { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.grupo { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-1); overflow: hidden; min-width: 0; }
.grupo > h2 { font-size: .96rem; padding: var(--e4) var(--e5) var(--e3);
  border-bottom: 1px solid var(--linea-sutil); }

.regla { display: grid; grid-template-columns: 1fr 220px; gap: var(--e3) var(--e5);
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linea-sutil);
  align-items: start; min-width: 0; }
.regla:last-child { border-bottom: none; }
.regla.tocada { background: var(--crema); }
.regla .texto { min-width: 0; }
.regla label { display: block; font-weight: 600; color: var(--tinta); font-size: .94rem; }
.regla .ayuda { font-size: .84rem; color: var(--tinta-3); line-height: 1.45; margin-top: 3px;
  max-width: 62ch; }
.regla .control { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.regla .fila-control { display: flex; align-items: center; gap: var(--e2); }
.regla input[type="number"], .regla input[type="text"] {
  font-family: var(--mono); font-size: .92rem; color: var(--tinta); background: var(--crema);
  border: 1px solid var(--linea); border-radius: var(--r-m); padding: 9px 11px; width: 100%;
  min-width: 0; }
.regla input:focus { border-color: var(--salvia); background: var(--panel); }
.regla input[aria-invalid="true"] { border-color: var(--completo); background: var(--completo-bg); }
.regla .unidad { font-size: .82rem; color: var(--tinta-3); white-space: nowrap; }
.regla .error { font-size: .8rem; color: var(--completo-t); }

/* sí/no: un interruptor de verdad, no una casilla suelta */
.interruptor { display: inline-flex; align-items: center; gap: var(--e3); cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .pista-int { width: 42px; height: 24px; border-radius: 99px; background: var(--piedra);
  position: relative; flex: none; transition: background .18s var(--curva); }
.interruptor .pista-int::after { content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 99px; background: #fff;
  transition: transform .18s var(--curva); box-shadow: 0 1px 2px rgba(55,54,67,.25); }
.interruptor input:checked + .pista-int { background: var(--libre); }
.interruptor input:checked + .pista-int::after { transform: translateX(18px); }
.interruptor input:focus-visible + .pista-int { outline: 2px solid var(--salvia); outline-offset: 2px; }
.interruptor .etq-int { font-size: .88rem; color: var(--tinta-2); }

/* la barra de guardar aparece solo si hay algo que guardar */
.barra-guardar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center;
  justify-content: space-between; gap: var(--e4); flex-wrap: wrap;
  background: var(--pizarra); color: var(--crema); padding: var(--e3) var(--e5);
  border-radius: var(--r-l); box-shadow: var(--sombra-2); font-size: .9rem; }
.barra-guardar[hidden] { display: none; }
.barra-guardar .acciones { display: flex; gap: var(--e2); }
.barra-guardar .btn { margin: 0; width: auto; padding: 9px 20px; }
.barra-guardar .btn.suave { color: var(--crema); border-color: rgba(249,248,244,.35); }
.barra-guardar .btn.suave:hover { background: rgba(249,248,244,.12); color: #fff; }

@media (max-width: 720px) {
  .regla { grid-template-columns: 1fr; }
  .grupo > h2, .regla { padding-left: var(--e4); padding-right: var(--e4); }
  .efecto { padding: var(--e4); }
}

/* ═══════════════════════════════════════════════════ EL GESTOR ══ */
/* El límite no es una nota al pie: va arriba, antes de los números, porque es
   lo que separa "te cuento" de "te asesoro". */
.limite-gestor { font-size: .84rem; color: var(--tinta-2); background: var(--arena);
  border-left: 3px solid var(--piedra); border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: var(--e3) var(--e4); }

.cab-caja { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; }

/* el gráfico de caja: una sola serie, un solo color, ninguna leyenda */
.grafico.caja .barra { fill: var(--salvia); }
.grafico.caja .barra-zona:hover .barra { fill: var(--pizarra); }
/* el mes en curso NO es comparable: trama, no color pleno */
.grafico.caja .barra.en-curso { fill: url(#trama-curso); stroke: var(--salvia); stroke-width: 1; }
.grafico.caja .barra-zona:hover .barra.en-curso { stroke: var(--pizarra); }
.grafico .referencia { stroke: var(--piedra); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico .referencia-txt { font-family: var(--mono); font-size: 9.5px; fill: var(--tinta-3); }
.grafico .eje-nota { font-family: var(--sans); font-size: 9.5px; fill: var(--tinta-3);
  font-style: italic; }

/* la comparación justa: el porcentaje y, al lado, con qué se compara */
.comparacion { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e4);
  padding-top: var(--e3); border-top: 1px solid var(--linea-sutil); flex-wrap: wrap;
  min-width: 0; }
.comparacion[hidden] { display: none; }
.comparacion .delta { font-family: var(--mono); font-size: .92rem; font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-s); flex: none; }
.comparacion .delta[data-sentido="sube"] { background: var(--libre-bg); color: var(--libre-t); }
.comparacion .delta[data-sentido="baja"] { background: var(--completo-bg); color: var(--completo-t); }
.comparacion .delta[data-sentido="igual"] { background: var(--hueco); color: var(--tinta-2); }
.comparacion .txt { font-size: .85rem; color: var(--tinta-2); min-width: 0; }

.dos-columnas { display: grid; grid-template-columns: 1fr; gap: var(--e5);
  align-items: start; min-width: 0; }   /* la altura la pone el contenido */
@media (min-width: 1000px) { .dos-columnas { grid-template-columns: 1.15fr 1fr; } }
.dos-columnas > * { min-width: 0; }

.explica { font-size: .85rem; color: var(--tinta-2); padding: 0 var(--e5) var(--e3); }

/* los vencimientos con Hacienda */
.pila-venc { padding: 0 var(--e5) var(--e4); min-width: 0; }
.vencimiento { display: grid; grid-template-columns: 46px 1fr auto; gap: var(--e3);
  align-items: start; padding: var(--e3) 0 var(--e3) var(--e3);
  border-bottom: 1px solid var(--linea-sutil); border-left: 3px solid var(--linea);
  min-width: 0; }
.vencimiento:last-child { border-bottom: none; }
.vencimiento > * { min-width: 0; }
.vencimiento[data-urgencia="ya"] { border-left-color: var(--completo); }
.vencimiento[data-urgencia="pronto"] { border-left-color: var(--justo); }
.vencimiento .fecha { text-align: center; background: var(--hueco); border-radius: var(--r-m);
  padding: var(--e2) 0 var(--e1); }
.vencimiento .fecha .dia { display: block; font-family: var(--mono); font-size: 1.15rem;
  font-weight: 600; color: var(--tinta); line-height: 1.05; }
.vencimiento .fecha .mes { display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-3); }
.vencimiento .cab { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.vencimiento .modelo { font-family: var(--mono); font-size: .72rem; font-weight: 600;
  background: var(--pizarra); color: var(--crema); padding: 2px 6px; border-radius: var(--r-s);
  flex: none; }
.vencimiento h3 { font-size: .92rem; font-weight: 600; color: var(--tinta); }
.vencimiento .que { font-size: .8rem; color: var(--tinta-2); margin-top: 3px; }
.vencimiento .segun { font-size: .76rem; color: var(--tinta-3); margin-top: 2px; }
.vencimiento .plazo { text-align: right; white-space: nowrap; }
.vencimiento .plazo .n { font-family: var(--mono); font-size: 1.02rem; font-weight: 600;
  color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.vencimiento .plazo .u { font-size: .74rem; color: var(--tinta-3); margin-left: 3px; }
.vencimiento .plazo .marca-urg { display: block; font-family: var(--mono); font-weight: 700;
  font-size: .8rem; letter-spacing: .06em; }
.vencimiento[data-urgencia="ya"] .plazo .marca-urg { color: var(--completo-t); }
.vencimiento[data-urgencia="pronto"] .plazo .marca-urg { color: var(--justo-t); }

/* la pregunta de la compra */
.form-compra { padding: 0 var(--e5) var(--e4); }
.form-compra label { display: block; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-3); margin-bottom: var(--e2); }
.campo-euro { display: flex; align-items: center; border: 1px solid var(--linea);
  border-radius: var(--r-m); background: var(--crema); overflow: hidden; min-width: 0; }
.campo-euro:focus-within { border-color: var(--salvia); box-shadow: 0 0 0 3px rgba(107,143,136,.16); }
.campo-euro input { flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--mono); font-size: 1.05rem; color: var(--tinta);
  padding: var(--e3) var(--e4); }
.campo-euro .unidad { font-family: var(--mono); color: var(--tinta-3); padding-right: var(--e4);
  flex: none; }

#salidaCompra { padding: 0 var(--e5) var(--e4); min-width: 0; }
#salidaCompra[hidden] { display: none; }
#salidaCompra .pensando { font-size: .85rem; color: var(--tinta-3); }
#salidaCompra .error-compra { font-size: .85rem; color: var(--completo-t);
  background: var(--completo-bg); padding: var(--e3); border-radius: var(--r-m); }
#salidaCompra .lectura { font-size: .95rem; color: var(--tinta); line-height: 1.45;
  padding-top: var(--e2); }
.datos-compra { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: var(--e1) var(--e3); margin: var(--e4) 0; padding: var(--e3) 0;
  border-top: 1px solid var(--linea-sutil); border-bottom: 1px solid var(--linea-sutil);
  min-width: 0; }
.datos-compra .par { min-width: 0; }
.datos-compra .k { display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-3); }
.datos-compra .v { display: block; font-family: var(--mono); font-size: 1rem;
  font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.antes-de { margin-bottom: var(--e4); }
.antes-de .etq, .pregunta-gestor .etq, .mensaje-listo .etq { display: block; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3);
  margin-bottom: var(--e2); }
.antes-de ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.antes-de li { font-size: .82rem; color: var(--tinta-2); padding-left: var(--e3);
  border-left: 2px solid var(--justo); }
#salidaCompra .limite-compra { font-size: .8rem; color: var(--tinta-2); background: var(--arena);
  border-radius: var(--r-m); padding: var(--e3); margin-bottom: var(--e4); }
.pregunta-gestor { background: var(--crema); border: 1px dashed var(--linea);
  border-radius: var(--r-m); padding: var(--e4); min-width: 0; }
.pregunta-gestor .txt { font-size: .86rem; color: var(--tinta); line-height: 1.5;
  margin-bottom: var(--e3); }
.pregunta-gestor .btn-linea { width: auto; }

/* lo que avisaría */
.pila-avisos { padding: 0 var(--e5) var(--e5); display: flex; flex-direction: column;
  gap: var(--e4); min-width: 0; }
.aviso-gestor { border-left: 3px solid var(--linea); padding-left: var(--e4); min-width: 0; }
.aviso-gestor[data-urgencia="ya"] { border-left-color: var(--completo); }
.aviso-gestor[data-urgencia="pronto"] { border-left-color: var(--justo); }
.aviso-gestor h3 { font-size: .95rem; font-weight: 600; color: var(--tinta); }
.aviso-gestor .det { font-size: .84rem; color: var(--tinta-2); margin-top: 3px; }
.mensaje-listo { margin-top: var(--e3); background: var(--hueco); border-radius: var(--r-m);
  padding: var(--e3); }
.mensaje-listo p { font-size: .85rem; color: var(--tinta); line-height: 1.45; }

@media (max-width: 720px) {
  .pila-venc, .pila-avisos, .form-compra, #salidaCompra, .explica {
    padding-left: var(--e4); padding-right: var(--e4);
  }
  .vencimiento { grid-template-columns: 42px 1fr; }
  .vencimiento .plazo { grid-column: 2; text-align: left; margin-top: 2px; }
  .vencimiento .plazo .marca-urg { display: inline; margin-left: var(--e2); }
}

.cab-aviso { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  min-width: 0; }
.clase-aviso { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); border: 1px solid var(--linea); border-radius: 99px;
  padding: 2px 8px; white-space: nowrap; flex: none; }

/* una nota dentro de un bloque se lee alineada con el texto, no centrada */
.bloque .nota-pie { text-align: left; padding: 0 var(--e5) var(--e4); }
.vencimiento + .vencimiento.mismo-dia { border-top: none; margin-top: calc(-1 * var(--e3)); }
.vencimiento.mismo-dia { padding-top: var(--e1); }
.vencimiento.mismo-dia .fecha { background: none; }

/* ══════════════════════════ LOS MÓDULOS EN PANTALLA ESTRECHA ══ */
/* Solo iconos. Ni cajón, ni hamburguesa, ni un módulo escondido: lo que hay
   que tocar está a un dedo de distancia y siempre en el mismo sitio. El
   nombre sigue ahí para el lector de pantalla y en el `title`. */
@media (max-width: 1000px) {
  .app { grid-template-columns: 62px minmax(0, 1fr); }

  /* La barra de arriba tiene que poder estrecharse. Un <select> no baja de lo
     que mide su opción más larga («VIVVO fit Sevilla la Nueva») a menos que se
     le fuerce: sin esto, la página entera se iba de ancho. */
  .barra { padding: var(--e3) var(--e4); gap: var(--e2) var(--e3); }
  .barra-fin { width: 100%; margin-left: 0; }
  .sel-centro { flex: 1 1 12rem; min-width: 0; }
  select.centro { width: 100%; max-width: 100%; }
  .aviso-demo { order: 2; }
  .frescura { order: 3; }
  .modulos { padding: var(--e3) var(--e2) var(--e4); gap: var(--e4); align-items: center; }
  .modulos .marca { padding: 0 0 var(--e2); justify-content: center; }
  .modulos .marca .wm, .modulos .marca .prod { display: none; }
  .tit-grupo { display: none; }
  /* el grupo se sigue leyendo: una raya fina donde estaba su título */
  .grupo-mod + .grupo-mod { border-top: 1px solid var(--linea-sutil); padding-top: var(--e4);
    width: 100%; align-items: center; }
  .modulos button { justify-content: center; padding: 11px 0; width: 44px; gap: 0; }
  .modulos button .etq-mod {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  /* la cuenta no cabe al lado: se pone encima del icono, como una pegatina */
  .modulos .cuenta { position: absolute; top: 3px; right: -1px; margin: 0;
    min-width: 16px; height: 16px; font-size: .62rem; padding: 0 4px;
    border: 1.5px solid var(--panel); }
  .modulos button[aria-selected="true"] .cuenta { border-color: var(--pizarra); }
}

@media (max-width: 1000px) {
  .cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e4) var(--e5); }
  .cifra { min-width: 0; }
  .cifra .v { font-size: 1.7rem; }
  /* Si las cifras son impares, una se quedaría sola en la última fila. La
     primera es la principal: que ocupe el ancho y las demás cuadran de dos en
     dos. `:first-child:nth-last-child(odd)` solo es cierto si el total es impar. */
  .cifras .cifra:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════ FACTURACIÓN ══ */
/* el periodo: tres botones, y el activo se ve sin leer */
.rangos { display: flex; flex-wrap: wrap; gap: var(--e1); background: var(--hueco);
  padding: 3px; border-radius: var(--r-m); align-self: start; max-width: 100%; }
.rangos button { border: none; background: none; color: var(--tinta-3); font-size: .86rem;
  font-weight: 600; padding: var(--e2) var(--e4); border-radius: var(--r-s); cursor: pointer;
  white-space: nowrap; transition: color .16s var(--curva), background .16s var(--curva); }
.rangos button:hover { color: var(--tinta); }
.rangos button[aria-pressed="true"] { background: var(--panel); color: var(--tinta);
  box-shadow: 0 1px 2px rgba(55,54,67,.07); }

/* el gráfico apilado: los tramos, y el cerco del mes sin terminar */
.grafico.mix .tramo { transition: opacity .16s var(--curva); }
.grafico.mix .barra-zona:hover .tramo { opacity: .78; }
.grafico .cerco-curso { fill: none; stroke: var(--piedra); stroke-width: 1.2;
  stroke-dasharray: 3 3; }

/* la leyenda: obligatoria con dos series o más. Con el reparto al lado, que es
   lo que se quiere saber al mirarla. */
.leyenda-serie { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5);
  margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linea-sutil); }
.clave-serie { display: flex; align-items: center; gap: var(--e2); min-width: 0;
  font-size: .82rem; }
.clave-serie .punto { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.clave-serie .txt { min-width: 0; color: var(--tinta-2); }
.clave-serie b { color: var(--tinta); font-weight: 600; }
.clave-serie .dato { font-family: var(--mono); color: var(--tinta-3); }

/* qué se vende y qué deja */
.pila-mix { padding: 0 var(--e5) var(--e4); display: flex; flex-direction: column;
  gap: var(--e4); min-width: 0; }
.linea-mix { min-width: 0; }
.linea-mix .cab { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; }
.linea-mix h3 { font-size: .92rem; font-weight: 600; }
.linea-mix .ud { font-size: .76rem; color: var(--tinta-3); white-space: nowrap; }
.barra-mix { height: 8px; background: var(--hueco); border-radius: 99px; overflow: hidden;
  margin: var(--e2) 0 var(--e1); }
.barra-mix span { display: block; height: 100%; border-radius: 99px; }
.cifras-mix { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.cifras-mix .imp { font-family: var(--mono); font-size: .92rem; font-weight: 600;
  color: var(--tinta); font-variant-numeric: tabular-nums; }
.cifras-mix .pc { font-family: var(--mono); font-size: .78rem; color: var(--tinta-3); }
.cifras-mix .porclase { margin-left: auto; font-family: var(--mono); font-size: .78rem;
  color: var(--tinta-2); white-space: nowrap; }
.cifras-mix .porclase[data-mejor="si"] { color: var(--libre-t); font-weight: 600; }
.lectura-mix { font-size: .85rem; color: var(--tinta-2); padding: 0 var(--e5) var(--e5);
  line-height: 1.5; }

/* cobrado y sin dar */
.pendiente { padding: 0 var(--e5) var(--e3); min-width: 0; }
.pendiente .lectura { font-size: .95rem; color: var(--tinta); line-height: 1.45;
  margin-bottom: var(--e4); }
.tabla-pendiente { display: flex; flex-direction: column; }
.tabla-pendiente .fila { display: grid; grid-template-columns: 1fr auto auto;
  gap: var(--e3); align-items: baseline; padding: var(--e2) 0;
  border-bottom: 1px solid var(--linea-sutil); min-width: 0; }
.tabla-pendiente .fila:last-child { border-bottom: none; }
.tabla-pendiente .c { font-size: .86rem; color: var(--tinta-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-pendiente .n { font-family: var(--mono); font-size: .78rem; color: var(--tinta-3);
  white-space: nowrap; }
.tabla-pendiente .v { font-family: var(--mono); font-size: .9rem; font-weight: 600;
  color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* EL HUECO. No se disimula: se enseña con su borde y su nombre. Un panel que
   dice «tu facturación» sin tenerla entera miente por omisión. */
.hueco-honesto { background: var(--panel); border: 1px dashed var(--piedra);
  border-radius: var(--r-l); padding: var(--e4) var(--e5); min-width: 0; }
.hueco-honesto h3 { font-size: .95rem; }
.hueco-honesto .det { font-size: .86rem; color: var(--tinta-2); margin-top: var(--e2);
  line-height: 1.5; }
.hueco-honesto .falta { font-size: .82rem; color: var(--tinta-3); margin-top: var(--e2); }

@media (max-width: 720px) {
  .pila-mix, .pendiente, .lectura-mix { padding-left: var(--e4); padding-right: var(--e4); }
  .rangos button { padding: var(--e2) var(--e3); font-size: .8rem; }
  .cifras-mix .porclase { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════ COMPRAS ══ */
/* la zona de soltar: se ve que se puede soltar sin tener que leerlo */
.soltar { background: var(--panel); border: 1px dashed var(--linea);
  border-radius: var(--r-l); padding: var(--e5); text-align: center;
  transition: border-color .16s var(--curva), background .16s var(--curva); }
.soltar[data-encima="si"] { border-color: var(--salvia); background: var(--crema); }
.soltar .dentro { display: flex; flex-direction: column; align-items: center; gap: var(--e2); }
.soltar .ic-soltar { color: var(--piedra); }
.soltar .que { font-size: .92rem; color: var(--tinta); max-width: 44ch; }
.soltar .pequeno { font-size: .78rem; color: var(--tinta-3); }
.soltar .como-boton { cursor: pointer; margin-top: var(--e2); }
.estado-subida { margin-top: var(--e4); font-size: .86rem; padding: var(--e3);
  border-radius: var(--r-m); background: var(--hueco); color: var(--tinta-2); }
.estado-subida[hidden] { display: none; }
.estado-subida[data-tono="bien"] { background: var(--libre-bg); color: var(--libre-t); }
.estado-subida[data-tono="malo"] { background: var(--completo-bg); color: var(--completo-t); }
.estado-subida[data-tono="aviso"] { background: var(--justo-bg); color: var(--justo-t); }

/* una factura esperando el visto bueno */
.pila-facturas { padding: 0 var(--e5) var(--e5); display: flex; flex-direction: column;
  gap: var(--e4); min-width: 0; }
.factura { border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--e4);
  background: var(--panel); min-width: 0; }
/* lo que hay que mirar de verdad lleva una franja, no un color de fondo:
   el fondo de alarma en cinco tarjetas a la vez no dice nada */
.factura[data-ojo="si"] { border-left: 3px solid var(--justo); }
.factura[data-resuelta] { opacity: .55; }
.factura .cab { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; min-width: 0; }
.factura .quien { min-width: 0; }
.factura h3 { font-size: 1rem; }
.factura .meta { display: block; font-size: .78rem; color: var(--tinta-3); margin-top: 2px; }
.factura .imp { text-align: right; white-space: nowrap; }
.factura .total { display: block; font-family: var(--mono); font-size: 1.15rem;
  font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.factura .desglose { display: block; font-family: var(--mono); font-size: .72rem;
  color: var(--tinta-3); }
.factura .concepto { font-size: .88rem; color: var(--tinta-2); margin-top: var(--e3); }

.sellos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.sello-f { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 99px; border: 1px solid var(--linea);
  color: var(--tinta-3); white-space: nowrap; }
.sello-f.cat { background: var(--hueco); color: var(--tinta-2); border-color: transparent; }
.sello-f.conf-alta { color: var(--libre-t); border-color: var(--libre); }
.sello-f.conf-media { color: var(--tinta-2); }
.sello-f.conf-baja { color: var(--justo-t); border-color: var(--justo); }
.sello-f.malo { color: var(--completo-t); border-color: var(--completo); }

.avisos-f { margin-top: var(--e3); background: var(--crema); border-radius: var(--r-m);
  padding: var(--e3); }
.avisos-f .etq { display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-3); margin-bottom: var(--e2); }
.avisos-f ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.avisos-f li { font-size: .82rem; color: var(--tinta-2); padding-left: var(--e3);
  position: relative; }
.avisos-f li::before { content: '·'; position: absolute; left: 4px; color: var(--piedra); }

.acciones-f { display: flex; justify-content: flex-end; align-items: center;
  gap: var(--e2); margin-top: var(--e4); }
/* Son dos botones que se repiten en cada tarjeta: a tamaño de acción, no de
   llamada a la acción. Uno a ancho completo por factura llena la pantalla de
   botones y esconde lo que hay que leer. */
.acciones-f .btn { width: auto; margin-top: 0; padding: 8px 18px; font-size: .88rem; }
.acciones-f .resultado { font-size: .86rem; font-weight: 600; color: var(--tinta-2); }

/* en qué se va: barras de un solo color, la etiqueta lleva la identidad */
.pila-cat { padding: 0 var(--e5) var(--e4); display: flex; flex-direction: column;
  gap: var(--e3); min-width: 0; }
.fila-cat { display: grid; grid-template-columns: 7.5rem 1fr auto auto; gap: var(--e3);
  align-items: center; min-width: 0; }
.fila-cat > * { min-width: 0; }
.fila-cat .nombre { font-size: .86rem; color: var(--tinta-2); text-transform: capitalize;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista-cat { height: 8px; background: var(--hueco); border-radius: 99px; overflow: hidden; }
.pista-cat .relleno { display: block; height: 100%; background: var(--salvia);
  border-radius: 99px; }
.fila-cat .imp { font-family: var(--mono); font-size: .88rem; font-weight: 600;
  color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila-cat .pc { font-family: var(--mono); font-size: .76rem; color: var(--tinta-3);
  white-space: nowrap; min-width: 3.2rem; text-align: right; }

/* a quién le compras */
.pila-prov { padding: 0 var(--e5) var(--e4); min-width: 0; }
.fila-prov { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--linea-sutil);
  min-width: 0; }
.fila-prov:last-child { border-bottom: none; }
.fila-prov .izq { min-width: 0; }
.fila-prov .nombre { display: block; font-size: .9rem; color: var(--tinta);
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-prov .meta { display: block; font-size: .76rem; color: var(--tinta-3); }
.fila-prov .imp { font-family: var(--mono); font-size: .95rem; font-weight: 600;
  color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 720px) {
  .pila-facturas, .pila-cat, .pila-prov { padding-left: var(--e4); padding-right: var(--e4); }
  .soltar { padding: var(--e4); }
  .factura .imp { text-align: left; }
  /* de pie entre clases se pulsa con el pulgar: aquí sí van anchos */
  .acciones-f { flex-direction: column-reverse; }
  .acciones-f .btn { width: 100%; padding: 11px 18px; }
  .fila-cat { grid-template-columns: 1fr auto; row-gap: var(--e1); }
  .fila-cat .pista-cat { grid-column: 1 / -1; order: 3; }
  .fila-cat .pc { order: 2; }
}

/* ═══════════════════════════════════════════════ QUIÉN HACE QUÉ ══ */
/* Pantalla de leer. Medida de lectura contenida, y los números de los pasos
   significan algo: es una secuencia de verdad, no adorno. */
.como-funciona { display: grid; grid-template-columns: 1fr; gap: var(--e4); }
@media (min-width: 900px) { .como-funciona { grid-template-columns: repeat(4, 1fr); } }
.paso-como { background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-l); padding: var(--e4); min-width: 0; }
.paso-como .num { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 99px; background: var(--pizarra);
  color: var(--crema); font-family: var(--mono); font-size: .76rem; font-weight: 600;
  margin-bottom: var(--e3); }
.paso-como h3 { font-size: .95rem; }
.paso-como p { font-size: .84rem; color: var(--tinta-2); margin-top: var(--e2);
  line-height: 1.5; }

/* la línea que no se cruza: en pizarra, porque es la frase que manda. La caja
   va de lado a lado —es una franja, no un bocadillo— y el texto de dentro
   conserva su medida de lectura. */
.la-linea { background: var(--pizarra); color: var(--crema); border-radius: var(--r-l);
  padding: var(--e4) var(--e5); font-size: .92rem; line-height: 1.6; text-wrap: pretty; }
.la-linea .medida { display: block; max-width: 84ch; }

.fichas { display: grid; grid-template-columns: 1fr; gap: var(--e5); }
@media (min-width: 1100px) { .fichas { grid-template-columns: repeat(2, 1fr); } }
.ficha { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-1); overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; }
.ficha > header { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e3); padding: var(--e4) var(--e5) var(--e3); flex-wrap: wrap; min-width: 0; }
.ficha .ident { min-width: 0; }
.ficha h3 { font-size: 1.08rem; }
.ficha .cargo { display: block; font-size: .82rem; color: var(--tinta-3); margin-top: 2px; }

/* el estado va con punto Y con palabra: nunca solo con color */
.estado-ficha { display: inline-flex; align-items: center; gap: var(--e2); flex: none;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.estado-ficha .punto { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.ficha[data-listo="si"] .estado-ficha { color: var(--libre-t); }
.ficha[data-listo="si"] .estado-ficha .punto { background: var(--libre); }
.ficha[data-listo="no"] .estado-ficha { color: var(--justo-t); }
.ficha[data-listo="no"] .estado-ficha .punto { background: var(--justo); }

.cuerpo-ficha { padding: 0 var(--e5) var(--e4); display: flex; flex-direction: column;
  gap: var(--e3); min-width: 0; }
.dato-ficha .etq { display: block; font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-3);
  margin-bottom: 3px; }
.dato-ficha p { font-size: .88rem; color: var(--tinta-2); line-height: 1.55; max-width: 62ch; }
/* «lo que NO hace» no es letra pequeña: lleva su franja y su tinta */
.dato-ficha.limite { border-left: 3px solid var(--piedra); padding-left: var(--e3);
  background: var(--crema); border-radius: 0 var(--r-m) var(--r-m) 0;
  padding-top: var(--e2); padding-bottom: var(--e2); }
.dato-ficha.limite .etq { color: var(--tinta-2); }
.dato-ficha.limite p { color: var(--tinta); }

.falta-ficha { margin: 0 var(--e5) var(--e4); background: var(--justo-bg);
  border-radius: var(--r-m); padding: var(--e3); }
.falta-ficha .etq { display: block; font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--justo-t);
  margin-bottom: var(--e2); }
.falta-ficha ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.falta-ficha li { font-size: .84rem; color: var(--tinta); padding-left: var(--e3);
  position: relative; }
.falta-ficha li::before { content: '·'; position: absolute; left: 4px; color: var(--justo-t); }

.rastro { margin-top: auto; border-top: 1px solid var(--linea-sutil);
  padding: var(--e3) var(--e5); display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap; font-size: .78rem; color: var(--tinta-3); }
.rastro .nunca { font-style: italic; }
.rastro .esperando { margin-left: auto; font-family: var(--mono); font-size: .72rem;
  background: var(--hueco); color: var(--tinta-2); padding: 2px 8px; border-radius: 99px;
  white-space: nowrap; }

/* el módulo de ayuda va al fondo de la barra, separado de los de trabajo */
.grupo-mod.al-pie { margin-top: auto; border-top: 1px solid var(--linea-sutil);
  padding-top: var(--e4); }

@media (max-width: 720px) {
  .cuerpo-ficha, .ficha > header, .rastro { padding-left: var(--e4); padding-right: var(--e4); }
  .falta-ficha { margin-left: var(--e4); margin-right: var(--e4); }
  .la-linea { padding: var(--e4); }
}

/* ═══════════════════════════════════════════════ RECORDATORIOS ══ */
/* El bloqueo va arriba y no se puede confundir con un adorno: si falta la
   plantilla de Meta, la pantalla enseñaría «0 enviados» y parecería roto
   cuando en realidad está esperando un trámite. */
.plantilla-aviso { border-radius: var(--r-l); padding: var(--e4) var(--e5);
  display: flex; flex-direction: column; gap: 5px; }
.plantilla-aviso[data-estado="falta"] { background: var(--justo-bg);
  border-left: 3px solid var(--justo); }
.plantilla-aviso[data-estado="ok"] { background: var(--libre-bg);
  border-left: 3px solid var(--libre); }
.plantilla-aviso .etq { font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em; }
.plantilla-aviso[data-estado="falta"] .etq { color: var(--justo-t); }
.plantilla-aviso[data-estado="ok"] .etq { color: var(--libre-t); }
.plantilla-aviso .det { font-size: .92rem; color: var(--tinta); max-width: 78ch; }
.plantilla-aviso .que { font-size: .86rem; color: var(--tinta-2); max-width: 78ch; }
.plantilla-aviso .cobertura { font-family: var(--mono); font-size: .8rem;
  color: var(--tinta-2); background: rgba(255,255,255,.55); border-radius: var(--r-m);
  padding: var(--e2) var(--e3); margin-top: var(--e2); max-width: 78ch; }

/* las dos oleadas, cada una con su botón y su cuenta de ahora mismo */
.oleadas { display: grid; grid-template-columns: 1fr; gap: var(--e4); }
@media (min-width: 900px) { .oleadas { grid-template-columns: 1fr 1fr; } }
/* ¿SALEN SOLOS O HAY QUE PULSAR? Va ARRIBA y a todo lo ancho de las dos
   oleadas: es lo primero que hay que poder leer en esta pantalla, porque un
   aviso de 24 h antes que espera a que alguien pulse llega tarde o no llega. */
.salen-solos {
  grid-column: 1 / -1; margin: 0; padding: var(--e3) var(--e4);
  border-radius: var(--r-m); font-size: 13.5px; line-height: 1.5;
  display: flex; gap: 8px; align-items: baseline;
}
.salen-solos::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  transform: translateY(-1px);
}
.salen-solos[data-estado="si"] { background: var(--libre-bg); color: var(--libre-t); }
.salen-solos[data-estado="si"]::before { background: var(--libre); }
.salen-solos[data-estado="no"] {
  background: var(--completo-bg); color: var(--completo-t); font-weight: 600;
}
.salen-solos[data-estado="no"]::before { background: var(--completo); }
.oleada { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-1); padding: var(--e4) var(--e5);
  display: flex; align-items: flex-start; gap: var(--e4); min-width: 0; }
.oleada .txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oleada h3 { font-size: 1rem; }
.oleada p { font-size: .88rem; color: var(--tinta-2); }
.oleada .ahora { font-family: var(--mono); font-size: .78rem; color: var(--salvia); }
.oleada .proxima { font-size: .82rem; color: var(--tinta-3); }
/* El boton de la cobertura: a la izquierda y del ancho de su texto, como los
   demas. Estirado de lado a lado parecia un cartel, no algo que se pulsa. */
#plantillaRecordar .btn-linea { align-self: flex-start; width: auto;
  margin-top: var(--e2); }

/* Una oleada con trabajo que no se puede hacer no se parece a una en reposo */
.oleada[data-trabado="1"] { border-color: var(--justo); background: var(--justo-bg); }
.oleada[data-trabado="1"] .ahora { color: var(--justo-t); font-weight: 600; }
.oleada .sin-tel-oleada { font-size: .82rem; line-height: 1.5; color: var(--justo-t); }
.oleada .sin-tel-oleada strong { font-weight: 700; }
/* El boton lleva una frase larga («Escribir sus números en Agenda») y
   `.btn-linea` es `white-space: nowrap`: dentro de una columna estrecha su
   ancho intrinseco empujaba la PAGINA 24 px a la derecha en un movil de 298.
   Aqui el texto se parte; el resto de los botones siguen sin partirse. */
.oleada .txt .btn-linea { align-self: flex-start; margin-top: var(--e2);
  white-space: normal; max-width: 100%; text-align: left; }
.oleada .btn-linea { flex: none; }

/* lo mandado, con el texto delante */
.pila-record { padding: 0 var(--e5) var(--e5); display: flex; flex-direction: column;
  gap: var(--e4); min-width: 0; }
.recordatorio { border: 1px solid var(--linea); border-radius: var(--r-l);
  padding: var(--e4); background: var(--panel); border-left: 3px solid var(--linea);
  min-width: 0; }
.recordatorio[data-tono="bien"] { border-left-color: var(--libre); }
.recordatorio[data-tono="malo"] { border-left-color: var(--completo); }
.recordatorio[data-tono="neutro"] { border-left-color: var(--piedra); }
.recordatorio .cab { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; min-width: 0; }
.recordatorio .quien { min-width: 0; }
.recordatorio h3 { font-size: .98rem; }
.recordatorio .clase { display: block; font-size: .8rem; color: var(--tinta-3); margin-top: 2px; }
.recordatorio .marcas { display: flex; gap: var(--e2); flex-wrap: wrap; }
.sello-r { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--linea); color: var(--tinta-3); }
.sello-r.tipo { background: var(--hueco); border-color: transparent; color: var(--tinta-2);
  font-family: var(--mono); }
.recordatorio[data-tono="bien"] .sello-r.est { color: var(--libre-t); border-color: var(--libre); }
.recordatorio[data-tono="malo"] .sello-r.est { color: var(--completo-t); border-color: var(--completo); }
.sello-r.resp { font-weight: 600; border-color: transparent; }
.sello-r.resp[data-r="va"] { background: var(--libre-bg); color: var(--libre-t); }
.sello-r.resp[data-r="no_va"] { background: var(--justo-bg); color: var(--justo-t); }

/* el texto exacto: es lo que Dani tiene que poder corregir antes de que salga */
.texto-mandado { margin-top: var(--e3); background: var(--crema); border-radius: var(--r-m);
  padding: var(--e3) var(--e4); }
.texto-mandado .etq { display: block; font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3);
  margin-bottom: var(--e2); }
.texto-mandado p { font-size: .88rem; color: var(--tinta); line-height: 1.5; }
.motivo-r { margin-top: var(--e3); font-size: .84rem; color: var(--justo-t);
  background: var(--justo-bg); border-radius: var(--r-m); padding: var(--e3); }

@media (max-width: 720px) {
  .pila-record { padding-left: var(--e4); padding-right: var(--e4); }
  .oleada { flex-direction: column; }
  .oleada .btn-linea { width: 100%; }
}

/* ════════════════════════════════════════ LOS QUE ACABAN DE ENTRAR ══ */
/* Va dentro de Retención y antes de la lista de fuga, porque quien entra y no
   arranca se pierde en semanas y el otro motor no lo ve. */
.cifras-nuevos { display: flex; flex-wrap: wrap; gap: var(--e5);
  padding: 0 var(--e5) var(--e4); }
.cifra-n { display: flex; flex-direction: column; gap: 2px; }
.cifra-n .v { font-family: var(--mono); font-size: 1.5rem; font-weight: 600;
  color: var(--tinta); line-height: 1; font-variant-numeric: tabular-nums; }
.cifra-n .k { font-size: .76rem; color: var(--tinta-3); }
.cifra-n[data-tono="bien"] .v { color: var(--libre-t); }
.cifra-n[data-tono="malo"] .v { color: var(--completo-t); }
.cifra-n[data-tono="ojo"] .v  { color: var(--justo-t); }

.pila-nuevos { padding: 0 var(--e5) var(--e3); display: flex; flex-direction: column;
  min-width: 0; }
.fila-nuevo { display: grid; grid-template-columns: 1fr auto; gap: var(--e4);
  align-items: start; padding: var(--e4) 0 var(--e4) var(--e4);
  border-bottom: 1px solid var(--linea-sutil); border-left: 3px solid var(--linea);
  min-width: 0; }
.fila-nuevo:last-child { border-bottom: none; }
.fila-nuevo > * { min-width: 0; }
.fila-nuevo[data-tono="malo"]   { border-left-color: var(--completo); }
.fila-nuevo[data-tono="ojo"]    { border-left-color: var(--justo); }
.fila-nuevo[data-tono="bien"]   { border-left-color: var(--libre); }
.fila-nuevo[data-tono="neutro"] { border-left-color: var(--piedra); }

.fila-nuevo .cab { display: flex; align-items: baseline; gap: var(--e3);
  flex-wrap: wrap; min-width: 0; }
.fila-nuevo h3 { font-size: .98rem; }
/* el estado va con palabra, nunca solo con el color de la franja */
.sello-n { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--linea); color: var(--tinta-3); }
.fila-nuevo[data-tono="malo"] .sello-n { background: var(--completo-bg);
  color: var(--completo-t); border-color: transparent; }
.fila-nuevo[data-tono="ojo"] .sello-n { background: var(--justo-bg);
  color: var(--justo-t); border-color: transparent; }
.fila-nuevo[data-tono="bien"] .sello-n { background: var(--libre-bg);
  color: var(--libre-t); border-color: transparent; }
.fila-nuevo .lectura { font-size: .88rem; color: var(--tinta-2); margin-top: 3px; }
.fila-nuevo .que { font-size: .84rem; color: var(--tinta-3); margin-top: 2px; }
.fila-nuevo .sin-tel { font-family: var(--mono); font-size: .74rem; color: var(--justo-t);
  margin-top: var(--e2); }

.fila-nuevo .datos { display: flex; gap: var(--e4); text-align: right; white-space: nowrap; }
.fila-nuevo .datos > div { display: flex; flex-direction: column; gap: 1px; }
.fila-nuevo .datos .v { font-family: var(--mono); font-size: .95rem; font-weight: 600;
  color: var(--tinta); font-variant-numeric: tabular-nums; }
.fila-nuevo .datos .k { font-size: .7rem; color: var(--tinta-3); text-transform: uppercase;
  letter-spacing: .05em; }

@media (max-width: 720px) {
  .cifras-nuevos, .pila-nuevos { padding-left: var(--e4); padding-right: var(--e4); }
  .cifras-nuevos { gap: var(--e4); }
  .fila-nuevo { grid-template-columns: 1fr; }
  .fila-nuevo .datos { text-align: left; justify-content: flex-start; }
}

/* ══════════════════════════════════════ LO QUE SE VA A PERDER ══ */
/* Tres cajones por urgencia. El primero —lo YA perdido— es el que no existía
   en ningún sitio: dinero cobrado que nadie ha reclamado. */
.reloj-caduca { display: flex; flex-wrap: wrap; gap: var(--e4);
  padding: 0 var(--e5) var(--e4); }
.reloj-caduca .cajon { flex: 1 1 170px; min-width: 0; border-radius: var(--r-m);
  padding: var(--e3) var(--e4); display: flex; flex-direction: column; gap: 2px;
  border-left: 3px solid var(--piedra); background: var(--crema); }
.reloj-caduca .cajon[data-tono="malo"] { background: var(--completo-bg);
  border-left-color: var(--completo); }
.reloj-caduca .cajon[data-tono="ojo"] { background: var(--justo-bg);
  border-left-color: var(--justo); }
.reloj-caduca .etq { font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tinta-3); }
.reloj-caduca .v { font-family: var(--mono); font-size: 1.35rem; font-weight: 600;
  color: var(--tinta); line-height: 1.1; font-variant-numeric: tabular-nums; }
.reloj-caduca .cajon[data-tono="malo"] .v { color: var(--completo-t); }
.reloj-caduca .cajon[data-tono="ojo"] .v { color: var(--justo-t); }
.reloj-caduca .k { font-size: .76rem; color: var(--tinta-2); }

.pila-caduca { padding: 0 var(--e5) var(--e3); display: flex; flex-direction: column;
  min-width: 0; }
.fila-caduca { display: grid; grid-template-columns: 1fr auto; gap: var(--e4);
  align-items: center; padding: var(--e3) 0 var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea-sutil); border-left: 3px solid var(--linea);
  min-width: 0; }
.fila-caduca:last-child { border-bottom: none; }
.fila-caduca > * { min-width: 0; }
.fila-caduca[data-tono="malo"]   { border-left-color: var(--completo); }
.fila-caduca[data-tono="ojo"]    { border-left-color: var(--justo); }
.fila-caduca[data-tono="neutro"] { border-left-color: var(--piedra); }
.fila-caduca .cab { display: flex; align-items: baseline; gap: var(--e3);
  flex-wrap: wrap; min-width: 0; }
.fila-caduca h3 { font-size: .94rem; }
.sello-c { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--linea); color: var(--tinta-3); }
.fila-caduca[data-tono="malo"] .sello-c { background: var(--completo-bg);
  color: var(--completo-t); border-color: transparent; }
.fila-caduca[data-tono="ojo"] .sello-c { background: var(--justo-bg);
  color: var(--justo-t); border-color: transparent; }
.fila-caduca .det { font-size: .82rem; color: var(--tinta-2); margin-top: 2px; }
.fila-caduca .sin-tel { font-family: var(--mono); font-size: .72rem; color: var(--justo-t);
  margin-top: 2px; }
.fila-caduca .valor-c { text-align: right; white-space: nowrap; display: flex;
  flex-direction: column; gap: 1px; }
.fila-caduca .valor-c .v { font-family: var(--mono); font-size: 1rem; font-weight: 600;
  color: var(--tinta); font-variant-numeric: tabular-nums; }
.fila-caduca .valor-c .k { font-family: var(--mono); font-size: .72rem; color: var(--tinta-3); }

/* la decisión es del centro, y se dice con su propio recuadro */
.decision-suya { margin: 0 var(--e5) var(--e5); font-size: .84rem; color: var(--tinta-2);
  background: var(--arena); border-left: 3px solid var(--piedra);
  border-radius: 0 var(--r-m) var(--r-m) 0; padding: var(--e3) var(--e4); }

@media (max-width: 720px) {
  .reloj-caduca, .pila-caduca { padding-left: var(--e4); padding-right: var(--e4); }
  .decision-suya { margin-left: var(--e4); margin-right: var(--e4); }
  .fila-caduca { grid-template-columns: 1fr; }
  .fila-caduca .valor-c { text-align: left; flex-direction: row; gap: var(--e3);
    align-items: baseline; }
}

/* ═══════════════════════════════════════════ LAS HORAS MUERTAS ══ */
/* Cuánto pasado hay, dicho antes del mapa: una conclusión sacada de tres días
   no vale nada, y la pantalla tiene que decirlo antes de que nadie la saque. */
.cobertura-f { margin: 0 var(--e5) var(--e4); border-radius: var(--r-m);
  padding: var(--e3) var(--e4); display: flex; flex-direction: column; gap: 3px; }
.cobertura-f[data-estado="ok"] { background: var(--crema); border-left: 3px solid var(--piedra); }
.cobertura-f[data-estado="poco"] { background: var(--justo-bg); border-left: 3px solid var(--justo); }
.cobertura-f .etq { font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta-2); }
.cobertura-f[data-estado="poco"] .etq { color: var(--justo-t); }
.cobertura-f .det { font-size: .84rem; color: var(--tinta-2); max-width: 82ch; }

/* el mapa: día × hora */
#mapaFranjas { padding: 0 var(--e5) var(--e4); overflow-x: auto; }
.mapa-franjas { display: grid; gap: 2px; min-width: 340px; }
.mapa-franjas .esquina { }
.mapa-franjas .cab-dia { font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-3); text-align: center; padding-bottom: 2px; }
.mapa-franjas .cab-hora { font-family: var(--mono); font-size: .72rem; color: var(--tinta-3);
  padding-right: var(--e3); display: flex; align-items: center; justify-content: flex-end;
  white-space: nowrap; }
.celda-f { display: flex; align-items: center; justify-content: center;
  min-height: 34px; border-radius: var(--r-s); font-family: var(--mono); font-size: .74rem;
  font-weight: 600; font-variant-numeric: tabular-nums; cursor: default; }
/* 0 % es un VALOR y se pinta; «sin clase» y «pocos datos» NO lo son y se
   distinguen a simple vista. Confundirlos es la mentira clásica del mapa. */
.celda-f[data-tipo="no-hay"] { background: transparent; border: 1px dashed var(--linea);
  color: var(--piedra); }
.celda-f[data-tipo="pocos"] { color: var(--tinta-3);
  background: repeating-linear-gradient(45deg, var(--hueco) 0 4px, transparent 4px 8px);
  border: 1px solid var(--linea-sutil); }

.leyenda-f { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4);
  margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linea-sutil); }
.leyenda-f .escala { display: flex; align-items: center; gap: 3px; }
.leyenda-f .escala .e { font-family: var(--mono); font-size: .7rem; color: var(--tinta-3); }
.leyenda-f .escala .paso { width: 22px; height: 10px; border-radius: 2px; }
.leyenda-f .aparte { display: flex; flex-wrap: wrap; gap: var(--e4); }
.clave-f { display: flex; align-items: center; gap: var(--e2); font-size: .78rem;
  color: var(--tinta-3); }
.clave-f .muestra { width: 22px; height: 18px; border-radius: 3px; display: flex;
  align-items: center; justify-content: center; font-family: var(--mono); font-size: .7rem; }
.clave-f .muestra[data-tipo="no-hay"] { border: 1px dashed var(--linea); color: var(--piedra); }
.clave-f .muestra[data-tipo="pocos"] { color: var(--tinta-3);
  background: repeating-linear-gradient(45deg, var(--hueco) 0 4px, transparent 4px 8px);
  border: 1px solid var(--linea-sutil); }

/* lo que haría con cada franja */
.pila-propuestas { padding: 0 var(--e5) var(--e5); display: flex; flex-direction: column;
  gap: var(--e3); min-width: 0; }
.lectura-f { font-size: .92rem; color: var(--tinta); margin-bottom: var(--e2); }
.propuesta-f { border-left: 3px solid var(--linea); padding-left: var(--e4); min-width: 0; }
.propuesta-f[data-tipo="quitar_o_mover"] { border-left-color: var(--completo); }
.propuesta-f[data-tipo="quitar_algunos_dias"] { border-left-color: var(--justo); }
.propuesta-f[data-tipo="doblar"] { border-left-color: var(--libre); }
.propuesta-f .cab { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.hora-f { font-family: var(--mono); font-size: .95rem; font-weight: 600; color: var(--tinta);
  text-transform: capitalize; }
.sello-f2 { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap; border: 1px solid var(--linea);
  color: var(--tinta-3); }
.propuesta-f[data-tipo="quitar_o_mover"] .sello-f2 { background: var(--completo-bg);
  color: var(--completo-t); border-color: transparent; }
.propuesta-f[data-tipo="quitar_algunos_dias"] .sello-f2 { background: var(--justo-bg);
  color: var(--justo-t); border-color: transparent; }
.propuesta-f[data-tipo="doblar"] .sello-f2 { background: var(--libre-bg);
  color: var(--libre-t); border-color: transparent; }
.propuesta-f .txt { font-size: .88rem; color: var(--tinta-2); margin-top: 2px; }
.propuesta-f .mirar { font-size: .84rem; color: var(--tinta-3); margin-top: 2px; }

@media (max-width: 720px) {
  .cobertura-f { margin-left: var(--e4); margin-right: var(--e4); }
  #mapaFranjas, .pila-propuestas { padding-left: var(--e4); padding-right: var(--e4); }
}

/* ══════════════════════════════════════════════ ENTRENADORES ══ */
.como-se-lee { background: var(--arena); border-left: 3px solid var(--piedra);
  border-radius: 0 var(--r-m) var(--r-m) 0; padding: var(--e3) var(--e4);
  font-size: .88rem; color: var(--tinta-2); max-width: 84ch; }

.fichas-p { display: grid; grid-template-columns: 1fr; gap: var(--e4); }
@media (min-width: 900px) { .fichas-p { grid-template-columns: repeat(2, 1fr); } }
.ficha-p { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-1); padding: var(--e4) var(--e5); min-width: 0;
  border-left: 3px solid var(--piedra); }
/* El tono solo se moja cuando la diferencia es de verdad. Un cero es NORMAL,
   no mediocre, y no se pinta de amarillo por si acaso. */
.ficha-p[data-tono="arriba"] { border-left-color: var(--libre); }
.ficha-p[data-tono="abajo"]  { border-left-color: var(--justo); }
.ficha-p[data-tono="igual"]  { border-left-color: var(--piedra); }
.ficha-p[data-tono="neutro"] { border-left-color: var(--linea); }

.ficha-p > header { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; min-width: 0; }
.ficha-p h3 { font-size: 1.15rem; }
.ficha-p .ses { display: block; font-family: var(--mono); font-size: .74rem;
  color: var(--tinta-3); margin-top: 2px; }

/* el número grande es LA DIFERENCIA, no la ocupación */
.ficha-p .dif { text-align: right; flex: none; display: flex; flex-direction: column; gap: 1px; }
.ficha-p .dif .v { font-family: var(--mono); font-size: 1.7rem; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--tinta); }
.ficha-p[data-tono="arriba"] .dif .v { color: var(--libre-t); }
.ficha-p[data-tono="abajo"]  .dif .v { color: var(--justo-t); }
.ficha-p .dif .k { font-size: .68rem; color: var(--tinta-3); max-width: 15ch;
  text-align: right; line-height: 1.25; }

.lectura-p { font-size: .92rem; color: var(--tinta); margin-top: var(--e3);
  line-height: 1.5; }

.datos-p { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); margin-top: var(--e4);
  padding-top: var(--e3); border-top: 1px solid var(--linea-sutil); }
.datos-p > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.datos-p .v { font-family: var(--mono); font-size: .95rem; font-weight: 600;
  color: var(--tinta); font-variant-numeric: tabular-nums; }
.datos-p .k { font-size: .7rem; color: var(--tinta-3); text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; }

.poca-cobertura { margin-top: var(--e3); font-size: .82rem; color: var(--justo-t);
  background: var(--justo-bg); border-radius: var(--r-m); padding: var(--e2) var(--e3); }

/* ═══════════════════════════════════════════════ EL PARTE DEL DÍA ══
   La pantalla de las ocho de la mañana. Se diseña para el móvil de pie y
   luego se deja respirar en el escritorio, no al revés: es la única vista
   que se va a abrir con una mano.                                      */

.fecha-parte {
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3); margin: 0 0 var(--e1);
}
.lectura-parte {
  font-size: 17px; line-height: 1.45; color: var(--tinta-2);
  max-width: 54ch; margin: 0;
}

/* ── «No hay nada que hacer»: el bloque que hace que esto se siga mirando.
      Va en menta, no en verde de estado: no es un semáforo, es una calma. ── */
/* display:flex GANA al [hidden] del navegador (que es solo display:none sin
   clase), asi que sin esta linea el hueco se pinta como una caja vacia. Le
   paso lo mismo a .vista y ya estaba resuelto ahi arriba. */
.en-orden[hidden], .zona-ayer[hidden], .tit-bloque[hidden] { display: none; }

.en-orden {
  display: flex; flex-direction: column; gap: var(--e1);
  margin: var(--e5) 0 0;
  padding: var(--e4) var(--e4) var(--e4) var(--e5);
  border-radius: var(--r-l);
  background: linear-gradient(100deg, #EDF4F0 0%, var(--panel) 85%);
  border: 1px solid #D6E5DE;
  box-shadow: var(--sombra-1);
  position: relative; overflow: hidden;
}
.en-orden::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--menta);
}
.en-orden strong { font-size: 18px; color: var(--tinta); }
.en-orden span { font-size: 14px; color: var(--tinta-2); line-height: 1.5; }

.tit-bloque {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 600;
  margin: var(--e6) 0 var(--e3); padding-bottom: var(--e2);
  border-bottom: 1px solid var(--linea-sutil);
}

/* ── los avisos: cada uno es un botón que lleva al módulo que lo calculó ── */
.avisos-p { display: flex; flex-direction: column; gap: var(--e2); }

.aviso-p {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e1) var(--e3);
  align-items: baseline; text-align: left; width: 100%;
  padding: var(--e3) var(--e4);
  background: var(--panel); border: 1px solid var(--linea);
  border-left: 3px solid var(--piedra);
  border-radius: var(--r-m); cursor: pointer; font: inherit;
  transition: border-color .18s var(--curva), transform .18s var(--curva),
              box-shadow .18s var(--curva);
}
.aviso-p:hover:not(:disabled) {
  border-color: var(--salvia); transform: translateX(2px);
  box-shadow: var(--sombra-1);
}
.aviso-p:disabled { cursor: default; opacity: .85; }
.aviso-p[data-ur="ya"] { border-left-color: var(--completo); }
.aviso-p[data-ur="pronto"] { border-left-color: var(--justo); }
.aviso-p.firma { border-left-color: var(--salvia); background: #FCFBF8; }

.aviso-p .ur {
  grid-row: 1; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-3); white-space: nowrap;
  padding-top: 2px;
}
.aviso-p[data-ur="ya"] .ur { color: var(--completo-t); }
.aviso-p[data-ur="pronto"] .ur { color: var(--justo-t); }
.aviso-p.firma .ur { color: var(--salvia); }
.aviso-p .tx { grid-row: 1; font-size: 15px; font-weight: 600; color: var(--tinta); }
.aviso-p .de {
  grid-column: 2; grid-row: 2; font-size: 13px; color: var(--tinta-2); line-height: 1.45;
}

/* ── las clases de hoy: una fila por clase, con su barra ── */
.clases-p { display: flex; flex-direction: column; gap: var(--e1); }

.clase-p {
  display: grid; gap: 0 var(--e3);
  grid-template-columns: 3.4rem 1fr auto;
  grid-template-areas: "h med ocu" ". barra barra";
  align-items: center;
  padding: var(--e3) var(--e3) var(--e2);
  background: var(--panel); border: 1px solid var(--linea-sutil);
  border-radius: var(--r-m);
}
.clase-p[data-paso="1"] { opacity: .52; background: transparent; }
.clase-p[data-estado="completo"] { background: var(--completo-bg); border-color: #EBD8D0; }
.clase-p[data-estado="justo"] { background: var(--justo-bg); border-color: #F0E3C6; }

.clase-p .h {
  grid-area: h; font-family: var(--mono); font-size: 15px; font-weight: 600;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.clase-p .med { grid-area: med; display: flex; flex-direction: column; min-width: 0; }
.clase-p .act {
  font-size: 14px; font-weight: 600; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clase-p .bajo { font-size: 12px; color: var(--tinta-3); }
.clase-p .ocu { grid-area: ocu; text-align: right; }
.clase-p .ocu .n {
  display: block; font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.clase-p .ocu .e { display: block; font-size: 11px; color: var(--tinta-3); }
.clase-p[data-estado="completo"] .ocu .e { color: var(--completo-t); font-weight: 600; }
.clase-p[data-estado="justo"] .ocu .e { color: var(--justo-t); font-weight: 600; }

/* OJO CON EL NOMBRE. `.barra` ya es la barra superior pegajosa de la app
   entera (position:sticky, padding, backdrop-filter): llamar igual a esto
   heredaba 24px de padding y un z-index, y la linea de 3px salió del tamaño
   de un ladrillo. Un nombre propio y se acaba la colision. */
.clase-p .mini-barra {
  grid-area: barra; height: 3px; margin-top: var(--e2);
  background: var(--hueco); border-radius: 2px; overflow: hidden;
}
.clase-p .mini-barra i { display: block; height: 100%; background: var(--salvia); border-radius: 2px; }
.clase-p[data-estado="completo"] .mini-barra i { background: var(--completo); }
.clase-p[data-estado="justo"] .mini-barra i { background: var(--justo); }

/* ── los de ayer: a quien se llama hoy ── */
.zona-ayer .expl { font-size: 14px; color: var(--tinta-2); margin: 0 0 var(--e3); }
.lista-ayer { list-style: none; margin: 0; padding: 0; display: flex;
              flex-direction: column; gap: var(--e1); }
.lista-ayer li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--panel); border: 1px solid var(--linea-sutil); border-radius: var(--r-s);
}
.lista-ayer strong { font-size: 14px; color: var(--tinta); }
.lista-ayer span { font-size: 12px; color: var(--tinta-3); }
.lista-ayer .sin-tel {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--justo-t); background: var(--justo-bg);
  padding: 1px 6px; border-radius: 999px;
}

/* el módulo de portada va separado del resto del carril */
.grupo-mod.primero { margin-bottom: var(--e2); padding-bottom: var(--e3);
                     border-bottom: 1px solid var(--linea-sutil); }
.modulos button.portada .etq-mod { font-weight: 700; }

@media (max-width: 720px) {
  .lectura-parte { font-size: 15px; }
  .en-orden { padding: var(--e3) var(--e3) var(--e3) var(--e4); }
  .en-orden strong { font-size: 16px; }
  .clase-p { grid-template-columns: 3rem 1fr auto; padding: var(--e2) var(--e2) var(--e1); }
  .aviso-p {
    grid-template-columns: 1fr; padding: var(--e3);
  }
  .aviso-p .ur { grid-row: 1; }
  .aviso-p .tx { grid-row: 2; }
  .aviso-p .de { grid-column: 1; grid-row: 3; }
  .grupo-mod.primero { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
}

/* El parte es una pantalla de MÓVIL. En un monitor de 27" no tiene que
   estirarse hasta el borde: una fila de 1.100 px deja el nombre de la clase
   y su ocupación a dos palmos, y se pierde la mirada entre los dos. Se le
   pone medida de lectura y se queda a la izquierda, donde empieza a leerse. */
@media (min-width: 900px) {
  #v-parte .en-orden,
  #v-parte .avisos-p,
  #v-parte .clases-p,
  #v-parte .zona-ayer,
  #v-parte .tit-bloque,
  #v-parte .nota-pie { max-width: 760px; }
}

/* ═════════════════════════════════════════ MIENTRAS NO ESTABAS ══
   Un diario se lee de arriba abajo, así que lo que manda aquí es el ritmo de
   la lista: una línea por cosa, la hora a la izquierda siempre en el mismo
   sitio, y quién lo hizo al final en gris. Lo atascado rompe ese ritmo a
   propósito — va en su caja, arriba, antes de la lista.                   */

.mandos-diario {
  display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
  margin: var(--e5) 0 0; padding: var(--e3) var(--e4);
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  font-size: 13px; color: var(--tinta-2);
}
.mandos-diario select {
  font-family: var(--sans); font-size: 13.5px; color: var(--tinta);
  background: var(--crema); border: 1px solid var(--linea); border-radius: 999px;
  padding: 7px var(--e3);
}

/* lo atascado: la única parte accionable */
.atascos { margin: var(--e4) 0 0; }
.atascos .tit-bloque { margin-top: 0; color: var(--completo-t); }
.atasco {
  display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap;
  padding: var(--e2) var(--e3); margin-bottom: var(--e1);
  background: var(--completo-bg); border-left: 3px solid var(--completo);
  border-radius: var(--r-s); font-size: 14px; line-height: 1.5; color: var(--completo-t);
}
.atasco .cdo { font-family: var(--mono); font-size: 11.5px; opacity: .8; flex: none; }
.atasco .que { font-weight: 600; }

.filtros-diario { display: flex; gap: var(--e2); flex-wrap: wrap; margin: 0 0 var(--e3); }
.filtros-diario .filtro {
  font-family: var(--sans); font-size: 12.5px; cursor: pointer;
  padding: 6px var(--e3); border-radius: 999px;
  border: 1px solid var(--linea); background: var(--panel); color: var(--tinta-2);
  transition: background .16s var(--curva), color .16s var(--curva),
              border-color .16s var(--curva);
}
.filtros-diario .filtro:hover { border-color: var(--salvia); }
.filtros-diario .filtro[data-puesto="1"] {
  background: var(--pizarra); border-color: var(--pizarra); color: var(--crema); font-weight: 600;
}
.filtros-diario .filtro:focus-visible { outline: 2px solid var(--pizarra); outline-offset: 2px; }

.lineas { display: flex; flex-direction: column; }
.dia-diario {
  margin: var(--e4) 0 var(--e2); font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3);
}
.dia-diario:first-child { margin-top: 0; }
.linea-diario {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: var(--e3);
  align-items: baseline; padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--linea-sutil);
  font-size: 14px; line-height: 1.5; color: var(--tinta-2);
}
.linea-diario:last-child { border-bottom: none; }
.linea-diario .cdo {
  font-family: var(--mono); font-size: 11.5px; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.linea-diario .quien { font-size: 11px; color: var(--tinta-3); white-space: nowrap; }
.linea-diario .que code {
  font-family: var(--mono); font-size: 12.5px; background: var(--hueco);
  padding: 1px 5px; border-radius: var(--r-s); color: var(--tinta);
}
.linea-diario .sin-traducir { color: var(--justo-t); }
/* el punto de quién lo hizo, delante de la hora: se lee la columna de un golpe */
.linea-diario .cdo::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; background: var(--piedra); vertical-align: middle;
}
.linea-diario[data-de="brain"] .cdo::before  { background: var(--salvia); }
.linea-diario[data-de="socio"] .cdo::before  { background: var(--menta); }
.linea-diario[data-de="persona"] .cdo::before { background: var(--pizarra); }
.linea-diario[data-tono="bien"] .que { color: var(--tinta); }
.linea-diario[data-tono="ojo"]  { background: var(--justo-bg); }
.linea-diario[data-tono="ojo"] .que { color: var(--justo-t); }
.linea-diario[data-tono="malo"] { background: var(--completo-bg); }
.linea-diario[data-tono="malo"] .que { color: var(--completo-t); font-weight: 600; }

@media (min-width: 900px) {
  #v-diario .mandos-diario, #v-diario .diario-lineas, #v-diario .tit-bloque,
  #v-diario .atascos, #v-diario .nota-pie { max-width: 820px; }
}
@media (max-width: 620px) {
  /* en el móvil la hora va encima: tres columnas no caben sin partir palabras */
  .linea-diario { grid-template-columns: 1fr; gap: 2px; }
  .linea-diario .quien { justify-self: start; }
}

/* ═══════════════════════════════════════════════════ LLEGADAS ══
   Esta pantalla empieza vacía y va a seguir vacía hasta que alguien pegue
   el QR en la pared. Así que el bloque de montaje no es un aviso pequeño
   al pie: mientras no haya un solo tap, ES la pantalla.                 */

.montaje {
  margin: var(--e5) 0 0; padding: var(--e4);
  border-radius: var(--r-l); background: var(--panel);
  border: 1px solid var(--linea); box-shadow: var(--sombra-1);
}
.montaje[data-estado="sin-empezar"] {
  background: linear-gradient(100deg, #FAF6EC 0%, var(--panel) 80%);
  border-color: #EBDFC4;
}
.montaje .tit-bloque { margin-top: 0; }
.montaje .expl { font-size: 14px; line-height: 1.55; color: var(--tinta-2); margin: 0 0 var(--e3); }

.caja-enlace { display: flex; gap: var(--e2); align-items: stretch; flex-wrap: wrap; }
.caja-enlace input {
  flex: 1 1 18rem; min-width: 0;
  font-family: var(--mono); font-size: 12px; color: var(--tinta-2);
  padding: var(--e2) var(--e3);
  background: var(--hueco); border: 1px solid var(--linea); border-radius: var(--r-s);
}
/* .btn de serie trae width:100%, asi que sin esto el boton de copiar se iba
   a una segunda linea ocupandola entera. */
.caja-enlace .btn { margin: 0; width: auto; white-space: nowrap; }

.pasos-cartel {
  margin: var(--e4) 0 0; padding-left: 1.35rem;
  display: flex; flex-direction: column; gap: var(--e3);
  font-size: 14px; line-height: 1.55; color: var(--tinta-2);
}
.pasos-cartel li::marker { color: var(--salvia); font-weight: 700; }
.pasos-cartel code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--hueco); padding: 1px 5px; border-radius: var(--r-s); color: var(--tinta);
}
.pasos-cartel .btn {
  margin: 0 var(--e1) 0 0; width: auto;
  display: inline-block; text-decoration: none;   /* es un boton, no un enlace subrayado */
}

/* ── los toques que no se han podido reconocer ──
   No es una avería: es el cartel funcionando y los enlaces sin repartir.
   Va en ámbar (hay algo que hacer), no en rojo (algo está roto).           */
.aviso-tap {
  margin: var(--e4) 0 0; padding: var(--e3);
  background: var(--justo-bg); border-left: 3px solid var(--justo);
  border-radius: var(--r-s);
  font-size: 14px; line-height: 1.55; color: var(--tinta-2); max-width: 82ch;
}
.aviso-tap strong { color: var(--justo-t); }

/* ── repartir los enlaces personales ──
   De uno en uno a propósito: cada enlace identifica a su persona en /yo.   */
.reparto {
  margin: var(--e4) 0 0; padding-top: var(--e4);
  border-top: 1px solid var(--linea-sutil);
}
.reparto .tit-bloque { margin-top: 0; }
.busca-enlace { display: flex; gap: var(--e2); align-items: stretch; flex-wrap: wrap; }
.busca-enlace input {
  flex: 1 1 14rem; min-width: 0; font-family: var(--sans); font-size: 15px;
  padding: 10px var(--e4); border: 1px solid var(--linea); border-radius: 999px;
  background: var(--panel); color: var(--tinta); outline: none;
}
.busca-enlace input:focus { border-color: var(--salvia);
                            box-shadow: 0 0 0 3px rgba(107,143,136,.16); }
.busca-enlace .btn { margin: 0; width: auto; white-space: nowrap; }

.salida-enlace {
  margin: var(--e3) 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
}
/* con el enlace ya sacado, la caja ocupa una línea entera y el aviso otra */
.salida-enlace .caja-enlace,
.salida-enlace .ojo-enlace,
.salida-enlace .quien-enlace,
.salida-enlace .vacio,
.salida-enlace .que-es { flex: 1 1 100%; margin: 0; }
.salida-enlace .quien-enlace { font-size: 14px; font-weight: 600; color: var(--tinta); }
.salida-enlace .ojo-enlace {
  font-size: 12.5px; line-height: 1.5; color: var(--justo-t);
  background: var(--justo-bg); border-radius: var(--r-s); padding: var(--e2) var(--e3);
}

/* ── los taps de hoy ── */
.taps { display: flex; flex-direction: column; gap: var(--e1); }
.tap {
  display: grid; grid-template-columns: 3.4rem 1fr auto; gap: var(--e3);
  align-items: center; padding: var(--e2) var(--e3);
  background: var(--panel); border: 1px solid var(--linea-sutil); border-radius: var(--r-m);
}
.tap .h {
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.tap .med { display: flex; flex-direction: column; min-width: 0; }
.tap .quien { font-size: 14px; font-weight: 600; color: var(--tinta); }
.tap .bajo { font-size: 12px; color: var(--tinta-3); }
.tap .sit {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--libre-bg); color: var(--libre-t);
}
.tap[data-situacion="sin_reserva"] .sit { background: var(--justo-bg); color: var(--justo-t); }
.tap[data-situacion="fuera_de_hora"] .sit { background: var(--completo-bg); color: var(--completo-t); }

/* ── quién reserva y no viene: lo único con datos desde el primer día ── */
.plantones .expl { font-size: 14px; line-height: 1.55; color: var(--tinta-2); margin: 0 0 var(--e3); }
.lista-plantones { list-style: none; margin: 0; padding: 0;
                   display: flex; flex-direction: column; gap: var(--e1); }
.lista-plantones li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--panel); border: 1px solid var(--linea-sutil);
  border-left: 3px solid var(--piedra); border-radius: var(--r-s);
}
.lista-plantones li[data-tono="alto"] { border-left-color: var(--completo); }
.lista-plantones li[data-tono="medio"] { border-left-color: var(--justo); }
.lista-plantones strong { font-size: 14px; color: var(--tinta); }
.lista-plantones .n {
  font-size: 12px; font-weight: 700; color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.lista-plantones li[data-tono="alto"] .n { color: var(--completo-t); }
.lista-plantones .ult { font-size: 12px; color: var(--tinta-3); margin-left: auto; }
.plantones .cobertura {
  font-size: 12.5px; color: var(--tinta-3); line-height: 1.5;
  margin: var(--e3) 0 0; padding-top: var(--e2); border-top: 1px solid var(--linea-sutil);
}

@media (min-width: 900px) {
  #v-llegadas .montaje, #v-llegadas .taps,
  #v-llegadas .plantones, #v-llegadas .nota-pie { max-width: 780px; }
  #v-llegadas .tit-bloque { max-width: 780px; }
}
@media (max-width: 720px) {
  .montaje { padding: var(--e3); }
  .tap { grid-template-columns: 3rem 1fr; }
  .tap .sit { grid-column: 2; justify-self: start; }
  .lista-plantones .ult { margin-left: 0; }
}

/* ══════════════════════════════════════════════ ENTRENAMIENTOS ══
   Dos cosas manda esta pantalla en lo visual:
   · la regla de Dani va ARRIBA y entrecomillada, para que se vea que es
     suya y no una fórmula de la máquina;
   · la atribución va PEGADA a cada imagen. Es la condición de CC-BY-SA y
     también es de justicia: alguien dibujó eso.                        */

.mandos-entrena {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end;
  margin: var(--e5) 0 0; padding: var(--e3) var(--e4);
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-1);
}
.mandos-entrena label { display: flex; flex-direction: column; gap: var(--e1); }
.mandos-entrena label > span {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 600;
}
.mandos-entrena select {
  font: inherit; font-size: 14px; color: var(--tinta);
  padding: 8px var(--e3); min-width: 0; max-width: 100%;
  background: var(--crema); border: 1px solid var(--linea); border-radius: var(--r-s);
}
.mandos-entrena .btn { margin: 0; width: auto; }

/* ── la regla, con sus palabras ── */
.regla-aforo {
  display: flex; flex-direction: column; gap: var(--e2);
  margin: var(--e4) 0 0; padding: var(--e4);
  border-radius: var(--r-l); border: 1px solid var(--linea);
  background: var(--panel); position: relative; overflow: hidden;
}
.regla-aforo[hidden] { display: none; }
.regla-aforo::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--piedra);
}
/* si la regla es SUYA se marca en menta; si es el reparto por defecto, en ámbar */
.regla-aforo[data-suya="1"]::before { background: var(--menta); }
.regla-aforo[data-suya="1"] { background: linear-gradient(100deg, #EDF4F0 0%, var(--panel) 80%); }
.regla-aforo[data-suya="0"]::before { background: var(--justo); }
.regla-aforo[data-suya="0"] { background: linear-gradient(100deg, #FAF4E6 0%, var(--panel) 80%); }
.regla-aforo .cab { font-size: 16px; font-weight: 600; color: var(--tinta); }
.regla-aforo blockquote {
  margin: 0; padding-left: var(--e3); border-left: 2px solid var(--salvia);
  font-size: 15px; line-height: 1.5; color: var(--tinta); font-style: italic;
}
.regla-aforo .de { font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.regla-aforo .de.supuesto { color: var(--justo-t); font-weight: 600; }

/* ── los bloques de la sesión ── */
.bloque-ent {
  margin: var(--e5) 0 0; padding: var(--e4);
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
}
.bloque-ent > header {
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  padding-bottom: var(--e2); margin-bottom: var(--e3);
  border-bottom: 1px solid var(--linea-sutil);
}
.bloque-ent h3 { margin: 0; font-size: 15px; color: var(--tinta); }
.bloque-ent .et {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
  color: var(--salvia);
}

.ejercicios { list-style: none; margin: 0; padding: 0;
              display: flex; flex-direction: column; gap: var(--e3); }
.ejercicios li {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding-bottom: var(--e3); border-bottom: 1px solid var(--linea-sutil);
}
.ejercicios li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ── la imagen y SU ATRIBUCIÓN, que van juntas o no van ── */
.ej-figura { margin: 0; flex: 0 0 120px; display: flex; flex-direction: column; gap: var(--e1); }
.ej-figura img {
  display: block; width: 120px; height: 120px; object-fit: contain;
  background: var(--hueco); border-radius: var(--r-m); border: 1px solid var(--linea-sutil);
}
/* display:block a proposito: con flex, cada trozo era un item y los espacios
   de los separadores se colapsaban, asi que la atribucion salia pegada
   («philipCC-BY-SA 4wger.de»). Texto en linea y los separadores se ven. */
.ej-figura figcaption {
  font-size: 10px; line-height: 1.35; color: var(--tinta-3);
  display: block; max-width: 120px; word-break: break-word;
}
.ej-figura figcaption a { color: var(--salvia); text-decoration: none; }
.ej-figura figcaption a:hover { text-decoration: underline; color: var(--tinta); }
.ej-figura figcaption .sep { opacity: .6; }

/* Cuando no hay foto, lo que importa es el nombre del ejercicio: un cuadro
   vacio de 120px por cada uno dejaba la pantalla llena de agujeros (8 de 11
   ejercicios no tienen imagen). Se queda una franja estrecha que marca el
   sitio sin robarlo. */
.sin-imagen {
  flex: 0 0 120px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-s); border: 1px dashed var(--linea);
  background: repeating-linear-gradient(45deg, transparent, transparent 5px,
              var(--hueco) 5px, var(--hueco) 10px);
}
.sin-imagen span {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3); background: var(--panel); padding: 2px 6px; border-radius: var(--r-s);
}

.ejercicios .med { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; flex: 1; }
.ejercicios .tit { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2); }
.ejercicios .est {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--crema);
  background: var(--pizarra); padding: 1px 6px; border-radius: var(--r-s);
}
.ejercicios .carga {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--salvia);
  font-variant-numeric: tabular-nums;
}
.ejercicios .nom { font-size: 15px; font-weight: 600; color: var(--tinta); }
.ejercicios .mat { font-size: 12px; color: var(--tinta-3); }
.ejercicios .alt { font-size: 12px; color: var(--salvia); }
.ejercicios .reg { font-size: 12px; line-height: 1.45; color: var(--tinta-2); }

.material-total {
  margin: var(--e4) 0 0; padding: var(--e3) var(--e4);
  background: var(--hueco); border-radius: var(--r-m);
  font-size: 13px; line-height: 1.5; color: var(--tinta-2);
}
.material-total strong { color: var(--tinta); }

.avisos-ent {
  list-style: none; margin: var(--e3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e2);
}
.avisos-ent li {
  font-size: 13px; line-height: 1.5; color: var(--justo-t);
  padding: var(--e2) var(--e3); background: var(--justo-bg);
  border-radius: var(--r-s); border-left: 3px solid var(--justo);
}

/* ── la firma: lo único que convierte el borrador en algo que se da ── */
.firma-zona {
  margin: var(--e5) 0 0; padding: var(--e4);
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--sombra-1);
}
.firma-zona[hidden] { display: none; }
.firma-zona[data-firmado="1"] { border-color: #D6E5DE; background: #F6FAF8; }
.firma-zona .expl { font-size: 14px; line-height: 1.5; color: var(--tinta-2); margin: 0 0 var(--e3); }
.firma-zona .btn { margin: 0; width: auto; }
.aviso-firma {
  margin: var(--e3) 0 0; font-size: 13px; line-height: 1.5;
  color: var(--tinta); font-weight: 600;
}
.aviso-firma[hidden] { display: none; }

/* ── la cola de revisión de imágenes ── */
.imagenes-zona .expl { font-size: 13.5px; line-height: 1.55; color: var(--tinta-2); margin: 0 0 var(--e3); }
.imagenes-zona .expl.fuente { font-size: 12px; color: var(--tinta-3); }
.revisar {
  margin: 0 0 var(--e4); padding: var(--e3) var(--e4);
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
}
.revisar h4 { margin: 0 0 var(--e1); font-size: 14px; color: var(--tinta); }
.revisar .pregunta { font-size: 12.5px; color: var(--tinta-3); margin: 0 0 var(--e3); }
.tira { display: flex; gap: var(--e3); overflow-x: auto; padding-bottom: var(--e2); }
/* La tarjeta ya no es un boton: lleva dos dentro («es esta» / «no es esta»),
   porque un boton dentro de otro boton no es HTML valido. */
.candidata {
  flex: 0 0 132px; display: flex; flex-direction: column; gap: 3px;
  padding: var(--e2); text-align: left; font: inherit;
  background: var(--crema); border: 1px solid var(--linea); border-radius: var(--r-m);
  transition: border-color .16s var(--curva), opacity .16s var(--curva);
}
.candidata:hover { border-color: var(--salvia); }
.candidata img {
  display: block; width: 100%; height: 108px; object-fit: contain;
  background: var(--panel); border-radius: var(--r-s);
}
.candidata .nw { font-size: 12px; font-weight: 600; color: var(--tinta); line-height: 1.3; }
.candidata .at { font-size: 10px; color: var(--tinta-3); line-height: 1.3; }
.candidata .pc { font-size: 10px; color: var(--salvia); font-weight: 700; }
/* la que alguien ya descarto: se ve, se lee quien lo dijo, y se puede volver a
   elegir —el juicio de una persona no es una verdad del sistema— pero no se
   ofrece con el mismo peso que una sin mirar */
.candidata[data-descartada="1"] { opacity: .62; border-style: dashed; }
.candidata[data-descartada="1"] img { filter: grayscale(1); }
.candidata .desc {
  font-size: 10px; font-weight: 700; line-height: 1.3; color: var(--completo-t);
  background: var(--completo-bg); border-radius: var(--r-s); padding: 2px 5px;
}
.mandos-cand { display: flex; gap: 4px; margin-top: 3px; }
.mandos-cand button {
  flex: 1 1 auto; font-family: var(--sans); font-size: 11px; font-weight: 700;
  padding: 6px 4px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--linea); background: var(--panel); color: var(--tinta-2);
  transition: background .16s var(--curva), color .16s var(--curva),
              border-color .16s var(--curva);
}
.mandos-cand .es-esta { background: var(--salvia); border-color: var(--salvia); color: #fff; }
.mandos-cand .es-esta:hover:not(:disabled) { background: var(--pizarra); border-color: var(--pizarra); }
.mandos-cand .no-es:hover:not(:disabled) {
  border-color: var(--completo); color: var(--completo-t); background: var(--completo-bg);
}
.mandos-cand button:disabled { opacity: .5; cursor: default; }
.mandos-cand button:focus-visible { outline: 2px solid var(--pizarra); outline-offset: 2px; }

/* «no es esta» debajo de una imagen YA PUESTA, en el borrador. Es discreto a
   proposito: quitar la imagen de otro no puede ser mas facil que mirarla. */
.ej-figura .quien-la-puso { font-size: 10px; color: var(--tinta-3); }
.ej-figura .no-es {
  align-self: flex-start; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  padding: 3px 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea); background: transparent; color: var(--tinta-3);
  transition: border-color .16s var(--curva), color .16s var(--curva);
}
.ej-figura .no-es:hover:not(:disabled) { border-color: var(--completo); color: var(--completo-t); }
.ej-figura .no-es:disabled { opacity: .5; cursor: default; }
.ej-figura .no-es:focus-visible { outline: 2px solid var(--pizarra); outline-offset: 2px; }

@media (min-width: 900px) {
  #v-entrena .mandos-entrena, #v-entrena .regla-aforo, #v-entrena .bloque-ent,
  #v-entrena .firma-zona, #v-entrena .imagenes-zona, #v-entrena .tit-bloque,
  #v-entrena .nota-pie { max-width: 820px; }
}
@media (max-width: 720px) {
  .mandos-entrena { flex-direction: column; align-items: stretch; }
  .mandos-entrena .btn { width: 100%; }
  .bloque-ent { padding: var(--e3); }
  .ejercicios li { flex-direction: column; }
  .ej-figura, .sin-imagen { flex: 0 0 auto; align-self: flex-start; }
  .firma-zona .caja-enlace { flex-direction: column; align-items: stretch; }
  .firma-zona .btn { width: 100%; }
}

/* ═══════════════════════════════════════ DIANAS PARA EL DEDO ══
   Medido en el navegador a 375 px, recorriendo las 15 vistas: no hay
   desborde horizontal en ninguna, pero dos cosas se quedan finas para un
   dedo. El ancho sobra en las dos; lo que falta es alto.

   · el interruptor de Reglas: la etiqueta medía 247 × 23 px. El nativo está
     oculto con opacity:0, así que lo que se toca es el label — y 23 px de
     alto es de los que se fallan de pie y con prisa.
   · el botón de reiniciar del Portero: 69 × 31 px.

   No se toca el dibujo del interruptor, que está bien: se le da alto a la
   zona sensible. Y solo en pantalla pequeña, porque con ratón 23 px se
   aciertan sin problema y en escritorio esto engordaría la fila de reglas. */
@media (max-width: 720px) {
  .interruptor { min-height: 36px; }
  .interruptor .pista-int { flex: 0 0 auto; }
  .hilo-cab .borrar { min-height: 36px; padding-inline: var(--e3); }
}

/* Con puntero grueso (táctil de cualquier tamaño) vale lo mismo, aunque la
   pantalla sea ancha: una tablet no es un ratón. */
@media (pointer: coarse) {
  .interruptor { min-height: 36px; }
  .hilo-cab .borrar { min-height: 36px; }
}

/* Sobreaforo: Timp deja meter gente de mas y llega al espejo. La barra se
   queda al 100 % —mas de eso no se puede dibujar— pero se marca con rayas,
   para que de un vistazo una sala a 8 de 6 no se vea igual que una a 6 de 6. */
.clase-p .mini-barra[data-pasada="1"] i {
  background: repeating-linear-gradient(135deg, var(--completo), var(--completo) 3px,
              #C25A3C 3px, #C25A3C 6px);
}
.clase-p .ocu[data-pasada="1"] .e { color: var(--completo-t); font-weight: 700; }
.clase-p .ocu[data-pasada="1"] .n { color: var(--completo-t); }

/* El espejo inservible no es lo mismo que «viejo»: con ese dato no se le
   promete una plaza a nadie, y eso se ve. Ambar para viejo, rojo para
   inservible o vacio. */
#frescura[data-nivel="inservible"] .punto,
#frescura[data-nivel="vacio"] .punto { background: var(--completo); }
#frescura[data-nivel="inservible"] #frescuraTxt,
#frescura[data-nivel="vacio"] #frescuraTxt { color: var(--completo-t); font-weight: 600; }
#frescura[data-nivel="viejo"] .punto { background: var(--justo); }
#frescura[data-nivel="viejo"] #frescuraTxt { color: var(--justo-t); }

/* ── EL ESPEJO VIEJO, EN EL PARTE ──
   No es un aviso más de la lista: es que ninguno de los números de abajo se
   sabe. Por eso va arriba, en rojo y ocupando, en vez de en el pie —que a las
   ocho de la mañana no lo lee nadie—. Antes el parte podía decir «no hay nada
   que hacer» con Timp caído tres días, y esa es la peor frase posible: no es
   calma, es ceguera. */
.espejo-viejo {
  display: flex; flex-direction: column; gap: var(--e1);
  margin: var(--e5) 0 0;
  padding: var(--e4) var(--e4) var(--e4) var(--e5);
  border-radius: var(--r-l);
  background: linear-gradient(100deg, #F8E9E3 0%, var(--panel) 85%);
  border: 1px solid #E7CBC0;
  box-shadow: var(--sombra-1);
  position: relative; overflow: hidden;
}
.espejo-viejo[hidden] { display: none; }
.espejo-viejo::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--completo);
}
.espejo-viejo strong { font-size: 17px; color: var(--completo-t); }
.espejo-viejo span { font-size: 14px; color: var(--tinta-2); line-height: 1.5; }
.espejo-viejo .ult {
  font-size: 12px; color: var(--tinta-3); font-family: var(--mono);
  margin-top: var(--e1);
}
@media (max-width: 720px) {
  .espejo-viejo { padding: var(--e3) var(--e3) var(--e3) var(--e4); }
  .espejo-viejo strong { font-size: 15px; }
}

/* ══════════════════════════════════════════════ LISTA DE ESPERA ══
   El reloj es lo que manda aquí. Una plaza libre a dos horas de la clase es
   un rescate; a diez minutos ya no es nada. Así que la urgencia se ve antes
   de leer: la oferta entera se tiñe cuando queda poco.                    */

.mandos-espera {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center;
  margin: var(--e5) 0 0; padding: var(--e3) var(--e4);
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-l);
}
.mandos-espera .btn { margin: 0; width: auto; }
.mandos-espera .expl { font-size: 12.5px; color: var(--tinta-3); line-height: 1.45; }
/* EL LATIDO, dicho al lado del boton: es lo que hace que esta lista se mueva
   sola, y cuando NO late hay que verlo aqui, no descubrirlo por una plaza
   perdida. Un punto de color delante, del tono de lo que este pasando. */
#esperaLatido { flex: 1 1 16rem; min-width: 0; display: flex; gap: 7px; align-items: baseline; }
#esperaLatido::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--piedra); transform: translateY(-1px);
}
#esperaLatido[data-estado="anda"]        { color: var(--tinta-2); }
#esperaLatido[data-estado="anda"]::before { background: var(--libre); }
#esperaLatido[data-estado="sin-vueltas"]::before { background: var(--justo); }
#esperaLatido[data-estado="apagado"],
#esperaLatido[data-estado="roto"],
#esperaLatido[data-estado="sin-saber"]   { color: var(--completo-t); font-weight: 600; }
#esperaLatido[data-estado="apagado"]::before,
#esperaLatido[data-estado="roto"]::before,
#esperaLatido[data-estado="sin-saber"]::before { background: var(--completo); }

.aviso-espera {
  margin: var(--e3) 0 0; padding: var(--e3) var(--e4);
  border-radius: var(--r-m); font-size: 13.5px; line-height: 1.5;
  border-left: 3px solid var(--piedra); background: var(--panel);
  color: var(--tinta-2);
}
.aviso-espera[hidden] { display: none; }
.aviso-espera[data-tono="hecho"] { border-left-color: var(--libre); background: var(--libre-bg);
                                   color: var(--libre-t); font-weight: 600; }
.aviso-espera[data-tono="apagado"] { border-left-color: var(--justo); background: var(--justo-bg);
                                     color: var(--justo-t); }
.aviso-espera[data-tono="fallo"] { border-left-color: var(--completo);
                                   background: var(--completo-bg); color: var(--completo-t); }

.ofertas { display: flex; flex-direction: column; gap: var(--e3); }

.oferta {
  padding: var(--e4); background: var(--panel);
  border: 1px solid var(--linea); border-radius: var(--r-l);
  position: relative; overflow: hidden;
}
.oferta::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--salvia);
}
/* queda poco: la plaza se va a perder */
.oferta[data-urgente="1"]::before { background: var(--completo); }
.oferta[data-urgente="1"] { background: linear-gradient(100deg, #F9ECE7 0%, var(--panel) 80%); }

.oferta > header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
  padding-bottom: var(--e2); margin-bottom: var(--e3);
  border-bottom: 1px solid var(--linea-sutil);
}
.oferta .tit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oferta .act { font-size: 15px; font-weight: 600; color: var(--tinta); }
.oferta .cdo { font-size: 13px; color: var(--tinta-3); }
.oferta .reloj {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--hueco); color: var(--tinta-2);
}
.oferta[data-urgente="1"] .reloj { background: var(--completo); color: #fff; }

.oferta .motivo { margin: 0 0 var(--e2); font-size: 12.5px; color: var(--tinta-3); }
.oferta .turno {
  margin: 0 0 var(--e3); padding: var(--e2) var(--e3);
  background: var(--hueco); border-radius: var(--r-s);
  font-size: 13.5px; line-height: 1.45; color: var(--tinta-2);
}
.oferta .turno strong { color: var(--tinta); }

.cola-avisos { list-style: none; margin: 0; padding: 0;
               display: flex; flex-direction: column; gap: var(--e1); }
.cola-avisos li {
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e2) var(--e3);
  background: var(--crema); border-radius: var(--r-s);
  border-left: 3px solid var(--linea);
}
.cola-avisos li[data-estado="la_quiere"] { border-left-color: var(--libre);
                                           background: var(--libre-bg); }
.cola-avisos li[data-estado="no_la_quiere"] { border-left-color: var(--piedra); opacity: .75; }
.cola-avisos li[data-estado="tarde"] { border-left-color: var(--piedra); opacity: .75; }
.cola-avisos li[data-estado="bloqueado"] { border-left-color: var(--justo);
                                           background: var(--justo-bg); }
.cola-avisos .ord {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--tinta-3);
  min-width: 1.2rem;
}
.cola-avisos .quien { font-size: 14px; font-weight: 600; color: var(--tinta); }
.cola-avisos .est { font-size: 12px; color: var(--tinta-3); margin-left: auto; }
.cola-avisos li[data-estado="la_quiere"] .est { color: var(--libre-t); font-weight: 600; }
.cola-avisos li[data-estado="bloqueado"] .est { color: var(--justo-t); font-weight: 600; }
.cola-avisos .porQue {
  flex: 1 0 100%; font-size: 12px; line-height: 1.4; color: var(--justo-t);
}

.oferta .adjudicada {
  margin: var(--e3) 0 0; padding: var(--e3);
  background: var(--libre-bg); border-radius: var(--r-m);
  font-size: 13.5px; line-height: 1.5; color: var(--tinta-2);
}
.oferta .adjudicada strong { color: var(--libre-t); }

@media (min-width: 900px) {
  #v-espera .mandos-espera, #v-espera .ofertas, #v-espera .tit-bloque,
  #v-espera .aviso-espera, #v-espera .nota-pie { max-width: 800px; }
}
@media (max-width: 720px) {
  .mandos-espera { flex-direction: column; align-items: stretch; }
  .mandos-espera .btn { width: 100%; }
  .oferta { padding: var(--e3); }
  .cola-avisos .est { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════ AGENDA ══
   La cadena se lee antes que las palabras: UN eslabón marcado —el que para el
   mensaje— y los de después en gris, porque no se sabe si pararían. Pintarlos
   todos en rojo diría que hay cinco problemas donde hay uno.              */

.porque-cadena {
  margin: 0 0 var(--e4); padding: var(--e3) var(--e4);
  border-radius: var(--r-m); font-size: 14px; line-height: 1.5;
  background: var(--panel); border-left: 3px solid var(--piedra); color: var(--tinta-2);
}
.porque-cadena[data-roto="1"] { border-left-color: var(--justo); background: var(--justo-bg);
                                color: var(--justo-t); }
.porque-cadena[data-roto="0"] { border-left-color: var(--libre); background: var(--libre-bg);
                                color: var(--libre-t); }

.candados { list-style: none; margin: 0 0 var(--e5); padding: 0;
            display: flex; flex-direction: column; gap: 0; }
.candados li {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) var(--e4);
  background: var(--panel); border: 1px solid var(--linea); border-bottom: none;
  position: relative;
}
.candados li:first-child { border-radius: var(--r-l) var(--r-l) 0 0; }
.candados li:last-child { border-bottom: 1px solid var(--linea);
                          border-radius: 0 0 var(--r-l) var(--r-l); }
/* el eslabón que para el mensaje */
.candados li[data-para="1"] { background: var(--justo-bg); }
.candados li[data-para="1"]::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--justo);
}
/* los de después: no se sabe, porque no se llega a ellos */
.candados li[data-abierto="0"][data-para="0"] { opacity: .62; }

.candados .num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  background: var(--hueco); color: var(--tinta-3);
}
.candados li[data-abierto="1"] .num { background: var(--libre-bg); color: var(--libre-t); }
.candados li[data-para="1"] .num { background: var(--justo); color: #fff; }

.candados .cuerpo { min-width: 0; flex: 1; }
.candados .fila-cand { display: flex; gap: var(--e3); align-items: baseline;
                       flex-wrap: wrap; }
.candados .que { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.candados .quien {
  font-size: 11px; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px;
  background: var(--hueco); color: var(--tinta-3); margin-left: auto;
  /* SIN `white-space: nowrap`. Con nowrap, «lo abre la persona escribiendo, o
     Meta aprobando la plantilla» medía 450 px dentro de una pantalla de 375 y
     desbordaba la página ENTERA en horizontal: se cortaban las frases de todos
     los candados. Una etiqueta larga se parte; el panel no se mueve de sitio. */
  max-width: 100%;
}
/* quién lo abre importa: cuatro de los cinco no los abre el centro */
.candados .quien[data-de="centro"] { background: var(--libre-bg); color: var(--libre-t); }
.candados .est { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.candados .como {
  margin: var(--e2) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tinta-3);
  font-family: var(--mono);
}

.sin-tels { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e5); }
.sin-tel {
  padding: var(--e4); background: var(--panel);
  border: 1px solid var(--linea); border-radius: var(--r-l);
  position: relative; overflow: hidden;
}
.sin-tel::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--linea);
}
/* a quien se le está perdiendo algo HOY */
.sin-tel[data-cuesta="1"]::before { background: var(--justo); }

.sin-tel > header { display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap; }
.sin-tel .quien { font-size: 15px; font-weight: 600; color: var(--tinta); }
.sin-tel .marca-perdida {
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--completo); color: #fff;
}
.sin-tel .cuesta { margin: var(--e2) 0 var(--e3); font-size: 13px; line-height: 1.5;
                   color: var(--tinta-2); }
.sin-tel[data-cuesta="0"] .cuesta { color: var(--tinta-3); }

.poner-tel { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.poner-tel input {
  flex: 0 1 180px; min-width: 0; font-family: var(--mono); font-size: 14px;
  padding: 8px var(--e3); border: 1px solid var(--linea); border-radius: var(--r-m);
  background: var(--crema); color: var(--tinta); outline: none;
}
.poner-tel input:focus { border-color: var(--salvia); background: var(--panel);
                         box-shadow: 0 0 0 3px rgba(107,143,136,.16); }
.poner-tel input[aria-invalid="true"] { border-color: var(--completo);
                                        background: var(--completo-bg); }
.poner-tel .btn-linea { width: auto; margin: 0; }

.sin-tel .dicho {
  margin: var(--e3) 0 0; padding: var(--e2) var(--e3); border-radius: var(--r-s);
  font-size: 13px; line-height: 1.5;
}
.sin-tel .dicho[hidden] { display: none; }
.sin-tel .dicho[data-tono="hecho"] { background: var(--libre-bg); color: var(--libre-t);
                                     font-weight: 600; }
.sin-tel .dicho[data-tono="medias"] { background: var(--justo-bg); color: var(--justo-t); }
.sin-tel .dicho[data-tono="fallo"] { background: var(--completo-bg); color: var(--completo-t); }

.con-tel { list-style: none; margin: 0; padding: 0;
           display: flex; flex-direction: column; gap: var(--e1); }
.con-tel li {
  display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap;
  padding: var(--e2) var(--e3); background: var(--crema);
  border-radius: var(--r-s); border-left: 3px solid var(--linea);
}
.con-tel li[data-puede="1"] { border-left-color: var(--libre); background: var(--libre-bg); }
.con-tel .quien { font-size: 14px; font-weight: 600; color: var(--tinta); }
.con-tel .num-tel { font-family: var(--mono); font-size: 13px; color: var(--tinta-2); }
.con-tel .origen {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--hueco); color: var(--tinta-3);
}
.con-tel .origen[data-org="centro"] { background: var(--arena); color: var(--tinta-2); }
.con-tel .est { font-size: 12px; color: var(--tinta-3); margin-left: auto; }
.con-tel li[data-puede="1"] .est { color: var(--libre-t); font-weight: 600; }
.con-tel .est.fallo { flex: 1 0 100%; color: var(--completo-t); margin-left: 0; }
.con-tel .quitar {
  background: none; border: none; font-size: 12px; color: var(--tinta-3);
  text-decoration: underline; cursor: pointer; padding: 0;
}
.con-tel .quitar:hover { color: var(--completo-t); }

@media (min-width: 900px) {
  #v-agenda .candados, #v-agenda .sin-tels, #v-agenda .tit-bloque,
  #v-agenda .porque-cadena, #v-agenda .con-tel, #v-agenda .nota-pie { max-width: 800px; }
}
@media (max-width: 720px) {
  .candados .quien { margin-left: 0; }
  .sin-tel { padding: var(--e3); }
  .poner-tel input { flex: 1 1 auto; }
  .con-tel .est { margin-left: 0; flex: 1 0 100%; }
}

/* El corte de la lista: dice cuántas faltan, no las esconde */
.ver-mas {
  align-self: flex-start; background: none; border: 1px dashed var(--linea);
  border-radius: var(--r-m); padding: var(--e3) var(--e4);
  font-family: var(--sans); font-size: 13px; color: var(--tinta-2);
  cursor: pointer; width: 100%; text-align: left;
}
.ver-mas:hover { border-color: var(--salvia); color: var(--tinta); background: var(--crema); }

/* Quién escribe en el hilo del Portero. Con teléfono de socio, al mismo número
   le contesta la recepción y no el Portero: elegirlo es parte de la demo. */
.quien-escribe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4); border-bottom: 1px solid var(--linea-sutil);
  background: var(--crema); }
.quien-escribe .etq-quien { font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
.quien-escribe select { font-family: var(--sans); font-size: .84rem; color: var(--tinta);
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-m);
  padding: 5px 8px; max-width: 100%; }
.quien-escribe .sin-socios { flex: 1 0 100%; font-size: .76rem; line-height: 1.45;
  color: var(--tinta-3); }

/* ══════════════════════════════ LO QUE HA ENTRADO DE VERDAD ══
   El hilo de arriba es un simulador; esto es el registro. Un socio y un
   desconocido no se leen igual, así que no se pintan igual.            */
.hilos-reales { display: flex; flex-direction: column; gap: var(--e2); }
.hilo-real {
  padding: var(--e3) var(--e4); background: var(--panel);
  border: 1px solid var(--linea); border-radius: var(--r-m);
  border-left: 3px solid var(--linea);
}
.hilo-real[data-socio="1"] { border-left-color: var(--salvia); }
.hilo-real > header { display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap; }
.hilo-real .quien { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.hilo-real .etq {
  font-size: 11px; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px;
  background: var(--hueco); color: var(--tinta-3);
}
.hilo-real[data-socio="1"] .etq { background: var(--libre-bg); color: var(--libre-t); }
.hilo-real .cuando { font-size: 12px; color: var(--tinta-3); margin-left: auto; }
.hilo-real .dijo { margin: var(--e2) 0 0; font-size: 13.5px; line-height: 1.5;
                   color: var(--tinta-2); }
.hilo-real .contesto { margin: 3px 0 0; font-size: 12px; color: var(--tinta-3); }

@media (min-width: 900px) {
  #v-portero .hilos-reales, #v-portero .tit-bloque, #v-portero .nota-pie { max-width: 800px; }
}
@media (max-width: 720px) {
  .hilo-real .cuando { margin-left: 0; }
}

/* Lo cobrado que ya no se debe: ni es deuda ni es una buena noticia */
.lectura-caducado { margin: var(--e2) 0 0; padding: var(--e2) var(--e3);
  border-left: 3px solid var(--justo); background: var(--justo-bg);
  border-radius: var(--r-s); font-size: .86rem; line-height: 1.5; color: var(--justo-t); }

/* ═════════════════════════════════════════════════ PERSONAS ══
   Una pantalla que mira a alguien. El buscador arriba, los resultados como
   fichas pulsables y la ficha debajo, en bloques: lo accionable primero.   */

.buscar-persona { margin: var(--e5) 0 var(--e3); }
.buscar-persona input {
  width: 100%; max-width: 420px; font-family: var(--sans); font-size: 15px;
  padding: 10px var(--e4); border: 1px solid var(--linea); border-radius: 999px;
  background: var(--panel); color: var(--tinta); outline: none;
}
.buscar-persona input:focus { border-color: var(--salvia);
                              box-shadow: 0 0 0 3px rgba(107,143,136,.16); }

.resultados { display: flex; flex-wrap: wrap; gap: var(--e2); }
.resultado {
  display: flex; align-items: baseline; gap: var(--e2);
  background: var(--panel); border: 1px solid var(--linea); border-radius: 999px;
  padding: 7px var(--e4); font-family: var(--sans); font-size: 14px;
  color: var(--tinta); cursor: pointer;
}
.resultado:hover { border-color: var(--salvia); background: var(--crema); }
.resultado[data-abierta="1"] { background: var(--pizarra); color: var(--crema);
                               border-color: var(--pizarra); }
.resultado .quien { font-weight: 600; }
.resultado .est, .resultado .sin-tel { font-size: 11px; color: var(--tinta-3); }
.resultado[data-abierta="1"] .est, .resultado[data-abierta="1"] .sin-tel {
  color: rgba(249,248,244,.75); }
.resultado .sin-tel { color: var(--justo-t); }

.que-es { font-size: 13px; color: var(--tinta-3); margin: 0 0 var(--e3); line-height: 1.5; }

.ficha-persona { display: flex; flex-direction: column; gap: var(--e3);
                 margin: var(--e5) 0 0; }
.cab-persona {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
  padding-bottom: var(--e3); border-bottom: 1px solid var(--linea);
}
.cab-persona h2 { margin: 0; font-size: 1.35rem; color: var(--tinta); }
.cab-persona .sub { margin: 2px 0 0; font-size: 13px; color: var(--tinta-3); }
.cab-persona .marca {
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--libre-bg); color: var(--libre-t);
}

.bloque-persona {
  padding: var(--e4); background: var(--panel);
  border: 1px solid var(--linea); border-radius: var(--r-l);
  border-left: 3px solid var(--linea);
}
.bloque-persona h3 { margin: 0 0 var(--e2); font-size: .72rem; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 600; }
.bloque-persona[data-tono="si"] { border-left-color: var(--libre); }
.bloque-persona[data-tono="no"] { border-left-color: var(--justo); background: var(--justo-bg); }
.bloque-persona.senales { border-left-color: var(--completo); background: var(--completo-bg); }
.bloque-persona .dato { margin: 0 0 var(--e1); display: flex; gap: var(--e2);
                        align-items: baseline; flex-wrap: wrap; }
.bloque-persona .dato strong { font-size: 14.5px; color: var(--tinta); }
.bloque-persona .dato .de { font-size: 12px; color: var(--tinta-3); }
.bloque-persona .dato[data-caducado="1"] strong { color: var(--justo-t); }
.bloque-persona .dato[data-caducado="1"] .de { color: var(--justo-t); }
.bloque-persona .porque { margin: var(--e1) 0 0; font-size: 13px; line-height: 1.5;
                          color: var(--tinta-2); }
.bloque-persona .dicho { margin: var(--e2) 0 0; font-size: 13.5px; line-height: 1.5;
                         color: var(--tinta); font-style: italic; }
.bloque-persona .sub { margin: var(--e3) 0 var(--e1); font-family: var(--mono);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-3); }
.bloque-persona .btn-linea { margin-top: var(--e3); width: auto; white-space: normal;
                             text-align: left; max-width: 100%; }

.mini-lista { list-style: none; margin: 0; padding: 0;
              display: flex; flex-direction: column; gap: var(--e1); }
.mini-lista li {
  display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap;
  font-size: 13.5px; color: var(--tinta-2);
  padding: 5px var(--e3); background: var(--crema); border-radius: var(--r-s);
}
.mini-lista li .q { font-weight: 600; color: var(--tinta); }
.mini-lista li .c { color: var(--tinta-3); font-size: 12.5px; }
.mini-lista li .esp { margin-left: auto; font-size: 11.5px; color: var(--tinta-3); }
.mini-lista li[data-vino="0"] .esp { color: var(--justo-t); }
.mini-lista li.senal-l { background: transparent; padding: 2px 0; color: var(--completo-t); }

@media (min-width: 900px) {
  #v-personas .ficha-persona, #v-personas .nota-pie, #v-personas .resultados,
  #v-personas .que-es { max-width: 800px; }
}
@media (max-width: 720px) {
  .mini-lista li .esp { margin-left: 0; }
  .bloque-persona { padding: var(--e3); }
}

/* ══════════════════════════════════════════ SALUD Y LESIONES ══
   No es una lista para hojear: es un cuadrante de clases y, dentro de una,
   lo que hace falta saber. Las banderas rojas van arriba y marcadas.     */

.banderas { display: flex; flex-direction: column; gap: var(--e2); }
.bandera {
  display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap;
  padding: var(--e3) var(--e4); background: var(--completo-bg);
  border-left: 3px solid var(--completo); border-radius: var(--r-m);
}
.bandera .quien { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.bandera .motivo { font-size: 13px; color: var(--completo-t); }
.bandera .carril {
  margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--panel); color: var(--tinta-3); white-space: nowrap;
}

.clases-salud { display: flex; flex-wrap: wrap; gap: var(--e2); }
.clase-salud {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-m);
  padding: var(--e2) var(--e3); font-family: var(--sans); cursor: pointer;
  min-width: 128px; text-align: left;
}
.clase-salud:hover { border-color: var(--salvia); background: var(--crema); }
.clase-salud[data-abierta="1"] { background: var(--pizarra); border-color: var(--pizarra); }
.clase-salud[data-paso="1"] { opacity: .6; }
.clase-salud .h { font-family: var(--mono); font-size: 13px; font-weight: 600;
                  color: var(--tinta); }
.clase-salud .a { font-size: 13px; color: var(--tinta-2); }
.clase-salud .p { font-size: 11.5px; color: var(--tinta-3); }
.clase-salud[data-abierta="1"] .h,
.clase-salud[data-abierta="1"] .a { color: var(--crema); }
.clase-salud[data-abierta="1"] .p { color: rgba(249,248,244,.7); }

.de-la-clase { margin: var(--e4) 0 0; }
.de-la-clase .tit-clase { margin: 0 0 var(--e3); font-size: 1rem; color: var(--tinta); }
.avisos-clase { display: flex; flex-direction: column; gap: var(--e2); }
.aviso-salud {
  display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap;
  padding: var(--e3) var(--e4); background: var(--panel);
  border: 1px solid var(--linea); border-left: 3px solid var(--salvia);
  border-radius: var(--r-m);
}
.aviso-salud[data-roja="1"] { border-left-color: var(--completo);
                              background: var(--completo-bg); }
.aviso-salud .quien { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.aviso-salud .que { font-size: 13px; color: var(--tinta-2); }
.aviso-salud[data-roja="1"] .que { color: var(--completo-t); font-weight: 600; }
.aviso-salud .carril { margin-left: auto; font-size: 11px; padding: 2px 8px;
  border-radius: 999px; background: var(--hueco); color: var(--tinta-3); white-space: nowrap; }

@media (min-width: 900px) {
  #v-salud .banderas, #v-salud .tit-bloque, #v-salud .de-la-clase,
  #v-salud .nota-pie, #v-salud .clases-salud { max-width: 800px; }
}
@media (max-width: 720px) {
  .bandera .carril, .aviso-salud .carril { margin-left: 0; }
  .clase-salud { min-width: 0; flex: 1 1 46%; }
}

/* Vino y el espejo no le ve bono: es un aviso para mirar en Timp, no una acusación */
.taps .sin-bono {
  margin: 0 0 var(--e2); padding: var(--e2) var(--e3);
  background: var(--justo-bg); border-left: 3px solid var(--justo);
  border-radius: var(--r-s); font-size: 12.5px; line-height: 1.5; color: var(--justo-t);
}

/* ── ALTAS: quién es nuevo y qué le falta ───────────────────────────────── */
/* La lista y la ficha de una persona que todavía no es socia. Mismo lenguaje
   que la lista de plantones: una fila por persona, el tono en el borde
   izquierdo, y lo que pide algo se ve sin leer. */
.lista-altas { list-style: none; margin: 0; padding: 0;
               display: flex; flex-direction: column; gap: var(--e1); }
.lista-altas li {
  background: var(--panel); border: 1px solid var(--linea-sutil);
  border-left: 3px solid var(--piedra); border-radius: var(--r-s);
}
.lista-altas li[data-tono="alto"] { border-left-color: var(--completo); }
.lista-altas li[data-tono="medio"] { border-left-color: var(--justo); }
.fila-alta {
  width: 100%; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e1) var(--e3); padding: var(--e2) var(--e3);
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; color: inherit;
}
.fila-alta:hover { background: var(--hueco); }
.fila-alta strong { font-size: 14px; color: var(--tinta); }
.fila-alta .bajo { font-size: 12px; color: var(--tinta-3); }
.fila-alta .etq-alta {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2);
}
.lista-altas li[data-tono="alto"] .etq-alta { color: var(--completo-t); font-weight: 700; }
.lista-altas li[data-tono="medio"] .etq-alta { color: var(--justo-t); }

/* Las siete respuestas, con su pregunta: un «sí» suelto no dice nada. */
.respuestas-salud { list-style: none; margin: var(--e3) 0 0; padding: 0;
                    display: flex; flex-direction: column; gap: 2px; }
.respuestas-salud li {
  display: flex; gap: var(--e3); align-items: baseline;
  padding: var(--e2) var(--e3); border-radius: var(--r-s);
  border-left: 3px solid transparent;
}
.respuestas-salud li[data-tono="bajo"] { background: var(--hueco); }
.respuestas-salud li[data-tono="alto"] {
  background: var(--completo-bg); border-left-color: var(--completo);
}
.respuestas-salud .p { font-size: 13px; color: var(--tinta-2); line-height: 1.45; }
.respuestas-salud .r {
  margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--tinta-2); white-space: nowrap;
}
.respuestas-salud li[data-tono="alto"] .r { color: var(--completo-t); }
.cab-ficha h2 { margin: 0 0 2px; font-size: 17px; color: var(--tinta); }
.cab-ficha .bajo { margin: 0 0 var(--e3); font-size: 12px; color: var(--tinta-3); }