/* `color-scheme: light` APAGA el auto-oscurecido del navegador móvil. Sin esto, Chrome en
   Android invierte la página por su cuenta y lo hace mal —fondos a negro y textos con su
   color de siempre—, que es como salían los botones negros con la letra encima. Esta app
   se mira al sol y con una mano: la paleta clara es la decisión, y aquí se declara. */
:root{ color-scheme: light; }

/* App del guía. Se usa de pie, en la calle, con una mano y a veces bajo la lluvia.
   Todo lo que se toca mide 48 px o más y el contraste está pensado para sol directo,
   no para una pantalla de escritorio a media luz. */

:root{
  --verde:#12805f; --verde2:#0c6b56; --hondo:#0a5847;
  /* `--fondo` es el SUELO y `--papel` el objeto que va encima. Antes el suelo era
     `--crema` (#faf6ec) y la tarjeta #fffdf7: cinco puntos por canal, o sea nada. Por
     muchas sombras que se pongan, si el suelo y el objeto son del mismo color no hay
     altura que valga — flotar es CONTRASTE, la sombra solo lo confirma.
     `--crema` se queda para rellenos DENTRO de las tarjetas (campos, chapas), que ahí
     sí tiene que ser apenas más oscuro que el papel. */
  /* LOS MISMOS VALORES QUE LA DEMO, uno a uno. Eran parecidos pero no iguales —el suelo
     a dos puntos, el papel a tres, la línea a cinco— y esa distancia pequeña es justo la
     que hace que quien viene de la demo note que «no es lo mismo» sin saber decir por
     qué. Si un día cambian allí, cambian aquí: son un solo producto. */
  --fondo:#eee7d7; --crema:#faf6ec; --papel:#fffefa; --linea:#e5dccb;
  --tinta:#1c2b25; --tinta2:#40554c; --apagado:#5c6b64;
  --coral:#f4653a; --oro:#c98a2d; --rojo:#c0392b;
  /* Los mismos dos colores, en la versión que se puede LEER.
     El oro y el coral de arriba están calibrados como SUPERFICIE —bordes, rellenos,
     chapas— y sobre papel dan 2,88:1 y 3,05:1 como texto: por debajo del 4,5:1 que pide
     un texto de 13 px, y esta app se lee al sol. La línea 143 ya resolvía esto a mano con
     un `#5a4212` suelto; aquí queda con nombre para que no haya que redescubrirlo.
     La superficie sigue siendo coral y oro: lo que cambia es la tinta encima. */
  --oro-texto:#7a5210; --coral-texto:#a63a17;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --seguro-arriba:env(safe-area-inset-top,0px);
  --seguro-abajo:env(safe-area-inset-bottom,0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans); background:var(--fondo); color:var(--tinta);
  font-size:15px; line-height:1.45;
  padding-bottom:calc(76px + var(--seguro-abajo));
  /* Sin rebote elástico: el guía desliza la lista y el gesto de recargar de iOS le
     tira el manifiesto a media faena. */
  overscroll-behavior-y:contain;
}

/* ───────── el fondo, que respira ─────────
   Dos manchas de luz muy tenues que se desplazan MUY despacio (70 y 95 segundos) por
   detrás de todo. No es un adorno: es lo que hace que las tarjetas se lean como si
   flotaran encima en vez de estar pegadas al papel.

   Tres cuidados, que aquí no son opcionales:
   · Se mueve con `transform`, no con `background-position`: lo compone la GPU y no
     obliga a repintar la pantalla entera sesenta veces por segundo. Esta app se usa
     tres horas seguidas con el móvil en la mano, y una animación mal hecha es batería.
   · Va `position:fixed` y detrás de todo (`z-index:-1`), así que no interfiere con el
     desplazamiento de la lista ni con los toques.
   · Y con `prefers-reduced-motion` se queda quieto. Hay gente a la que el movimiento
     de fondo le marea de verdad. */
body::before, body::after{
  content:''; position:fixed; z-index:-1; pointer-events:none;
  width:min(120vw, 900px); aspect-ratio:1; border-radius:50%;
  filter:blur(70px); opacity:.62; will-change:transform;
}
body::before{
  top:-30vh; left:-25vw;
  background:radial-gradient(circle, rgba(20,99,76,.34), transparent 68%);
  animation:vaiven-a 70s ease-in-out infinite alternate;
}
body::after{
  bottom:-35vh; right:-30vw;
  background:radial-gradient(circle, rgba(201,138,45,.30), transparent 68%);
  animation:vaiven-b 95s ease-in-out infinite alternate;
}
@keyframes vaiven-a{
  from{ transform:translate3d(0,0,0)        scale(1);    }
  to  { transform:translate3d(14vw,10vh,0)  scale(1.14); }
}
@keyframes vaiven-b{
  from{ transform:translate3d(0,0,0)        scale(1.08); }
  to  { transform:translate3d(-12vw,-9vh,0) scale(1);    }
}
@media (prefers-reduced-motion:reduce){
  body::before, body::after{ animation:none; }
}

/* ───────── barra superior ───────── */
/* La cabecera va TRASLÚCIDA: el fondo se mueve despacio detrás y la barra lo deja
   intuir en vez de taparlo. Es la misma idea que las tarjetas — que la pantalla se
   sienta apoyada sobre algo y no pegada encima.

   Con `backdrop-filter` el desenfoque hace legible el texto sobre lo que pase por
   detrás; donde no exista, la regla de respaldo pone el verde opaco de siempre, porque
   una cabecera que no se lee no es una cabecera. */
header{
  position:sticky; top:0; z-index:20; color:#fdf9ee;
  background:var(--verde);
  padding:calc(10px + var(--seguro-arriba)) 14px 10px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 1px 0 rgba(201,138,45,.5);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  header{
    background:color-mix(in srgb, var(--verde) 82%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);
    backdrop-filter:blur(14px) saturate(1.15);
  }
}
header h1{ font-size:17px; margin:0; font-weight:700; letter-spacing:.01em; }
/* `.fecha` sigue existiendo para el guía, que necesita saber de qué DÍA es su lista
   (puede mirar mañana). En el panel del encargado se quita: ahí cada fila ya dice «hoy
   10:00» / «mañ 17:00», así que repetir la fecha arriba es decir dos veces lo mismo y
   gastar la línea que sostiene el nombre de la empresa. */
header .fecha{ font-size:13px; opacity:.85; display:block; font-weight:500; }
header .fecha:empty{ display:none; }

/* El semáforo de conexión. Es lo primero que mira el guía cuando duda de si se ha
   guardado algo, así que va arriba y siempre visible. */
.enlace{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:99px;
  background:rgba(253,249,238,.16); white-space:nowrap;
}
/* La inicial de quien tiene la sesión abierta. Va en la cabecera y no en la barra de
   abajo a propósito: abajo el pulgar de un guía que anda pasa cien veces al día, y
   detrás de esto está el botón de salir. Se ve de 34 px y el dedo encuentra 44. */
.yo{
  flex:0 0 auto; position:relative; width:34px; height:34px; padding:0;
  border-radius:50%; border:1.5px solid rgba(253,249,238,.45);
  background:rgba(253,249,238,.16); color:#fdf9ee;
  font:inherit; font-size:13px; font-weight:800; line-height:1; cursor:pointer;
}
.yo::after{ content:''; position:absolute; inset:-5px; }
.yo:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(253,249,238,.5); }
.yo:active{ transform:scale(.96); }

/* Cada estado con FORMA propia, no solo con color: al sol directo el verde y el ámbar
   se lavan hasta el mismo gris, y este semáforo es lo primero que mira un guía cuando
   duda de si se ha guardado algo. Círculo lleno = enlazado · rombo = sin red · anillo
   = enviando. El color acompaña; la forma es la que informa. */
.enlace .punto{ width:9px; height:9px; border-radius:50%; background:#7ee0b8; flex:none;
  transition:border-radius .15s, transform .15s; }
.enlace.sinred .punto{
  background:var(--oro); border-radius:1px; transform:rotate(45deg);
  animation:late 1.6s ease-in-out infinite;
}
.enlace.enviando .punto{
  background:transparent; border:2.5px solid #7ee0b8; border-radius:99px;
  animation:late .8s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .enlace .punto{ transition:none; } }
@keyframes late{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce){ .enlace .punto{ animation:none !important; } }

/* ───────── avisos ───────── */
.aviso{
  margin:10px 12px; padding:11px 13px; border-radius:11px; font-size:13px;
  background:#fff5e6; border:1.5px solid var(--oro); color:#5a4212;
}
.aviso.malo{ background:#fdecea; border-color:var(--rojo); color:#7a2018; }
/* El aviso de una acción RECHAZADA se fija sobre el pie, encima de todo: se ve esté donde
   esté el guía en la lista, y sin mover la lista bajo su dedo. `bottom` es la altura del
   pie más el margen de seguridad del móvil, para no taparlo. */
.aviso-fijo{
  position:fixed; left:0; right:0; z-index:45; margin:0 12px;
  bottom:calc(56px + var(--seguro-abajo));
  box-shadow:0 8px 26px rgba(0,0,0,.22);
}
.aviso b{ display:block; margin-bottom:2px; }
.aviso button{
  margin-top:8px; border:1.5px solid currentColor; background:transparent; color:inherit;
  /* 48, no 40. La regla del proyecto dice 48 px y este botón vive en un aviso de la
     pantalla de calle. Mientras la excepción del login no se honre en el resto, es más
     difícil defenderla. Y a lo ANCHO: con el móvil en una mano y el paraguas en la
     otra, el arco del pulgar llega al tercio inferior y a poco más. */
  border-radius:10px; padding:12px 14px; font:inherit; font-weight:700;
  min-height:48px; width:100%;
}

/* ───────── tours ───────── */
/* `max-width` y centrada. Sin él, en una tableta o con el móvil en horizontal las líneas
   se estiraban a todo el ancho de la pantalla: un párrafo de 90 caracteres obliga a
   buscar el principio de la línea siguiente con el ojo, y esto se lee de pie.
   560 px y no 700: dentro caben etiqueta y campo en una columna cómoda, y la medida de
   línea se queda en unos 70 caracteres, que es donde se lee sin volver a empezar.
   La cabecera y la barra de abajo siguen a todo el ancho a propósito: son el marco de la
   pantalla, no el contenido. */
main{ padding:4px 12px 0; max-width:560px; margin:0 auto; }

/* Las tarjetas FLOTAN sobre ese fondo: papel casi opaco —casi, para que el color del
   fondo se intuya por debajo— y dos sombras, una corta que define el canto y otra larga
   y muy suave que da la altura. Con una sola sombra se ve un recuadro; con dos, un
   objeto encima de algo. */
.tour{
  /* Un punto translúcida —el 94 %— ahora que el suelo SÍ tiene color debajo. Cuando el
     fondo era casi del mismo tono que el papel esto no se veía y solo costaba una capa
     de composición; con el suelo hondo, deja que el color del fondo se intuya y la
     tarjeta se lee como algo apoyado encima. Sin `backdrop-filter`: el desenfoque es lo
     caro, la transparencia no. */
  /* Los MISMOS números que `.card` de la demo: radio 15 y no 16, y la sombra larga a
     .28 y no a .30. Suena a nada y es exactamente de lo que se compone el «no es igual». */
  background:color-mix(in srgb, var(--papel) 94%, transparent);
  border:1px solid color-mix(in srgb, var(--linea) 85%, transparent);
  border-radius:15px; margin:0 0 16px; overflow:hidden;
  /* Tres sombras: el filo, la caída corta y la larga difusa. Es lo que separa «un
     recuadro» de «algo apoyado encima». */
  box-shadow:
    0 1px 1px rgba(74,61,32,.05),
    0 4px 10px -4px rgba(74,61,32,.10),
    0 22px 44px -22px rgba(74,61,32,.28);
}
/* `.ahora` es VERDE y significa lo que dice: esto está pasando ahora mismo y va bien —el
   tour en curso, el mes en el que estás ahorrando—. Nada más.

   Marcaba cinco cosas, y tres eran problemas: el buzón caído, los correos sin entender y
   la salida sin guía salían con el borde verde. En esta app el verde significa «lo miró
   una persona»: es la regla sobre la que se apoya todo el panel de cierres, hasta el punto
   de que la chapa del agente NUNCA se pinta en verde por eso mismo. Pintar de verde un
   buzón roto la contradice en la pantalla donde más se mira.

   Ahora hay dos clases y cada una dice una cosa. Y se distinguen por el LADO además de por
   el color —`.urge` engorda el filo izquierdo—, que es la regla de esta app para lo que
   hay que ver de reojo y al sol. */
.tour.ahora{
  border-color:var(--verde);
  box-shadow:0 1px 2px rgba(18,63,51,.06), 0 14px 34px -14px rgba(20,99,76,.34);
}
.tour.urge{
  border-color:color-mix(in srgb, var(--coral) 55%, var(--linea));
  border-left:4px solid var(--coral);
  box-shadow:0 1px 2px rgba(74,61,32,.06), 0 14px 34px -14px rgba(244,101,58,.30);
}
.tour.cerrado{ box-shadow:none; }

.tour .cab{ padding:12px 14px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.tour .hora{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.tour .tit{ font-size:15px; font-weight:600; color:var(--tinta2); flex:1; min-width:120px; }
.tour .marca{
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:99px; background:var(--verde); color:#fff;
}
.tour.cerrado .marca{ background:var(--apagado); }

.contador{
  padding:0 14px 10px; font-size:13px; color:var(--tinta2);
  display:flex; gap:14px; flex-wrap:wrap;
}
.contador b{ color:var(--tinta); font-variant-numeric:tabular-nums; }

/* ───────── reservas ───────── */
.res{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:13px 14px; border:0; border-top:1px solid var(--linea);
  background:transparent; font:inherit; text-align:left; color:inherit;
  min-height:56px; cursor:pointer;
}
.res:active{ background:#f2efe4; }
/* ── La fila, con la forma de la demo ──
   Deja de ser un botón entero —ahora lleva otros tres dentro— y pasa a ser un contenedor
   con la información a la izquierda y los mandos a la derecha. */
.res{ flex-wrap:wrap; cursor:default; }
.res-info{ flex:1 1 190px; min-width:0; }
.res-info b{ display:block; font-size:15px; font-weight:650; }
.res-info small{ display:block; font-size:11.5px; color:var(--apagado); line-height:1.35; }
.res-mandos{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.res-paso{
  width:38px; min-height:40px; font:inherit; font-size:17px; font-weight:700; line-height:1;
  border:1.5px solid var(--linea); border-radius:10px; background:var(--papel);
  color:var(--verde2); cursor:pointer;
}
.res-paso:active{ background:rgba(18,128,95,.14); }
/* Los botones de ADULTOS: mismo tamaño de dedo que los de personas —esto se usa de pie,
   con una mano y a veces lloviendo— pero más apagados, porque el gesto de todos los días
   es marcar quién ha llegado y estos solo se tocan cuando el grupo no viene entero. La
   etiqueta «ad.» va delante para que no se confundan con los de arriba: dos pares de −/+
   seguidos sin nada que los separe son dos pares de botones idénticos. */
.res-paso-et{
  font-size:11.5px; font-weight:700; color:var(--apagado); letter-spacing:.04em;
  padding-left:4px; flex:0 0 auto;
}
.res-paso-ad{ color:var(--apagado); font-size:15px; }
.res-paso-ad:active{ background:rgba(0,0,0,.06); }
/* El sobre del recordatorio, en dorado: no es una acción de todos los días y no puede
   competir con los muñecos, que son el gesto que se repite treinta veces por tour. */
.res-rec{
  width:38px; min-height:40px; font:inherit; font-size:15px; line-height:1;
  border:1.5px solid rgba(179,138,42,.42); border-radius:10px;
  background:rgba(179,138,42,.10); color:var(--oro); cursor:pointer;
}
.res-rec:active{ background:rgba(179,138,42,.22); }
/* Los muñecos. APAGADOS mientras no llegan y encendidos cuando sí: es la única señal de
   la pantalla que se lee sin leer, y por eso el cambio es de opacidad y de saturación a
   la vez — en una plaza a mediodía, con el móvil al sol, el color solo no basta. */
.res-gente{
  min-height:44px; padding:0 8px; font-size:20px; line-height:1; letter-spacing:-1px;
  border:1.5px solid var(--linea); border-radius:11px; background:var(--papel);
  cursor:pointer; filter:grayscale(1); opacity:.42; transition:opacity .18s ease, filter .18s ease;
}
.res.llego .res-gente{ filter:none; opacity:1; border-color:var(--verde);
  background:rgba(18,128,95,.12); }
@media (prefers-reduced-motion:reduce){ .res-gente{ transition:none; } }
.res .nom{ flex:1; min-width:0; }
.res .nom b{ display:block; font-size:15px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.res .nom small{ display:block; font-size:11.5px; color:var(--apagado); }
.res .pax{
  font-size:15px; font-weight:800; font-variant-numeric:tabular-nums;
  min-width:34px; text-align:right;
}
.res .caja{
  width:30px; height:30px; border-radius:9px; border:2.5px solid var(--linea);
  flex:none; display:grid; place-items:center; font-size:17px; color:transparent;
}
.res.llego{ background:#eef7f2; }
.res.llego .caja{ border-color:var(--verde); background:var(--verde); color:#fff; }
.res.walkin{ background:#f4f8fb; }
.res.noshow .nom b{ text-decoration:line-through; color:var(--apagado); }
/* El punto naranja significa: guardado aquí, todavía no en el servidor. */
.res.pendiente .nom b::after{
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--oro); margin-left:6px; vertical-align:middle;
}

.acciones{ display:flex; gap:8px; padding:11px 14px; border-top:1px solid var(--linea); flex-wrap:wrap; }
.btn{
  flex:1; min-width:132px; min-height:48px; border-radius:11px; border:1.5px solid var(--verde);
  background:var(--verde); color:#fff; font:inherit; font-weight:700; font-size:15px;
  padding:12px 14px; cursor:pointer;
}
.btn{ transition:transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .15s, opacity .15s; }
.btn:not(:disabled):active{ transform:translateY(1px) scale(.995); }
.btn:focus-visible{ outline:none;
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--verde) 30%, transparent); }
.btn.sec{ background:transparent; color:var(--verde2); }
.btn.gris{ background:transparent; color:var(--tinta2); border-color:var(--linea); }
/* Un primario deshabilitado al 45 % sigue siendo un botón verde: invita a pulsarlo y no
   pasa nada. Deshabilitado se dibuja como lo que es —una caja apagada— y el texto de
   debajo dice qué falta para encenderlo. */
.btn:disabled{ opacity:1; background:var(--crema); border-color:var(--linea);
  color:var(--apagado); cursor:default; }
.btn.sec:disabled, .btn.gris:disabled{ background:transparent; opacity:.45; }

/* ───────── hoja inferior ───────── */
.hoja{
  position:fixed; inset:auto 0 0 0; z-index:40; background:var(--papel);
  border-radius:18px 18px 0 0; box-shadow:0 -8px 40px rgba(18,63,51,.24);
  padding:16px 16px calc(18px + var(--seguro-abajo));
  transform:translateY(102%); transition:transform .22s cubic-bezier(.2,.8,.3,1);
  max-height:86vh; overflow:auto;
}
.hoja.abierta{ transform:none; }
.velo{
  position:fixed; inset:0; z-index:35; background:rgba(18,63,51,.4);
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.velo.abierta{ opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ .hoja,.velo{ transition:none; } }
.hoja h2{ margin:0 0 4px; font-size:17px; }
.hoja .sub{ margin:0 0 14px; color:var(--apagado); font-size:13px; }

.pasos{ display:flex; align-items:center; gap:12px; margin:14px 0; }
.pasos button{
  width:56px; height:56px; border-radius:14px; border:1.5px solid var(--linea);
  background:var(--crema); font-size:27px; font-weight:700; color:var(--verde2); cursor:pointer;
}
.pasos .valor{ flex:1; text-align:center; font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; }

.importes button.elegido{ border-color:var(--verde); background:#eef7f2; color:var(--verde2); }

/* ───────── los campos ─────────
   Aquí no había NINGÚN estado de foco. En un móvil, con el teclado tapando media
   pantalla, no saber en qué campo estás escribiendo es de las cosas que hacen dudar de
   si se ha guardado algo — y esta app se usa de pie y con prisa.

   El foco se marca con un anillo, no solo con el borde: un borde de 1,5 px cambiando de
   color no se ve a la luz del sol, que es donde se usa esto. */
/* El ritmo del formulario. La etiqueta va PEGADA a su campo (6 px) y los grupos se
   separan claramente entre sí (18 px): la distancia es lo que dice qué va con qué, y
   con 6 dentro y 12 fuera —el doble justo— los grupos apenas se distinguían y el
   formulario se leía como una lista corrida de cajas. */
.campo{ display:block; margin:18px 0 0; }
.campo:first-child{ margin-top:0; }
.campo span{
  display:block; font-size:13px; font-weight:700; color:var(--tinta2);
  margin-bottom:6px; letter-spacing:.005em;
}
/* La nota bajo un campo: explica lo que el marcador de posición no puede, porque el
   marcador desaparece justo cuando se está escribiendo. `display:block` porque es un
   `<small>` dentro de un `<label>` y en línea se pegaría al input. */
.campo-nota{ display:block; margin-top:5px; font-size:11.5px; line-height:1.4;
  font-weight:400; color:var(--apagado); }
.campo input, .campo textarea, .campo select{
  width:100%; min-height:50px; border:1.5px solid var(--linea); border-radius:12px;
  padding:12px 13px; font:inherit; font-size:15px; color:var(--tinta);
  background:color-mix(in srgb, var(--crema) 72%, var(--papel));
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.campo input::placeholder, .campo textarea::placeholder{ color:var(--apagado); opacity:.75; }
.campo input:hover, .campo textarea:hover{ border-color:color-mix(in srgb, var(--verde) 35%, var(--linea)); }
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; background:var(--papel);
  border-color:var(--verde);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--verde) 18%, transparent);
}
/* Un campo que el navegador da por MAL solo se pinta en rojo cuando ya se ha tocado:
   estrenar un formulario con todo en rojo es acusar a alguien de no haber escrito algo
   que todavía no le ha dado tiempo a escribir. */
.campo input:not(:placeholder-shown):invalid{
  border-color:var(--rojo);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--rojo) 15%, transparent);
}
@media (prefers-reduced-motion:reduce){
  .campo input, .campo textarea, .campo select{ transition:none; }
}


/* LA LETRA PEQUEÑA, que NO es el pie.
   `.pie` es la barra fija de abajo del móvil del guía: `position:fixed`, y en pantalla
   ancha con mando puesto se esconde entera. Se estaba usando además como «texto chico» en
   la hoja de la cuenta —«Para entrar con la huella y no esperar al correo»—, así que esa
   frase salía `position:fixed` en el móvil, encima de la barra de verdad, y NO SALÍA
   NUNCA en el ordenador del encargado. Es la colisión de nombres que avisa el comentario
   de `.acciones`: un nombre corto y genérico en una hoja compartida. */
.letra-chica{ font-size:13px; color:var(--apagado); margin:6px 0 0; }

/* ───────── pie ───────── */
.pie{
  position:fixed; inset:auto 0 0 0; z-index:15; background:var(--papel);
  border-top:1px solid var(--linea); padding:9px 12px calc(9px + var(--seguro-abajo));
  display:flex; gap:9px; align-items:center; font-size:13px; color:var(--tinta2);
}
.pie .cola{ margin-left:auto; font-weight:700; }
.pie .cola.hay{ color:var(--oro); }
/* En el panel del encargado, la barra fija de abajo SOBRA. Nació para el móvil del guía:
   ahí «Todo guardado» y la cola de lo que falta por enviar son lo único que dice si el
   trabajo de la mañana está a salvo cuando el metro se queda sin cobertura, y el
   calendario es para pegar su horario en el que ya usa. En una mesa, con teclado y
   conexión, es una franja fija comiéndose el borde inferior para no decir nada.
   Se va entera, y con ella el enlace del calendario — que además es del guía, no de
   quien supervisa. Vuelve sola en cuanto hay algo pendiente de enviar: ahí sí importa. */
/* Y SOLO en pantalla ancha. `con-mando` también lo lleva un encargado que abre el panel
   desde el móvil, y ahí la barra vuelve a ser lo que era: lo único que le dice si lo que
   acaba de tocar está enviado o esperando cobertura. Esconderla por llevar mando puesto
   se la quitaba justo a quien la necesita. */
@media (min-width:1000px){
  body.con-mando .pie{ display:none; }
  body.con-mando.pie-hay .pie{ display:flex; }
  body.con-mando .pie #pie-cal{ display:none; }
}

.vacio{ text-align:center; color:var(--apagado); padding:44px 20px; font-size:15px; }
.oculto{ display:none !important; }

/* La casilla de «lo cubre el viajero». Grande y clara: es la que decide quién paga
   la comisión, y el guía la va a tocar delante del turista. */
.cubre{
  display:flex; align-items:center; gap:11px; margin:12px 0 4px;
  padding:12px 13px; border:1.5px solid var(--verde); border-radius:12px;
  background:#eef7f2; font-size:13px; line-height:1.35; cursor:pointer;
}
.cubre input{ width:24px; height:24px; flex:none; accent-color:var(--verde); }
.cubre b{ color:var(--verde2); }

/* ───────── pantalla del encargado ───────── */
.sel-guia{
  flex:0 0 auto; max-width:44%; min-height:44px; border-radius:10px;
  border:1.5px solid var(--linea); background:var(--crema); color:var(--tinta);
  font:inherit; font-size:13px; padding:8px 10px;
}
/* Sin guía asignado el desplegable se marca: es lo que hay que resolver hoy. */
.sel-guia:invalid, .sel-guia:has(option[value=""]:checked){
  border-color:var(--coral); color:var(--coral); font-weight:700;
}
.dias{ display:flex; gap:6px; flex-wrap:wrap; }
.dias button{
  width:44px; height:44px; border-radius:11px; border:1.5px solid var(--linea);
  background:var(--crema); font:inherit; font-weight:800; font-size:15px;
  color:var(--tinta2); cursor:pointer;
}
.dias button.on{ border-color:var(--verde); background:#eef7f2; color:var(--verde2); }

/* Interruptor del panel de mensajes. Grande: se toca con el pulgar y de pie. */
.interruptor{
  width:56px; height:32px; border-radius:99px; border:0; flex:none; cursor:pointer;
  background:var(--linea); position:relative; transition:background .15s;
}
.interruptor::after{
  content:''; position:absolute; top:3px; left:3px; width:26px; height:26px;
  border-radius:50%; background:#fff; transition:transform .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.interruptor.on{ background:var(--verde); }
.interruptor.on::after{ transform:translateX(24px); }
@media (prefers-reduced-motion:reduce){ .interruptor,.interruptor::after{ transition:none; } }

/* ── Clases que se usaban sin existir ─────────────────────────────────────────
   `.mini` y `.muted` llevaban tiempo escritas en encargado.js y cerebro.js y no
   estaban definidas en ningún sitio: sobrevivían porque al lado llevaban un
   `style="font-size:11.5px"` en línea que hacía el trabajo. */
.mini{ font-size:11.5px; }
.muted{ color:var(--apagado); }

/* ── El checklist del alta ─────────────────────────────────────────────────── */
.paso{ display:flex; gap:11px; align-items:flex-start;
       padding:12px 14px; border-top:1px solid var(--linea); }

/* Se llama `.aro` y no `.marca` A PROPÓSITO. Esto vive dentro de un `.tour`, donde
   `.marca` YA significa otra cosa —la chapa verde de la cabecera de una salida, con su
   fondo y su `padding:3px 8px`— y hereda todo lo que la regla de al lado no sobrescriba.
   Se pagó dos veces: primero los pasos pendientes salían como discos verdes rellenos
   (justo la forma con la que el resto de la app dice «hecho»), y luego, ya con el fondo
   corregido, el padding heredado los dejaba ovalados. Con la clase propia no hay nada
   que sobrescribir y no hay nada que se pueda olvidar mañana.
   Se distinguen por FORMA además de por color: aro vacío contra disco con palomita. */
.paso .aro{
  flex:0 0 19px; width:19px; height:19px; box-sizing:border-box; padding:0;
  margin-top:1px; border-radius:50%; background:transparent;
  border:2px solid var(--linea); display:grid; place-items:center;
}
.paso.ok{ opacity:.6; }
.paso.ok .aro{ background:var(--verde2); border-color:var(--verde2); }
.paso.ok .aro::after{ content:'✓'; color:#fff; font-size:11.5px; font-weight:800;
                      line-height:1; }

/* El «Ir» NO puede ser `.btn sec`: `.btn` lleva `flex:1; min-width:132px` para el pulgar
   de un guía, así que en una fila se llevaba 45 % del ancho y partía los títulos en tres
   líneas. Es la misma trampa que documenta `.chapa` aquí abajo, y el embudo cayó en ella.
   Aquí es un botón pequeño con su área de toque agrandada por debajo. */
.paso-ir{
  flex:0 0 auto; align-self:center; position:relative;
  min-width:0; min-height:0; border:1.5px solid var(--verde2); border-radius:999px;
  background:transparent; font:inherit; font-size:13px; font-weight:700;
  padding:6px 15px; color:var(--verde2); cursor:pointer;
}
/* El botón se ve de 30 px; el dedo encuentra 44. Sin esto sería un objetivo de toque
   por debajo de lo que se puede acertar sin mirar. */
.paso-ir::after{ content:''; position:absolute; inset:-7px -4px; }
.paso-ir:focus-visible{ outline:none;
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--verde) 22%, transparent); }
.paso-ir:active{ transform:translateY(1px); }

/* Lo que GuIA apunta en una salida. Una línea por nota, pegada a la fila de SU salida:
   con seis en el día y tres guías, una lista suelta de avisos obliga a cruzarlos a mano.
   Lo urgente se marca aparte porque es lo único aquí que puede no admitir espera. */
.nota-salida{
  margin:0; padding:5px 14px 5px 22px; font-size:13px; line-height:1.4;
  color:var(--tinta2); border-top:1px solid var(--linea);
}
.nota-salida.urge{ color:var(--coral); font-weight:600; }

/* Las excepciones de «cuándo sale el mensaje». Una fila por caso, y el formulario de
   añadir SIEMPRE a la vista: esconderlo tras un «añadir excepción» que hay que abrir es
   esconder justo la función que hace falta explicar. */
.excep{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 6px; padding:7px 10px; border-radius:10px;
  background:var(--crema); border:1px solid var(--linea); font-size:13px;
}
.excep .q{ flex:1; min-width:120px; font-weight:600; color:var(--tinta); }
.excep .c{ color:var(--tinta2); font-variant-numeric:tabular-nums; }
.excep.nueva{ background:transparent; border-style:dashed; }
/* Se repite el selector de `.sel-guia` para poder ganarle: sin el `:has(...)` delante,
   la regla que pinta el hueco en coral tiene más peso y estos dos salían en rojo
   diciendo que faltaba algo cuando «cualquier tour» es la respuesta correcta. */
.excep.nueva select.sel-libre,
.excep.nueva select.sel-libre:invalid,
.excep.nueva select.sel-libre:has(option[value=""]:checked){
  flex:1 1 132px; min-width:0; min-height:44px;
  border:1.5px solid var(--linea); color:var(--tinta2);
  border-radius:10px; padding:6px 8px; font:inherit; font-size:13px; background:var(--papel);
  text-overflow:ellipsis;
}
.excep-num{
  flex:0 0 66px; min-height:44px; text-align:center; border:1.5px solid var(--linea);
  border-radius:10px; padding:6px; font:inherit; font-size:13px; background:var(--papel);
}

/* El agente EN EL PANORAMA, que es la pantalla que se mira a diario. Una línea, no una
   sección: su bloque propio —ajustes, llave, puesta en marcha— sigue abajo, porque eso
   se toca una vez. Aquí solo cabe si está vivo y qué ha traído. */
.tira-agente{
  margin:0; padding:8px 14px 10px; font-size:13px; line-height:1.4;
  color:var(--tinta2); border-top:1px dashed var(--linea);
}
.tira-agente.parado{ color:var(--oro); }

/* El descuadre EN LA FILA de su salida. Sangrado a 78 px para que caiga bajo el título
   y no bajo la hora, alineado con las chapas de plataforma que lleva justo encima: es la
   comprobación contra la lista hecha en el sitio, sin cruzar nada. */
.fila-descuadre{
  margin:6px 0 0 78px; padding:7px 10px; border-radius:9px;
  border-left:3px solid var(--coral);
  background:color-mix(in srgb, var(--coral) 7%, transparent);
  font-size:13px; line-height:1.35; color:var(--tinta);
}
.fila-descuadre small{ display:block; margin-top:3px; font-size:11.5px; color:var(--tinta2); }

/* El descuadre que encontró el agente, en la tarjeta del guía. Coral y con borde a la
   izquierda: es lo único de esta pantalla que dice «la lista que viene debajo está
   incompleta», y tiene que leerse ANTES que la lista, de un vistazo y al sol. */
.descuadre{
  margin:0 14px 10px; padding:10px 12px; border-radius:11px;
  border:1px solid color-mix(in srgb, var(--coral) 35%, transparent);
  border-left:4px solid var(--coral);
  background:color-mix(in srgb, var(--coral) 7%, var(--papel));
  font-size:13px; line-height:1.4; color:var(--tinta);
}
.descuadre small{ display:block; margin-top:5px; font-size:11.5px; color:var(--tinta2); }

/* ── El panel del agente externo ──────────────────────────────────────────────
   La chapa NUNCA es verde. En esta app el verde significa «lo miró una persona», y un
   agente encendido pero sin paneles y sin llave salía verde diciendo «activo»: la única
   pantalla donde el color contradecía el modelo. Tres estados, distinguidos por FORMA
   (aro contra disco) además de por color, porque al sol el oro y el gris se lavan. */
.ag-chapa{
  margin-left:8px; border-radius:999px; padding:2px 10px;
  font-size:11.5px; font-weight:800; white-space:nowrap;
}
.ag-chapa.apagado{ background:var(--linea); color:var(--apagado); }
/* «parado» sobre oro claro daba 2,43:1 — muy por debajo del 4,5:1 que pide un texto de
   12 px, y es JUSTO el estado que hay que ver: el modo de fallo del agente es estar
   encendido sin hacer nada. Con `--hondo` sobre el mismo fondo sube a 8:1, y el estado
   se sigue distinguiendo por el aro (○) además de por el color. */
.ag-chapa.parado{ background:color-mix(in srgb, var(--oro) 26%, transparent); color:var(--hondo); }
.ag-chapa.trabajando{ background:var(--crema); color:var(--tinta2); }

.ag-sec{ padding:12px 14px; border-top:1px solid var(--linea); }
.ag-rot{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:11.5px; font-weight:800; letter-spacing:.07em; color:var(--apagado);
  margin:0 0 7px;
}

/* La barra de «lo que dice que ha cerrado». Lo sin comprobar va RAYADO y no en un color
   más flojo: una superficie que se ve incompleta y que NO se rellena sola es el
   argumento de este módulo convertido en imagen. El rayado es estático — aquí una
   animación diría «trabajando», que es justo lo contrario de lo que significa. */
.ag-barra{
  display:flex; height:10px; border-radius:99px; overflow:hidden;
  background:var(--linea); margin:2px 0 0;
}
.ag-barra i{ display:block; height:100%; }
.ag-barra i.ok{ background:var(--verde2); }
.ag-barra i.mal{ background:var(--coral); }
.ag-barra i.dudosa{
  background:repeating-linear-gradient(45deg,
    var(--crema) 0 4px, color-mix(in srgb, var(--apagado) 35%, transparent) 4px 8px);
}

/* «Qué NO puede hacer» en tinta normal y no en coral: es una lista de buenas noticias,
   y el coral aquí es el color de «esto te falta». */
.ag-nopuede{
  margin:12px 0 0; padding-left:11px; border-left:2px dashed var(--linea);
}
.ag-nopuede p{ margin:5px 0 0; font-size:13px; line-height:1.4; color:var(--tinta2); }

.ag-paso{ margin:0 0 10px; }
.ag-paso .fila{ display:flex; align-items:center; gap:9px; font-size:13px; }
/* `.marca-ag` y no `.aro`: `.aro` ya cuelga de `.paso` (el embudo del alta) y una clase
   con dos dueños es lo que la guarda `tests/css-un-dueno.py` prohíbe — guarda que, por
   cierto, cazó este mismo descuido al escribirlo. */
.ag-paso .marca-ag{
  flex:0 0 18px; width:18px; height:18px; box-sizing:border-box; border-radius:50%;
  border:2px solid var(--linea); display:grid; place-items:center;
}
.ag-paso.ok .marca-ag{ background:var(--verde2); border-color:var(--verde2); }
.ag-paso.ok .marca-ag::after{ content:'✓'; color:#fff; font-size:11.5px; font-weight:800; line-height:1; }
.ag-paso p{ margin:3px 0 0 27px; line-height:1.4; }

/* Un permiso es un BOTÓN de 48 px y no una casilla: esto se toca con el pulgar, y el
   estado se distingue por forma —aro vacío contra disco con palomita— además de por
   color. Una casilla nativa mide 13 px y su estado es solo un color. */
.permiso{
  display:flex; align-items:center; gap:11px; width:100%; min-height:54px;
  margin:0 0 8px; padding:9px 13px; text-align:left;
  border:1.5px solid var(--linea); border-radius:13px; background:var(--papel);
  font:inherit; font-size:13px; color:var(--tinta2); cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
/* Encendido: el borde y el texto se afirman. Apagado NO se apaga con opacidad —lo
   apagado con opacidad se lee como «deshabilitado», y aquí es una opción perfectamente
   disponible que simplemente no está elegida. */
.permiso.on{
  border-color:var(--verde2); color:var(--tinta);
  background:color-mix(in srgb, var(--verde2) 7%, var(--papel));
}
.permiso .marca-p{
  flex:0 0 22px; width:22px; height:22px; box-sizing:border-box; border-radius:50%;
  border:2px solid var(--linea); display:grid; place-items:center;
  font-size:11.5px; font-weight:800; color:#fff; transition:background .15s, border-color .15s;
}
.permiso.on .marca-p{ background:var(--verde2); border-color:var(--verde2); }
.permiso .txt{ min-width:0; }
.permiso .etiq{ display:block; font-weight:600; }
.permiso small{ display:block; color:var(--apagado); font-size:11.5px; font-weight:400;
  margin-top:1px; }
.permiso:hover{ border-color:var(--apagado); }
.permiso.on:hover{ border-color:var(--verde); }
.permiso:focus-visible{ outline:none;
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--verde) 20%, transparent); }
.permiso:active{ transform:translateY(1px); }
@media (prefers-reduced-motion:reduce){ .permiso{ transition:none; } }

/* ── Chapa de plataforma ──────────────────────────────────────────────────────
   Clase propia y no `.btn sec`: `.btn` es el botón gordo para el pulgar de un guía
   —`flex:1`, 132 px de ancho mínimo, 48 de alto— y una chapa que hereda eso se
   estira a toda la fila. Pelearlo con estilos en línea es cómo se acaba con dos
   reglas cancelándose. */
.chapa{
  flex:0 0 auto; min-width:0; min-height:0;
  border:1.5px solid var(--linea); border-radius:999px; background:transparent;
  font:inherit; font-size:11.5px; font-weight:600; padding:3px 10px;
  color:var(--apagado); cursor:pointer;
}
.chapa:disabled{ opacity:.5; cursor:default; }

/* ── La entrada ───────────────────────────────────────────────────────────────
   Es la única pantalla de la app que NO se usa en la calle: se abre una vez, sentado,
   y luego la sesión dura semanas. Así que aquí no manda la regla de los 48 px y el sol
   directo — manda que se parezca a la web de la que viene, que es lo último que esa
   persona ha visto hace diez segundos. Mismo fondo, misma serif en el titular, y una
   caja pequeña flotando en el centro en vez de dos tarjetas a lo ancho. */
/* La entrada ya no pone su propio fondo: lo pone `body::before/::after`, que se mueve.
   Lo que sí hace es flotar MÁS que el resto —es la única tarjeta en pantalla— y llevar
   un filo de color arriba que la ancla a la marca. */
.entrada{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px calc(24px + var(--seguro-abajo));
}
.entrada-caja{
  /* 356, no 392. En un móvil de 375 la caja llegaba a 16 px de cada borde y dejaba de
     leerse como algo apoyado encima: para que una tarjeta flote hay que ver suelo a los
     lados, y con dieciséis píxeles no se ve. */
  position:relative; width:100%; max-width:356px;
  background:var(--papel);
  border:1px solid color-mix(in srgb, var(--linea) 85%, transparent);
  border-radius:20px; overflow:hidden;
  box-shadow:
    0 1px 1px rgba(74,61,32,.06),
    0 6px 14px -6px rgba(74,61,32,.12),
    0 36px 70px -28px rgba(74,61,32,.40);
  padding:26px 24px 22px;
  animation:entra-caja .5s cubic-bezier(.16,.7,.22,1) both;
}
.entrada-caja::before{
  content:''; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg, var(--verde), var(--oro) 55%, var(--coral));
}
@keyframes entra-caja{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .entrada-caja{ animation:none; } }
/* La marca, con su ruta punteada y su pin, no en texto pelado. Es el wordmark que ya
   usan la web y la demo; que la app entrara con una tipografía suelta era la única
   superficie donde la marca no aparecía entera — y es la primera pantalla del producto.
   Peso 400: Iowan tiene Roman, Bold y Black, así que un 700 aquí era Bold; a este cuerpo
   la voz la da la forma de la letra, no el grosor. */
.entrada-marca{ text-align:center; margin-bottom:22px; }
.entrada-marca .wm{ display:inline-flex; flex-direction:column; align-items:stretch; }
.entrada-marca b{
  font-family:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  font-size:27px; font-weight:400; letter-spacing:-.005em; color:var(--hondo);
  line-height:1.06;
}
.entrada-marca .wm-ruta{ width:100%; height:.6em; margin-top:.12em; display:block; overflow:visible; }
/* `.entrada-lema`, no `.pie`: la app YA tiene una clase `.pie` —la barra fija de abajo,
   con `position:fixed`— y este `<span class="pie">` la heredaba entera, así que el lema
   se despegaba de la marca y aterrizaba al fondo de la pantalla, encima de la barra. Un
   nombre corto y genérico en una hoja compartida es una colisión esperando. */
.entrada-marca .entrada-lema{ display:block; font-size:13px; color:var(--apagado);
  margin-top:10px; }
/* Las dos pestañas. Entrar y crear cuenta son la misma pantalla: enseñar los dos
   formularios a la vez duplica el alto y hace dudar de en cuál hay que escribir.
   La activa se marca con el verde de la marca, no con papel sobre crema: dos beiges
   distintos obligan a fijarse para saber cuál está puesta. */
.entrada-tabs{ display:flex; gap:3px; background:var(--crema); border:1px solid var(--linea);
  border-radius:12px; padding:3px; margin-bottom:20px; }
.entrada-tabs button{
  flex:1; border:0; background:transparent; font:inherit; font-size:13px; font-weight:600;
  color:var(--tinta2); padding:9px 6px; border-radius:9px; cursor:pointer;
  transition:background .16s, color .16s;
}
.entrada-tabs button:hover:not(.on){ background:rgba(20,99,76,.07); }
.entrada-tabs button.on{ background:var(--verde); color:#fdf9ee; font-weight:700;
  box-shadow:0 2px 6px -2px rgba(20,99,76,.45); }
@media (prefers-reduced-motion:reduce){ .entrada-tabs button{ transition:none; } }
/* Esta pantalla se usa SENTADO y una vez, así que aquí no rige el pulgar de 48 px: los
   campos se aprietan para que el formulario entero quepa sin desplazar. Y la etiqueta va
   pegada a su campo —4 px— con el aire entre GRUPOS —14— que es lo que convierte una
   pila de cosas en un formulario legible. */
.entrada .campo{ margin:14px 0 0; }
.entrada .campo span{ font-size:11.5px; font-weight:600; margin-bottom:4px; }
.entrada .campo input{ min-height:44px; font-size:15px; padding:10px 12px; border-radius:11px; }
.entrada .acciones{ margin-top:20px; }
.entrada .btn{ min-height:48px; font-size:15px; letter-spacing:.005em; }
.entrada-pie{ text-align:center; margin:14px 0 0; font-size:11.5px; color:var(--apagado);
  line-height:1.45; }
/* Un rótulo para separar «tu empresa» de «tú»: en el alta se piden cuatro datos de dos
   cosas distintas, y sin la pausa se leen como una lista de deberes. */
.entrada-grupo{
  display:flex; align-items:center; gap:9px; margin:22px 0 2px;
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--apagado);
}
.entrada-grupo::after{ content:''; flex:1; height:1px; border-top:1px dashed var(--linea); }

/* ── Alta de un tour, por secciones ───────────────────────────────────────────
   Un tour se define UNA vez y luego dura años, así que aquí no manda la prisa: manda
   que no se deje nada a medias. Tres secciones, y una barra que dice cuánto llevas —
   sin barra, un formulario largo parece infinito y se abandona en el tercer campo. */
.paso-alta{ border-top:1px solid var(--linea); }
.paso-alta > summary{
  list-style:none; cursor:pointer; padding:12px 14px;
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:13px;
}
.paso-alta > summary::-webkit-details-marker{ display:none; }
.paso-alta > summary .num{
  flex:0 0 22px; height:22px; border-radius:50%; background:var(--crema);
  border:1.5px solid var(--linea); color:var(--apagado);
  font-size:11.5px; font-weight:800; display:grid; place-items:center;
}
.paso-alta.listo > summary .num{ background:var(--verde2); border-color:var(--verde2); color:#fff; }
/* El coral es el color de «esto te falta». Ponerlo también en «opcional» era decir dos
   cosas opuestas con la misma tinta: la sección que puede saltarse pedía atención igual
   que la que no. Lo obligatorio avisa; lo opcional solo se rotula. */
.paso-alta > summary .obl{ margin-left:auto; font-size:11.5px; font-weight:700;
  color:var(--coral); }
.paso-alta > summary .obl.suelto{ font-weight:600; color:var(--apagado); }
.paso-alta.listo > summary .obl{ color:var(--verde2); }
.paso-alta > div{ padding:2px 14px 14px; }
/* Sin margen lateral propio. Lo llevaba —`margin:0 14px`— DENTRO de contenedores que
   ya tienen 14 px de relleno, así que la barra quedaba 14 px por dentro por cada lado
   mientras el título, el texto y los campos arrancaban todos en el mismo borde. Medido:
   la barra en 41 px y todo lo demás en 27. Es de los desajustes que no se saben nombrar
   pero que hacen que una pantalla se lea como descuidada. Quien la coloque le pone el
   margen que necesite ahí, como hace el embudo. */
.barra-alta{ height:6px; background:var(--linea); border-radius:99px; overflow:hidden; }
.barra-alta i{ display:block; height:100%; background:var(--verde2); border-radius:99px;
  transition:width .3s cubic-bezier(.16,.7,.22,1); }

/* ── La hora, con su esfera ───────────────────────────────────────────────────
   Un `<input type="time">` a secas es una caja de texto con dos números: no dice que
   sea una hora hasta que lo lees. Aquí va dentro de un marco con una esfera de reloj
   dibujada en CSS —doce marcas y dos agujas— para que se reconozca de un vistazo.

   La esfera es DECORACIÓN y no un control: no se puede tocar (`pointer-events:none`) y
   la lleva un `aria-hidden`. Quien use lector de pantalla oye el campo de hora de
   siempre, que es lo que hay que oír. */
.reloj{
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--linea); border-radius:14px; background:var(--crema);
  padding:8px 12px 8px 10px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.reloj:focus-within{
  background:var(--papel); border-color:var(--verde);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--verde) 18%, transparent);
}
.reloj input{
  flex:1; min-height:48px; border:0; background:transparent; padding:0;
  font:inherit; font-size:20px; font-weight:700; color:var(--tinta);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.reloj input:focus{ outline:none; }

.esfera{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%;
  border:2.5px solid var(--verde); background:var(--papel);
  position:relative; pointer-events:none;
  box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--verde) 8%, transparent),
             0 1px 3px rgba(74,61,32,.16);
}
/* CUATRO marcas —12, 3, 6 y 9— y no doce. A 46 px, doce rayas de milímetro y medio se
   ven como una mancha gris: la esfera deja de leerse como un reloj, que era todo el
   objetivo. Van en un solo elemento con un cónico repetido cada 90°. */
.esfera::before{
  content:''; position:absolute; inset:2px; border-radius:50%;
  background:repeating-conic-gradient(
    var(--verde) 0deg 3.4deg, transparent 3.4deg 90deg);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 63%);
          mask:radial-gradient(circle, transparent 62%, #000 63%);
  transform:rotate(-1.7deg);         /* centra cada marca en su hora */
  opacity:.85;
}
/* Las agujas, a las 10:10 — la hora a la que se fotografían los relojes porque deja la
   esfera despejada y simétrica. Con rotate(0) apuntando arriba: el minutero a 60° (los
   10 min) y la horaria a −55° (las 10 y pico). */
.esfera::after{
  content:''; position:absolute; left:50%; top:50%; width:2.5px; height:15px;
  background:var(--verde); border-radius:2px;
  transform-origin:50% 100%; transform:translate(-50%,-100%) rotate(60deg);
}
.esfera i{
  position:absolute; left:50%; top:50%; width:2.5px; height:10px;
  background:var(--verde); border-radius:2px;
  transform-origin:50% 100%; transform:translate(-50%,-100%) rotate(-55deg);
}
.esfera b{
  position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  background:var(--verde); border-radius:50%;
}
/* Fuera el reloj que dibuja el navegador: ya hay uno, y dos iconos de reloj en el mismo
   campo no son dos ayudas, son una duda. El que abre el selector es el marco entero. */
.reloj input::-webkit-calendar-picker-indicator{ display:none; }
.reloj{ cursor:pointer; }

/* ── La tira de días ──────────────────────────────────────────────────────────
   Antes eran siete botones sueltos que se envolvían a dos líneas en pantallas
   estrechas y rompían la lectura de la semana. Ahora es una tira: siete columnas
   iguales que siempre caben, porque una semana no tiene forma de párrafo. */
.dias{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.dias button{
  width:auto; height:46px; border-radius:11px; border:1.5px solid var(--linea);
  background:var(--crema); font:inherit; font-weight:800; font-size:15px;
  color:var(--apagado); cursor:pointer;
  transition:background .14s, border-color .14s, color .14s, transform .12s;
}
.dias button:not(.on):hover{ border-color:color-mix(in srgb, var(--verde) 35%, var(--linea)); }
.dias button.on{
  border-color:var(--verde); background:var(--verde); color:#fff;
  box-shadow:0 2px 8px -2px color-mix(in srgb, var(--verde) 55%, transparent);
}
.dias button:active{ transform:scale(.94); }
@media (prefers-reduced-motion:reduce){ .dias button{ transition:none; } }

/* ── Las secciones del alta: que se vea que se abren ──────────────────────────
   Un `<details>` sin flecha parece un título, no algo que se pueda desplegar. */
.paso-alta > summary::after{
  content:'⌄'; margin-left:8px; font-size:17px; line-height:1; color:var(--apagado);
  transition:transform .18s cubic-bezier(.2,.8,.3,1);
}
.paso-alta[open] > summary::after{ transform:rotate(180deg); }
.paso-alta > summary .obl{ margin-left:auto; }
@media (prefers-reduced-motion:reduce){ .paso-alta > summary::after{ transition:none; } }

/* ═════════════ el panel del agente: lo que trae y cómo se ajusta ═════════════
   Añadido al sacar el panel a su propio módulo (`app/guia/agente.js`), con cinco verbos
   y cuatro cosas nuevas que enseñar.

   ── La regla que gobierna todos estos nombres ──────────────────────────────
   TODO va con prefijo `ag-` y SIN ANIDAR bajo un padre. No es manía: `tests/css-un-dueno.py`
   falla si una clase cuelga de dos padres distintos, y `.cab`, `.tit`, `.fila`, `.txt`,
   `.etiq`, `.nom`, `.hora`, `.caja` y `.marca` ya tienen dueño. Escribir `.ag-panel .fila`
   pondría la guarda en rojo al instante — y sin guarda, en rojo estaría la pantalla.
   Las excepciones son las tres que YA cuelgan de un padre `ag-` y de ninguno más
   (`.ag-paso .fila`, `.ag-paso .marca-ag`, `.ag-barra i`).

   ── Y la que gobierna los colores ──────────────────────────────────────────
   Ni una superficie verde. En esta app el verde es «lo miró una persona», y el modo de
   fallo del agente es precisamente estar encendido sin hacer nada. */

/* La cabecera de la app es `position:sticky`, así que un `scrollIntoView` deja el título
   del bloque DEBAJO de ella: los botones «Ir» del embudo y los «↑» de este panel llevaban
   a un sitio donde lo primero que se lee es la segunda línea. Se aplica a todos los
   bloques, que es donde está el fallo, y no solo al del agente. */
section.tour{ scroll-margin-top:76px; }

.ag-titular{
  margin:0; padding:0 14px 12px; font-size:15px; line-height:1.4; color:var(--tinta);
}
.ag-vacio{ padding:0 14px 14px; }
.ag-verbo{ margin:0 0 8px; font-size:13px; line-height:1.45; color:var(--tinta2); }
.ag-verbo b{ color:var(--tinta); }
.ag-ojo{ margin:10px 0 0; color:var(--oro-texto); line-height:1.4; }

/* ── Las cuatro baldosas ────────────────────────────────────────────────────
   `auto-fit` con un mínimo de 132 px y no cuatro columnas fijas: en un móvil estrecho
   caen a dos y a dos, que sigue siendo comparable de un vistazo; con cuatro fijas el
   número quedaba en 9 px y dejaba de leerse en la calle, que es donde se lee.

   La cifra en `tabular-nums` para que al repintarse no baile de sitio: esto se refresca
   solo, y un número que salta llama la atención cuando no ha pasado nada. */
.ag-rejilla{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  /* `1fr` y no `auto`: las etiquetas tienen longitudes distintas —«plazas liberadas»
     contra «reseñas sin contestar»— y con altura automática las dos filas quedan
     desiguales. Cuatro cifras que se comparan de un vistazo tienen que estar en cajas
     iguales; si no, la más alta parece la más importante. */
  grid-auto-rows:1fr; gap:8px; padding:2px 14px 14px;
}
.ag-baldosa{
  display:flex; flex-direction:column; gap:1px; min-height:78px;
  padding:11px 12px; text-align:left; font:inherit; color:inherit;
  background:var(--crema); border:1px solid var(--linea); border-radius:13px;
}
button.ag-baldosa{ cursor:pointer; }
button.ag-baldosa:active{ transform:translateY(1px); }
.ag-baldosa:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(20,99,76,.22); }
.ag-cifra{
  font-size:27px; font-weight:800; line-height:1.05; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--tinta);
}
.ag-que{ font-size:13px; font-weight:700; color:var(--tinta2); line-height:1.25; }
.ag-pie2{ font-size:11.5px; color:var(--apagado); line-height:1.25; }
/* La baldosa que pide algo se marca con el BORDE además de con el color: al sol el coral
   sobre crema y el gris sobre crema se parecen mucho más de lo que parecen aquí. */
.ag-baldosa.mal{ border-color:var(--coral); background:color-mix(in srgb, var(--coral) 7%, var(--crema)); }
/* A 26 px bold, el coral sobre su propio relleno daba 2,68:1 — falla incluso el 3:1 de
   texto grande, y es la cifra que pide atención. El borde sigue siendo coral. */
.ag-baldosa.mal .ag-cifra{ color:var(--coral-texto); }
.ag-baldosa.bien .ag-cifra{ color:var(--apagado); }

/* ── Las líneas de aviso ──────────────────────────────────────────────────── */
.ag-linea{ margin:0 0 6px; font-size:13px; line-height:1.45; color:var(--tinta); }
/* «No lo sé» en oro y con barra lateral: no es un fallo del operador —no va en coral— y
   tampoco es una cifra más. Lo que tiene que quedar claro es que lo de debajo está
   incompleto. */
.ag-nosabe{
  margin:0 14px 12px; padding:9px 12px; border-left:3px solid var(--oro);
  background:var(--crema); border-radius:0 11px 11px 0; color:var(--tinta2); font-size:13px;
}
.ag-malo{ color:var(--coral-texto); }
/* El valor que publica la plataforma: es la mitad de la comparación y hay que leerlo. */
.ag-suyo{ color:var(--oro-texto); font-weight:700; }
.ag-porque{ margin:4px 0 10px; line-height:1.4; }
.ag-leyenda{ margin:6px 0 0; color:var(--tinta2); }
.ag-aviso{ margin:8px 0 0; color:var(--coral-texto); }

/* ── Filas con acción a la derecha ──────────────────────────────────────────
   `wrap` y no `nowrap`: el título de un tour puede ser largo, y en un móvil estrecho vale
   más que el botón baje de línea a que se estruje por debajo del objetivo táctil. */
.ag-fila{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:9px 0; border-top:1px solid var(--linea);
}
.ag-cuando{
  font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--tinta2);
  white-space:nowrap;
}
.ag-nom2{ flex:1; min-width:120px; font-size:13px; line-height:1.35; }

/* ── El botón de este panel ─────────────────────────────────────────────────
   `.ag-boton` y NO `.btn`: `.btn` lleva `flex:1` y `min-width:132px`, y en una fila se
   come el ancho y parte el título de al lado. Está documentado dos veces en este fichero
   como error ya cometido. 48 px de alto, que es la regla de la casa para lo que se toca
   de pie. */
.ag-boton{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:6px 15px; border-radius:11px;
  background:var(--papel); border:1.5px solid var(--linea); color:var(--verde2);
  font:inherit; font-size:13px; font-weight:700; text-decoration:none;
  cursor:pointer; white-space:nowrap;
}
.ag-boton:active{ transform:translateY(1px); }
.ag-boton:disabled{ opacity:.5; cursor:default; }
.ag-boton:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(20,99,76,.22); }
.ag-boton.on{ border-color:var(--verde2); }

/* ── Lo publicado, tal cual, y los ajustes: el mismo plegable ─────────────── */
.ag-plegable{
  border-top:1px solid var(--linea); padding:12px 14px;
}
.ag-plegable > summary{
  display:flex; align-items:center; gap:9px; min-height:48px;
  font-size:13px; font-weight:700; cursor:pointer; list-style:none;
}
.ag-plegable > summary::-webkit-details-marker{ display:none; }
.ag-plegable > summary::before{
  content:'›'; font-size:20px; color:var(--apagado); transition:transform .18s;
}
.ag-plegable[open] > summary::before{ transform:rotate(90deg); }
.ag-cuantos{
  margin-left:auto; border-radius:999px; padding:2px 10px;
  background:var(--crema); color:var(--apagado); font-size:11.5px; font-weight:800;
}
/* Lo que FALTA en oro, no en coral: es un paso pendiente, no un fallo. */
.ag-cuantos.falta{ background:color-mix(in srgb, var(--oro) 18%, transparent); color:var(--oro-texto); }

.ag-tarjeta{
  margin:0 0 10px; padding:11px 12px;
  background:var(--crema); border:1px solid var(--linea); border-radius:12px;
}
.ag-tarj-cab{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:13px; font-weight:700; margin:0 0 6px;
}
/* La etiqueta ARRIBA del valor y en versalitas: los valores son frases de longitud muy
   distinta —un punto de encuentro contra «español, inglés»— y en dos columnas el texto
   largo empuja al corto hasta dejarlo ilegible. */
.ag-campo{ margin:0 0 7px; font-size:13px; line-height:1.4; }
.ag-campo span{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--apagado);
}

/* ── El ritmo ──────────────────────────────────────────────────────────────
   El `<select>` nativo, a propósito: lo dibuja el sistema, se abre a pantalla completa en
   el móvil y ya cumple el tamaño táctil sin que lo reimplantemos. */
.ag-ritmo{ margin:0 0 12px; }
.ag-sel, .ag-hora{
  min-height:48px; padding:8px 11px; font:inherit; font-size:15px;
  background:var(--crema); border:1.5px solid var(--linea); border-radius:11px;
  color:var(--tinta);
}
.ag-hora{ font-variant-numeric:tabular-nums; }
.ag-sel:focus-visible, .ag-hora:focus-visible{
  outline:none; border-color:var(--verde2); box-shadow:0 0 0 3px rgba(20,99,76,.18);
}

.ag-caja{
  margin-top:10px; padding:10px 12px;
  background:var(--crema); border:1px solid var(--linea); border-radius:11px;
}
.ag-llave{
  display:block; user-select:all; word-break:break-all;
  font-size:13px; margin-bottom:8px;
}

/* ═════════════ la jerarquía del panel del encargado ═════════════
   Quince bloques apilados en una sola tira, sin agrupar y sin un solo rótulo. Todos con
   la misma tarjeta, el mismo peso y el mismo tamaño de título, así que la pantalla no
   decía cuál mirar primero: había que leerla entera para saber qué era cada cosa.

   ── Lo que hace el rótulo, y lo que NO ──────────────────────────────────────
   Agrupa, y no esconde. No hay pestañas ni plegables aquí a propósito: una salida llena
   que sigue vendiendo plazas cuesta dinero cada hora que pasa, y detrás de un clic no la
   ve nadie. Lo que separa los grupos es un rótulo y aire, que es suficiente para orientar
   y no puede ocultar una alarma.

   ── Por qué el rótulo es pequeño ────────────────────────────────────────────
   Un rótulo de sección tan grande como el título de un bloque compite con él. Aquí es
   deliberadamente más pequeño que todo lo que agrupa: se lee al recorrer con el pulgar y
   desaparece cuando ya sabes dónde estás. */
.grupo-rot{
  display:flex; align-items:baseline; gap:9px;
  /* 12 px y `--tinta2`, no 11,5 y `--apagado`. En versalitas, 12 px sigue siendo texto
     normal a efectos de contraste, y esto se lee a pleno sol: el gris apagado sobre el
     fondo se lava justo cuando hace falta orientarse rápido. */
  margin:22px 2px 9px; font-size:11.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--tinta2);
}
/* El primero pega arriba: el aire de separación es entre grupos, no encima del primero. */
.grupo-rot:first-child{ margin-top:6px; }
/* La raya que sale del rótulo hasta el borde. Hace de separador sin ser una línea entera
   —una línea de lado a lado corta la pantalla en dos y hace que lo de abajo parezca de
   otra pantalla— y da el gesto de «aquí empieza otra cosa». */
.grupo-rot::after{
  content:''; flex:1; height:1px; background:var(--linea); align-self:center;
}
/* La cuenta de lo que pide atención dentro del grupo. En oro y no en coral: es «mira
   esto», no «esto está mal». Y solo se pinta si es mayor que cero — un «0» al lado de
   cada rótulo es ruido que enseña a no mirar la cifra el día que sí importa. */
.grupo-n{
  border-radius:999px; padding:1px 8px; font-size:11.5px; font-weight:800;
  letter-spacing:0; background:color-mix(in srgb, var(--oro) 22%, transparent);
  color:var(--oro-texto); font-variant-numeric:tabular-nums;
}

/* ═════════════ el asistente de puesta en marcha ═════════════
   El Cerebro pide 49 campos de texto libre de una sentada y el checklist del alta son
   ocho enlaces repartidos por quince bloques: no hay un camino, hay un mapa. Quien se da
   de alta un martes por la noche abre eso y lo deja.

   ── Por qué es una capa entera y no otro bloque ─────────────────────────────
   Porque el problema es la competencia. Dentro del panel, el asistente sería el bloque
   dieciséis y volvería a pelearse por la atención con los cierres y el buzón. Tapando la
   pantalla no hay nada más que mirar, que es justo lo que hace que se termine.
   Se sale cuando uno quiere y lo hecho queda guardado: cada campo se guarda al salir de
   él, así que cerrar a mitad no pierde nada.

   ── El ancho, con su número ─────────────────────────────────────────────────
   440 px de columna frente a los 560 del panel. Un formulario se lee en vertical —
   etiqueta, campo, etiqueta, campo— y cuanto más estrecha la columna, menos recorre el
   ojo entre el final de una línea y el principio de la siguiente. El panel es más ancho
   porque ahí hay tablas y filas con acción a la derecha. */
.asis-velo{
  position:fixed; inset:0; z-index:60; background:var(--fondo);
  display:flex; flex-direction:column;
}
/* 16 px, los MISMOS que `.asis-col`. Estaban a 14 y la barra de progreso arrancaba dos
   píxeles a la izquierda de las etiquetas de los campos: no se ve mirando, se ve midiendo,
   y es exactamente lo que hace que una pantalla se sienta descuadrada sin saber por qué.
   Un solo eje vertical para todo: barra, título, lema, etiquetas, campos y botones. */
/* El centrado lo hace el RELLENO, no un `margin:auto`. Con margen, cualquier regla de más
   abajo que use el `margin` abreviado —`.asis-fila1{ margin:0 0 10px }`— lo pisa entero sin
   que se note: en móvil los dos ejes coinciden porque la columna ocupa todo el ancho, así
   que el desajuste solo aparecía en tableta, que es la pantalla donde no se estaba mirando.
   `max()` deja los 16 px de siempre en móvil y centra en cuanto sobra sitio. */
.asis-arriba, .asis-abajo{ --lado:max(16px, calc((100% - 440px) / 2)); }
.asis-arriba{
  flex:0 0 auto;
  padding:calc(10px + var(--seguro-arriba)) var(--lado) 12px;
  background:var(--papel); border-bottom:1px solid var(--linea);
}
.asis-fila1{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.asis-tit{ flex:1; font-size:15px; font-weight:800; letter-spacing:-.01em; }
/* La cuenta en cifras tabulares: al pasar de paso, «2 de 6» no puede bailar de sitio. */
.asis-cuenta{ font-size:13px; font-weight:700; color:var(--apagado); font-variant-numeric:tabular-nums; }
.asis-cerrar{
  flex:0 0 auto; width:48px; height:48px; margin:-8px -6px -8px 0;
  border:0; background:transparent; color:var(--tinta2); font-size:20px; cursor:pointer;
  border-radius:12px;
}
.asis-cerrar:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(20,99,76,.22); }

/* ── La barra ────────────────────────────────────────────────────────────────
   Un tramo por paso, no una barra continua. Una barra continua sobre 49 campos avanza
   un 2 % por campo: el operador rellena seis cosas seguidas y ve que no se mueve. Con
   tramos, terminar un paso se ve entero, que es la unidad en la que uno decide seguir.
   El tramo EN CURSO se rellena por dentro según lo que lleve, así que dentro del paso
   tampoco está parada. */
.asis-barra{ display:flex; gap:4px; }
.asis-tramo{
  flex:1; height:6px; border-radius:99px; background:var(--linea); overflow:hidden;
}
.asis-tramo i{
  display:block; height:100%; width:0; background:var(--verde2); border-radius:99px;
  transition:width .3s cubic-bezier(.2,.8,.3,1);
}
@media (prefers-reduced-motion:reduce){ .asis-tramo i{ transition:none; } }
.asis-tramo.hecho i{ width:100% }

.asis-medio{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* 440 y no 560: aquí solo hay etiqueta y campo, uno debajo de otro. */
.asis-medio{ --lado:max(16px, calc((100% - 440px) / 2)); }
.asis-col{ padding:18px var(--lado) 28px; }
.asis-lema{ margin:0 0 4px; font-size:20px; font-weight:800; line-height:1.25; }
.asis-porque{ margin:0 0 18px; font-size:13px; line-height:1.5; color:var(--tinta2); }

/* ── Un campo ────────────────────────────────────────────────────────────────
   Etiqueta ARRIBA y no a la izquierda: con la etiqueta al lado, el campo empieza en un
   sitio distinto en cada fila según lo larga que sea la palabra, y la columna de campos
   deja de ser una columna. Arriba, todo arranca en el mismo punto.
   El mismo `margin` entre todos —18 px— para que la separación no dependa de si el campo
   lleva ayuda debajo o no. */
.asis-campo{ margin:0 0 18px; }
.asis-campo > label{
  display:block; margin:0 0 6px; font-size:13px; font-weight:700; color:var(--tinta);
}
.asis-campo textarea, .asis-campo input{
  display:block; width:100%; min-height:48px; padding:11px 13px; box-sizing:border-box;
  font:inherit; font-size:15px; line-height:1.45; color:var(--tinta);
  background:var(--papel); border:1.5px solid var(--linea); border-radius:11px;
  resize:vertical;
}
.asis-campo textarea:focus-visible, .asis-campo input:focus-visible{
  outline:none; border-color:var(--verde2); box-shadow:0 0 0 3px rgba(20,99,76,.16);
}
/* La ayuda DEBAJO del campo, no encima: encima se lee antes de saber qué se pregunta y
   se olvida; debajo se lee cuando uno duda, que es cuando sirve. */
.asis-ayuda{ margin:5px 0 0; font-size:13px; line-height:1.4; color:var(--apagado); }
.asis-guardado{ float:right; font-size:11.5px; font-weight:700; color:var(--verde2); }

.asis-abajo{
  flex:0 0 auto; display:flex; gap:9px; align-items:center;
  padding:12px var(--lado) calc(12px + var(--seguro-abajo));
  background:var(--papel); border-top:1px solid var(--linea);
}
/* El botón de seguir a la derecha y ocupando lo que le sobre; el de volver, pequeño y a
   la izquierda. El gesto que se repite cinco veces es «seguir», y tiene que caer donde
   está el pulgar. */
.asis-atras{
  flex:0 0 auto; min-height:48px; padding:6px 15px; border-radius:11px;
  background:transparent; border:1.5px solid var(--linea); color:var(--tinta2);
  font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.asis-seguir{
  flex:1; min-height:52px; border-radius:12px; border:1.5px solid var(--verde);
  background:var(--verde); color:#fff; font:inherit; font-size:15px; font-weight:800;
  cursor:pointer;
}
.asis-seguir.suave{ background:transparent; color:var(--verde2); }
.asis-atras:focus-visible, .asis-seguir:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(20,99,76,.28);
}
.asis-saltar{
  display:block; width:100%; margin:9px 0 0; padding:6px; min-height:44px;
  background:transparent; border:0; color:var(--apagado); font:inherit; font-size:13px;
  text-decoration:underline; cursor:pointer;
}

/* ── La tira de alarma ───────────────────────────────────────────────────────
   Lo que agrupar el panel pone en riesgo es esconder algo que cuesta dinero: un buzón
   caído, una salida llena que sigue vendiendo. Con los bloques repartidos en cuatro
   grupos, la avería que antes se veía la primera puede quedar tres pantallas abajo.

   La respuesta no es dejar de agrupar: es que **lo que sube arriba sea una LÍNEA, nunca
   el bloque**. El bloque se queda donde está su objeto —el buzón con las máquinas, los
   cierres con las salidas— y arriba aparece una línea que dice qué pasa y lleva allí.
   Así el orden no depende de la avería del día, y la avería tampoco depende del orden. */
.alarma{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  margin:0 0 8px; padding:11px 13px; min-height:48px; box-sizing:border-box;
  background:var(--papel); border:1px solid var(--linea); border-left:4px solid var(--coral);
  border-radius:12px; font:inherit; font-size:13px; line-height:1.4; color:var(--tinta);
  cursor:pointer;
}
/* Oro y no coral cuando es «mira esto» y no «esto está roto». Y la FORMA cambia también
   —el filo izquierdo es lo único que se ve de reojo—, que es la regla de esta app para
   todo lo que se distingue al sol. */
.alarma.aviso{ border-left-color:var(--oro); }
.alarma:active{ transform:translateY(1px); }
.alarma:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(20,99,76,.22); }
.alarma b{ font-weight:800; }
.alarma .flecha{ flex:0 0 auto; color:var(--apagado); font-size:15px; }

/* ── Los umbrales de cierre: cuatro campos en la MISMA vertical ───────────────
   Eran cuatro filas flexibles con la etiqueta a `flex:1`, así que el campo y su unidad
   iban empujados al borde derecho. Y como las unidades miden cosas distintas —«%»,
   «h de antelación», «personas (0 = no tengo)»— cada campo caía en una vertical
   distinta: cuatro casillas en escalera. Es de las cosas que se ven antes de leer nada,
   y en una pantalla que pide números al operador dice lo que no queremos que diga.

   La retícula se declara UNA VEZ, en el contenedor, y las filas la heredan con
   `subgrid`. Cuatro rejillas independientes de tres columnas se alinean solo mientras
   nadie toque un texto; con `subgrid` es literalmente la misma.
   Y el respaldo para quien no lo tenga: columnas iguales declaradas en la fila. La
   diferencia entre las dos es de un píxel o dos, no de escalera. */
/* 112 px y no 82: dentro de la casilla van ahora el − y el + además del número, y con
   82 se quedaban veinticuatro píxeles para la cifra — «110» se veía «1». */
.umbrales{
  display:grid; grid-template-columns:1fr 112px minmax(0, 1.05fr);
  /* 20 px, que es lo que usa `.cab`: con 14 el título de la tarjeta caía seis píxeles a
     la derecha de sus propias etiquetas. Se ve antes de leerlo. */
  gap:0 12px; align-items:center; padding:2px 20px 12px;
}
.umbral{
  display:grid; grid-column:1 / -1; grid-template-columns:1fr 112px minmax(0, 1.05fr);
  gap:0 12px; align-items:center; margin:0; padding:7px 0;
}
@supports (grid-template-columns: subgrid){
  .umbral{ grid-template-columns:subgrid; }
}
.umbral-et{ font-size:13px; line-height:1.3; }
/* 48 px de alto y cifras tabulares: se toca con el pulgar, y al cambiar de 9 a 10 el
   número no puede moverse de sitio. */
.umbral input{
  width:100%; min-height:48px; box-sizing:border-box; padding:9px 11px;
  font:inherit; font-size:15px; text-align:right; font-variant-numeric:tabular-nums;
  background:var(--crema); border:1.5px solid var(--linea); border-radius:11px; color:var(--tinta);
}
.umbral input:focus-visible{
  outline:none; border-color:var(--verde2); box-shadow:0 0 0 3px rgba(20,99,76,.18);
}
.umbral-un{ font-size:13px; line-height:1.3; color:var(--apagado); }

/* ── La caja del número: − · campo · + ─────────────────────────────────────────
   Los tres van dentro de un mismo marco y no como tres cosas sueltas: es UN control,
   y tres bordes seguidos lo partirían en tres. Los botones no tienen borde propio;
   los separa una línea fina, que es lo justo para saber dónde acaba cada uno. */
.umbral-caja{
  display:grid; grid-template-columns:32px minmax(0, 1fr) 32px; align-items:stretch;
  border:1.5px solid var(--linea); border-radius:11px; background:var(--crema);
  overflow:hidden; min-height:48px;
}
.umbral-caja:focus-within{
  border-color:var(--verde2); box-shadow:0 0 0 3px rgba(20,99,76,.18);
}
.umbral-caja input{
  width:100%; min-height:0; box-sizing:border-box; padding:9px 2px;
  font:inherit; font-size:15px; text-align:center; font-variant-numeric:tabular-nums;
  background:transparent; border:0; border-radius:0; color:var(--tinta);
}
.umbral-caja input:focus-visible{ outline:none; }
/* Las flechitas del navegador fuera: con − y + al lado son dos controles para lo mismo,
   y las del navegador miden ocho píxeles y no se aciertan con el pulgar. */
.umbral-caja input::-webkit-outer-spin-button,
.umbral-caja input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.umbral-caja input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.umbral-paso{
  font:inherit; font-size:17px; line-height:1; font-weight:700; cursor:pointer;
  border:0; background:transparent; color:var(--verde2); padding:0;
  display:flex; align-items:center; justify-content:center;
}
.umbral-paso:first-child{ border-right:1px solid var(--linea); }
.umbral-paso:last-child{ border-left:1px solid var(--linea); }
.umbral-paso:hover{ background:rgba(18,128,95,.10); }
.umbral-paso:active{ background:rgba(18,128,95,.18); }
/* Tocado: un filo verde a la izquierda de la fila. Cambia la FORMA de la fila, así que
   se ve de un vistazo qué has movido antes de confirmar — que es justo lo que se quiere
   comprobar con el dedo ya encima del botón de guardar. */
.umbral-tocado .umbral-caja{ border-color:rgba(18,128,95,.55); background:var(--papel); }
.umbral-tocado .umbral-et{ font-weight:700; color:var(--tinta); }
.umbral-nota{
  grid-column:2 / -1; font-size:11.5px; color:var(--rojo); font-weight:700; margin-top:3px;
}

/* ── La barra de confirmar: no existe si no hay nada que guardar ───────────────
   Un botón de guardar siempre visible y siempre apagado es un botón que se aprende a
   ignorar. Este aparece cuando hay un cambio y se va solo al guardarlo, así que su
   presencia YA es la información. */
.umbral-barra{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:6px 20px 0; padding:12px 14px;
  border:1.5px solid rgba(18,128,95,.34); border-radius:12px;
  background:linear-gradient(180deg, rgba(18,128,95,.10), rgba(18,128,95,.04)), var(--papel);
}
.umbral-cuenta{ font-size:13px; font-weight:700; color:var(--tinta); flex:1 1 auto; }
.umbral-guardar{
  font:inherit; font-size:15px; font-weight:700; min-height:44px; padding:0 20px;
  border-radius:11px; border:1.5px solid var(--verde); background:var(--verde); color:#fff;
  cursor:pointer;
}
.umbral-guardar:hover{ background:var(--verde2); border-color:var(--verde2); }
.umbral-guardar:disabled{ opacity:.65; cursor:default; }
.umbral-deshacer{ flex:0 0 auto; }
.umbral-aviso{
  flex:1 0 100%; margin:0; font-size:13px; line-height:1.45; color:var(--tinta2);
  border-top:1px solid rgba(18,128,95,.22); padding-top:9px;
}
/* El «guardado», con su marca. Se pinta tras el repintado y se va solo: un cartel que se
   queda para siempre deja de leerse, y este solo tiene que contestar «¿se ha guardado?». */
.umbral-ok{
  margin:8px 20px 0; padding:9px 12px; border-radius:10px;
  font-size:13px; font-weight:700; color:var(--hondo);
  background:rgba(18,128,95,.12); border:1px solid rgba(18,128,95,.28);
  animation:umbral-ok-fin .4s ease 5.4s forwards;
}
.umbral-ok::before{ content:'✓'; margin-right:7px; }
@keyframes umbral-ok-fin{ to{ opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion:reduce){ .umbral-ok{ animation:none; } }
/* El botón, en su propia línea y a la izquierda: es la salida de esta pantalla, no una
   quinta fila de la tabla. Y con el MISMO margen lateral que el resto de la tarjeta:
   cuelga de la sección y no de la rejilla, así que `justify-self` no le decía nada y se
   quedaba pegado al borde, dos píxeles a la izquierda de todo lo demás. */
.umbral-off{
  display:inline-block; margin:16px 20px 6px; width:auto; flex:0 0 auto;
}

/* ───────── el botón de recargar el manifiesto ─────────
   Va ARRIBA del todo de la lista y a lo ancho: se pulsa de pie, con una mano y a veces
   con el móvil en la izquierda, así que tiene que caer dentro del arco del pulgar sin
   recolocar la mano. 52 px, por encima del mínimo de 48 del proyecto, porque este se
   pulsa con gente delante y no hay segunda oportunidad para acertar. */
.recarga{ margin:0 12px 12px; }
.btn-recarga{
  width:100%; min-height:52px; border-radius:12px; font:inherit; font-weight:700;
  font-size:15px; border:1.5px solid var(--verde);
  /* RELLENO PROPIO, no `--papel`. La tarjeta que hay debajo ya es papel al 94 %, así que
     un botón de papel sobre ella no tenía caja: se veía el borde verde flotando y el
     centro parecía un agujero. Un lavado del propio verde lo cierra y además dice que
     es una acción, no una casilla que se rellena. */
  background:color-mix(in srgb, var(--verde) 9%, var(--papel));
  color:var(--verde); cursor:pointer;
}
.btn-recarga:hover{ background:color-mix(in srgb, var(--verde) 15%, var(--papel)); }
.btn-recarga:active{ transform:translateY(1px); }
/* Deshabilitado se distingue por la PALABRA («Mirando…») además del color: esto se mira
   al sol, y un gris sobre crema al mediodía no se ve. */
/* Deshabilitado NO se apaga hasta desaparecer: al 65 % la caja volvía a perderse justo
   cuando más se mira —mientras carga—. El borde a trazos y la palabra ya dicen el estado. */
.btn-recarga:disabled{ opacity:.85; cursor:default; border-style:dashed; }
.recarga-pie{ margin:6px 2px 0; font-size:13px; color:var(--tinta2); text-align:center; }
.recarga-pie b{ color:var(--tinta); }

/* ───────── desplegables dentro de un bloque (cuentas, tu web) ─────────
   La flecha nativa de `details` cambia de sitio en cada navegador y en Safari se come el
   `list-style:none`. Con `::before` propio se ve igual en los tres y, sobre todo, se ve
   ABIERTO o CERRADO por la forma y no solo por la posición de un triangulito. */
.tf-mas summary::-webkit-details-marker{ display:none; }
.tf-mas summary::before{ content:'+ '; font-weight:900; }
.tf-mas[open] summary::before{ content:'– '; }
.tf-mas summary:hover{ text-decoration:underline; }

/* ───────── el montaje de la cuenta ─────────
   La barra es FINA a propósito: delimita el proceso inicial, no lo protagoniza. Es un
   <details>: plegada enseña progreso y siguiente paso; desplegada, la lista con su «Ir». */
.montaje{ margin:0 12px 14px; background:var(--papel); border:1.5px solid var(--linea);
  border-radius:13px; overflow:hidden; }
.montaje summary{ list-style:none; cursor:pointer; padding:11px 14px;
  display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; }
.montaje summary::-webkit-details-marker{ display:none; }
.mont-tit{ font-size:13px; font-weight:800; color:var(--tinta); }
.mont-n{ font-size:13px; font-weight:800; color:var(--verde2);
  font-variant-numeric:tabular-nums; justify-self:end; }
.mont-pista{ grid-column:1 / -1; display:block; height:7px; border-radius:99px;
  background:var(--linea); overflow:hidden; }
.mont-pista i{ display:block; height:100%; background:var(--verde2); border-radius:99px;
  transition:width .45s cubic-bezier(.16,.7,.22,1); }
.mont-sig{ grid-column:1 / -1; font-size:11.5px; color:var(--tinta2); }
.mont-lista{ border-top:1px solid var(--linea); padding:4px 14px 10px; }
.mont-paso{ display:flex; gap:11px; align-items:flex-start; padding:8px 0; }
/* `.mont-aro` y no `.aro`: el lint de un-dueño tiene razón — la misma clase colgada de
   tres padres es un turno de espera para que un cambio en una rompa las otras dos. */
.mont-aro{ flex:0 0 auto; width:19px; height:19px; border-radius:50%; margin-top:1px;
  border:2px solid var(--linea); display:flex; align-items:center; justify-content:center; }
.mont-paso.ok .mont-aro{ background:var(--verde2); border-color:var(--verde2); }
.mont-paso.ok .mont-aro::after{ content:'✓'; color:#fff; font-size:11.5px; font-weight:800; }
.mont-paso-t{ flex:1; min-width:0; font-size:13px; }
.mont-paso.ok .mont-paso-t{ color:var(--tinta2); }
.mont-paso-t small{ display:block; font-size:11.5px; color:var(--tinta2); margin-top:1px;
  line-height:1.35; }

/* El sello de un bloque aún no montado. Borde A TRAZOS, no sólido: no es el candado de
   pago —ese dice «no lo tienes contratado»—, este dice «se abre cuando hagas X». El estado
   se distingue por la forma, no solo por el texto. */
/* El trazo NO es `--linea`: sobre el fondo crema son casi el mismo color y el sello
   desaparecía — el mismo fallo que la franja del login y la flecha del menú. Un estado
   que se distingue por un borde invisible no se distingue. */
.sello-montaje{ margin:0 12px 12px; padding:13px 14px;
  border:1.5px dashed color-mix(in srgb, var(--tinta2) 45%, transparent);
  border-radius:13px; display:flex; gap:11px; align-items:flex-start; background:transparent;
  /* `wrap` porque desde que el sello lleva DENTRO el formulario que lo abre, ese
     formulario es un hermano a lo ancho: sin esto se le monta encima al texto y el
     bloque se lee a dos columnas de una palabra. */
  flex-wrap:wrap; }
.sello-aro{ flex:0 0 auto; width:19px; height:19px; border-radius:50%; margin-top:1px;
  border:2px dashed color-mix(in srgb, var(--tinta2) 45%, transparent); }
.sello-t{ flex:1; min-width:0; font-size:13px; color:var(--tinta2); }
.sello-t b{ color:var(--tinta); display:block; }
.sello-t small{ display:block; font-size:11.5px; margin-top:2px; line-height:1.4; }

/* Lo recién abierto ENTRA: es el desbloqueo haciéndose visible. Medio segundo y sin
   repetirse — más sería un panel bailando. */
.recien-abierto{ animation:mont-entra .5s cubic-bezier(.16,.7,.22,1); }
@keyframes mont-entra{
  from{ opacity:0; transform:translateY(8px); }
}
@media (prefers-reduced-motion:reduce){
  .recien-abierto{ animation:none; }
  .mont-pista i{ transition:none; }
}

/* ───────── el montador: el alta en formato conversación ─────────
   Burbujas de verdad, no un formulario disfrazado: las de Audutor a la izquierda sobre
   papel, las respuestas a la derecha en verde. Los controles del paso actual van DEBAJO
   del hilo, como en cualquier chat. */
.chm-hilo{ max-height:340px; overflow:auto; display:flex; flex-direction:column; gap:8px;
  padding:2px 0 12px; }
.chm-burbuja{ max-width:88%; padding:9px 12px; border-radius:13px 13px 13px 4px;
  background:var(--crema); border:1px solid var(--linea); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.chm-burbuja.mia{ align-self:flex-end; border-radius:13px 13px 4px 13px;
  background:var(--verde); border-color:var(--verde); color:#fff; font-weight:600; }
.chm-mal{ color:var(--rojo); font-weight:700; }
.chm-controles{ border-top:1px dashed var(--linea); padding-top:12px;
  display:flex; flex-direction:column; gap:9px; }
.chm-fila{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chm-fila input, .chm-ancha{ flex:1; min-width:0; font:inherit; font-size:15px; padding:11px;
  border-radius:10px; border:1.5px solid var(--linea); background:var(--papel); color:inherit;
  min-height:48px; }
.chm-btn{ width:auto !important; flex:0 0 auto; padding:0 18px; }
.chm-enlace{ align-self:flex-start; border:0; background:transparent; color:var(--verde2);
  font:inherit; font-size:13px; font-weight:700; text-decoration:underline; cursor:pointer;
  padding:6px 2px; min-height:44px; }
/* La marcha atrás, discreta y a la izquierda: es una salida, no una acción principal.
   Y separada del botón que sigue adelante — pegados, se pulsa el que no era. */
.chm-atras{ align-self:flex-start; margin-top:6px; text-align:left; }

.chm-chips{ display:flex; gap:5px; flex-wrap:wrap; }
.chm-chip{ width:40px; min-height:44px; border-radius:9px; border:1.5px solid var(--linea);
  background:var(--papel); font:inherit; font-weight:800; font-size:13px; color:var(--tinta2);
  cursor:pointer; }
.chm-chip.on{ background:var(--verde2); border-color:var(--verde2); color:#fff; }
.chm-prop{ border:1px solid var(--linea); border-radius:11px; padding:10px 12px;
  display:flex; flex-direction:column; gap:4px; font-size:13px; }
.chm-prop b{ font-size:11.5px; color:var(--tinta2); text-transform:uppercase; letter-spacing:.04em; }
.chm-prop i{ font-size:11.5px; color:var(--apagado); }


/* ───────── lo que le falta a un bloque, DENTRO del bloque ─────────
   Antes esto era un cartel con un botón «Ir» a otra pantalla. Rellenar cuatro campos
   obligaba a navegar, y volver es donde se abandona un alta. Ahora el hueco está donde
   está el problema: se rellena, se guarda, y el bloque se construye en el sitio. */
.sello-form{ flex-basis:100%; border-top:1px dashed var(--linea); margin-top:10px; padding-top:12px; }
.sello-que{ margin:0 0 10px; font-size:13px; font-weight:700; color:var(--tinta); }
.form-abre{ display:flex; flex-direction:column; gap:9px; }
.form-fila{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.form-fila input[type=time], .form-ancha{
  font:inherit; font-size:15px; padding:11px; border-radius:10px;
  border:1.5px solid var(--linea); background:var(--papel); color:inherit; min-height:48px;
}
.form-ancha{ width:100%; }
.form-chips{ display:flex; gap:5px; flex-wrap:wrap; }
.form-chip{
  width:40px; min-height:44px; border-radius:9px; border:1.5px solid var(--linea);
  background:var(--papel); font:inherit; font-weight:800; font-size:13px;
  color:var(--tinta2); cursor:pointer;
}
.form-chip.on{ background:var(--verde2); border-color:var(--verde2); color:#fff; }
/* El error va en ROJO y con su propio sitio reservado por `hidden`, no empujando el
   botón hacia abajo justo cuando se va a pulsar otra vez. */
.form-mal{ margin:0; font-size:13px; font-weight:700; color:var(--rojo); }

/* ───────── el diálogo de confirmar ─────────
   Sustituye a `confirm()`, que ponía el dominio arriba y la tipografía del sistema justo
   cuando alguien va a hacer algo que no se deshace. */
.dlg-velo{
  position:fixed; inset:0; z-index:10000; background:rgba(18,63,51,.46);
  display:flex; align-items:center; justify-content:center;
  padding:calc(20px + var(--seguro-arriba)) 18px calc(20px + var(--seguro-abajo));
  animation:dlg-entra .16s ease-out;
}
.dlg{
  background:var(--papel); border-radius:18px; max-width:420px; width:100%;
  padding:20px 20px 16px;
  box-shadow:0 2px 4px rgba(74,61,32,.08), 0 24px 60px -16px rgba(18,63,51,.45);
  animation:dlg-sube .18s ease-out;
}
.dlg h2{ margin:0; font-size:20px; line-height:1.3; color:var(--tinta); }
.dlg p{ margin:9px 0 0; font-size:15px; line-height:1.5; color:var(--tinta2); }
.dlg-lista{ max-height:38vh; max-height:38dvh; overflow:auto; overflow-wrap:anywhere; margin-top:12px; padding:0 10px 10px; border:1px solid var(--linea); border-radius:10px; }
.dlg-lista p{ white-space:pre-line; padding-bottom:10px; border-bottom:1px solid var(--linea); }
.dlg-acciones{ display:flex; gap:10px; margin-top:20px; }
.dlg-motivo{ display:block; margin-top:16px; font-weight:600; }
.dlg-formulario{ max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); overflow:auto; overflow-wrap:anywhere; }
.dlg-motivo textarea{ display:block; box-sizing:border-box; width:100%; min-height:88px; max-height:25vh; margin-top:8px; padding:10px; border:1.5px solid var(--linea); border-radius:10px; font:inherit; resize:vertical; }
.dlg-btn{
  flex:1; min-height:50px; border-radius:12px; font:inherit; font-weight:700;
  font-size:15px; cursor:pointer; padding:0 14px;
}
.dlg-no{ border:1.5px solid var(--linea); background:var(--crema); color:var(--tinta); }
.dlg-si{ border:1.5px solid var(--verde); background:var(--verde); color:#fff; }
/* Lo que NO SE DESHACE se distingue por la FORMA además del color: borde de 2,5 px. Un
   rojo sobre crema al mediodía y con el móvil en la mano no basta para decir «cuidado». */
.dlg-peligro .dlg-si{ border:2.5px solid var(--rojo); background:var(--rojo); color:#fff; }
.dlg-btn:active{ transform:translateY(1px); }
.dlg-btn:focus-visible{ outline:3px solid var(--verde2); outline-offset:2px; }
@keyframes dlg-entra{ from{ opacity:0 } to{ opacity:1 } }
@keyframes dlg-sube{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .dlg-velo, .dlg{ animation:none; }
}

/* ───────── el mando lateral: en el ordenador esto es un panel, no una app de móvil ─────────
   Hasta aquí el encargado abría en el portátil una columna de 700 px centrada en una
   pantalla de 2000, con quince bloques uno debajo de otro. En un teléfono eso es lo
   correcto y no se toca —la pantalla del guía se mira al sol y con una mano—; en un
   ordenador es una app de móvil estirada, y no se parece a la demo que le vendió esto.

   Por debajo de 1000 px el mando NI SE CONSTRUYE: no hay nada que ocultar ni que pesar. */
/* ═══════════ El menú en el móvil: un cajón ═══════════
   Era `display:none` por debajo de mil píxeles. No es que se viera mal: NO EXISTÍA, y un
   encargado que abre el panel desde el teléfono no llegaba a ninguna función.

   Cerrado, `display:none` de verdad. Un panel escondido fuera de pantalla sigue estando
   ahí para el lector de pantalla, para el tabulador y para el dedo que roza el borde —y
   entonces «desaparecer» es solo una forma de hablar. */
.mando{ display:none; }
body.cajon-abierto .mando{
  display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:40;
  width:min(84vw, 300px);
  overflow:auto; padding:14px 12px calc(16px + var(--seguro-abajo));
  background:linear-gradient(180deg, #14634c, #0e4a3a 60%, #0c4133);
  box-shadow:0 0 0 1px rgba(0,0,0,.2), 22px 0 48px -24px rgba(10,50,38,.7);
  animation:cajon-entra .18s ease-out;
}
/* 84vw y no 100%: que se vea un dedo de la pantalla de detrás es lo que dice, sin
   explicarlo, que esto se cierra tocando fuera. Un cajón a pantalla completa parece otra
   página y se busca un botón de volver que no existe. */
@keyframes cajon-entra{ from{ transform:translateX(-12px); opacity:.4; } }
@media (prefers-reduced-motion:reduce){
  body.cajon-abierto .mando{ animation:none; }
}
.cajon-velo{
  position:fixed; inset:0; z-index:35; background:rgba(12,44,34,.44);
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
}
.cajon-velo[hidden]{ display:none; }
/* El botón, dentro de la barra verde: el nombre de la empresa, la salida y las funciones
   son la misma pregunta —quién eres y a dónde puedes ir— y tenerlas en dos sitios era
   pedirle al operador que aprendiera dos. */
.cajon-btn{
  flex:0 0 auto; width:42px; min-height:42px; font:inherit; font-size:20px; line-height:1;
  border:1.5px solid rgba(255,255,255,.34); border-radius:11px;
  background:rgba(255,255,255,.14); color:#fdf9ee; cursor:pointer;
}
.cajon-btn:active{ background:rgba(255,255,255,.26); }
/* En el escritorio el menú ya es una columna fija: el botón sobra y la clase del cuerpo
   no debe poder convertirlo en cajón. */
@media (min-width:1000px){
  .cajon-btn{ display:none; }
  body.cajon-abierto .mando{ position:fixed; width:225px; animation:none; box-shadow:none; }
  .cajon-velo{ display:none; }
}

/* Lo que PINTA el menú vale a cualquier ancho: en el móvil es un cajón y en el
   escritorio una columna, pero las entradas son las mismas. Estaban encerradas en
   la media query de 1000 px, así que el cajón salía con las entradas en blanco y
   sin estilo — un menú que se abre y no se parece al menú.
   Aquí queda solo lo que lo COLOCA como columna fija, que sí es de escritorio. */

  /* La marca y, DEBAJO, la empresa en su propia chapa — como la demo. Ahí el nombre del
     inquilino no es un subtítulo: es la respuesta a «¿dónde estoy?», y en un producto que
     va a ser multiempresa eso se lee antes que nada. */
  /* La marca, con los mismos números que la demo. */
  /* Peso 400 y no 700. Una serif en negrita a 20 px se lee como un titular; el wordmark
     de la demo es de peso normal y por eso tiene aire. La elegancia aquí es no apretar. */
  .mando-marca{ padding:12px 10px 14px; font-family:Georgia, "Iowan Old Style", serif;
    font-size:20px; font-weight:400; letter-spacing:.005em; color:#fdf9ee; }

  /* La chapa del inquilino, calcada de `.tenant`. */
  .mando-inq{ display:flex; gap:9px; align-items:center; margin:0 8px 12px; padding:9px 10px;
    background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.16);
    border-radius:11px; }

  .mando-ini{ flex:0 0 auto; width:30px; height:30px; border-radius:9px;
    background:var(--verde); color:#fff; font-weight:800; font-size:13px;
    display:flex; align-items:center; justify-content:center; letter-spacing:-.02em; }

  .mando-inq-t{ min-width:0; }

  .mando-inq-t b{ color:#fff; display:block; font-size:15px; font-weight:800; line-height:1.2;
    letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Calcado de `aside nav a` de la demo: 14 px, relleno 9/10, radio 9 y el mismo
     #cfe3da. Estaba a 13,5 con otro relleno — y el activo, que allí es el color del
     SUELO sobre el verde, aquí era papel. */
  .mando-a{
    display:flex; gap:10px; align-items:center; width:100%; text-align:left;
    padding:9px 10px; min-height:40px; border:0; border-radius:9px;
    background:transparent; color:#cfe3da; cursor:pointer;
    font:inherit; font-size:13px; font-weight:600;
  }

  /* «Operaciones» es la pantalla de inicio y se ve como tal: más grande que las demás,
     y sin sangrar. Lo que cuelga de un grupo va sangrado y un punto más pequeño — el
     menú se lee como lo que es, un índice de dos niveles. */
  /* La entrada destacada de la demo, con sus números: 16,5 px, relleno 14/12, su borde
     claro y su fondo al 8 %. Era un 15 px sin borde y por eso no mandaba en el menú. */
  .mando-jefe{
    font-size:17px; padding:14px 12px; min-height:50px; margin-bottom:12px;
    border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
    border-radius:11px; color:#eaf4ef;
  }

  /* 14 y no 22 de sangría: ahora cada función lleva su emoji, como en la demo, y con la
     sangría de antes el nombre se quedaba sin sitio en una columna de 225 px. */
  .mando-hijo{ padding-left:14px; font-size:13px; font-weight:600; }

  /* Los grupos, como FILAS y no como etiquetas diminutas: en la demo son entradas de
     primer nivel con su emoji y su chapa, del mismo cuerpo que las funciones. A 11,5 px
     y en versalitas parecían separadores, y un menú de separadores no se lee como un
     índice. */
  /* Plegables, como en la demo: se pulsa el grupo y se despliega. El chevron gira. */
  /* `background:transparent` NO sobra, y su ausencia costó una pantalla entera: un
     `<button>` trae el fondo gris claro del navegador por defecto, y al pasar los grupos
     de `<div>` a botón —para que se plieguen— heredaron ese gris con el texto claro
     encima. Cinco casillas blancas con el título invisible. `appearance:none` es lo mismo
     para Safari, que además le pone su propio borde. */
  .mando-grupo{
    width:100%; border:0; cursor:pointer; text-align:left;
    background:transparent; -webkit-appearance:none; appearance:none;
    display:flex; align-items:center; gap:9px; justify-content:space-between;
    margin:12px 0 2px; padding:9px 10px; border-radius:9px;
    font:inherit; font-size:13px; font-weight:700; color:#eaf4ef;
  }

  .mando-grupo:hover{ background:rgba(255,255,255,.09); }

  .mando-grupo:focus-visible{ outline:2px solid #7ee0b8; outline-offset:-2px; }

  .mando-ico{ flex:0 0 auto; font-size:15px; line-height:1; }

  .mando-gt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }

  /* LA FLECHA, DIBUJADA — calcada de la demo, que ya pagó este peaje: un «▾» escrito
     depende de la fuente del sistema y sobre el verde casi no se ve. Un trazo de 2 px sí,
     y además el estado abierto puede tener SU color (oro) además de su giro — forma y
     color, que es la regla de la casa. */
  .mando-chev{ flex:0 0 auto; width:16px; height:16px; position:relative;
    font-size:0; color:transparent; transition:transform .22s ease; }
  .mando-chev::before{ content:''; position:absolute; left:3px; top:4px;
    width:8px; height:8px; border-right:2px solid #9dc4b6; border-bottom:2px solid #9dc4b6;
    transform:rotate(45deg); border-radius:1px; transition:border-color .14s; }
  .mando-grupo:hover .mando-chev::before{ border-color:#fff; }

  .mando-grupo[aria-expanded="true"] .mando-chev{ transform:rotate(180deg); }
  .mando-grupo[aria-expanded="true"] .mando-chev::before{ border-color:var(--oro); }

  .mando-hijos[hidden]{ display:none; }

  .mando-supl{
    flex:0 0 auto; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:#0c4133; background:#d99a33; border-radius:6px; padding:2px 6px;
  }

  .mando-a:hover{ background:rgba(255,255,255,.09); color:#fff; }

  .mando-a:focus-visible{ outline:2px solid #7ee0b8; outline-offset:-2px; }

  .mando-a.act{ background:var(--fondo); color:#0c4133; font-weight:700; }

  .mando-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* El estado se lee por FORMA: relleno, hueco a trazos, o hueco de línea continua. Un
     mando en verde oscuro visto de reojo no distingue tres tonos, pero sí tres siluetas.
     Cada estado lleva su PROPIA clase en vez de colgar de la del padre: tres reglas
     `.mando-x .mando-punto` serían tres dueños del mismo punto, y entonces cuál gana
     depende del orden del fichero. */
  /* SEMÁFORO, con los tres estados que de verdad importan:
       verde   = funcionando y con sus datos puestos
       naranja = contratado pero a medias — le falta un dato y por eso no funciona aún
       rojo    = no está en funcionamiento (no lo tienes contratado)
     Y la FORMA acompaña al color, que es la regla de la casa: el verde va macizo, el
     naranja a trazos —lo que está a medias se dibuja a medias— y el rojo hueco. Sobre
     un verde oscuro y de reojo, tres siluetas se distinguen antes que tres tonos. */
  .mando-punto{
    flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#5ed6a4;
    box-shadow:0 0 0 2px rgba(94,214,164,.22);
  }

  .mando-punto-espera{
    flex:0 0 auto; width:9px; height:9px; border-radius:50%;
    background:transparent; border:2px dashed #e8a33d;
  }

  .mando-punto-cerrado{
    flex:0 0 auto; width:9px; height:9px; border-radius:50%;
    background:transparent; border:2px solid #d97b6c;
  }

@media (min-width:1000px){
  body.con-mando{ padding-left:225px; }
  /* LA CABECERA VERDE SE APAGA: quedaba reducida a la empresa, el punto de conexión y la
     inicial, y atravesaba la pantalla entera para decirlo — descuadrando el contenido
     contra el mando. Las tres cosas viven ahora EN el mando (la chapa del inquilino ya
     estaba; la cuenta y la conexión se mudan en `adoptaCuenta`), y el contenido empieza
     arriba del todo, despejado. Solo en escritorio: en el móvil la cabecera sigue siendo
     la barra de la app, con el botón del cajón. */
  body.con-mando header{ display:none; }
  .mando{
    display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; width:225px; z-index:20;
    overflow:auto; padding:16px 12px calc(16px + var(--seguro-abajo));
    /* Los TRES colores del `aside` de la demo, tal cual. No son los tokens: `--acc` es el
       verde de los elementos pequeños y aquí hay una superficie grande, que pide otro. Con
       el token salía un verde más claro y por eso «el menú no era el mismo». */
    background:linear-gradient(180deg, #14634c, #0e4a3a 60%, #0c4133);
    border-right:1px solid rgba(0,0,0,.18);
  }
  .wm{ display:inline-flex; flex-direction:column; }
  .wm-palabra{ line-height:1.1; }
  .wm-ruta{ width:100%; height:.62em; margin-top:.1em; display:block; overflow:visible; }
  .mando nav{ display:flex; flex-direction:column; gap:2px; }
  /* Y el contenido deja de ser una tira estrecha, pero sin irse al ancho completo: una
     línea de texto de 1.700 px no se lee. */
  body.con-mando #tours{ max-width:900px; margin-left:auto; margin-right:auto; }}

/* El atributo `hidden` vale `display:none` en la hoja del NAVEGADOR, y cualquier regla
   nuestra con `display` explícito le gana — `.sello-montaje` es `display:flex`, así que
   al esconder una sección seguía viéndose. Con `!important` porque es exactamente el
   caso para el que existe: una declaración del autor que no debe poder pisarse. */
/* La cuenta y la conexión, al pie del mando. Son los NODOS de la cabecera, mudados —
   ver `adoptaCuenta` en mando.js—, así que conservan sus estilos propios; aquí solo se
   colocan. `margin-top:auto` los ancla abajo porque el mando es una columna flex. */
.mando-cuenta{
  margin-top:auto; display:flex; align-items:center; gap:10px;
  padding:12px 4px 0; border-top:1px solid rgba(255,255,255,.14);
}
.mando-cuenta .enlace{ margin-left:0; flex:1; justify-content:center; }

[hidden]{ display:none !important; }

/* ───────── el formulario de requisitos de cada función ─────────
   Va DENTRO de la función que lo pide, y su primera casilla es siempre la misma —pega tu
   web o el texto de tu ficha— porque es la única que rellena varias a la vez. */
.req{ display:flex; flex-direction:column; gap:10px; padding:0 14px 14px; }
.req-que{ margin:0; font-size:15px; font-weight:700; color:var(--tinta); }
.req-porque{ margin:-4px 0 2px; font-size:13px; line-height:1.5; color:var(--tinta2); }
/* ESTA NO ES UNA CASILLA MÁS, y parecía serlo. Es la que rellena media cuenta de una
   vez —de una dirección salen el punto de encuentro, el horario, la duración y las
   normas— y estaba con el mismo peso que un campo de texto cualquiera. Se le da el
   tamaño que tiene su trabajo: filo verde, fondo propio, título grande y su chapa. */
/* ── La caja de «pega tu web»: la más importante de todo el formulario ────────
   Rellena de una vez el punto de encuentro, los horarios, la duración y las normas, que
   es lo que piden casi todas las funciones. Tenía un lavado verde y una chapa pequeña, y
   aun así se leía como una casilla más y se saltaba.
   Ahora se distingue por ESTRUCTURA y no solo por color: franja verde maciza arriba,
   como una tarjeta destacada, y sombra propia para que despegue del papel. Un cambio de
   tono se ignora; un cambio de forma, no. */
.req-lee{
  border:1.5px solid rgba(18,128,95,.42); border-radius:15px; overflow:hidden;
  background:var(--papel);
  box-shadow:0 2px 3px rgba(10,88,71,.07), 0 14px 30px -16px rgba(10,88,71,.45);
}
.req-lee-cab{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 16px;
  background:linear-gradient(180deg, var(--verde), var(--hondo));
  color:#fff;
}
.req-lee-cab-t{ font-size:13px; font-weight:700; letter-spacing:.005em; }
/* Las cuatro cosas que rellena, en fila. Enseñarlas convierte «saco tus horarios» —una
   promesa que hay que creerse— en una lista que se puede comprobar al terminar. */
.req-lee-que{ display:flex; flex-wrap:wrap; gap:6px; }
.req-lee-que span{
  font-size:11.5px; font-weight:700; color:var(--verde2);
  background:rgba(18,128,95,.10); border:1px solid rgba(18,128,95,.22);
  border-radius:999px; padding:4px 10px;
}
/* El «o rellénalo a mano»: una raya con la conjunción en medio. Deja claro que lo de
   abajo es la alternativa lenta y no la segunda mitad de lo de arriba. */
.req-o{
  display:flex; align-items:center; gap:12px; margin:16px 0 2px;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--apagado);
}
.req-o::before, .req-o::after{ content:''; flex:1; height:1px; background:var(--linea); }
.req-lee-cuerpo{ display:flex; flex-direction:column; gap:11px; padding:16px 18px; }
/* El botón que hace el trabajo, macizo. En esta pantalla hay varios y este es EL que
   se pulsa: se distingue por peso, no por estar el primero. */
.req-lee-btn{
  background:var(--verde) !important; border-color:var(--verde) !important; color:#fff !important;
}
.req-lee-btn:hover{ background:var(--verde2) !important; border-color:var(--verde2) !important; }
.req-lee-chapa{
  display:inline-block; font-size:11.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.34);
  border-radius:6px; padding:3px 8px;
}
.req-lee-t{ margin:0; font-size:15px; line-height:1.5; color:var(--tinta); }
.req-lee-t b{ display:block; font-size:17px; margin-bottom:3px; }
.req-ta{ resize:vertical; min-height:64px; line-height:1.45; }
.req-campo{ display:flex; flex-direction:column; gap:5px; }
.req-campo > span{ font-size:13px; font-weight:700; color:var(--tinta2); }
.req-props{ display:flex; flex-direction:column; gap:8px; }
.req-prop{ border:1px solid var(--linea); border-radius:11px; padding:10px 12px; background:var(--papel);
  display:flex; flex-direction:column; gap:4px; font-size:13px; }
.req-prop b{ font-size:11.5px; color:var(--tinta2); text-transform:uppercase; letter-spacing:.04em; }
.req-prop i{ font-size:11.5px; color:var(--apagado); }
/* Aceptada: cambia de FORMA —borde continuo verde— y no solo de color. */
.req-prop-ok{ border:1.5px solid var(--verde); }
.req-acciones{ display:flex; gap:8px; align-items:center; }
.req-si{ width:auto !important; flex:0 0 auto; padding:0 16px; min-height:40px; }
.req-nada{ margin:2px 0 0; font-size:13px; color:var(--apagado); }

/* ───────── la cabecera del día: el centro de operaciones ─────────
   La primera tarjeta y la que hace que el panel se parezca a lo que se vende. */
/* El velo de color de `#cuadro-dia`, calcado. Y TRASLÚCIDA: si se pone el papel opaco,
   esta es la única tarjeta de la página por la que no se intuyen las curvas del fondo —y
   es la primera que se ve—. El color aquí tiñe, no tapa. */
.hoy-cab{
  padding:16px 18px 18px;
  background:
    linear-gradient(135deg, rgba(18,138,107,.12), rgba(43,179,163,.05) 55%, rgba(201,138,45,.06)),
    color-mix(in srgb, var(--papel) 84%, transparent);
  border-color:rgba(18,138,107,.22);
  box-shadow:0 10px 30px -18px rgba(18,63,51,.30);
}
.hoy-rot{ font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--verde2); }
.hoy-fecha{ font-size:27px; font-weight:800; line-height:1.15; margin:4px 0 2px; color:var(--tinta); }
.hoy-cifras{ display:flex; gap:26px; flex-wrap:wrap; margin-top:12px; }
.hoy-c{ display:flex; flex-direction:column; }
.hoy-c b{ font-size:27px; line-height:1.1; color:var(--tinta); font-variant-numeric:tabular-nums; }
.hoy-c span{ font-size:13px; color:var(--tinta2); margin-top:1px; }
/* Un día vacío se dice con palabras: tres ceros parecen una app rota, y el primer día de
   una cuenta nueva SIEMPRE está a cero. */
.hoy-vacio{ margin:10px 0 0; font-size:13px; line-height:1.55; color:var(--tinta2); max-width:60ch; }
.hoy-revisar{ margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--linea);
  font-size:13px; color:var(--tinta2); }

/* ───────── el suelo de la demo: curvas de nivel ─────────
   Evocan rutas y territorio sin recargar. Va calcado de la demo —mismo trazo, misma
   baldosa de 280— porque la diferencia que se notaba no era solo de color: allí el fondo
   tiene textura y aquí era un plano liso, y eso se ve antes que cualquier tono.

   El trazo está calculado CONTRA el fondo y no en absoluto: si `--fondo` cambia, este
   `#d9cbad` tiene que cambiar con él o las curvas desaparecen. Y las ondas son simétricas
   dentro de la baldosa —misma tangente al entrar y al salir— para que el mosaico no tenga
   junta: con trazos asimétricos se ve la costura en vertical por toda la página. */
html::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23d9cbad' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 28 C46.7 10, 93.3 10, 140 28 S233.3 46, 280 28'/%3E%3Cpath d='M0 84 C46.7 70, 93.3 70, 140 84 S233.3 98, 280 84'/%3E%3Cpath d='M0 140 C46.7 120, 93.3 120, 140 140 S233.3 160, 280 140'/%3E%3Cpath d='M0 196 C46.7 181, 93.3 181, 140 196 S233.3 211, 280 196'/%3E%3Cpath d='M0 252 C46.7 235, 93.3 235, 140 252 S233.3 269, 280 252'/%3E%3C/g%3E%3C/svg%3E");
}

/* ───────── las cuatro funciones que faltaban del panel ───────── */
.mf{ padding:0 14px 16px; display:flex; flex-direction:column; gap:12px; }
.mf-cifras{ display:flex; gap:24px; flex-wrap:wrap; }
.mf-c{ display:flex; flex-direction:column; }
.mf-c b{ font-size:27px; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums; }
.mf-c span{ font-size:13px; color:var(--tinta2); margin-top:1px; }
.mf-c i{ font-size:11.5px; color:var(--apagado); font-style:normal; margin-top:1px; }
/* La BASE de cada cifra, siempre y en cuerpo menor que la cifra: una proyección sin su
   base es una promesa. */
.mf-base{ margin:0; font-size:13px; line-height:1.5; color:var(--tinta2); max-width:70ch; }
/* Y lo que FALTA, en rojo y con nombre: un dato ausente no puede quedarse callado en una
   pantalla de dinero, porque el número de arriba se queda corto y nadie sabe por qué. */
.mf-falta{ margin:0; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.5;
  background:#fbeceb; border:1px solid var(--rojo); color:var(--tinta); }
.mf-vacio{ margin:0; font-size:13px; line-height:1.55; color:var(--tinta2); max-width:64ch; }
/* Los dos desgloses del cuadro: el título pequeño, las barras por canal y la tabla por
   franja. La barra es proporción de ASISTENCIA — gente que vino, no que reservó. */
.mf-tit{ margin:6px 0 -4px; font-size:13px; font-weight:700; color:var(--tinta); }
.mf-barras{ display:flex; flex-direction:column; gap:7px; }
.mf-barra{ display:flex; align-items:center; gap:10px; font-size:13px; }
.mf-barra>span:first-child{ flex:0 0 96px; color:var(--tinta2); }
.mf-barra-p{ flex:1; height:9px; border-radius:6px; background:var(--crema); overflow:hidden; }
.mf-barra-p i{ display:block; height:100%; background:var(--verde2); }
.mf-barra b{ flex:0 0 auto; font-variant-numeric:tabular-nums; font-size:11.5px; }
/* La tabla rueda de lado si no cabe: el cuerpo de la página no se desborda por ella. */
.mf-rueda{ overflow-x:auto; }
.mf-tabla{ border-collapse:collapse; font-size:13px; min-width:420px; }
.mf-tabla th{ text-align:left; font-size:11.5px; color:var(--apagado); font-weight:700;
  padding:4px 14px 4px 0; border-bottom:1px solid var(--linea); }
.mf-tabla td{ padding:6px 14px 6px 0; border-bottom:1px solid var(--linea);
  font-variant-numeric:tabular-nums; }
.mf-combos{ display:flex; flex-direction:column; gap:6px; }
.mf-combo{ display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:9px 12px; border:1px solid var(--linea); border-radius:10px; background:var(--papel);
  font-size:13px; }
.mf-combo span{ color:var(--tinta2); font-variant-numeric:tabular-nums; }

/* ───────── el manifiesto visto por el encargado ───────── */
.mani{ padding:0 14px 16px; display:flex; flex-direction:column; gap:12px; }
.mani-salidas{ display:flex; gap:8px; flex-wrap:wrap; }
.mani-sal{ display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:8px 12px; min-height:48px; border:1.5px solid var(--linea); border-radius:11px;
  background:var(--papel); cursor:pointer; font:inherit; text-align:left; }
.mani-sal b{ font-size:15px; color:var(--tinta); font-variant-numeric:tabular-nums; }
.mani-sal span{ font-size:11.5px; color:var(--tinta2); }
.mani-sal.on{ border-color:var(--verde); background:var(--crema); }
.mani-cifras{ display:flex; gap:22px; flex-wrap:wrap; }
.mani-c{ display:flex; flex-direction:column; }
.mani-c b{ font-size:27px; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums; }
.mani-c span{ font-size:13px; color:var(--tinta2); }
.mani-c-falta b{ color:var(--rojo); }
.mani-filas{ display:flex; flex-direction:column; gap:5px; }
.mani-fila{ display:grid; grid-template-columns:22px 1fr auto auto auto; gap:10px;
  align-items:center; padding:9px 11px; border:1px solid var(--linea); border-radius:10px;
  background:var(--papel); font-size:13px; }
/* El que ha llegado se distingue por FORMA —su marca— y no solo por color: esta pantalla
   se mira de reojo entre dos llamadas. */
.mani-marca{ font-weight:800; color:var(--verde); text-align:center; }
/* El 💬 NO va en verde. Es la clase aparte y no `.mani-dicho .mani-marca` por lo de
   siempre —una clase, un dueño—, y el color importa aunque casi todos los navegadores
   pinten el emoji con los suyos: donde cae al glifo de texto, el verde de al lado
   significa «lo miró una persona» y esto lo dijo el propio viajero. */
.mani-marca-dicho{ color:var(--tinta2); }
.mani-ok{ border-color:var(--verde); background:var(--crema); }
.mani-n i{ font-size:11.5px; color:var(--apagado); font-style:normal; }
.mani-p, .mani-canal{ font-size:11.5px; color:var(--tinta2); font-variant-numeric:tabular-nums; }
.mani-est{ font-size:11.5px; color:var(--tinta2); }
.mani-pie{ margin:0; font-size:13px; line-height:1.5; color:var(--tinta2); }
.mani-vivo{ display:block; margin-top:4px; color:var(--apagado); }
.mani-mal{ color:var(--rojo); font-weight:700; }
@media (max-width:620px){
  .mani-fila{ grid-template-columns:22px 1fr auto; }
  .mani-canal, .mani-est{ display:none; }
}

/* El título de cada función, con el mismo cuerpo que `.card h2` de la demo: 16 px y
   peso 700. En el panel iban a 16 px pero con el interlineado de la cabecera del guía, y
   se leían más pequeños de lo que son. */
#tours .cab .tit{ font-size:15px; font-weight:700; line-height:1.35; }

@media (prefers-reduced-motion:reduce){ .mando-chev{ transition:none; } }

/* ───────── el aire de las tarjetas del panel ─────────
   La demo usa `padding:18px 20px` en `.card` y aquí los bloques llevaban 14: la misma
   tarjeta con cuatro píxeles menos por lado se lee como una versión apretada de la otra,
   que es de lo que se compone «parece de peor calidad». Va acotado a `#tours` para no
   tocar la pantalla del guía, donde el apretado es deliberado: ahí cabe más de un tour
   en la pantalla y eso vale más que el aire. */
#tours .cab{ padding:18px 20px 0; }
#tours .tour > p, #tours .mf, #tours .mani, #tours .req{ padding-left:20px; padding-right:20px; }
#tours .tour > p{ padding-bottom:18px; }
#tours .sello-montaje{ margin:0 0 16px; padding:16px 20px; }

/* ───────── lo que hacía que el panel se viera de otra liga ─────────
   Con las dos capturas al lado, las diferencias no eran de tono: eran PIEZAS QUE FALTABAN.

   1. EL TÍTULO DE LA VISTA. La demo abre cada pantalla con «Centro de operaciones» en
      serif, y el panel no tenía título ninguno: entrabas directamente a las tarjetas. Sin
      cabecera, una pila de tarjetas no es una pantalla — es una lista.
   2. EL FILO DE COLOR de cada tarjeta. En la demo es un `box-shadow` INTERIOR de 4 px, no
      un borde: así el filo no desplaza el contenido ni pelea con el `border-radius`. Es lo
      que hace que de un vistazo se distinga lo que va bien de lo que hay que mirar, y sin
      él todas las tarjetas pesan igual.
   3. El ancho: 900 se quedaba corto contra el de la demo. */
#tours .vista-tit{
  font-family:Georgia,"Iowan Old Style",serif; font-size:27px; font-weight:700;
  margin:2px 0 14px; color:var(--tinta); text-wrap:balance;
}
body.con-mando #tours{ max-width:1180px; }

/* Los tres filos, con los mismos colores que la demo: oro para «míralo», rojo para «esto
   cuesta dinero» y verde para «va bien». La sombra se repite entera porque un
   `box-shadow` no se suma: el que gana sustituye al anterior. */
.filo-oro{ box-shadow:inset 4px 0 0 var(--oro),
  0 1px 1px rgba(74,61,32,.05), 0 4px 10px -4px rgba(74,61,32,.10), 0 22px 44px -22px rgba(74,61,32,.28); }
.filo-rojo{ box-shadow:inset 4px 0 0 var(--rojo),
  0 1px 1px rgba(74,61,32,.05), 0 4px 10px -4px rgba(74,61,32,.10), 0 22px 44px -22px rgba(74,61,32,.28); }
.filo-verde{ box-shadow:inset 4px 0 0 var(--verde),
  0 1px 1px rgba(74,61,32,.05), 0 4px 10px -4px rgba(74,61,32,.10), 0 22px 44px -22px rgba(74,61,32,.28); }

/* ───────── formularios de dos columnas en pantalla ancha ─────────
   `.umbrales` reparte `1fr 82px 1.15fr`, que en un móvil de 375 px deja la etiqueta y su
   campo juntos. En el panel del encargado, con 1.180, ese `1fr` se estira y manda el
   campo al otro extremo de la tarjeta: quedan la etiqueta pegada a la izquierda y el
   número flotando a la derecha, con medio palmo de nada en medio. No es un fallo del
   grid — es un grid pensado para otro ancho.
   Se acota la columna de la etiqueta para que la fila siga leyéndose como una fila. */
@media (min-width:1000px){
  /* DOS COLUMNAS DE CAMPOS, no cuatro filas estiradas a lo ancho.
     Acotar la etiqueta a 330 px no bastaba: la fila entera seguía midiendo lo que mide
     la tarjeta —unos 950 px con el mando puesto— y una fila de «etiqueta · número ·
     unidad» ocupa cuatrocientos. Quedaban quinientos y pico de papel en blanco a la
     derecha de cada número, y la etiqueta separada de su propio campo por medio palmo.
     Un ajuste que se lee de un vistazo tiene que caber en un vistazo.

     El reparto no es de relleno: arriba los dos porcentajes de aforo —cuándo está llena
     y desde cuándo avisar—, abajo las dos condiciones para salir. Cada línea es una
     pregunta, y puestas así se comparan sin mover los ojos de lado a lado. */
  body.con-mando .umbrales{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:2px 40px; padding:6px 20px 14px;
  }
  body.con-mando .umbral-caja{ grid-template-columns:38px minmax(0, 1fr) 38px; }
  body.con-mando .umbral{
    grid-column:auto;                    /* deja de ocupar la fila entera */
    /* La etiqueta, ANCHO FIJO. Con `1fr` se comía el sobrante de la columna y volvía a
       abrir un palmo entre la etiqueta y su propio campo — el mismo fallo de antes, en
       pequeño. Fijo, el número cae siempre justo detrás del texto; y como es fijo, los
       cuatro campos siguen en la misma vertical, que es lo que impedía la escalera. */
    grid-template-columns:175px 132px minmax(0, 1fr);
    padding:9px 0;
  }
}

/* El párrafo que explica una tarjeta, con MEDIDA. A todo lo ancho del panel del
   encargado son ciento treinta caracteres por línea: el ojo pierde el renglón al volver
   a la izquierda y hay que releer. Setenta es lo que se lee sin esfuerzo, y es lo que
   hace la demo. Iba con estilo escrito a mano en el HTML —y por eso sin medida—, así que
   de paso deja de estar suelto. */
.tarjeta-int{
  margin:0; padding:0 20px 12px; max-width:70ch;
  font-size:13px; line-height:1.55; color:var(--tinta2);
}


/* ═══════════ Los ingresos del tour y el canal con el encargado ═══════════
   Los dos van al final de la tarjeta de la salida y en ese orden: primero el número que
   cierra el día, después la conversación sobre él. */

.ingresos{
  margin:12px 14px 0; padding:13px 14px; border-radius:12px;
  border:1.5px solid var(--linea); background:var(--crema);
}
.ingresos > b{ display:block; font-size:15px; margin-bottom:9px; }
.ing-fila{ display:flex; gap:9px; align-items:center; }
/* La etiqueta de cada cifra, que solo existe en los tours de pago: ahí hay dos casillas y
   sin nombre no se sabe cuál es cuál — que es justo el error que costaba dinero. Ancho
   fijo para que las dos casillas queden alineadas debajo una de otra. */
.ing-et{ flex:0 0 74px; font-size:13px; font-weight:700; color:var(--tinta2); }
.ing-fila + .ing-fila{ margin-top:8px; }
/* Tabular y grande: es un importe, y se teclea de pie con una mano. */
.ing-in{
  width:120px; min-height:48px; box-sizing:border-box; padding:9px 12px;
  font:inherit; font-size:17px; text-align:right; font-variant-numeric:tabular-nums;
  border:1.5px solid var(--linea); border-radius:11px; background:var(--papel); color:var(--tinta);
}
.ing-in:focus-visible{ outline:none; border-color:var(--verde2);
  box-shadow:0 0 0 3px rgba(20,99,76,.18); }
.ing-eur{ font-size:15px; font-weight:700; color:var(--tinta2); }
.ing-btn{
  margin-left:auto; font:inherit; font-size:15px; font-weight:700; min-height:48px;
  padding:0 20px; border-radius:11px; border:1.5px solid var(--verde);
  background:var(--verde); color:#fff; cursor:pointer;
}
.ing-btn:hover{ background:var(--verde2); border-color:var(--verde2); }
.ing-btn:disabled{ opacity:.65; cursor:default; }
.ing-pie{ margin:9px 0 0; font-size:13px; line-height:1.45; color:var(--apagado); }
.ing-mal{ margin:7px 0 0; font-size:13px; font-weight:700; color:var(--rojo); }

.obs{ margin:12px 14px 2px; }
.obs-cab{ display:flex; align-items:center; gap:9px; margin-bottom:8px; font-size:15px; }
/* La chapa de sin leer, en rojo y con número: si dijera solo «hay avisos» habría que
   abrir para saber si es uno o son cinco. */
.obs-chapa{
  font-size:11.5px; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:999px;
  background:var(--rojo); color:#fff;
}
.obs-hilo{ display:flex; flex-direction:column; gap:8px; }
.obs-vacio{ margin:0; font-size:13px; line-height:1.5; color:var(--apagado); }
.obs-msg{
  display:flex; flex-direction:column; gap:3px; max-width:86%;
  padding:9px 12px; border-radius:13px; font-size:13px; line-height:1.45;
  border:1px solid var(--linea); background:var(--papel);
}
.obs-quien{ font-size:11.5px; font-weight:800; letter-spacing:.02em; color:var(--apagado); }
.obs-t{ white-space:pre-wrap; }
/* De qué lado va cada uno. Lo mío a la derecha, lo del otro a la izquierda: es lo que
   hace que se lea de un vistazo quién habla sin leer la firma de cada línea. */
.obs-guia{ align-self:flex-start; }
.obs-enc{ align-self:flex-start; }
.obs-mio{ align-self:flex-end; background:rgba(18,128,95,.10); border-color:rgba(18,128,95,.30); }
/* Lo que cayó solo no es alguien hablando: va al centro, más pequeño y sin caja de
   mensaje. Un hecho no puede parecer un interlocutor. */
.obs-medio{
  align-self:center; max-width:100%; text-align:center; background:transparent;
  border:0; border-top:1px dashed var(--linea); border-bottom:1px dashed var(--linea);
  border-radius:0; padding:7px 4px; font-size:13px; color:var(--tinta2);
}
.obs-medio .obs-quien{ color:var(--apagado); }
/* Sin leer: filo dorado a la izquierda. Cambia la FORMA, no solo el tono. */
.obs-pend:not(.obs-medio){ box-shadow:inset 3px 0 0 var(--oro); }
.obs-ok{
  align-self:flex-start; margin-top:5px; font:inherit; font-size:13px; font-weight:700;
  min-height:38px; padding:0 14px; border-radius:9px;
  border:1.5px solid var(--verde); background:var(--verde); color:#fff; cursor:pointer;
}
.obs-ok:disabled{ opacity:.65; cursor:default; }
.obs-espera{ font-size:11.5px; font-weight:700; color:var(--oro); }
.obs-leido{ font-size:11.5px; font-weight:700; color:var(--verde); }
.obs-mal{ margin:5px 0 0; font-size:11.5px; font-weight:700; color:var(--rojo); }
.obs-escribir{ display:flex; gap:8px; align-items:flex-end; margin-top:10px; }
.obs-in{
  flex:1; min-height:48px; box-sizing:border-box; padding:12px; resize:vertical;
  font:inherit; font-size:15px; line-height:1.4;
  border:1.5px solid var(--linea); border-radius:12px; background:var(--papel); color:var(--tinta);
}
.obs-in:focus-visible{ outline:none; border-color:var(--verde2);
  box-shadow:0 0 0 3px rgba(20,99,76,.18); }
.obs-env{
  flex:0 0 auto; font:inherit; font-size:13px; font-weight:700; min-height:48px;
  padding:0 16px; border-radius:11px; border:1.5px solid var(--verde);
  background:var(--verde); color:#fff; cursor:pointer;
}
.obs-env:disabled{ opacity:.65; cursor:default; }

/* La etiqueta de la casilla del nombre del tour. Iba sin nombre, y una casilla sin
   nombre en medio de una conversación se lee como decorado. */
.chm-etq{ display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:700;
  color:var(--tinta2); }

/* Cuando una función pide datos de un tour y todavía no hay tour. No es un error: es un
   orden, y por eso va en dorado y no en rojo. */
.req-sin-tour{
  margin:2px 0 0; padding:12px 14px; border-radius:12px;
  border:1.5px solid rgba(179,138,42,.34);
  background:linear-gradient(180deg, rgba(179,138,42,.10), rgba(179,138,42,.04)), var(--papel);
  font-size:13px; line-height:1.5; color:var(--tinta2);
}


/* ═══════════ La tira de la semana ═══════════
   Siete casillas a lo ancho con el número de personas dentro, que es lo único que se
   viene a mirar. Un calendario de mes en un móvil son treinta casillas donde ese dato no
   cabe. */
.semana{
  display:flex; align-items:stretch; gap:6px; padding:10px 10px 4px;
  background:var(--papel); border-bottom:1px solid var(--linea);
}
.semana:empty{ display:none; }
.sem-fl{
  flex:0 0 auto; width:30px; font:inherit; font-size:20px; line-height:1; font-weight:700;
  border:1.5px solid var(--linea); border-radius:10px; background:var(--papel);
  color:var(--verde2); cursor:pointer;
}
.sem-tira{ flex:1; display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; }
.sem-dia{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:7px 2px 9px; min-height:62px; font:inherit; cursor:pointer;
  border:1.5px solid var(--linea); border-radius:11px; background:var(--papel);
  color:var(--tinta);
}
/* La inicial y las personas heredan el color del día: así el día elegido —que se pinta
   en blanco sobre verde— los arrastra sin que nadie tenga que escribir una regla que
   cuelgue de él. Una clase, un dueño. */
.sem-l{ font-size:11.5px; font-weight:800; letter-spacing:.04em; color:currentColor;
  opacity:.68; }
.sem-n{ font-size:17px; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; }
/* Las personas: el dato que decide si el día es trabajo o un paseo.
   El color va por HERENCIA (`currentColor` atenuado) y no colgando del padre: con
   `.sem-hoy .sem-p` y `.sem-libre .sem-p` la misma clase tenía dos dueños y cuál ganaba
   dependía del orden del fichero. Así el día elegido lo pone en blanco sin tocar esto. */
.sem-p{ font-size:11.5px; font-weight:800; color:currentColor; }
.sem-dia.sem-libre{ background:var(--crema); color:var(--apagado); }
.sem-dia{ color:var(--verde2); }

/* Los días pasados, apagados pero LEGIBLES: se miran para la liquidación. */
.sem-pasado{ opacity:.62; }
/* El día elegido: relleno macizo. Cambia la FORMA, no un tono de verde entre siete. */
.sem-hoy{ background:var(--verde); border-color:var(--verde); color:#fff; opacity:1; }


/* Y el punto de HOY, que puede no ser el día elegido: son dos cosas distintas y por eso
   son dos señales distintas. */
.sem-punto{
  position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--oro);
}
.sem-hoy .sem-punto{ background:#fff; }

/* El día que el guía marcó como «no puedo»: el número tachado. Es SU marca, hecha por
   él, así que se pinta distinta de «libre» (que es ausencia) y sobrevive a ser el día
   elegido — la forma (el tachado) no compite con el relleno. */
.sem-nop .sem-n{ text-decoration:line-through; text-decoration-thickness:2px; }
.sem-nop:not(.sem-hoy){ border-style:dashed; }

/* La fila de disponibilidad bajo la tira. La tira es un flex de tres piezas; esta cuarta
   rompe a línea completa, de ahí el wrap del contenedor. */
.semana{ flex-wrap:wrap; }
.sem-dispo{ flex-basis:100%; display:flex; flex-direction:column; gap:4px; padding:6px 2px 4px; }
.sem-dispo-btn{
  font:inherit; font-size:13px; font-weight:700; min-height:38px; cursor:pointer;
  border:1.5px solid var(--linea); border-radius:10px; background:var(--papel);
  color:var(--tinta); padding:6px 10px;
}
.sem-dispo-btn.sem-dispo-no{ background:var(--crema); color:var(--apagado); font-weight:600; }
.sem-dispo-nota{ font-size:11.5px; color:var(--apagado); line-height:1.35; padding:0 2px; }

/* Las salidas del día sin guía, con «me ofrezco» y «esta no» por salida. Ocupa línea
   completa como la fila de arriba, y cada salida es una línea con su hora delante: en un
   móvil, la hora es lo que el guía busca para decidir. Los dos botones a 44 px de alto —el
   mínimo con el que se acierta con el pulgar en la calle y sin mirar—. */
.sem-libres{ flex-basis:100%; display:flex; flex-direction:column; gap:6px;
  padding:8px 2px 2px; border-top:1px solid var(--linea); margin-top:2px; }
.sem-libres-tit{ font-size:11.5px; font-weight:800; color:var(--apagado); margin:0;
  letter-spacing:.02em; }
.sem-libre{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sem-libre-que{ flex:1 1 auto; min-width:9rem; font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums; }
.sem-libre-b{
  font:inherit; font-size:13px; font-weight:700; min-height:44px; cursor:pointer;
  border:1.5px solid var(--linea); border-radius:10px; background:var(--papel);
  color:var(--tinta); padding:4px 10px; white-space:nowrap;
}
/* Puesto = lo dijo él. Se marca con relleno Y con el borde, no solo con color: en la calle
   y a pleno sol, el color solo no se ve. */
.sem-libre-b.si.puesto{ background:var(--verde,#0c6b56); border-color:var(--verde,#0c6b56);
  color:#fff; }
.sem-libre-b.no.puesto{ background:var(--crema); border-color:var(--apagado);
  color:var(--apagado); }
.sem-libre-b:disabled{ opacity:.55; cursor:default; }
.sem-libres-nota{ font-size:11.5px; color:var(--apagado); line-height:1.35; padding:0 2px;
  margin:0; }

/* ── La cabecera de «cuándo avisarte de cerrar», que abre y cierra ──
   Es un botón, no un rótulo: se pulsa. Y por eso lleva chevrón y `aria-expanded`, que es
   lo que distingue una cabecera que hace algo de una que solo nombra. */
.cierres-cab{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  font:inherit; color:inherit; border:0; background:transparent; cursor:pointer;
  appearance:none; -webkit-appearance:none;
}
.cierres-cab:hover{ background:rgba(18,128,95,.05); }
.cierres-cab:focus-visible{ outline:2px solid var(--verde2); outline-offset:-3px; }
/* El resumen: lo que hacen esos números cuando la tarjeta está cerrada. Sin él, cerrada
   sería un cajón; con él, sigue diciendo algo. */
.cierres-res{
  flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--apagado);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cierres-chev{
  flex:0 0 auto; margin-left:auto; font-size:11.5px; color:var(--apagado);
  transition:transform .16s ease;
}
.cierres-cab[aria-expanded="true"] .cierres-chev{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .cierres-chev{ transition:none; } }


/* ═══════════ El canal de WhatsApp ═══════════ */

/* Que no salen solos, ARRIBA y en dorado. No es un error —nada está roto— pero es una
   condición que cambia lo que el operador tiene que hacer, y enterrarla en una nota al
   pie sería dejar que alguien crea que su recordatorio salió cuando no salió. */
.canal-aviso{
  margin:0 20px 12px; padding:11px 13px; border-radius:11px;
  border:1.5px solid rgba(179,138,42,.36);
  background:linear-gradient(180deg, rgba(179,138,42,.10), rgba(179,138,42,.04)), var(--papel);
  font-size:13px; line-height:1.5; color:var(--tinta2);
}
.canal-num{ display:flex; gap:9px; align-items:flex-end; margin:0 20px; flex-wrap:wrap; }
.canal-et{ flex:1 1 200px; display:flex; flex-direction:column; gap:5px;
  font-size:13px; font-weight:700; color:var(--tinta2); }
.canal-in{
  width:100%; min-height:48px; box-sizing:border-box; padding:11px 12px;
  font:inherit; font-size:15px; font-variant-numeric:tabular-nums;
  border:1.5px solid var(--linea); border-radius:11px; background:var(--papel); color:var(--tinta);
}
.canal-in:focus-visible{ outline:none; border-color:var(--verde2);
  box-shadow:0 0 0 3px rgba(20,99,76,.18); }
.canal-btn{
  flex:0 0 auto; font:inherit; font-size:13px; font-weight:700; min-height:48px; padding:0 18px;
  border-radius:11px; border:1.5px solid var(--verde); background:var(--verde); color:#fff;
  cursor:pointer;
}
.canal-btn:disabled{ opacity:.65; cursor:default; }
.canal-mal{ margin:7px 20px 0; font-size:13px; font-weight:700; color:var(--rojo); }
.canal-est{ margin:8px 20px 0; font-size:11.5px; line-height:1.45; color:var(--apagado); }

.canal-cab{ display:flex; align-items:center; gap:10px; margin:16px 20px 8px;
  padding-top:12px; border-top:1px solid var(--linea); font-size:15px; }
.canal-mini{
  margin-left:auto; font:inherit; font-size:13px; font-weight:700; min-height:36px;
  padding:0 12px; border-radius:9px; border:1.5px solid var(--linea);
  background:var(--papel); color:var(--verde2); cursor:pointer;
}
.canal-msg{
  margin:0 20px 9px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--linea); background:var(--papel);
  display:flex; flex-direction:column; gap:8px;
}
.canal-quien{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:13px; }
/* El TIPO de mensaje con su chapa: es lo que dice por qué le toca a esa persona, y sin
   eso la lista parece una cola de mensajes iguales. */
.canal-tipo{
  font-size:11.5px; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:999px;
  background:rgba(18,128,95,.12); color:var(--verde2); border:1px solid rgba(18,128,95,.24);
}
.canal-hora{ font-size:11.5px; color:var(--apagado); }
/* El texto tal y como va a salir. Se enseña ENTERO: mandar algo sin haberlo leído es
   exactamente lo que este producto no hace en ninguna pantalla. */
.canal-texto{
  margin:0; padding:10px 12px; border-radius:10px; background:var(--crema);
  font-size:13px; line-height:1.5; color:var(--tinta); white-space:pre-wrap;
}
.canal-acc{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.canal-ir{
  font-size:13px; font-weight:700; min-height:42px; padding:0 16px; border-radius:11px;
  border:1.5px solid var(--verde); background:var(--verde); color:#fff;
  display:inline-flex; align-items:center; text-decoration:none;
}
.canal-ok{
  font:inherit; font-size:13px; font-weight:700; min-height:42px; padding:0 14px;
  border-radius:11px; border:1.5px solid var(--linea); background:var(--papel);
  color:var(--verde2); cursor:pointer;
}
.canal-no{
  font:inherit; font-size:13px; min-height:42px; padding:0 12px; border:0;
  background:transparent; color:var(--apagado); text-decoration:underline; cursor:pointer;
}
.canal-vacio{ margin:0 20px; font-size:13px; line-height:1.5; color:var(--apagado); }


/* ═══════════ El manifiesto, con el tono de la tarjeta del día ═══════════
   Es la pantalla que más se mira —el guía todo el día y el encargado cada rato— y era la
   única de las importantes en papel plano. Se le da el velo de `#cuadro-dia`: tiñe sin
   tapar, así que se siguen intuyendo las curvas del fondo y la tarjeta descansa la vista
   en vez de recortarse contra ella.

   Va en las DOS: la del guía (`section.tour` con salidas) y la del encargado
   (`#b-manifiesto`), porque es la misma información y no puede tener dos aires. */
#b-manifiesto,
body:not(.con-mando) #tours > section.tour{
  background:
    linear-gradient(135deg, rgba(18,138,107,.12), rgba(43,179,163,.05) 55%, rgba(201,138,45,.06)),
    color-mix(in srgb, var(--papel) 84%, transparent);
  border-color:rgba(18,138,107,.22);
  box-shadow:0 10px 30px -18px rgba(18,63,51,.30);
}
/* Las filas de dentro sí van en papel: si la tarjeta tiñe y las filas también, los
   muñecos encendidos dejan de despegar del fondo — y esa es la señal que se lee de reojo
   en una plaza. */
body:not(.con-mando) #tours > section.tour .res{
  background:color-mix(in srgb, var(--papel) 70%, transparent);
}
body:not(.con-mando) #tours > section.tour .res.llego{
  background:color-mix(in srgb, #eef7f2 78%, transparent);
}

/* El aviso de grupo grande: dorado, arriba de la lista. No es un error —nadie ha hecho
   nada mal— pero es una decisión que se toma ANTES de empezar a marcar. */
.aviso-grupo{
  margin:0 14px 10px; padding:11px 13px; border-radius:11px;
  border:1.5px solid rgba(179,138,42,.36);
  background:linear-gradient(180deg, rgba(179,138,42,.12), rgba(179,138,42,.05)), var(--papel);
  font-size:13px; line-height:1.5; color:var(--tinta2);
}
/* Los no-shows. Antes de cerrar es una advertencia y va apagada; después es un hecho
   consumado y va con su caja, porque ahí es donde el guía necesita leer que NO se le ha
   escrito nada a nadie. */
.nota-ns{
  margin:10px 14px 0; padding:10px 12px; border-radius:10px;
  background:rgba(178,58,44,.08); border:1px solid rgba(178,58,44,.20);
  font-size:13px; line-height:1.5; color:var(--tinta2);
}
.nota-ns-antes{
  background:transparent; border:0; padding:2px 0; color:var(--apagado); font-size:11.5px;
}

/* Compartir la ubicación. Activa va en verde macizo —es un estado, no una acción
   disponible— y apagada en perfilada. La caducidad se lee debajo siempre. */
.ubi{ margin:12px 14px 0; display:flex; flex-direction:column; gap:7px; }
.ubi-btn{
  width:100%; min-height:52px; font:inherit; font-size:15px; font-weight:700;
  border-radius:12px; border:1.5px solid var(--verde); background:var(--papel);
  color:var(--verde2); cursor:pointer;
}
.ubi-btn.ubi-on{ background:var(--verde); color:#fff; }
.ubi-btn:disabled{ opacity:.7; cursor:default; }
.ubi-pie{ margin:0; font-size:11.5px; line-height:1.45; color:var(--apagado); }
.ubi-no{
  align-self:flex-start; font:inherit; font-size:13px; min-height:36px; padding:0 10px;
  border:0; background:transparent; color:var(--apagado); text-decoration:underline;
  cursor:pointer;
}

/* Los dos ejes del reparto. Cada opción dice qué hace, así que son botones anchos y no
   un desplegable: en un desplegable solo se ve la elegida, y aquí lo que hay que
   comparar son las dos. */
.rep-eje{ margin:0 0 14px; display:flex; flex-direction:column; gap:3px; }
.rep-eje > b{ font-size:13px; }
.rep-eje > span{ font-size:13px; line-height:1.45; color:var(--apagado); }
.rep-ops{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.rep-op{
  flex:1 1 190px; min-height:46px; padding:8px 12px; font:inherit; font-size:13px;
  font-weight:700; border-radius:11px; border:1.5px solid var(--linea);
  background:var(--papel); color:var(--tinta2); cursor:pointer; text-align:left;
}
/* La elegida, maciza: se distingue por relleno y no por un borde algo más oscuro, que
   entre dos botones iguales no se ve. */
.rep-op.on{ background:var(--verde); border-color:var(--verde); color:#fff; }
.rep-op:disabled{ opacity:.6; cursor:default; }

/* ───────── el periodo de la liquidación ─────────
   Los tres atajos y el «del…al» comparten fila y se envuelven: en un portátil caben en
   una línea —como en la demo— y en un móvil se parten en dos. No van dentro de un
   pliegue porque un control que hay que descubrir para saber que existe es un control
   que la mitad de la gente no usa nunca. */
.liq-otros{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:0 0 12px; }
.liq-chip{
  min-height:38px; padding:6px 12px; font:inherit; font-size:13px; font-weight:700;
  border-radius:10px; border:1.5px solid var(--linea); background:var(--papel);
  color:var(--tinta2); cursor:pointer;
}
/* El atajo que se está viendo, macizo. La demo no marca ninguno y entonces el periodo hay
   que deducirlo de las dos fechas: aquí el botón que lo puso se queda encendido. */
.liq-chip.on{ background:var(--verde); border-color:var(--verde); color:#fff; cursor:default; }
.liq-chip:disabled{ opacity:.6; cursor:default; }
.liq-fechas{
  display:flex; align-items:center; gap:6px; font-size:13px; color:var(--apagado);
}
.liq-fecha{
  font:inherit; font-size:13px; padding:7px 8px; border-radius:9px;
  border:1.5px solid var(--linea); background:var(--papel); color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
/* Las salidas que están apuntadas y aún no han salido. Apagado y sin caja: no es un aviso
   —nadie ha hecho nada mal— sino el pie de página del periodo, y va pegado a él. */
.liq-porvenir{
  margin:-4px 0 12px; font-size:13px; line-height:1.5; color:var(--apagado);
}

/* El CSV y el papel, uno al lado del otro: son la misma decisión —me lo llevo de aquí— y
   en dos filas seguidas parecían dos pasos de algo. En un móvil no caben los dos con su
   rótulo entero, así que se apilan: antes de partir «Descargar en CSV» en dos renglones
   dentro del botón, mejor dos botones. */
.liq-acciones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.liq-acciones > *{
  flex:1 1 190px; display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.3;
}

/* ───────── el papel ─────────
   `window.print()` a secas —lo que hace la demo— aquí imprimiría los quince bloques del
   panel, el menú lateral y la barra de estado. Así que el botón marca el `<body>` y esta
   hoja deja EN EL PAPEL lo único que se le da a un guía: el periodo, lo que cobra cada
   uno, de dónde sale y salida por salida.
   Fuera se quedan los mandos —una flecha impresa no lleva a ninguna parte— y el
   formulario de ajustes, porque en gris no se distingue la opción elegida de la que no:
   lo que hace falta en el papel es la regla escrita, y va en `.liq-papel-solo`. */
.liq-papel-solo{ display:none; }
@media print{
  /* El suelo de curvas de nivel y las dos manchas de luz son pseudoelementos de `html` y
     de `body`, así que no los alcanza el `> *` de abajo. Hoy la mayoría de los navegadores
     no imprimen fondos por defecto, pero eso es una casilla que el operador puede tener
     marcada — y entonces la liquidación sale sobre un papel pintado. */
  html::before, body.liq-papel::before, body.liq-papel::after{ display:none !important; }
  body.liq-papel{ background:#fff; padding:0; }
  body.liq-papel > *{ display:none !important; }
  body.liq-papel > #tours{
    display:block !important; max-width:none; margin:0; padding:0;
  }
  body.liq-papel #tours > *{ display:none !important; }
  body.liq-papel #tours > #b-cuentas{
    display:block !important; background:#fff; border:0; box-shadow:none; margin:0;
  }
  body.liq-papel .liq-mando,
  body.liq-papel .liq-acciones,
  body.liq-papel .liq-ajustes{ display:none !important; }
  /* El pliegue de salida por salida lo abre el botón antes de imprimir; aquí solo se le
     quita el aire de «esto se puede pulsar»: en papel el «–» de desplegar no significa
     nada y se lee como un guion suelto delante del rótulo. */
  body.liq-papel .liq-detalle > summary{ list-style:none; font-weight:800; }
  body.liq-papel .liq-detalle > summary::before{ content:none; }
  body.liq-papel .liq-papel-solo{
    display:block; margin:12px 0 0; font-size:11.5px; line-height:1.5; color:#000;
  }
  /* Una salida partida entre dos hojas obliga a pasar la página para leer un renglón. */
  body.liq-papel .res{ break-inside:avoid; }
  @page{ margin:16mm; }
}

/* La respuesta propuesta en el Cerebro. Apagada y con su botón: tiene que verse que es
   una sugerencia y no algo ya guardado — una propuesta que se cuela como respuesta del
   operador contesta al viajero con seguridad y no se ve nunca. */
.cb-sug-q{
  margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--apagado);
}
.cb-sug-pie{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px;
  font-size:11.5px; line-height:1.45; color:var(--apagado);
}
.cb-sug-pie > span{ flex:1 1 200px; }

/* ═══════════ El orden de cierre, en el panel del agente ═══════════
   Una lista corta y numerada con dos flechas y un porcentaje. Se toca con el pulgar en la
   calle tanto como con el ratón, y por eso son botones y no arrastrar: arrastrar en una
   lista de cinco con el pulgar es de las cosas que se abandonan a la segunda. */
.ag-orden-f{ display:flex; align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px solid var(--linea); }
.ag-orden-f:last-of-type{ border-bottom:0; }
.ag-orden-n{ flex:0 0 22px; height:22px; border-radius:50%; background:var(--crema);
  color:var(--tinta2); font-size:11.5px; font-weight:800; display:flex;
  align-items:center; justify-content:center; }
.ag-orden-t{ flex:1; display:flex; flex-direction:column; min-width:0; }
.ag-orden-t small{ font-size:11.5px; color:var(--apagado); line-height:1.35; }
.ag-orden-b{ flex:0 0 auto; min-width:32px; min-height:32px; font:inherit; font-size:15px;
  border:1.5px solid var(--linea); border-radius:8px; background:var(--papel);
  color:var(--verde2); cursor:pointer; }
.ag-orden-b:disabled{ opacity:.35; cursor:default; }
.ag-orden-pct{ flex:0 0 56px; min-height:32px; font:inherit; font-size:13px;
  text-align:right; border:1.5px solid var(--linea); border-radius:8px; padding:2px 6px; }
.ag-orden-u{ font-size:11.5px; color:var(--apagado); }
/* Quién gobierna el canal. Estrecho a propósito: casi siempre está vacío, y una columna
   ancha para un hueco vacío desordena una lista que se lee de un vistazo. */
/* La plataforma que su contrato veta. Apagada y con el cursor prohibido, pero PRESENTE:
   esconderla haría creer que no existe. */
/* `sobran` no es `faltan`. Faltar gente deja a alguien en la plaza sin sitio; sobrar es
   una plaza que se puede volver a vender. Mismo sitio, distinto tono: la alarma coral se
   reserva para lo que deja a una persona tirada. */
.fila-sobran{ border-left-color:var(--linea) !important; }
.fila-sobran b{ color:var(--tinta) !important; font-weight:700; }
.permiso.vetado{ opacity:.55; cursor:not-allowed; border-style:dashed; }
.permiso.vetado .marca-p::before{ content:'⛔'; font-size:13px; }
.ag-porque{ margin:2px 0 10px; padding-left:6px; border-left:2px solid var(--linea); }
.ag-porque-veto{ border-left-color:var(--coral); }
.ag-orden-gob{ flex:0 0 78px; min-height:32px; font:inherit; font-size:11.5px;
  padding:4px 6px; border:1px solid var(--linea); border-radius:8px; background:var(--fondo);
  color:var(--tinta); text-align:center; }
.ag-orden-gob::placeholder{ color:var(--apagado); }
.ag-orden-f--gob .ag-orden-n{ opacity:.35; }
.ag-orden-f--gob .ag-orden-pct{ opacity:.35; }
.ag-orden-f--gob .ag-orden-gob{ border-color:var(--verde); font-weight:700; }

/* ═══════════ Señales de vida ═══════════
   Cuatro FORMAS y no cuatro colores: esto se mira de pie y a veces al sol, y el color no
   sobrevive a eso. Ningún verde en toda la sección — en este panel el verde significa
   «lo miró una persona», y aquí no lo ha mirado nadie. */
.sen-titular{ margin:10px 0 12px; font-size:15px; line-height:1.45; }
.sen-f{ display:flex; align-items:flex-start; gap:10px; padding:10px 0;
  border-top:1px solid var(--linea); }
.sen-f:first-of-type{ border-top:0; }
/* El color de la marca va en SU PROPIA clase y no colgando de la fila: la misma clase
   estilizada desde dos padres distintos deja el resultado a merced del orden del fichero,
   y el repo tiene un guardia que lo prohíbe. */
.sen-m{ flex:0 0 18px; font-size:15px; line-height:1.3; color:var(--apagado); }
.sen-m-falla{ color:var(--coral); }
.sen-m-callado{ color:var(--tinta2); }
.sen-c{ flex:1; min-width:0; }
.sen-t{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.sen-h{ font-size:11.5px; color:var(--apagado); }
.sen-dos{ font-size:11.5px; color:var(--tinta2); margin-top:2px; }
.sen-d{ margin:3px 0 0; }
.sen-canal{ margin:3px 0 0; padding-left:9px; border-left:2px solid var(--linea); }
.sen-canal-mal{ border-left-color:var(--coral); }
.sen-b{ flex:0 0 auto; padding:3px 10px; align-self:center; }
/* El pie: lo que NO deja rastro. Se enseña SIEMPRE, y en gris — no es un aviso, es la
   frontera de lo que sabemos. */
.sen-pie{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--linea); }
.sen-pie p{ margin:4px 0 0; }
/* «Hecho, esperándote»: trabajo automático parado esperando a una persona. Filas
   pulsables porque cada una lleva al sitio donde se resuelve — una fila que solo informa
   se mira dos veces y nunca más. */
.sen-esp{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--linea); }
.sen-esp-rot{ font-weight:800; letter-spacing:.04em; margin-bottom:5px; }
.sen-esp-f{ display:flex; width:100%; align-items:center; gap:8px; min-height:38px;
  padding:6px 4px; font:inherit; font-size:13px; text-align:left; color:var(--tinta);
  background:none; border:0; border-bottom:1px solid var(--linea); cursor:pointer; }
.sen-esp-f:last-child{ border-bottom:0; }
.sen-esp-f span:first-child{ flex:1; }
.sen-esp-f:hover{ background:var(--crema); }

/* ═══════════ La ficha de un guía ═══════════
   Un velo encima del equipo, no otra pantalla: quien la abre está en mitad de algo y al
   cerrarla tiene que seguir donde estaba. */
.pg-abre{ display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  flex:1; min-width:0; padding:2px 0; font:inherit; text-align:left; color:var(--tinta);
  background:none; border:0; border-radius:8px; cursor:pointer; }
.pg-abre:hover b{ text-decoration:underline; }
.pg-abre:focus-visible{ outline:2px solid var(--verde); outline-offset:2px; }

.pg-velo{ position:fixed; inset:0; z-index:90; display:flex; align-items:flex-start;
  justify-content:center; padding:24px 12px; overflow-y:auto;
  background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
.pg-caja{ position:relative; width:100%; max-width:680px; background:var(--fondo);
  border:1px solid var(--linea); border-radius:16px; padding:22px 20px 20px;
  box-shadow:0 18px 50px rgba(0,0,0,.28); }
.pg-x{ position:absolute; top:10px; right:10px; min-width:36px; min-height:36px;
  font:inherit; font-size:15px; color:var(--apagado); background:none;
  border:1px solid var(--linea); border-radius:10px; cursor:pointer; }

.pg-cab{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.pg-cab h2{ margin:0; font-size:20px; }
.pg-cab p{ margin:2px 0 0; }
.pg-ini{ flex:0 0 34px; height:34px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:50%; background:var(--crema);
  font-weight:800; font-size:13px; color:var(--tinta2); }
.pg-ini.grande{ flex-basis:46px; height:46px; font-size:20px; }

.pg-kpis{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.pg-kpi{ flex:1 1 120px; padding:9px 11px; border:1px solid var(--linea);
  border-radius:11px; display:flex; flex-direction:column; gap:2px; }
.pg-kpi .v{ font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.pg-kpi .l{ font-size:11.5px; color:var(--apagado); line-height:1.3; }
.pg-medias{ width:100%; margin:6px 0 0; }
.pg-falta{ margin:6px 0 0; color:var(--coral); }

/* Doce barras y no una línea: son doce cifras sueltas, no una curva continua. */
.pg-graf{ margin-top:16px; }
.pg-graf-t{ font-size:11.5px; font-weight:800; letter-spacing:.04em; margin-bottom:6px; }
.pg-barras{ display:flex; align-items:flex-end; gap:4px; height:66px; }
.pg-b{ flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; height:100%; gap:3px; }
/* `display:block` y no por gusto: son `<span>`, y a un elemento en línea el navegador le
   ignora el `height`. Sin esto las barras salían de altura cero y el gráfico era una fila
   de nombres de mes sobre nada — que es exactamente como se vio al abrirlo la primera vez. */
.pg-bv{ display:block; width:100%; max-width:26px; background:var(--verde);
  border-radius:3px 3px 0 0; }
/* Un mes sin trabajo NO es una barra mínima: es una raya. «Poco» y «nada» no se pintan
   igual, o el gráfico miente en el sitio donde más se mira. */
.pg-b0{ display:block; width:100%; max-width:26px; height:2px; background:var(--linea);
  border-radius:2px; }
.pg-bm{ display:block; font-size:11.5px; color:var(--apagado); }

.pg-tabla{ margin-top:14px; }
.pg-scroll{ overflow-x:auto; }
.pg-scroll table{ width:100%; font-size:13px; }

.pg-op{ display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; padding-top:12px;
  border-top:1px dashed var(--linea); }
.pg-op-c{ flex:1 1 240px; min-width:0; }
.pg-op-t{ font-size:11.5px; font-weight:800; letter-spacing:.04em; margin-bottom:4px; }
.pg-op-c p{ margin:2px 0 0; }

.pg-lista{ display:flex; flex-direction:column; }
.pg-fila{ display:flex; align-items:center; gap:10px; width:100%; min-height:46px;
  padding:7px 4px; font:inherit; text-align:left; color:var(--tinta); background:none;
  border:0; border-bottom:1px solid var(--linea); cursor:pointer; }
.pg-fila:hover{ background:var(--crema); }
.pg-t{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pg-t small{ font-size:11.5px; color:var(--apagado); }
.pg-prox{ font-size:11.5px; color:var(--tinta2); white-space:nowrap; }
.pg-sin{ color:var(--apagado); }
.pg-baja{ opacity:.55; }

@media (max-width:600px){
  .pg-velo{ padding:0; }
  .pg-caja{ max-width:none; min-height:100%; border:0; border-radius:0; }
}

/* La fila de un guía en «A quién le pagas». El total manda visualmente; las dos líneas de
   debajo lo explican y solo salen cuando hay fijo que explicar. */
.liq-guia{ display:block !important; padding:8px 0; }
.liq-guia-l{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.liq-guia-d{ display:flex; justify-content:space-between; gap:10px; padding:2px 0 0 12px;
  font-size:13px; color:var(--apagado); font-variant-numeric:tabular-nums; }
.liq-guia-falta{ margin-top:5px; padding-left:12px; font-size:11.5px; color:var(--coral);
  line-height:1.4; }

/* La caja de «te han puesto una salida», arriba del todo. Una línea por salida con su
   «Visto» al lado: el gesto tiene que estar junto a lo que confirma, no al final de una
   lista de seis. Botón a 44 px, que es lo que se acierta con el pulgar en la calle. */
.avisos-nuevos .avi-fila{ display:flex; align-items:center; gap:8px; margin-top:6px;
  flex-wrap:wrap; }
.avisos-nuevos .avi-fila span{ flex:1 1 10rem; font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums; }
.avi-visto{ font:inherit; font-size:13px; font-weight:700; min-height:44px; padding:4px 14px;
  cursor:pointer; border:1.5px solid var(--linea); border-radius:10px;
  background:var(--papel); color:var(--tinta); }
.avi-visto:disabled{ opacity:.55; cursor:default; }

/* El «visto» del guía en el cuadrante. Verde cuando lo ha visto y apagado cuando no —no
   rojo: no haberlo visto todavía no es un fallo de nadie, es información. */
.ok-visto{ color:var(--verde,#0c6b56); font-weight:700; }
.sin-visto{ color:var(--apagado); }

/* ───────── varias horas de salida (alta y edición de un tour) ─────────
   Una fila por hora, con la esfera de siempre, y un «+ Otra hora» debajo. La cruz de quitar
   solo aparece cuando hay más de una: la única hora no se puede quitar, se cambia. */
.horas-alta{ display:flex; flex-direction:column; gap:8px; }
.ha-fila{ display:flex; gap:8px; align-items:center; }
.ha-fila .reloj{ flex:1; min-width:0; }
.ha-quita{
  flex:0 0 44px; width:44px; height:44px; border-radius:11px; border:1.5px solid var(--linea);
  background:transparent; font:inherit; font-size:20px; line-height:1; color:var(--apagado);
  cursor:pointer;
}
.ha-quita:hover{ border-color:color-mix(in srgb, var(--coral) 45%, var(--linea)); color:var(--coral-texto); }
.ha-mas{
  align-self:flex-start; border:0; background:transparent; color:var(--verde2);
  font:inherit; font-size:13px; font-weight:700; text-decoration:underline; cursor:pointer;
  padding:6px 2px; min-height:44px;
}
/* Un botón pequeño dentro de una fila: el mismo `.btn`, sin estirarse ni pedir 48 px. Va
   DESPUÉS de `.btn` en el fichero a propósito: misma especificidad, gana el último. */
.btn-chico{ flex:0 0 auto; min-width:0; min-height:38px; font-size:13px; padding:8px 12px; }
.horas-ed{ flex-basis:100%; padding:8px 0 2px; display:flex; flex-direction:column; gap:8px; }
.horas-ed-t{ font-size:13px; font-weight:700; color:var(--tinta2); }
.horas-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.hora-chip{
  display:inline-flex; align-items:center; gap:2px; border:1.5px solid var(--linea);
  border-radius:99px; padding:4px 6px 4px 12px; background:var(--crema);
  font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
}
.hora-chip button{
  border:0; background:transparent; font:inherit; font-size:17px; line-height:1;
  color:var(--apagado); cursor:pointer; width:28px; height:28px; border-radius:50%;
}
.hora-chip button:hover{ background:var(--linea); color:var(--tinta); }
.horas-ed-fila{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.horas-ed-fila input{
  flex:0 0 auto; min-height:44px; border:1.5px solid var(--linea); border-radius:11px;
  padding:8px 10px; font:inherit; font-size:15px; font-weight:700; background:var(--crema);
  font-variant-numeric:tabular-nums; color:var(--tinta);
}

/* ───────── el buzón: el servidor va plegado ───────── */
.b-avanzado{ margin-top:14px; font-size:13px; }
.b-avanzado > summary{ cursor:pointer; color:var(--tinta2); font-weight:600; padding:6px 0; }
.b-avanzado > summary b{ font-weight:700; color:var(--tinta); }
.b-avanzado[open] > summary{ margin-bottom:-6px; }

/* ───────── el equipo ─────────
   Una fila por persona: el círculo con sus iniciales, el nombre (que abre su ficha), una
   línea con lo que hace falta para repartir —qué es, cómo se le localiza, qué habla, cuánto
   lleva esta semana— y los mandos a la derecha. La invitación va en su propia caja, con lo
   que pasa después escrito: es la primera pantalla de una cuenta nueva y tiene que
   parecer un producto, no un formulario. */
.eq-fila{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-top:1px solid var(--linea); flex-wrap:wrap;
}
.eq-avatar{
  flex:0 0 42px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:800; letter-spacing:.03em;
  background:color-mix(in srgb, var(--verde) 14%, var(--papel)); color:var(--verde2);
  border:1.5px solid color-mix(in srgb, var(--verde) 30%, var(--linea));
}
.eq-avatar.enc{ background:var(--verde2); color:#fff; border-color:var(--verde2); }
.eq-datos{ flex:1 1 160px; min-width:0; max-width:100%; overflow-wrap:anywhere; display:flex; flex-direction:column; gap:4px; }
.eq-nom b{ font-size:15px; font-weight:650; }
.eq-linea{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:13px; color:var(--tinta2); }
.eq-rol, .eq-aviso{
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 8px; border-radius:99px; background:var(--crema); color:var(--apagado);
  border:1px solid var(--linea);
}
.eq-rol.enc{
  background:color-mix(in srgb, var(--verde) 12%, var(--papel)); color:var(--verde2);
  border-color:color-mix(in srgb, var(--verde) 30%, var(--linea));
}
.eq-aviso{
  background:color-mix(in srgb, var(--coral) 12%, var(--papel)); color:var(--coral-texto);
  border-color:color-mix(in srgb, var(--coral) 35%, var(--linea)); text-transform:none;
  letter-spacing:0; font-weight:700;
}
.eq-acc{ display:flex; flex-wrap:wrap; gap:6px; flex:0 1 auto; max-width:100%; margin-left:auto; }
.eq-vacio{ margin:0; padding:14px; font-size:13px; line-height:1.5; color:var(--apagado); border-top:1px solid var(--linea); }
.eq-invita{ padding:14px; border-top:1px solid var(--linea); }
.eq-invita-campos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.eq-campo{ margin-top:0; }
.eq-pasos{ margin:12px 0 0; padding-left:20px; font-size:13px; line-height:1.45; color:var(--tinta2); }
.eq-pasos li{ margin:2px 0; }
@media (max-width:520px){
  .eq-invita-campos{ grid-template-columns:1fr; }
  .eq-acc{ margin-left:0; width:100%; }
  .eq-acc > button{ flex:1 1 130px; min-height:44px; }
}

/* ───────── el montador: los tours encontrados y varias horas ───────── */
.chm-tours{ display:flex; flex-direction:column; gap:6px; }
.chm-tour{
  display:flex; align-items:center; gap:10px; border:1.5px solid var(--linea);
  border-radius:11px; padding:10px 12px; background:var(--papel); cursor:pointer;
}
.chm-tour.off{ opacity:.55; }
.chm-tour input[type=checkbox]{ width:22px; height:22px; accent-color:var(--verde2); flex:0 0 auto; margin:0; }
.chm-tour b{ display:block; font-size:15px; }
.chm-tour small{ display:block; font-size:13px; color:var(--tinta2); }
.chm-horas{ display:flex; flex-direction:column; gap:6px; }
.chm-hora{ display:flex; gap:6px; align-items:center; }
.chm-hora input{
  flex:1; min-width:0; font:inherit; font-size:15px; padding:11px; border-radius:10px;
  border:1.5px solid var(--linea); background:var(--papel); color:inherit; min-height:48px;
  font-variant-numeric:tabular-nums;
}
.chm-quita{
  flex:0 0 44px; min-height:44px; border-radius:10px; border:1.5px solid var(--linea);
  background:transparent; font:inherit; font-size:17px; color:var(--apagado); cursor:pointer;
}

/* Revisión del alta: los mismos materiales del panel, con el destino a la vista. */
.chm-pasos{ display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 14px; font-size:13px; }
.chm-pasos span{ padding:8px 10px; border-radius:9px; background:var(--crema); color:var(--tinta2); }
.chm-pasos .actual{ background:var(--verde2); color:var(--papel); font-weight:700; }
.chm-pasos .hecho{ border:1px solid var(--verde2); }
.chm-revision-tour{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.chm-revision-tour input{ width:100%; box-sizing:border-box; }
.chm-revision-tour details{ font-size:13px; color:var(--tinta2); overflow-wrap:anywhere; }
.chm-texto, .chm-destino{ width:100%; box-sizing:border-box; min-height:44px; padding:10px;
  border:1px solid var(--linea); border-radius:9px; background:var(--papel); color:inherit; font:inherit; font-size:15px; }
.chm-texto{ resize:vertical; }
.chm-prop small{ overflow-wrap:anywhere; font-size:11.5px; color:var(--tinta2); }

/* El alta mantiene la revisión por recorrido y el destino explícito de los datos comunes. */
.chm-grupo{ padding:14px; margin:14px 0; border:1px solid var(--linea); border-radius:12px; background:var(--crema); }
.chm-grupo h3{ margin:0 0 12px; font-size:17px; }
.chm-prop label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; }
.chm-prop details{ font-size:11.5px; color:var(--tinta2); }
.chm-destinos{ display:flex; gap:6px; flex-wrap:wrap; }
.chm-destinos .chm-chip{ width:auto; height:auto; min-height:36px; padding:8px 10px; border-radius:9px; text-align:left; }
.chm-destinos [aria-pressed=true]{ background:var(--verde2); color:var(--papel); }
.chm-conexiones{ display:grid; gap:12px; }
.chm-estados{ padding:12px 12px 12px 30px; border-radius:10px; background:var(--crema); font-size:13px; line-height:1.7; }
.chm-controles > .btn-recarga{ margin-top:12px; }

/* ───────── la lupa líquida del mando ─────────
   La misma gota de cristal que en la web y en la demo (mismos valores: es un solo
   producto), pero QUIETA: en un menú que se usa para trabajar, respirar y rebotar
   entorpecía. Va por DETRÁS de las entradas, se desliza con una curva suave, no cambia de
   forma ni agranda la entrada; conserva el cristal (aclara el verde de debajo) y el filo
   cian/magenta. La activa no lleva gota —ya es de otro material (crema)— y al pulsar una
   entrada la gota se retira. `mando.js` la construye en cada pintado (`lupaLiquida`). */
.mando nav{ position:relative; }
.mando nav > *:not(.gota){ position:relative; z-index:1; }
.mando-a, .mando-grupo{ transform-origin:left center;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .14s, color .14s; }
.mando-a:not(.act):hover, .mando-grupo:hover{ background:transparent; }
.mando-a.lupa, .mando-grupo.lupa{ color:#fff; }
.gota{
  position:absolute; top:0; left:0; z-index:0;
  width:0; height:0;
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:brightness(1.2) saturate(1.3) blur(2px);
  backdrop-filter:brightness(1.2) saturate(1.3) blur(2px);
  box-shadow:
    inset  1px  1px 0    rgba(0,255,255,.34),     /* cian, arriba-izquierda */
    inset -1px -1px 0    rgba(255,0,255,.30),     /* magenta, abajo-derecha */
    inset  0    0   0 1px rgba(255,255,255,.26),  /* aro blanco fino */
    inset  0    6px 12px rgba(255,255,255,.10),   /* brillo interior */
     1px  0   6px         rgba(0,255,255,.16),    /* halo cian por fuera */
    -1px  0   6px         rgba(255,0,255,.16),    /* halo magenta por fuera */
     0    8px 18px -8px   rgba(0,0,0,.45);        /* caída corta */
  opacity:0;
  pointer-events:none;
  transform:translate(0,0);
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    width     .28s cubic-bezier(.22,1,.36,1),
    height    .28s cubic-bezier(.22,1,.36,1),
    opacity   .22s ease;
  animation:none;
  border-radius:9px;
  will-change:transform,width,height;
}
.gota.visible{ opacity:1; }
/* Al reaparecer tras salir del menú se coloca SIN deslizarse desde donde estaba. */
.gota.salta{ transition:opacity .25s ease; }
@media (prefers-reduced-motion:reduce){
  .gota{ transition:opacity .2s ease; }
}

/* ───────── los detalles que hacen que el panel responda (detalles.js) ─────────
   Números que cuentan, tarjetas que entran escalonadas la primera vez, el esqueleto de
   carga con su destello, y la llegada que asienta. Todo se apaga con
   prefers-reduced-motion. */
.cuenta-cambia{ display:inline-block; animation:cuenta-brilla .9s cubic-bezier(.22,1,.36,1); }
@keyframes cuenta-brilla{
  0%,35%{ color:var(--verde); transform:translateY(-2px); }
  100%{ transform:none; }
}
.entra{ animation:sube .45s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i,0) * 40ms); }
@keyframes sube{ from{ opacity:0; transform:translateY(8px); } }
.esqueleto{
  position:relative; overflow:hidden; margin:0 0 16px; padding:18px 14px;
  border-radius:15px; border:1px solid color-mix(in srgb, var(--linea) 85%, transparent);
  background:color-mix(in srgb, var(--papel) 94%, transparent);
  display:flex; flex-direction:column; gap:11px;
}
.esqueleto i{ display:block; height:12px; border-radius:6px; background:var(--crema); }
.esqueleto i:first-child{ height:16px; }
.esqueleto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);
  transform:translateX(-100%); animation:brillo 1.7s ease-in-out infinite;
}
@keyframes brillo{ to{ transform:translateX(100%); } }
.esq-txt{ padding:6px 20px 30px; font-size:13px; }
/* La fila que se acaba de marcar: se levanta un pelo y asienta con la curva elástica;
   la ficha de gente da un brinco. Solo esa fila y solo esa vez. */
.res.recien{ animation:asienta .5s cubic-bezier(.34,1.56,.64,1); }
.res.recien .res-gente{ animation:brinca .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes asienta{ 0%{ transform:none; } 30%{ transform:translateY(-4px); } 100%{ transform:none; } }
@keyframes brinca{ 0%{ transform:scale(.86); } 60%{ transform:scale(1.12); } 100%{ transform:none; } }
@media (prefers-reduced-motion:reduce){
  .cuenta-cambia, .entra, .esqueleto::after, .res.recien, .res.recien .res-gente{ animation:none; }
}

/* ───────── la entrada: el código primero, la huella primero ───────── */
.entrada-tit{ display:block; font-size:15px; font-weight:700; color:var(--tinta); margin-bottom:2px; }
.entrada-o{ text-align:center; font-size:13px; color:var(--apagado); margin:12px 0 0; }
.entrada #e-llave-caja .btn{ width:100%; }

/* El resultado de un gesto del buzón, en la página y no en un alert(): un renglón bajo el
   formulario, del color de lo que pasó. */
.b-aviso{ margin:0 14px 10px; padding:8px 12px; border-radius:9px; font-size:13px;
  background:var(--crema); border:1px solid var(--linea); color:var(--tinta2); }
.b-aviso[data-tono="bien"]{ color:var(--verde2); border-color:var(--verde); }
.b-aviso[data-tono="mal"]{ color:var(--rojo); border-color:var(--coral); }
/* «Aviso»: ni bien ni mal. Un buzón sin reservas al día siguiente no es una avería, es algo
   que mirar; el ámbar es el color que el panel ya usa para «todavía no». */
.b-aviso[data-tono="aviso"]{ color:var(--amber,#96690f); border-color:var(--amber,#96690f); }

/* El QR del primer día del guía: grande, sobre blanco y centrado, para que se escanee
   desde el otro lado de la mesa. */
.eq-qr{ flex-basis:100%; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:12px 0 4px; text-align:center; }
.eq-qr svg{ border-radius:9px; transition:opacity .3s; }
.eq-qr p{ margin:0; max-width:34ch; }

/* Lo que contestó el servidor de correo: para quien tenga que diagnosticar, no para el día a día. */
/* La nota de la contraseña cambia de color mientras se pega: verde cuando ya tiene la
   forma de una contraseña de aplicación, coral cuando seguro que no va a funcionar. */
.campo-nota[data-tono="bien"]{ color:var(--verde2); }
.campo-nota[data-tono="mal"]{ color:var(--rojo); }
/* La dirección propia de entrada: se lee entera y se copia de un toque. */
.b-direccion .b-dir{ display:inline-block; padding:4px 8px; margin-top:4px; background:var(--crema);
  border-radius:6px; font-size:13px; word-break:break-all; user-select:all; }
.b-detalle{ font-weight:400; color:var(--apagado); }
.b-detalle code{ display:block; padding:6px 8px; margin-top:4px; background:var(--crema);
  border-radius:6px; word-break:break-word; }

/* Dónde está abierta tu cuenta: una fila por aparato, con su botón de cerrar.
   `flex-basis:100%` porque vive dentro de `.acciones`, que es una fila con envoltura: sin
   ella el `details` se queda con cero de ancho y no se ve nada. */
#yo-aparatos{ flex-basis:100%; margin-top:10px; }
.ap-lista{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.ap-fila{ display:flex; align-items:center; gap:10px; padding:8px 10px;
  background:var(--crema); border:1px solid var(--linea); border-radius:9px; }
.ap-txt{ flex:1 1 auto; min-width:0; }
.ap-aqui{ background:var(--verde); color:#fff; border-radius:99px; padding:1px 8px; font-size:11.5px; }

/* Alta de recorridos: campos legibles y calendario revisable en móvil. */
.creador-tours{padding:20px;border-top:4px solid #219b88;max-width:100%;overflow-wrap:anywhere}
.creador-tours h3{margin-top:0}.creador-tours label{display:grid;gap:6px;margin:12px 0;font-weight:600}
.creador-tours input:not([type=checkbox]),.creador-tours select,.creador-tours textarea{box-sizing:border-box;width:100%;min-width:0;padding:10px;border:1px solid #aab9bc;border-radius:8px;font:inherit;background:var(--fondo,#fff);color:inherit}
.creador-tours button{margin:5px 6px 5px 0;white-space:normal}.ct-pasos{display:flex;flex-wrap:wrap;gap:4px}
.ct-pasos [aria-current=step],.ct-dias [aria-pressed=true]{background:#13695f;color:white;border-color:#13695f}
.ct-tour{border:1px solid #a6cfc7;border-radius:12px;margin:18px 0;padding:16px;min-width:0;background:rgba(33,155,136,.035)}
.ct-regla{border-left:3px solid #64aabb;padding:10px 14px;margin:12px 0;background:rgba(90,155,180,.05)}
.ct-dias{display:flex;flex-wrap:wrap}.ct-dias button{padding:8px;min-width:40px}
.creador-tours .ct-candidato{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #bdd2d1;border-radius:10px;font-weight:400}
.creador-tours [hidden]{display:none!important}.ct-candidato input{flex-shrink:0}.ct-candidato a{margin-left:auto}
.ct-semana{border-radius:10px;background:rgba(60,144,200,.08);padding:14px}.ct-todas{max-height:300px;overflow:auto}
@media(max-width:540px){.creador-tours{padding:12px}.ct-tour{padding:10px}.ct-pasos button{flex:1 1 40%}.ct-candidato{flex-wrap:wrap}.ct-regla{padding:8px}}

.creador-tours .ct-semana{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.creador-tours .ct-dia{padding:10px;border:1px solid var(--linea,#cbd5e1);border-radius:10px;background:var(--fondo,#f8fafc)}.creador-tours .ct-dia h4{margin:0 0 8px}.creador-tours .ct-dia p{font-size:.82rem}

/* Inicio del alta: una acción destacada y espacio para los datos en móvil. */
.creador-tours .ct-intro{color:var(--apagado);font-size:.9rem;margin:0 0 12px}
.creador-tours .ct-pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:12px 0}
.creador-tours .ct-pasos button{padding:8px 4px;min-height:44px;font-size:.78rem;margin:0;border-radius:7px;line-height:1.2}
.creador-tours .ct-principal{background:#126b60;color:white;border-color:#126b60;min-height:48px;font-weight:700}
.creador-tours [aria-invalid=true]{border:2px solid #a22b20!important}.creador-tours .ct-error-campo{color:#a22b20;font-weight:400}
.creador-tours fieldset label{font-size:.9rem}.creador-tours details{margin:12px 0}.creador-tours summary{cursor:pointer;padding:8px 0}
body:has(#b-creador-tours) .banda-instalar{display:none!important}
@media(min-width:760px){.creador-tours .ct-tour{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.creador-tours .ct-tour>details,.creador-tours .ct-tour>.ct-regla{grid-column:1/-1}}

#tours .creador-tours>p{padding:0;text-align:left;margin:8px 0;font-size:.9rem}
.creador-tours textarea{width:100%;min-height:84px;resize:vertical;font:inherit;padding:10px;border:1px solid var(--linea);border-radius:8px}
/* Días como grupo compacto: las reglas generales de botones no deben apilarlos. */
.creador-tours .ct-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.creador-tours .ct-dias button{width:100%;min-width:0;min-height:44px;margin:0;padding:8px 2px}
@media(max-width:540px){.creador-tours .ct-dias{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Horas declaradas del guía, dentro de su semana. */
.dispo-form{ width:100%; min-width:0; margin-top:8px; padding:12px; border:1px solid var(--linea); border-radius:12px; background:var(--papel); }
.dispo-form summary{ cursor:pointer; font-weight:650; overflow-wrap:anywhere; }
.dispo-form form{ margin-top:12px; }
.dispo-tramo{ display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin:10px 0; }
.dispo-campo{ flex:1 1 90px; min-width:0; }
.dispo-form input,.dispo-form select{ max-width:100%; min-width:0; }
.dispo-form button{ min-height:44px; }
.agenda-form{ margin:12px 14px; padding:12px; border:1px solid var(--linea); border-radius:12px; min-width:0; }
.agenda-form input{ max-width:100%; min-width:0; }
.agenda-form button{ min-height:44px; max-width:100%; white-space:normal; }