/* Módulo de agenda · hoja de estilo única.
   Dos acentos de color, uno por calendario: el verde-azulado de la consulta de
   compañía y el ocre del campo. En otro negocio serían los colores de sus recursos. */
:root{
  --ambar:#b45309; --ambar-cl:#f59e0b;
  --verde:#0f766e; --rojo:#b91c1c;
  --tinta:#0f172a; --gris:#64748b; --gris-cl:#94a3b8;
  --borde:#e2e8f0; --papel:#f4f7f9; --blanco:#fff;
  --sombra:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);

  /* ── EL ASPECTO ───────────────────────────────────────────────────────────────
     Lo que el negocio elige en Ajustes («cómo se ve tu web»): su color de marca, su
     fondo y su forma. Estos son los valores de FÁBRICA —con los que se veía la casa
     antes de que existiera todo esto—, y `templates/base.html` los reescribe con los
     del negocio cuando el negocio ha elegido.

     SE TOCAN ESTAS VARIABLES Y NO LAS REGLAS, a propósito: el color del negocio tiene
     que llegar de una vez a los botones, a los enlaces, a la cabecera, al calendario y
     a la portada. Repasando regla a regla se olvida una, y esa se queda turquesa en la
     web de una clienta.

     `--marca-rgb` es el mismo color en números sueltos: la hoja lo necesita así para
     los tintes de fondo (los `rgba(var(--marca-rgb),.1)`), porque un color con
     transparencia no se puede sacar de un hex sin `color-mix`, y eso no lo entienden
     todos los navegadores que hay por ahí. Lo calcula `aspecto.py`, que es quien sabe
     de colores en esta casa. */
  --marca:#0ea5b7; --marca-osc:#0e7490; --marca-rgb:14,165,183; --marca-clara:#22d3ee;
  --hero-a:#0b4f5e; --hero-b:#0e7490; --hero-c:#0f766e;
  --radio:15px;          /* tarjetas y paneles */
  --radio-g:20px;        /* los bloques grandes: la portada, el resumen */
  --radio-b:11px;        /* botones y campos */
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--papel); color:var(--tinta); min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:15.5px; line-height:1.5; -webkit-text-size-adjust:100%;
}
a{color:var(--marca-osc)}
h1,h2,h3{margin:0; line-height:1.25}
.contenedor{max-width:1080px; margin:0 auto; padding:0 16px}
.estrecho{max-width:760px}

/* ── cabecera ───────────────────────────────────────────────────────── */
.cab{background:var(--blanco); border-bottom:1px solid var(--borde); position:sticky; top:0; z-index:60}
.cab-in{max-width:1080px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinta); font-weight:700}
.marca .logo{width:36px; height:36px; border-radius:var(--radio-b); display:flex; align-items:center;
  justify-content:center; font-size:19px; background:linear-gradient(135deg,var(--marca),var(--marca-clara)); color:#fff}
.marca small{display:block; font-weight:500; font-size:11.5px; color:var(--gris); letter-spacing:.02em}
/* El logo, cuando el negocio sube una imagen en vez de conformarse con el emoji: ocupa el
   mismo hueco, y ahí dentro se ve ENTERO (`contain`), porque un logo recortado es peor que
   un logo con aire. Y si hay logo, el hueco se queda blanco: el degradado del color de
   marca detrás de un logo oscuro se come el logo. */
.marca .logo img, .cajon-cab .logo img{width:100%; height:100%; object-fit:contain; display:block}
.marca .logo:has(img), .cajon-cab .logo:has(img){background:var(--blanco);
  border:1px solid var(--borde); padding:3px}
/* ── el cajón del menú: los módulos del negocio, escondidos hasta que se piden ──
   El área del negocio crece por módulos, así que el menú no puede vivir en la
   cabecera: en un móvil no cabría y en el ordenador habría que rehacerlo cada vez.
   Va en un cajón que entra desde el lado, y dentro lo pinta MODULOS (app.py). */
.hamburguesa{width:40px; height:40px; flex:0 0 auto; padding:0; cursor:pointer;
  border:1px solid var(--borde); border-radius:var(--radio-b); background:var(--blanco);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px}
.hamburguesa:hover{background:#f1f5f9}
.hamburguesa span{display:block; width:17px; height:2px; border-radius:2px; background:var(--tinta)}
.velo{position:fixed; inset:0; background:rgba(15,23,42,.42); z-index:90;
  opacity:0; visibility:hidden; transition:opacity .18s}
.cajon{position:fixed; top:0; left:0; bottom:0; width:308px; max-width:88vw; z-index:100;
  background:var(--blanco); border-right:1px solid var(--borde); display:flex;
  flex-direction:column; overflow-y:auto; transform:translateX(-102%);
  transition:transform .22s ease; box-shadow:0 10px 40px rgba(15,23,42,.18)}
body.menu-abierto .velo{opacity:1; visibility:visible}
body.menu-abierto .cajon{transform:none}
body.menu-abierto{overflow:hidden}
.cajon-cab{display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--borde)}
.cajon-cab .logo{width:38px; height:38px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:19px; background:linear-gradient(135deg,var(--marca),var(--marca-clara)); color:#fff}
.cajon-tit{flex:1; font-weight:700; line-height:1.25}
.cajon-tit small{display:block; font-weight:500; font-size:11.5px; color:var(--gris);
  text-transform:uppercase; letter-spacing:.06em}
.cajon-x{border:none; background:none; padding:6px; font-size:17px; color:var(--gris); cursor:pointer}
.cajon-x:hover{color:var(--tinta)}
.cajon-nav{flex:1; padding:12px 10px}
.cajon-grupo{padding:14px 12px 6px; font-size:11.5px; font-weight:700; color:var(--gris);
  text-transform:uppercase; letter-spacing:.06em}
.cajon-nav .cajon-grupo:first-child{padding-top:2px}
.cajon-enlace{display:flex; align-items:flex-start; gap:11px; padding:10px 12px; border-radius:11px;
  text-decoration:none; color:var(--tinta); font-weight:600; font-size:14.5px}
.cajon-enlace i{flex:0 0 auto; width:22px; text-align:center; font-style:normal; font-size:17px; line-height:1.3}
.cajon-enlace small{display:block; margin-top:1px; font-weight:500; font-size:12.5px; color:var(--gris)}
.cajon-enlace:hover{background:#f1f5f9}
.cajon-enlace.on{background:rgba(var(--marca-rgb),.12); color:var(--marca-osc)}
.cajon-enlace.on small{color:var(--marca-osc); opacity:.85}
.cajon-pie{border-top:1px solid var(--borde); padding:10px}
.cajon-nota{margin:0; padding:6px 12px 4px; font-size:12px; color:var(--gris-cl)}

/* ── piezas sueltas ─────────────────────────────────────────────────── */
.cuerpo{padding:26px 0 60px}
.tarjeta{background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
  padding:20px; box-shadow:var(--sombra)}
.tarjeta + .tarjeta{margin-top:16px}
h1.tit{font-size:27px; margin-bottom:6px}
.sub{color:var(--gris); margin:0 0 22px; font-size:15px}
.etiqueta{display:block; font-size:12.5px; font-weight:700; color:var(--gris);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px}
input,select,textarea{width:100%; padding:11px 12px; border:1px solid var(--borde); border-radius:10px;
  font:inherit; font-size:15px; background:var(--blanco); color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(var(--marca-rgb),.25); border-color:var(--marca)}
.campo{margin-bottom:13px}
.boton{display:inline-flex; align-items:center; gap:8px; border:none; border-radius:var(--radio-b);
  padding:12px 20px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none;
  background:var(--marca); color:#fff}
.boton:hover{background:var(--marca-osc)}
.boton.sec{background:var(--blanco); color:var(--tinta); border:1px solid var(--borde)}
.boton.sec:hover{background:#f1f5f9; color:var(--tinta)}
.boton.wa{background:#25d366; color:#04331a}
.boton.wa:hover{background:#1fb959}
/* El de Telegram, con el azul de Telegram. El texto va OSCURO, no blanco, por lo mismo
   que el de WhatsApp: sobre un color claro el blanco no se lee (2,7:1 con este azul). */
.boton.tg{background:#2aabee; color:#062a3d}
.boton.tg:hover{background:#1e97d6}
.boton.rojo{background:#fff; color:var(--rojo); border:1px solid #fecaca}
.boton.rojo:hover{background:#fef2f2}
.boton.peq{padding:8px 13px; font-size:13.5px; border-radius:9px}
.aviso{padding:11px 14px; border-radius:11px; font-size:14px; font-weight:600; margin:0 0 16px}
.aviso.ok{background:rgba(15,118,110,.1); color:var(--verde)}
.aviso.mal{background:rgba(185,28,28,.09); color:var(--rojo)}
.aviso.info{background:rgba(var(--marca-rgb),.1); color:var(--marca-osc)}
.pista{color:var(--gris); font-size:13px; margin:8px 0 0}
.solo-movil{display:none}
.sello{position:fixed; left:12px; bottom:10px; background:rgba(15,23,42,.72); color:#fff;
  font-size:11px; letter-spacing:.12em; padding:5px 10px; border-radius:6px; z-index:80}
.fila{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.fila.fin{margin-top:18px}

/* ── portada del negocio ────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,var(--hero-a) 0%,var(--hero-b) 55%,var(--hero-c) 100%); color:#fff;
  border-radius:var(--radio-g); padding:32px 26px; margin-bottom:22px}
.hero h1{font-size:31px; margin-bottom:8px}
.hero p{margin:0; color:rgba(255,255,255,.86); font-size:16px; max-width:640px}
.hero .datos{margin-top:16px; display:flex; gap:18px; flex-wrap:wrap; font-size:14px;
  color:rgba(255,255,255,.9)}
.calendarios{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
.cal{border:1px solid var(--borde); border-radius:var(--radio-g); background:var(--blanco); overflow:hidden;
  box-shadow:var(--sombra); display:flex; flex-direction:column}
.cal-cab{padding:18px 20px; color:#fff; display:flex; align-items:center; gap:13px}
.cal-cab .em{font-size:30px; line-height:1}
.cal-cab b{display:block; font-size:17px}
.cal-cab span{font-size:13px; opacity:.9}
.cal-cuerpo{padding:16px 20px 20px; flex:1; display:flex; flex-direction:column}
.serv{display:flex; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px dashed var(--borde);
  font-size:14.5px}
.serv:last-of-type{border-bottom:none}
.serv .d{color:var(--gris); font-size:13px; margin-left:auto; white-space:nowrap}
.cal .boton{margin-top:auto; justify-content:center}
.libres{margin-top:10px; font-size:13.5px; color:var(--verde); font-weight:600}

/* ── asistente de reserva ────────────────────────────────────────────── */
.pasos{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap}
.paso{flex:1; min-width:110px; padding:10px 12px; border-radius:11px; background:var(--blanco);
  border:1px solid var(--borde); font-size:13px; color:var(--gris); font-weight:600}
.paso.hecho{border-color:rgba(15,118,110,.4); color:var(--verde); background:rgba(15,118,110,.06)}
.paso.activo{border-color:var(--marca); color:var(--marca-osc); background:rgba(var(--marca-rgb),.09)}
.opciones{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.opcion{border:1.5px solid var(--borde); border-radius:13px; padding:15px; background:var(--blanco);
  text-decoration:none; color:var(--tinta); display:block}
.opcion:hover{border-color:var(--marca); background:#f8fdfe}
.opcion.on{border-color:var(--marca); background:rgba(var(--marca-rgb),.08); box-shadow:0 0 0 3px rgba(var(--marca-rgb),.1)}
.opcion b{display:block; font-size:15.5px}
.opcion span{color:var(--gris); font-size:13.5px}
.opcion .precio{float:right; font-weight:700; color:var(--verde)}
.dias{display:flex; gap:9px; overflow-x:auto; padding:4px 2px 10px}
.dia{flex:0 0 auto; min-width:88px; text-align:center; border:1.5px solid var(--borde); border-radius:12px;
  padding:10px 8px; background:var(--blanco); text-decoration:none; color:var(--tinta)}
.dia:hover{border-color:var(--marca)}
.dia.on{border-color:var(--marca); background:rgba(var(--marca-rgb),.1)}
.dia b{display:block; font-size:15px; text-transform:capitalize}
.dia span{font-size:12px; color:var(--gris)}
.horas{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:9px}
.hora{border:1.5px solid var(--borde); border-radius:11px; padding:11px 6px; text-align:center;
  background:var(--blanco); text-decoration:none; color:var(--tinta); font-weight:700}
.hora:hover{border-color:var(--marca)}
.hora.on{border-color:var(--marca); background:var(--marca); color:#fff}
.rejilla2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
/* Quién viene y por dónde se le avisa, en UNA línea (14/10): nombre, teléfono y correo
   son la misma cosa —la ficha del cliente— y en dos filas el correo parecía otra cosa.
   El nombre se lleva más sitio porque es el más largo. */
.rejilla3{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:12px}
/* Panel a un lado y lo que se mira al otro (la ficha de un cliente, el buzón). Va aquí
   y no en un `style=` de la plantilla porque un estilo en línea se merienda al del
   móvil: la pantalla se quedaba a dos columnas y la segunda se salía por la derecha. */
.rejilla-lado{display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:16px;
  align-items:start}
.rejilla-lado.ancha{grid-template-columns:minmax(280px,420px) 1fr}
/* `min-width:0` en las columnas: sin él, una tabla ancha dentro de una columna estira
   la columna (y la pantalla entera) en vez de deslizarse dentro de su marco. */
.rejilla-lado > *{min-width:0}
@media(max-width:820px){.rejilla-lado,.rejilla-lado.ancha{grid-template-columns:1fr}}
/* En el móvil, la ficha del cliente se parte: el nombre arriba y el teléfono y el correo
   en dos columnas, que son cortos (un teléfono y un correo caben de sobra a media
   pantalla, y apilados los tres el formulario se hace larguísimo). */
@media(max-width:620px){
  .rejilla2{grid-template-columns:1fr}
  .rejilla3{grid-template-columns:1fr 1fr}
  .rejilla3 > .campo:first-child{grid-column:1 / -1}
}

/* ── confirmación de cita ────────────────────────────────────────────── */
.ticket{background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio-g); overflow:hidden;
  box-shadow:var(--sombra)}
.ticket .cabecera{padding:20px; color:#fff; background:linear-gradient(135deg,var(--marca),var(--verde))}
.ticket .cabecera b{font-size:20px; display:block}
.ticket .cuerpo-t{padding:20px}
.linea{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--borde); font-size:15px}
.linea:last-child{border-bottom:none}
.linea .k{color:var(--gris); min-width:120px; font-size:13.5px; padding-top:2px}
.linea .v{font-weight:600; flex:1}
.codigo{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:19px; letter-spacing:.14em;
  background:#f1f5f9; border-radius:10px; padding:9px 14px; display:inline-block; font-weight:700}
/* El correo del negocio: la dirección, tal cual se escribiría. Sin el espaciado ancho
   del código, que en una dirección no se lee. */
.direccion{display:block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:16px;
  font-weight:700; background:#f1f5f9; border-radius:10px; padding:10px 14px; color:var(--marca-osc);
  word-break:break-all}
/* En el buzón, si el mensaje entra o sale de casa: dos colores y se ve de un vistazo.
   Ojo con los nombres: «.entra» y «.sale» ya son las burbujas del chat de WhatsApp, así
   que estos van con su propio prefijo y no se pisan. */
.sentido{flex:0 0 auto; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 7px; border-radius:6px; margin-top:2px}
.sentido-entra{background:rgba(var(--marca-rgb),.14); color:var(--marca-osc)}
.sentido-sale{background:rgba(180,83,9,.13); color:var(--ambar)}
/* El buzón reutiliza la fila de los recordatorios, pero sin dejar que el texto largo
   empuje la etiqueta a otra línea (de ahí el `min-width:0`: sin él, un flex no encoge
   por debajo de lo que mide su contenido y la fila se parte). */
.buzon .rec{flex-wrap:nowrap; align-items:flex-start}
.buzon .rec .quien{min-width:0}
.buzon .quien small{overflow-wrap:anywhere}
@media(max-width:620px){ .buzon .rec{flex-wrap:wrap} }

/* ── agenda (el calendario del negocio) ──────────────────────────────── */
.barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.barra .hoy{font-size:20px; font-weight:700}
.tira{display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin-bottom:12px}
.tira a{flex:0 0 auto; min-width:78px; text-align:center; text-decoration:none; color:var(--tinta);
  border:1.5px solid var(--borde); border-radius:12px; padding:8px 6px; background:var(--blanco)}
.tira a.on{border-color:var(--marca); background:rgba(var(--marca-rgb),.1)}
.tira a.hoy{box-shadow:inset 0 -3px 0 var(--ambar-cl)}
.tira a b{display:block; font-size:16px}
.tira a span{font-size:11.5px; color:var(--gris); text-transform:capitalize}
.tira a i{display:block; font-size:11px; color:var(--marca-osc); font-style:normal; font-weight:700}
.rejilla-marco{overflow-x:auto}
.rejilla{display:grid; background:var(--blanco); border:1px solid var(--borde); border-radius:14px;
  overflow:hidden; box-shadow:var(--sombra)}
.col-cab{padding:10px 12px; border-bottom:2px solid var(--borde); display:flex; align-items:center;
  gap:8px; font-weight:700; font-size:14.5px}
.col-cab .punto{width:10px; height:10px; border-radius:50%}
.col-cab small{display:block; font-weight:500; color:var(--gris); font-size:12px}
.col{position:relative; border-left:1px solid var(--borde)}
.linea-hora{position:absolute; left:0; right:0; border-top:1px solid #eef2f6; color:var(--gris-cl);
  font-size:11px; padding-left:4px}
.abierto{position:absolute; left:0; right:0; background:repeating-linear-gradient(45deg,#fbfdfe,#fbfdfe 6px,#f4f8fa 6px,#f4f8fa 12px)}
.cerrado{position:absolute; left:0; right:0; background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 5px,#eef2f6 5px,#eef2f6 10px)}
.cita{position:absolute; left:3px; right:3px; border-radius:10px; padding:5px 8px; overflow:hidden;
  border:0; border-left:4px solid var(--marca); text-align:left; font-family:inherit;
  background:rgba(var(--marca-rgb),.13); color:var(--tinta); font-size:11.5px; line-height:1.32;
  box-shadow:0 1px 3px rgba(15,23,42,.08); cursor:pointer}
.cita:hover{filter:brightness(.97)}
.cita .h{display:block; font-weight:700; font-size:12.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.cita span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85}
.cita .av{position:absolute; right:6px; top:5px; font-size:9.5px; font-weight:700;
  color:var(--ambar); text-transform:uppercase; letter-spacing:.04em}
.cita.pendiente{border-style:dashed; opacity:.92}
.cita.asistida{opacity:.62}
.cita.no_vino{opacity:.5; text-decoration:line-through}

/* ── whatsapp ────────────────────────────────────────────────────────── */
.wa-marco{display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:22px; align-items:start}
@media(max-width:820px){.wa-marco{grid-template-columns:1fr}}
.movil{background:#0b141a; border-radius:26px; padding:12px; box-shadow:var(--sombra)}
.movil-top{display:flex; align-items:center; gap:10px; padding:4px 6px 12px; color:#e9edef}
.movil-top .av{width:38px; height:38px; border-radius:50%; background:#25d366; color:#04331a;
  display:flex; align-items:center; justify-content:center; font-size:19px}
.movil-top b{display:block; font-size:14px}
.movil-top small{color:#8696a0; font-size:11.5px}
.chat{height:430px; overflow-y:auto; padding:10px 6px; display:flex; flex-direction:column; gap:8px;
  background:#0b141a;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:22px 22px}
.burbuja{max-width:86%; padding:8px 11px; border-radius:12px; font-size:14px; white-space:pre-wrap;
  word-wrap:break-word}
.entra{align-self:flex-start; background:#202c33; color:#e9edef; border-top-left-radius:3px}
.sale{align-self:flex-end; background:#005c4b; color:#e9edef; border-top-right-radius:3px}
.chat-form{display:flex; gap:8px; padding:10px 4px 2px}
.chat-form input{background:#202c33; border:none; color:#e9edef; border-radius:20px}
.chat-form input::placeholder{color:#8696a0}
.chat-form button{border-radius:50%; width:44px; height:44px; padding:0; justify-content:center;
  font-size:17px; background:#25d366; color:#04331a; border:none; cursor:pointer}
.sugerencias{display:flex; gap:7px; flex-wrap:wrap; padding:8px 4px 0}
/* El mismo chat, pero con los colores de Telegram: deja claro que es otro canal y no
   una copia del móvil de WhatsApp.
   ⚠️ TENÍA 150 px DE ALTO Y NINGÚN MARCO, y al lado del de WhatsApp eso no se lee como un
   chat: se lee como una caja gris suelta — «la pantalla que le falta». Es el MISMO asistente
   por otro cable, así que se enseña en el MISMO teléfono y a la MISMA altura; lo único que
   cambia es la ropa (fondo oscuro de Telegram, cabecera azul). */
.movil.tg{background:#17212b}
.movil.tg .movil-top .av{background:#2aabee; color:#fff}
.chat.tg{background:#0e1621; background-image:none}
.chat.tg .entra{background:#182533}
.chat.tg .sale{background:#2b5278}
.chat-form.tg input{background:#242f3d}
.chat-form.tg input::placeholder{color:#7d8b99}
.chat-form.tg button{background:#2aabee; color:#fff}
.sugerencias.tg button{background:#242f3d; color:#aebac1; border-color:#2a3942}

/* Los dos teléfonos, uno al lado del otro: lo que se viene a ver aquí es la comparación
   (el mismo asistente contestando por los dos caminos). En pantalla estrecha se apilan. */
.dos-moviles{display:grid; grid-template-columns:repeat(2, minmax(280px, 1fr)); gap:22px;
  align-items:start}
@media(max-width:820px){.dos-moviles{grid-template-columns:1fr}}
.sugerencias button{background:#202c33; color:#aebac1; border:1px solid #2a3942; border-radius:20px;
  padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer}
.rec{border:1px solid var(--borde); border-radius:12px; padding:13px 15px; margin-bottom:10px;
  background:var(--blanco); display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.rec .quien{flex:1}
.rec b{display:block; font-size:14.5px}
.rec small{color:var(--gris); font-size:13px}
.rec .cuando{font-weight:700; font-size:14px; white-space:nowrap}
/* En el móvil la lista de recordatorios deja sitio al sello de la demo. */
@media(max-width:600px){
  .rec{gap:8px}
  .rec .cuando{font-size:13.5px}
  .sello{font-size:10px; padding:4px 8px; opacity:.9}
  .pie{padding-bottom:44px}
}

/* ── ajustes ─────────────────────────────────────────────────────────── */
.rec-caja{border:1px solid var(--borde); border-radius:13px; padding:15px; margin-bottom:13px; background:var(--blanco)}
.rec-caja h4{margin:0 0 4px; font-size:16px; display:flex; align-items:center; gap:8px}
.rec-caja .punto{width:11px; height:11px; border-radius:50%; display:inline-block}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.chip{background:#f1f5f9; border-radius:20px; padding:4px 11px; font-size:12.5px; color:var(--gris)}
.chip b{color:var(--tinta)}
.chip.baja{background:#f1f5f9; color:var(--gris); opacity:.75}
.chip.baja b{text-decoration:line-through}

/* ── las filas editables de los ajustes ──────────────────────────────────────────────
   Las excepciones y los servicios se enseñaban como pastillas de solo lectura: se podían
   AÑADIR, pero no corregir ni quitar. Un precio mal tecleado se quedaba ahí para siempre, y
   la única salida era añadir otro encima. Ahora cada fila es su propio formulario: se cambia
   el dato, se guarda, o se quita. Se hace con una rejilla y no con una tabla porque un
   `<form>` no puede envolver una `<tr>` —y repartir un formulario por media tabla con el
   atributo `form=` funciona, pero deja el HTML en un rompecabezas que nadie relee—. */
.fila-ed{display:grid; grid-template-columns:minmax(120px,1fr) 96px 96px auto auto;
  gap:8px; align-items:center; padding:7px 0; border-top:1px solid var(--borde)}
.fila-ed:first-of-type{border-top:none}
/* `display:contents` en los dos formularios de la fila: así sus campos entran a formar
   parte de la rejilla del contenedor y la fila sigue leyéndose como una fila, aunque por
   debajo sean DOS formularios distintos —uno guarda, otro borra—. Es lo que permite tener
   el «Guardar» y el «✕» con su propia `action` explícita, sin `formaction` ni malabares. */
.fila-ed form{display:contents}
/* El calendario de trabajo no lleva «Guardar» por fila: la fila entera es UN formulario que
   se guarda de una vez (ver `negocio_calendario`), así que solo tiene los cuatro campos. */
.fila-ed.es-excepcion{grid-template-columns:150px 84px 84px minmax(120px,1fr) 130px auto auto}
/* ⚠️ LAS DOS ÚLTIMAS COLUMNAS, CON ANCHO FIJO (16/10 — lo dijo Marcos: *«al añadir los
   servicios, los precios, duración, margen, quedan un poco desalineados de las columnas»*).
   El fallo era de verdad y no se ve mirando el HTML: la cabecera es OTRA rejilla distinta,
   con casillas vacías al final, así que sus columnas `auto` se quedan en CERO. La rejilla
   reparte ese hueco entre las columnas elásticas —que crecen 72 px y 51 px— y todo lo que va
   detrás se corre hacia la derecha: «Duración» caía 72 px a la derecha de la casilla de los
   minutos. Con ancho fijo, cabecera y fila miden lo mismo y cada etiqueta cae encima de su
   campo.
   Y ya no hay columna de «Guardar»: la tabla entera se guarda de una vez con el botón de
   arriba (16/10, Marcos: *«no hace falta múltiples botones de guardar para cada línea; uno
   arriba, donde «servicios de calendario», suficiente»*), así que a la derecha solo queda el
   «✕» de quitar la línea. */
.fila-ed.es-servicio{grid-template-columns:62px minmax(140px,1.4fr) 92px 92px 88px minmax(108px,1fr) 128px 36px}
/* Y el botón clavado a su columna, no al ancho que le salga del texto: si el «✕» midiera
   33 px un día y 36 px otro (otra fuente, otro zoom), la cabecera volvería a descuadrarse. */
.fila-ed.es-servicio .boton-x{width:100%}
.fila-ed input, .fila-ed select{margin:0; padding:6px 8px; font-size:13.5px; width:100%}
.fila-ed .et, .et-etiqueta{font-size:12px; font-weight:700; color:var(--gris);
  text-transform:uppercase; letter-spacing:.03em}
.et-etiqueta{margin:14px 0 2px}
.fila-ed.etiq{padding-bottom:2px}.fila-ed .acciones{display:flex; gap:6px; justify-content:flex-end}
.fila-ed.es-servicio.inactivo{opacity:.6}
/* El título de la tabla de servicios, con SU único «Guardar» a la derecha (16/10). El botón
   va aquí y no en la fila de títulos porque esa fila se esconde en el móvil
   (`.fila-ed.etiq{display:none}`): en un móvil, un «Guardar» dentro de la cabecera es un
   «Guardar» que no existe. */
.fila-ed-titulo{display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap}
.fila-ed-titulo .et-etiqueta{margin:14px 0 2px}
/* El «✕» de quitar: pequeño, en gris, y se pone rojo solo cuando le vas a dar. Nunca
   compite con «Guardar», que es lo que se hace el 95 % de las veces. */
.boton-x{border:1px solid var(--borde); background:var(--blanco); color:var(--gris);
  border-radius:9px; padding:6px 10px; font-size:13px; cursor:pointer; line-height:1;
  font-family:inherit; width:auto}
.boton-x:hover{border-color:var(--rojo); color:var(--rojo); background:rgba(185,28,28,.06)}
/* El total de la semana, al lado de los botones del calendario: es la respuesta a «¿ya está
   montada la semana?», que es la pregunta que se viene a hacer a esta pantalla. */
.cal-cuenta{font-size:13px; font-weight:600; color:var(--tinta); margin-left:2px}
.cal-vacio{margin:8px 0 0}
/* ── el calendario de trabajo, un renglón por día ────────────────────────────────────
   Siete renglones fijos, Lunes a Domingo, con sus tramos dentro. El renglón del día que no
   trabaja se ve vacío, y eso es un dato: antes, con un renglón por tramo, el miércoles libre
   simplemente no existía y no había forma de saber si estaba libre o se había olvidado.
   El nombre del día lleva ancho fijo para que los siete se lean en columna, y el «+» va al
   final del renglón —siempre en el mismo sitio— para no tener que buscarlo siete veces. */
.cal-dia{display:flex; align-items:center; gap:14px; padding:5px 0; flex-wrap:wrap}
.cal-dia + .cal-dia{border-top:1px solid var(--borde)}
.cal-dia-nombre{width:104px; flex:none; font-size:13.5px; font-weight:700; color:var(--tinta)}
.cal-franjas{display:flex; align-items:center; gap:16px; flex:1; flex-wrap:wrap}
/* Un tramo son dos horas y su «✕». Los dos campos con el mismo ancho para que las horas
   queden en columna de un día al siguiente y la semana se pueda leer en vertical. */
.franja{display:flex; align-items:center; gap:6px}
.franja input{width:74px; margin:0; padding:6px 8px; font-size:13.5px; text-align:center}
.franja .guion{color:var(--gris-cl); font-weight:600}
.franja .boton-x{padding:6px 8px}
/* El «+» de añadir otro tramo al día. En verde y no en gris como los «✕»: añadir es lo que
   se viene a hacer aquí, quitar es lo que se hace cuando algo sobra. */
.boton-x.mas{font-weight:700; font-size:15px; color:var(--verde); border-color:#a7f3d0}
.boton-x.mas:hover{border-color:var(--verde); color:var(--verde); background:rgba(4,120,87,.07)}
@media (max-width:760px){
  /* En un móvil ocho columnas fijas no caben: se apilan de dos en dos, que es lo que hace
     cualquier formulario de verdad. La etiqueta de la fila pasa a ocupar el ancho entero. */
  .fila-ed, .fila-ed.es-excepcion, .fila-ed.es-servicio{grid-template-columns:1fr 1fr; gap:6px}
  /* El renglón del día sí cabe entero en un móvil, porque son campos cortos, y ahí es donde
     más falta hace: apilado, cada día ocupa dos renglones y el plan de la semana deja de
     verse de un vistazo, que es justo para lo que está. */
  .cal-dia{gap:8px; padding:6px 0}
  .cal-dia-nombre{width:82px; font-size:13px}
  .cal-franjas{gap:10px}
  .franja input{width:58px; padding:6px 4px}
  .fila-ed .acciones{justify-content:flex-start}
  .fila-ed.etiq{display:none}
}

/* ── el «deshacer» de la agenda ──────────────────────────────────────────────────────
   Una franja fina, debajo de la barra del día. Tiene que verse sin buscarla —cuando
   hace falta es justo cuando acabas de darte cuenta del error— pero no puede tapar la
   rejilla ni empujarla: por eso va en flujo, no flotando. */
.deshacer{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px;
  padding:8px 12px; border-radius:11px; background:#eef2ff; border:1px solid #c7d2fe;
  border-left:4px solid var(--marca)}
.deshacer .d-txt{font-size:13.5px; color:#3730a3; min-width:0; overflow-wrap:anywhere}
.deshacer .d-txt b{color:var(--tinta)}
.deshacer form{margin:0}
.deshacer .d-x{border:0; background:none; color:#6366f1; font-size:14px;
  cursor:pointer; padding:4px 8px; border-radius:8px; font-family:inherit; line-height:1}
.deshacer .d-x:hover{background:#e0e7ff}
/* La tira de «avisa al cliente del cambio», al mover una cita. Misma forma que el deshacer
   —las dos son lo mismo: un aviso de lo que acabas de hacer, con la salida al lado— pero en
   verde, porque aquí no hay nada que deshacer: hay algo que hacer. */
.avisar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px;
  padding:8px 12px; border-radius:11px; background:#ecfdf5; border:1px solid #a7f3d0;
  border-left:4px solid var(--verde)}
.avisar .d-txt{font-size:13.5px; color:#065f46; min-width:0; overflow-wrap:anywhere}
.avisar .d-txt b{color:var(--tinta)}
.avisar form{margin:0}
.avisar .d-x{border:0; background:none; color:var(--verde); font-size:14px;
  cursor:pointer; padding:4px 8px; border-radius:8px; font-family:inherit; line-height:1}
.avisar .d-x:hover{background:#d1fae5}

/* LOS BOTONES DE LA TIRA VAN JUNTOS, EN UN GRUPO. Antes cada botón era un hijo suelto del
   flex, y el ✕ llevaba `margin-left:auto` para irse al extremo derecho. Ese margen NUNCA
   hizo nada: el ✕ vive dentro de un <form>, y un margen automático no empuja desde dentro de
   un hijo que no es flex. Así que al no caber, el ✕ se quedaba SOLO en la línea de abajo,
   pegado a lo que tuviera delante, y parecía un botón que no era de la tira. Lo vio Marcos.
   Con el grupo, o caben todos en la línea o baja el grupo entero — pero nunca se separa el
   botón de cerrar de los demás. El `margin-left:auto` va aquí, en el grupo: eso sí lo empuja. */
.avisar .d-acc, .deshacer .d-acc{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-left:auto}
.avisar .d-acc form, .deshacer .d-acc form{margin:0}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--borde)}
th{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--gris)}
/* Lo que va en `code` son direcciones y tokens: cadenas sin un solo espacio. Una URL de
   Telegram mide 60 caracteres y sin esto se lleva por delante el ancho de la pantalla en un
   móvil — la página entera se puede mover de lado y no hay quien la lea. Partirlas por donde
   haga falta es lo único que las mete dentro. */
code{overflow-wrap:anywhere}
details{background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:12px 15px;
  margin-top:12px}
summary{cursor:pointer; font-weight:700; font-size:14.5px}
details[open] summary{margin-bottom:12px}
/* LO TÉCNICO, PLEGADO (Marcos, 16/10: «quita la parte técnica… o ocúltala al menos, porque
   nadie va a saber gestionar lo del WhatsApp, Telegram tokens, etc. … Simplifica todo»).
   Un `details` de la casa es una tarjeta blanca con borde; este va DENTRO de una tarjeta, así
   que se pinta plano y con línea de puntos: tiene que leerse como «apéndice para quien monte
   esto», no como una caja más que se puede configurar. El resumen va en gris y algo más
   pequeño que un desplegable normal, a propósito: no invita a abrirlo. */
details.tecnico{background:transparent; border:1px dashed var(--borde); border-radius:10px;
  padding:10px 13px; margin-top:16px}
details.tecnico>summary{font-weight:600; font-size:13.5px; color:var(--gris)}
details.tecnico[open]>summary{margin-bottom:10px}
details.tecnico table{margin-top:4px}
.pie{border-top:1px solid var(--borde); background:var(--blanco); padding:18px 0; margin-top:40px;
  color:var(--gris); font-size:13px}
.pie .contenedor{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}

/* ── móvil: la marca encoge y el acceso a la página de citas se va al cajón ──── */
@media(max-width:600px){
  .cab-in{padding:8px 12px; gap:10px}
  .cab .boton.sec{display:none}
  .marca .logo{width:32px; height:32px; font-size:17px}
  .marca small{display:none}
  h1.tit{font-size:23px}
  .hero{padding:24px 18px}
  .hero h1{font-size:25px}
  .tarjeta{padding:16px}
  .cuerpo{padding:18px 0 50px}
  /* En el móvil los dos calendarios no caben de pie: se les da anchura de sobra y
     la rejilla se desliza en horizontal, así los nombres se leen enteros. */
  .rejilla{min-width:540px}
  .solo-movil{display:block}
}

/* ══════════════════════ el cuadro de mandos (pantalla de INICIO) ══════════════════════
   El resumen del negocio. La regla de esta pantalla es una: primero la forma, después
   el número. Un «19» hay que leerlo; una barra que crece, no. Por eso casi todo lo que
   hay aquí abajo son barras y aros, y los números gordos se guardan para los cuatro de
   arriba, que son los que se miran de reojo mientras se atiende a alguien. */

/* ── la cabecera: el saludo y el día de hoy ─────────────────────────────────── */
.resumen-cab{background:linear-gradient(150deg,var(--hero-a) 0%,var(--hero-b) 52%,var(--hero-c) 100%);
  color:#fff; border-radius:var(--radio-g); padding:26px 28px; box-shadow:var(--sombra)}
.resumen-cab .fecha{font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.75); font-weight:700}
.resumen-cab h1{font-size:30px; margin:6px 0 4px}
.resumen-cab .frase{margin:0; color:rgba(255,255,255,.9); font-size:16px; max-width:660px}
.resumen-cab .frase b{color:#fff}
.cifras{display:flex; gap:28px; flex-wrap:wrap; margin-top:20px;
  border-top:1px solid rgba(255,255,255,.22); padding-top:16px}
.cifra b{display:block; font-size:34px; line-height:1; letter-spacing:-.02em}
.cifra span{font-size:12.5px; color:rgba(255,255,255,.78); text-transform:uppercase;
  letter-spacing:.05em; font-weight:700}
.cifra a{color:inherit; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.5)}

/* ── los cuatro números de arriba ───────────────────────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;
  margin-top:16px}
.kpi{background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
  padding:16px 18px; box-shadow:var(--sombra); position:relative; overflow:hidden}
.kpi::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--marca)}
.kpi.aviso-k::before{background:var(--ambar-cl)}
.kpi b{display:block; font-size:32px; line-height:1.1; letter-spacing:-.02em}
.kpi span{display:block; font-size:13px; color:var(--gris); font-weight:600}
.kpi .icono{position:absolute; right:12px; top:10px; font-size:22px; opacity:.3}
.kpi.rojo::before{background:var(--rojo)}

/* ── la cinta del día: las citas de hoy, una detrás de otra ─────────────────── */
.cinta{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px}
.cinta-vacia{color:var(--gris); font-size:14px; padding:10px 2px}
.chip-cita{flex:0 0 auto; width:178px; background:var(--blanco); border:1px solid var(--borde);
  border-left:5px solid var(--marca); border-radius:12px; padding:11px 13px;
  box-shadow:0 1px 2px rgba(15,23,42,.05)}
.chip-cita.pasada{opacity:.5}
.chip-cita .h{font-weight:800; font-size:16px}
.chip-cita .q{font-size:13.5px; font-weight:600; margin-top:2px; overflow-wrap:anywhere}
.chip-cita .s{font-size:12px; color:var(--gris); margin-top:3px; overflow-wrap:anywhere}
.chip-cita .e{font-size:11px; font-weight:700; color:var(--ambar); text-transform:uppercase;
  letter-spacing:.04em; margin-top:5px}

/* ── los paneles de gráficos ─────────────────────────────────────────────────── */
.paneles{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:16px;
  margin-top:16px}
.panel{background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
  padding:18px 20px 16px; box-shadow:var(--sombra); min-width:0}
.panel > h3{font-size:15.5px; margin-bottom:2px}
.panel > .pista{margin-top:2px; margin-bottom:12px}
.panel svg{display:block; width:100%; height:auto}
.panel.ancho{grid-column:1 / -1}
.barra rect{transition:opacity .15s}
.barra:hover rect{opacity:.75}

/* la leyenda de la dona: color, nombre, número */
.leyenda{margin-top:12px}
.leyenda-i{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13.5px;
  border-bottom:1px dashed var(--borde)}
.leyenda-i:last-child{border-bottom:none}
.leyenda-i .pt{width:11px; height:11px; border-radius:3px; flex:0 0 auto}
.leyenda-i .nm{flex:1; min-width:0; overflow-wrap:anywhere}
.leyenda-i .nn{font-weight:800}
.leyenda-i .pc{color:var(--gris); font-size:12.5px; min-width:34px; text-align:right}

/* barras horizontales: el reparto entre los calendarios del negocio */
.barra-h{margin-top:12px}
.barra-h .cab{display:flex; align-items:baseline; gap:8px; font-size:13.5px;
  margin-bottom:5px}
.barra-h .cab .nm{font-weight:700; flex:1; min-width:0; overflow-wrap:anywhere}
.barra-h .cab .nn{font-weight:800}
.barra-h .cab .pc{color:var(--gris); font-size:12.5px}
.barra-h .via{height:9px; border-radius:999px; background:var(--papel); overflow:hidden}
.barra-h .via i{display:block; height:100%; border-radius:999px; min-width:3px}
.medidor{margin-top:12px}
.medidor .cab{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:5px}
.medidor .cab b{font-weight:700}
.medidor .via{height:9px; border-radius:999px; background:var(--papel); overflow:hidden}
.medidor .via i{display:block; height:100%; border-radius:999px}
.medidor .pista{margin-top:3px; font-size:12px}

/* ── los próximos eventos, día a día ────────────────────────────────────────── */
.eventos{margin-top:4px}
.ev-dia{border-top:1px solid var(--borde); padding:12px 0}
.ev-dia:first-child{border-top:none; padding-top:2px}
.ev-cab{display:flex; align-items:baseline; gap:9px; margin-bottom:8px; flex-wrap:wrap}
.ev-cab b{font-size:14.5px}
/* Solo la primera letra en mayúscula: «Lunes 12 de octubre», no «Lunes 12 De Octubre».
   `text-transform:capitalize` pondría en mayúscula hasta las preposiciones. */
.ev-cab b::first-letter{text-transform:uppercase}
.ev-cab .cuenta{font-size:12px; font-weight:700; color:var(--marca-osc);
  background:rgba(var(--marca-rgb),.12); padding:2px 9px; border-radius:999px}
.ev-cab.hoy b{color:var(--ambar)}
.ev-fila{display:flex; align-items:baseline; gap:10px; padding:5px 0 5px 2px; font-size:14px}
.ev-fila .h{font-weight:800; font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:46px}
.ev-fila .pt{width:8px; height:8px; border-radius:50%; flex:0 0 auto; margin-bottom:1px}
.ev-fila .q{flex:1; min-width:0; overflow-wrap:anywhere}
.ev-fila .q small{display:block; color:var(--gris); font-size:12.5px}
.ev-fila.cierre{color:var(--gris)}
.ev-fila.cierre .q b{color:var(--ambar)}
.ev-mas{font-size:12.5px; color:var(--gris); padding-left:56px}

/* ── lo que está a medias ────────────────────────────────────────────────────── */
.aviso-fila{display:flex; align-items:flex-start; gap:11px; padding:10px 0;
  border-bottom:1px solid var(--borde); text-decoration:none; color:inherit}
.aviso-fila:last-child{border-bottom:none}
.aviso-fila .ic{font-size:18px; flex:0 0 auto; line-height:1.3}
.aviso-fila .tx{flex:1; min-width:0; font-size:14px; font-weight:700; overflow-wrap:anywhere}
.aviso-fila .tx small{display:block; font-weight:500; color:var(--gris); font-size:12.5px;
  margin-top:2px}
.aviso-fila:hover .tx{color:var(--marca-osc)}
.vacio-bueno{color:var(--verde); font-size:14px; font-weight:600; padding:8px 0}

@media(max-width:600px){
  .resumen-cab{padding:20px 18px}
  .resumen-cab h1{font-size:24px}
  .cifras{gap:18px 22px}
  .cifra b{font-size:27px}
  .panel{padding:15px 14px}
  .ev-fila{flex-wrap:wrap}
  .ev-mas{padding-left:2px}
}

/* La última fila del resumen: los próximos eventos mandan, la gente acompaña. */
.rejilla-resumen{display:grid; grid-template-columns:1.35fr 1fr; gap:16px; margin-top:16px}
.rejilla-resumen > *{min-width:0}
@media(max-width:820px){.rejilla-resumen{grid-template-columns:1fr}}

/* Las horas del día, en barras de lado. Van así y no en barras de pie porque en una
   columna estrecha trece barras de pie dejan el número ilegible; de lado, el nombre de
   la hora se lee siempre y la barra compara sola. La hora más cargada va en ámbar:
   es a la que hay que echarle una mano. */
/* OJO con el nombre: `.horas` YA existe arriba, y es otra cosa — el selector de horas
   de la página en la que el cliente pide cita. Reutilizarlo aquí metía esta lista en
   aquella rejilla de 88 px y las horas salían de tres en tres. */
.horas-resumen{margin-top:8px}
.hora-fila{display:flex; align-items:center; gap:9px; padding:2px 0; font-size:12.5px}
.hora-fila .lb{flex:0 0 auto; width:30px; color:var(--gris); font-weight:600;
  font-variant-numeric:tabular-nums}
.hora-fila .via{flex:1; height:11px; background:var(--papel); border-radius:999px; overflow:hidden}
.hora-fila .via i{display:block; height:100%; background:var(--marca); border-radius:999px;
  min-width:2px}
.hora-fila.llena .via i{background:var(--ambar-cl)}
.hora-fila .nn{flex:0 0 auto; min-width:20px; text-align:right; font-weight:700}

/* El corte entre los dos bloques del panel: «por calendario» arriba, «lo que más te
   piden» abajo. Una raya y un rótulo, sin caja ni color, que bastante hay ya. */
.sub-aparte{margin:18px 0 2px; padding-top:12px; border-top:1px solid var(--borde);
  font-size:12px; font-weight:700; color:var(--gris); text-transform:uppercase;
  letter-spacing:.06em}

/* En el móvil el gráfico de la quincena no cabe: 700 unidades de ancho en una pantalla
   de 390 dejan las etiquetas a la mitad y no hay quien las lea. Se le fija un ancho
   mínimo y se desliza, igual que la rejilla de la agenda del día. */
.grafico-ancho{overflow-x:auto; overflow-y:hidden}
@media(max-width:600px){
  .grafico-ancho svg{min-width:620px}
}

/* ── los próximos meses ──────────────────────────────────────────────────────
   La rejilla de la quincena dice cómo aprieta la semana que viene; esto dice dónde
   hay sitio cuando te llaman para dentro de dos meses. Tres calendarios de papel,
   uno por mes: el mes en curso entero (con lo que ya pasó apagado) y los dos que
   vienen. Cada casilla es un día y lleva a la agenda de ese día. */
.meses{display:grid; grid-template-columns:repeat(auto-fit,minmax(206px,1fr));
  gap:20px 16px; margin-top:12px}
.mes-cab{display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-bottom:8px}
.mes-cab b{font-size:14.5px; font-weight:800; letter-spacing:.01em}
.mes-cab span{font-size:12px; color:var(--gris); font-weight:600; white-space:nowrap}

.mes-semana,.mes-celdas{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.mes-semana{margin-bottom:4px}
.mes-semana span{text-align:center; font-size:10.5px; font-weight:700; color:var(--gris-cl);
  text-transform:uppercase; letter-spacing:.03em}

.dia-c{position:relative; aspect-ratio:1/1; border-radius:9px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:0;
  text-decoration:none; color:var(--tinta); font-size:12.5px; line-height:1.05;
  background:var(--blanco); border:1px solid var(--borde); font-variant-numeric:tabular-nums}
.dia-c:hover{border-color:var(--marca); box-shadow:0 0 0 2px rgba(var(--marca-rgb),.18)}
.dia-c .dd{font-weight:600}
/* El número de citas solo sale donde hay alguna: una casilla con un «0» debajo del día
   es ruido, y el que no tenga número ya dice lo mismo. */
.dia-c .cc{font-size:9.5px; font-weight:800; opacity:.85; letter-spacing:.02em}

/* El degradado de lleno: cuatro escalones de teal sobre el mismo blanco. Cuanto más
   oscuro, más citas. A partir del tercero el texto ya no se lee en tinta. */
.dia-c.n1{background:rgba(var(--marca-rgb),.16)}
.dia-c.n2{background:rgba(var(--marca-rgb),.36)}
.dia-c.n3{background:rgba(var(--marca-rgb),.62); color:#fff; border-color:transparent}
.dia-c.n4{background:var(--marca-osc); color:#fff; border-color:transparent}
/* En la página de pedir cita la casilla que NO se puede pulsar. Ahí el calendario no
   enseña cuánta cita hay, sino dónde queda sitio: un día sin hueco es un día muerto, no
   un día cerrado (el negocio abre, pero está lleno), así que no lleva las rayas del
   cierre sino un borde de puntos. Y es un <span>, no un <a>: no se pulsa. */
.dia-c.lleno{background:var(--papel); border-style:dashed; color:var(--gris-cl);
  cursor:default}
.dia-c.lleno:hover{border-color:var(--borde); box-shadow:none}
.mu.lleno{background:var(--papel); border-style:dashed}

/* El rótulo que separa los catorce días del atajo y el calendario de más adelante. */
.titulo-meses{margin:22px 0 10px; font-size:14px; font-weight:700; color:var(--tinta)}

/* Los huecos de delante del día 1 y los de detrás del último van invisibles. Pintados
   como casillas vacías, un mes que empieza en domingo parecería tener seis días libres. */
.dia-c.hueco{background:none; border:none; box-shadow:none}

.dia-c.finde{background:var(--papel)}
.dia-c.finde.n1{background:rgba(var(--marca-rgb),.16)}
.dia-c.finde.n2{background:rgba(var(--marca-rgb),.36)}
.dia-c.finde.n3{background:rgba(var(--marca-rgb),.62)}
.dia-c.finde.n4{background:var(--marca-osc)}

/* Cerrado: rayado, como se tacha en el calendario de la pared. Solo se raya si no hay
   nada apuntado; un día con citas Y con un cierre parcial es un día con citas. */
.dia-c.cerrado{background:repeating-linear-gradient(45deg,#eef2f6 0 4px,#e2e8f0 4px 8px);
  color:var(--gris-cl); border-color:transparent}
.dia-c.cerrado .dd{text-decoration:line-through}

.dia-c.pasado{opacity:.38}
/* Un día festivo o una vacación, aunque tenga citas, se marca con un punto: a meses
   vista eso es justo lo que hay que ver. */
.dia-c.con-cierre::after{content:''; position:absolute; top:3px; right:3px; width:5px;
  height:5px; border-radius:50%; background:var(--ambar)}
.dia-c.hoy{border-color:var(--ambar); box-shadow:0 0 0 2px rgba(245,158,11,.35);
  font-weight:800}

.mes-leyenda{display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:16px;
  padding-top:12px; border-top:1px solid var(--borde); font-size:12px; color:var(--gris)}
.mes-leyenda span{display:flex; align-items:center; gap:5px; white-space:nowrap}
.mu{display:inline-block; width:13px; height:13px; border-radius:4px; border:1px solid var(--borde)}
.mu.n0{background:var(--blanco)}
.mu.n1{background:rgba(var(--marca-rgb),.16)}
.mu.n2{background:rgba(var(--marca-rgb),.36)}
.mu.n3{background:rgba(var(--marca-rgb),.62)}
.mu.n4{background:var(--marca-osc)}
.mu.cerrado{background:repeating-linear-gradient(45deg,#eef2f6 0 4px,#e2e8f0 4px 8px)}
.mu.finde{background:var(--papel)}

@media(max-width:560px){
  .meses{grid-template-columns:1fr; gap:24px}
  .dia-c{font-size:13.5px}
}

/* ── el índice de los ajustes ─────────────────────────────────────────────────
   La página de ajustes crece con cada calendario que se da de alta: un bloque por
   doctor, y dentro sus horarios, sus servicios, sus preguntas y tres formularios.
   Bajar a por los servicios del segundo eran dos pantallas de rueda. El índice va
   pegado justo debajo de la cabecera —que también es pegajosa— y se desliza solo
   cuando no cabe, en vez de apretarse en dos filas.

   El alto de la cabecera NO se clava aquí: lo mide el script de la plantilla y lo deja
   en `--cab-alto`. Depende del nombre del negocio y de si cabe el botón de la derecha,
   así que un número fijo se rompe al primer negocio con nombre largo o en un móvil. */
.subnav{position:sticky; top:var(--cab-alto,61px); z-index:50;
  display:flex; gap:8px; overflow-x:auto; margin:14px 0 18px; padding:8px 0;
  background:var(--papel); border-bottom:1px solid var(--borde);
  scrollbar-width:none; -ms-overflow-style:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto; padding:7px 13px; border-radius:999px; border:1px solid var(--borde);
  background:var(--blanco); color:var(--tinta); text-decoration:none; font-size:13px;
  font-weight:600; white-space:nowrap}
.subnav a:hover{border-color:var(--marca); color:var(--marca-osc)}
.subnav a:focus-visible{outline:2px solid var(--marca); outline-offset:2px}
/* El atajo a la agenda va aparte, a la derecha y con otro color: no es un apartado de
   esta página, es la puerta de al lado, y no puede parecer que también salta hacia
   abajo. En un móvil se queda el último de la fila, que es donde se espera. */
.subnav a.subnav-fuera{margin-left:auto; background:rgba(var(--marca-rgb),.1);
  border-color:transparent; color:var(--marca-osc)}

/* Al pinchar un apartado, el navegador deja su título pegadito arriba — y con la
   cabecera y el índice pegados encima, quedaría debajo de los dos y no se vería. Este
   margen es el hueco que hay que dejar libre: los dos pegotes más un respiro. */
.ancla{scroll-margin-top:calc(var(--cab-alto,61px) + 68px)}

/* ── la pantalla del aspecto (Ajustes · «cómo se ve tu web») ──────────────────
   El color que se elige se enseña DOS veces: en la bolita y en la vista previa, que es la
   que de verdad dice si queda bien. La vista previa usa las clases de verdad (`.logo`,
   `.boton`, las mismas variables), así que lo que se ve ahí es la web del negocio y no un
   dibujo parecido. */
.aspecto-rejilla{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:820px){ .aspecto-rejilla{grid-template-columns:1fr} }
.muestrario{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
/* Ni se encoge ni se parte en dos líneas (16/10). La primera muestra de las tres filas lleva
   TEXTO («De fábrica») y las demás son bolitas de color: sin esto, en una columna estrecha el
   flex apretaba la píldora y «De fábrica» acababa partido y saliéndose del círculo — justo en
   el sitio donde él se fijó. Sin encogerse y sin partirse, la fila baja entera a la línea
   siguiente y cada muestra se lee completa. */
.muestra-caja{position:relative; display:inline-flex; cursor:pointer; flex:0 0 auto}
.muestra{width:34px; height:34px; border-radius:999px; border:2px solid var(--borde);
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700;
  color:var(--gris); background:var(--blanco); overflow:hidden;
  flex:0 0 auto; white-space:nowrap}
.muestra.forma{width:auto; min-width:34px; padding:0 7px}
.muestra.sin-color{width:auto; padding:0 11px; border-radius:999px; font-weight:600}
/* Lo elegido se marca con el anillo de fuera y con el tick de dentro: el color solo no
   basta —hay quien no distingue el rojo del verde— y el tick se ve en cualquier paleta. */
.muestra-caja input:checked + .muestra{border-color:var(--tinta);
  box-shadow:0 0 0 2px var(--blanco), 0 0 0 4px var(--tinta)}
.muestra-caja input:focus-visible + .muestra{outline:2px solid var(--marca); outline-offset:3px}
/* La bolita con el color elegido lleva el tick en blanco: para eso está la garantía de
   contraste de la paleta (el blanco se lee sobre todos los colores de la lista). */
.muestra-caja input:checked + .muestra:not(.sin-color)::after{content:"✓"; color:#fff}

.vista-previa{border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden;
  background:var(--papel); box-shadow:var(--sombra)}
.vp-cab{display:flex; align-items:center; gap:9px; padding:9px 12px; background:var(--blanco);
  border-bottom:1px solid var(--borde)}
.vp-cab .logo{width:30px; height:30px; border-radius:var(--radio-b); display:flex;
  align-items:center; justify-content:center; font-size:16px; overflow:hidden;
  background:linear-gradient(135deg,var(--marca),var(--marca-clara)); color:#fff}
.vp-cab img{width:100%; height:100%; object-fit:contain}
.vp-cab b{display:block; font-size:13.5px; line-height:1.2}
.vp-cab small{display:block; font-size:11px; color:var(--gris)}
.vp-hero{margin:12px 12px 0; padding:16px 14px; border-radius:var(--radio-g); color:#fff;
  background:linear-gradient(160deg,var(--hero-a) 0%,var(--hero-b) 55%,var(--hero-c) 100%)}
.vp-hero b{display:block; font-size:17px; margin-bottom:4px}
.vp-hero span{font-size:12.5px; color:rgba(255,255,255,.86)}
.vp-tarjeta{margin:12px; padding:13px; border-radius:var(--radio); background:var(--blanco);
  border:1px solid var(--borde); display:flex; align-items:center; justify-content:space-between; gap:10px}
.vp-tarjeta b{font-size:13.5px}
.vp-boton{background:var(--marca); color:#fff; font-weight:700; font-size:12.5px;
  padding:8px 13px; border-radius:var(--radio-b); white-space:nowrap}
/* El logo que sube el negocio: su hueco es el de la cabecera, así que se ve al tamaño de
   verdad y no en una miniatura que engaña. */
.subida{display:flex; gap:12px; align-items:flex-start}
.subida input[type=file]{width:100%; font-size:12.5px}
.logo.grande{width:62px; height:62px; font-size:28px; border-radius:var(--radio-b);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden;
  background:var(--blanco); border:1px solid var(--borde)}
.logo.grande img{width:100%; height:100%; object-fit:contain}
.banda-mini{width:96px; height:62px; flex:0 0 auto; border-radius:var(--radio-b);
  border:1px solid var(--borde); background-size:cover; background-position:center}


/* La tabla de servicios del calendario: cinco columnas no caben en 390 px, y sin esto
   arrastraba TODA la página 90 px hacia el lado en un móvil. Mismo apaño que la rejilla
   de la agenda y el gráfico de la quincena: ancho mínimo y se desliza. */
.tabla-ancha{overflow-x:auto; margin-top:12px}
.tabla-ancha table{min-width:430px; margin-top:0}

/* ── la alarma: citas que se quedaron sin horario ──────────────────────
   El negocio recortó el tramo DESPUÉS de dar estas citas. Siguen vivas, pero ya no caben
   en el horario, así que hay que llamar a cada cliente y buscarle hora.
   Va arriba y no se va sola mientras quede alguna —el negocio recorta por la noche y a la
   mañana entra por donde sea— pero NO bloquea: el trabajo que pide no se hace dentro de la
   pantalla, y una caja que solo se puede cerrar se cierra sin leer. Cerrada ocupa una
   línea; abierta, la lista con los teléfonos a mano. */
/* La franja de alarma: `padding:0` es a propósito. Todos los `details` de la casa llevan
   12px de relleno (línea de arriba), y el resumen de la franja ya trae el suyo: sin
   anularlo, la «franja fina» medía 65 px con una sola línea de texto y le sobraba un dedo
   de vacío por debajo. Un `details` no es siempre un desplegable de contenido. */
.alarma{margin:0 0 18px; padding:0; border:1px solid #fcd34d; border-left:4px solid var(--ambar-cl);
  border-radius:12px; background:#fffbeb; overflow:hidden}
.alarma>summary{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 14px; cursor:pointer; font-size:14px; list-style:none}
.alarma>summary::-webkit-details-marker{display:none}
.alarma>summary:hover{background:#fef8e3}
.alarma>summary:focus-visible{outline:2px solid var(--ambar-cl); outline-offset:-2px}
.alarma .alarma-simbolo{font-size:15px; line-height:1}
.alarma b{color:var(--ambar); white-space:nowrap}
.alarma .alarma-txt{color:#7c5a12; font-size:13px}
.alarma .alarma-abrir{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ambar);
  text-decoration:underline; white-space:nowrap}
.alarma[open]>summary{border-bottom:1px solid #fde68a}
.alarma .alarma-ojo{margin:0; padding:10px 14px 0; color:#7c5a12; font-size:13.5px;
  max-width:70ch}
.alarma-lista{list-style:none; margin:0; padding:6px 14px 10px}
.alarma-lista li{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:7px 0; border-top:1px solid #fde68a; font-size:14px; position:relative}
.alarma-lista li:first-child{border-top:none}
.alarma-lista li:hover{background:#fef8e3}
/* TODA LA FILA LLEVA A LA CITA, no solo la fecha. La alarma existe para ir a mover ESA
   cita, y obligar a acertarle a un enlace de cuatro letras es pedir puntería. El truco
   del `::after` estirado hace pinchable la fila entera sin meter un <a> dentro de otro
   <a>, que no vale. El teléfono se queda por encima para poder seguir llamando. */
.alarma-lista li>a::after{content:""; position:absolute; inset:0}
.alarma-lista a{font-weight:600}
.alarma-lista .alarma-nombre{font-weight:600}
.alarma-lista .alarma-tel{margin-left:auto; white-space:nowrap; position:relative; z-index:1;
  font-variant-numeric:tabular-nums}
.alarma-lista .alarma-quien{flex-basis:100%; color:var(--gris); font-size:12.5px;
  margin-top:-4px}
@media (max-width:520px){
  /* Aquí el resumen se partía en tres líneas (99 px de franja en un móvil) porque
     «hay que recolocarlas» se forzaba a línea propia. Eso tenía sentido cuando dentro del
     resumen iba la explicación larga; ahora son cinco palabras y caben al lado del
     recuento. La franja vuelve a medir una línea, que es lo que promete su nombre. */
  .alarma>summary{gap:8px; padding:9px 12px}
  /* El recuento («2 citas fuera de horario») y el enlace ya lo dicen todo; «hay que
     recolocarlas» es el único que se puede caer, porque explica lo que el de al lado ya
     afirma. Con él, la franja medía dos líneas y 69 px en un móvil. */
  .alarma .alarma-txt{display:none}
  .alarma .alarma-abrir{margin-left:auto}
  .alarma-lista .alarma-tel{margin-left:0}
}

/* La cita que se quedó sin horario, dentro de la rejilla. Rayada en rojo para que se
   distinga de un vistazo de las demás: no está cancelada, pero tampoco está bien. */
.cita.fuera{background:repeating-linear-gradient(45deg,#fef2f2,#fef2f2 6px,#fee2e2 6px,#fee2e2 12px);
  opacity:1}
.cita .fh{display:block; margin-top:2px; color:var(--rojo); font-weight:700; font-size:11px}
.fuera-nota{margin-top:6px}
.muestra-fuera{background:repeating-linear-gradient(45deg,#fef2f2,#fef2f2 4px,#fee2e2 4px,#fee2e2 8px);
  border:1px solid #fecaca; border-radius:4px; color:var(--rojo); font-weight:700;
  padding:0 4px}

/* A quién se está moviendo, DENTRO del panel de mover. Es lo único que impide mover la
   cita equivocada cuando el titular de la tarjeta ya se ha quedado arriba, fuera de la
   vista: por eso va destacado y con nombre y hora, no con un «esta cita». */
#ficha .m-quien{margin:0 0 10px; padding:7px 10px; background:#fef8e3; border-radius:8px;
  border-left:3px solid var(--ambar-cl); color:#7c5a12; font-size:13px}
#ficha .m-quien b{color:var(--tinta)}

/* ── el aviso antes de cortar el horario ───────────────────────────────
   Este SÍ bloquea, y es el único sitio donde debe hacerlo: está delante de una acción que
   va a ocurrir (guardar el cierre), no es un cartel que se pueda dejar para luego. Aquí
   el sistema sabe quién se queda sin hueco antes de que se quede sin hueco; después ya
   solo queda llamar uno por uno. */
.choque{margin:0 0 22px; padding:18px; border:2px solid var(--rojo); border-radius:var(--radio);
  background:#fff; box-shadow:var(--sombra)}
.choque h2{font-size:18px; color:var(--rojo); margin-bottom:8px}
.choque p{margin:0 0 10px; font-size:14.5px}
.choque .choque-ojo{background:#fef2f2; border-radius:10px; padding:10px 12px; color:#7f1d1d}
.choque-tabla{margin:12px 0 0}
.choque-tabla th,.choque-tabla td{font-size:13.5px}
.choque-tabla td:nth-child(1){font-variant-numeric:tabular-nums; white-space:nowrap}
/* Lo que se puede hacer con cada cita de la lista: abrirla en la agenda o borrarla. Solo
   sale al quitar un calendario, que es el único sitio donde el aviso es una lista de
   trabajo y no un «¿seguro?». */
.choque-acciones{white-space:nowrap}
.choque-acciones form{display:inline}
.choque-acciones .boton-x{margin-left:6px; padding:6px 9px}
/* Quitar el calendario entero: al final de la tarjeta y detrás de una raya, para que no se
   pulse al ir a por otra cosa. */
.quitar-cal{margin-top:18px; padding-top:14px; border-top:1px dashed var(--borde)}
.quitar-cal .pista{flex:1; min-width:220px}
@media (max-width:520px){
  .choque{padding:14px}
  .choque h2{font-size:16.5px}
  /* El teléfono no puede quedar fuera de la pantalla: es la razón de ser del aviso. */
  .choque-tabla{overflow-x:auto}
  .choque-tabla table{min-width:420px}
}

/* ── EL AYUDANTE: el chat del negocio ────────────────────────────────────────────────
   Este chat es para quien lleva el negocio y va en claro, como el resto del área: no es
   un teléfono ni imita a WhatsApp. Los dos chats de los clientes van de oscuro porque
   enseñan cómo se ven en un móvil de verdad; este no enseña nada, se USA.

   La caja de escribir va PEGADA abajo del todo de la tarjeta, no flotando: si el chat
   crece, el sitio donde se escribe sigue estando donde estaba. Un chat en el que hay que
   bajar para encontrar dónde escribir se abandona. */
.ia-chat{height:420px; overflow-y:auto; padding:6px 2px 12px; display:flex;
  flex-direction:column; gap:10px}
.ia-b{max-width:88%; padding:11px 14px; border-radius:14px; font-size:14.5px;
  line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere}
.ia-entra{background:#f1f5f9; color:var(--tinta); border-bottom-left-radius:5px; align-self:flex-start}
.ia-sale{background:var(--marca); color:#fff; border-bottom-right-radius:5px; align-self:flex-end}
/* Lo que se pinta mientras el modelo piensa. Va en cursiva y en gris para que no se
   confunda con una respuesta: si tarda, se ve que sigue trabajando. */
.ia-pensando{color:var(--gris); font-style:italic}
.ia-form{display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--borde)}
.ia-form input{flex:1 1 auto; min-width:0}
.ia-form button{flex:0 0 auto; border:none; border-radius:11px; padding:0 20px; font:inherit;
  font-weight:700; cursor:pointer; background:var(--marca); color:#fff}
.ia-form button:hover{background:var(--marca-osc)}
.ia-form button:disabled{opacity:.55; cursor:default}
.ia-sugerencias{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px}
.ia-sugerencias button{border:1px solid var(--borde); background:var(--blanco); color:var(--marca-osc);
  border-radius:20px; padding:8px 15px; font:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer}
.ia-sugerencias button:hover{background:#ecfeff; border-color:var(--marca)}
@media (max-width:520px){
  .ia-chat{height:340px}
  .ia-b{max-width:94%}
}

/* ══════════════════ LA GESTIÓN: caja, almacén y proveedores (14/10/2026) ══════════════════
   Lo que hacía falta para tres pantallas nuevas y no existía en la casa. Casi todo son
   reutilizaciones (`.tarjeta`, `.kpis`, `.rejilla-lado`, `.subnav`, `.aviso`, las tablas),
   así que aquí solo está lo de verdad nuevo. */

/* ── la pastilla de estado: en qué punto está un pedido, un ticket o una línea ──
   Un color y una palabra, nada más. Es lo que se mira de reojo en una lista larga, y por
   eso el color va en el fondo y no en el texto: un texto de color se lee peor. */
.estado{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:#eef2f5;
  color:var(--gris); white-space:nowrap}
.estado.ok{background:#dcfce7; color:#166534}
.estado.mal{background:#fee2e2; color:#991b1b}
.estado.info{background:#e0f2fe; color:#075985}
.estado.aviso-e{background:#fef3c7; color:#92400e}
.estado.gris{background:#eef2f5; color:var(--gris)}

/* ── lo que se pulsa para cobrar o para pedir ──
   En la caja esto es lo principal de la pantalla: se usa de pie, con el cliente delante y a
   veces con prisa. Por eso son botones GRANDES y con el nombre del artículo dentro, no una
   lista de enlaces pequeños. El `text-align:left` es para que los nombres largos se lean
   desde el mismo sitio en todas las pastillas; centrados, cada una empezaba donde quería. */
.pastillas{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:9px; margin-top:12px}
.pastillas form{margin:0}
.pastilla{width:100%; min-height:62px; text-align:left; cursor:pointer; font:inherit;
  background:var(--blanco); border:1.5px solid var(--borde); border-radius:12px;
  padding:10px 12px; color:var(--tinta); display:flex; flex-direction:column;
  justify-content:center; gap:2px}
.pastilla:hover{border-color:var(--marca); background:#ecfeff}
.pastilla:focus-visible{outline:2px solid var(--marca); outline-offset:2px}
.pastilla b{font-size:14px; line-height:1.25}
.pastilla span{font-size:12.5px; color:var(--gris)}
@media(max-width:520px){
  .pastillas{grid-template-columns:1fr 1fr; gap:7px}
  .pastilla{min-height:58px; padding:9px 10px}
  .pastilla b{font-size:13px}
}

/* ── números y códigos en las tablas ──
   `.num` alinea a la derecha y NO parte la línea: una columna de importes que rompe
   «1.234,50 €» en dos renglones es una columna que no se puede comparar de un vistazo.
   `.mono` es para lo que se coteja letra a letra: un número de ticket, un IBAN, una huella. */
.num{text-align:right; white-space:nowrap}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}