/* Cicerón (MOC-29, ampliado en MOC-30): el botón de arriba a la derecha, el abanico de modos, el panel, el cursor que
   se mueve solo y la pizarra en la que dibuja.

   Todo vive fuera del router, pegado al <body>, y por encima de la aplicación — la pizarra y el cursor incluso por
   encima de una hoja modal, porque también allí hay cosas que señalar; nada de ellos recibe el toque.

   **Arriba a la derecha, no abajo.** Ahí estaban la cuenta, los ajustes y las apps, tres botones que no hablaban de la
   pantalla sino de quien la mira; se fueron al panel maestro y el sitio quedó libre. Cicerón lo ocupa porque es lo
   único del borde superior que sí habla de esta pantalla. El botón no está a una distancia fija del borde: `guia.js`
   mide la barra de título que tenga delante y pone `--hc-guia-techo` en su línea, de modo que se posa sobre ella
   igual en un iPhone con muesca que en una ventana de escritorio. `--hc-guia-piso` sigue midiendo lo de abajo (la
   barra de pestañas, el reproductor pequeño) porque las láminas lo necesitan.

   El abanico y el panel cuelgan hacia abajo (`column-reverse`: el último hijo, el botón, queda arriba).

   **Una píldora con su nombre, dentro de la barra (0.95).** Era un círculo de 46 px que se salía de una barra de 44 y
   compartía el borde con los botones de la pantalla. Ahora es una píldora morada de 34 px —la cara y «Cicerón»— que
   cabe en la barra, y los botones de la pantalla (compartir, «…», los paneles) van en el borde opuesto, a la
   izquierda: ese lado de la barra es de la pantalla y éste es de Cicerón. */

hc-guia { --hc-guia-tinta: #7a4fb5; position: fixed; right: max(10px, calc(env(safe-area-inset-right) + 10px));
  top: calc(var(--hc-guia-techo, 22px) - 17px);
  z-index: 20050; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
hc-guia.fuera { display: none; }
/* Mientras una hoja modal o un popover están abiertos, el botón taparía su «Listo»: se aparta, salvo que Cicerón esté
   trabajando — en ese caso los mandos son lo que hay que poder alcanzar. */
body.backdrop-no-scroll hc-guia:not(.trabajando) { display: none; }
/* Y la barra le deja su sitio: un botón que alguna pantalla ponga todavía a la derecha se aparta, y el título centrado
   no pasa por debajo de la píldora. Sólo en la aplicación: las hojas modales viven fuera de <ion-tabs>. */
html.hc-guia-arriba ion-tabs ion-header ion-toolbar ion-buttons[slot="end"] { margin-inline-end: 112px; }
html.hc-guia-arriba ion-tabs ion-header:not([collapse="condense"]) ion-toolbar:first-of-type ion-title:not([size="large"]) { padding-inline: 116px; }
/* En un teléfono el borde izquierdo ya lleva «Atrás» y los botones de la pantalla: la flecha basta, y el título conserva
   su sitio en el centro. */
@media (max-width: 599px) {
  html.hc-guia-arriba ion-tabs ion-toolbar:has(> ion-buttons[slot="start"] ion-button) ion-back-button::part(text) { display: none; }
}

/* ─── El botón y la cara ─── */
.hc-guia-fab { position: relative; height: 34px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 2px 13px 2px 2px; cursor: pointer; overflow: visible;
  color: #fff; font: inherit; font-size: 14px; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
  background: radial-gradient(120% 120% at 50% 0%, #8f66cf, #4a2f86 58%, #2b1a5c);
  box-shadow: 0 8px 20px -8px rgba(38, 20, 76, .8), inset 0 0 0 .6px rgba(255, 255, 255, .3);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.hc-guia-fab:active { transform: scale(.93); }
.hc-guia-fab.activa { box-shadow: 0 14px 34px -10px rgba(38, 20, 76, .9), inset 0 0 0 .6px rgba(255, 255, 255, .4); }
.hc-guia-fab.desplegado { transform: scale(1.04); }
.hc-guia-cara { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .12); }
.hc-guia-nombre { line-height: 1; }

/* La cara: las cinco poses apiladas en el mismo cuadro, y sólo la que manda a la vista. El recorte común
   (scripts/personaje.mjs) es lo que permite cruzarlas sin que la cabeza salte. */
hc-ciceron { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; }
hc-ciceron .hc-cara { position: absolute; left: 50%; bottom: -6%; width: 106%; transform: translateX(-50%); opacity: 0;
  transition: opacity .12s linear; pointer-events: none; }
hc-ciceron .hc-cara-senala { width: 112%; bottom: -10%; }
/* Al hablar la boca cambia sesenta veces por segundo: una transición ahí la volvería papilla. */
.hc-guia-fab hc-ciceron .hc-cara-habla, .hc-guia-fab hc-ciceron .hc-cara-reposo { transition: opacity .05s linear; }
/* Respira, para que no parezca una calcomanía. */
.hc-guia-fab:not(.activa) hc-ciceron { animation: hc-guia-respira 5.5s ease-in-out infinite; }
@keyframes hc-guia-respira { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-1.5px) } }

/* El anillo: late mientras acompaña. */
.hc-guia-anillo { position: absolute; inset: -4px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: conic-gradient(from var(--hc-guia-angulo, 0deg), transparent 0 52%, #36a8df 66%, #8f66cf 78%, #ee3854 88%, #fec229 96%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 2.5px; }
@property --hc-guia-angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hc-guia-fab.activa .hc-guia-anillo { opacity: 1; animation: hc-guia-giro 3.4s linear infinite; }
@keyframes hc-guia-giro { to { --hc-guia-angulo: 360deg; } }
.hc-guia-fab.activa::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(102, 64, 153, .4); animation: hc-guia-onda 2.8s ease-out infinite; }
@keyframes hc-guia-onda { to { box-shadow: 0 0 0 20px rgba(102, 64, 153, 0); } }

/* ─── El abanico: las cuatro maneras de pedirle ayuda ─── */
.hc-guia-fondo { position: fixed; inset: 0; z-index: -1; background: rgba(10, 8, 20, .12); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
  animation: hc-guia-aparece .22s ease; }
@keyframes hc-guia-aparece { from { opacity: 0; } }
.hc-guia-abanico { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hc-guia-abanico button { display: flex; align-items: center; gap: 11px; width: min(272px, calc(100vw - 32px)); text-align: start;
  border: 0; border-radius: 17px; padding: 10px 14px; cursor: pointer; color: var(--ion-text-color, #1c1c1e);
  background: var(--hc-tarjeta, rgba(255, 255, 255, .9)); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: inset 0 0 0 1.5px var(--hc-guia-tinta, #7a4fb5), 0 14px 32px -18px rgba(38, 20, 76, .75);
  /* Suben en escalera, el de más abajo primero: el abanico se lee de abajo arriba, saliendo del botón. */
  animation: hc-guia-sube .32s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--orden) * 38ms); }
@keyframes hc-guia-sube { from { opacity: 0; transform: translateY(-14px) scale(.94); } }
.hc-guia-abanico button:active { transform: scale(.975); background: var(--hc-guia-tinta, #7a4fb5); color: #fff; }
.hc-guia-abanico button:active ion-icon, .hc-guia-abanico button:active small { color: rgba(255, 255, 255, .82); }
.hc-guia-abanico button[disabled] { opacity: .55; }
.hc-guia-abanico ion-icon { flex: none; font-size: 22px; color: #7a4fb5; }
.hc-guia-abanico span { display: grid; min-width: 0; }
.hc-guia-abanico strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.hc-guia-abanico small { font-size: 12.5px; line-height: 1.25; color: var(--hc-tinta-2, rgba(60, 60, 67, .6)); }
/* El Tour, arriba y en su propia sección: relleno en vez de contorno, y la cara delante. Es la única entrada del
   abanico que contesta «¿qué es esto?», así que se distingue de las otras cuatro, que son maneras de pedir algo. */
.hc-guia-abanico .hc-guia-tour { padding: 9px 14px 9px 9px; color: #fff;
  background: linear-gradient(135deg, #7a4fb5, #4a2f86 62%, #2b1a5c);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 16px 34px -16px rgba(38, 20, 76, .9); }
.hc-guia-abanico .hc-guia-tour strong { font-size: 16px; }
.hc-guia-abanico .hc-guia-tour small { color: rgba(255, 255, 255, .76); }
.hc-guia-abanico .hc-guia-tour:active { background: linear-gradient(135deg, #8f66cf, #5a3a9e 62%, #36226e); }
.hc-guia-abanico .hc-guia-tour hc-ciceron { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.hc-guia-abanico .hc-guia-tour hc-ciceron .hc-cara { opacity: 0; }
.hc-guia-abanico .hc-guia-tour hc-ciceron .hc-cara-senala { opacity: 1; }
.hc-guia-rotulo { margin: 2px 4px -2px; align-self: flex-end; font: 600 11px var(--ion-font-family); letter-spacing: .05em;
  text-transform: uppercase; color: var(--hc-tinta-2, rgba(60, 60, 67, .55));
  animation: hc-guia-sube .32s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--orden) * 38ms); }
:root.hc-oscuro .hc-guia-rotulo { color: rgba(235, 235, 245, .5); }

/* ─── El panel: lo que se está diciendo, los mandos, la lección ─── */
.hc-guia-panel { width: min(340px, calc(100vw - 32px)); border-radius: 21px; padding: 12px 14px; display: grid; gap: 9px; align-content: start;
  background: var(--hc-tarjeta, rgba(255, 255, 255, .88)); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7);
  color: var(--ion-text-color, #1c1c1e); box-shadow: inset 0 0 0 .5px var(--hc-linea, rgba(60, 60, 67, .18)), 0 20px 44px -24px rgba(0, 0, 0, .6);
  animation: hc-guia-entra .3s cubic-bezier(.22, 1, .36, 1); }
/* Los modos que se leen (manual, taller) necesitan alto; los que se oyen, no. */
.hc-guia-panel.hoja { width: min(392px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: hidden auto; overscroll-behavior: contain; }
.hc-guia-abanico { max-height: calc(100vh - var(--hc-guia-techo, 44px) - 40px); overflow: hidden auto; overscroll-behavior: contain; }
@keyframes hc-guia-entra { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.hc-guia-panel header { display: flex; align-items: center; gap: 8px; position: sticky; top: -12px; z-index: 1; margin: -12px -14px 0; padding: 12px 14px 6px;
  background: linear-gradient(var(--hc-tarjeta, rgba(255, 255, 255, .92)) 72%, transparent); }
.hc-guia-panel header strong { font-size: 15px; letter-spacing: -.01em; }
.hc-guia-estado { flex: 1; min-width: 0; font-size: 12.5px; color: var(--hc-tinta-2, rgba(60, 60, 67, .6)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-guia-panel:has(.hc-guia-dice) .hc-guia-estado { animation: hc-guia-latido 1.4s ease-in-out infinite alternate; }
@keyframes hc-guia-latido { from { opacity: .5; } to { opacity: 1; } }
.hc-guia-cerrar { flex: none; border: 0; background: var(--hc-relleno, rgba(120, 120, 128, .12)); color: inherit; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 13px; }
.hc-guia-dice { margin: 0; font-size: 15px; line-height: 1.42; }
.hc-guia-tu { margin: 0; font-size: 13.5px; color: var(--hc-tinta-2, rgba(60, 60, 67, .6)); }
.hc-guia-tu::before { content: "«"; } .hc-guia-tu::after { content: "»"; }
.hc-guia-error { margin: 0; font-size: 14px; color: var(--hc-tinta-2, rgba(60, 60, 67, .75)); }
.hc-guia-intro { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--hc-tinta-2, rgba(60, 60, 67, .68)); }
.hc-guia-confirma { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; border-top: .5px solid var(--hc-linea, rgba(60, 60, 67, .18)); }
.hc-guia-confirma p { flex-basis: 100%; margin: 0 0 2px; font-size: 13.5px; }
.hc-guia-mandos { display: flex; gap: 8px; }
.hc-guia-mandos button { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; padding: 6px 11px; cursor: pointer;
  background: var(--hc-relleno, rgba(120, 120, 128, .12)); color: inherit; font: 500 13px var(--ion-font-family); }
.hc-guia-mandos button.activo { background: rgba(238, 56, 84, .16); color: #c32038; }
.hc-guia-escribir { display: flex; gap: 6px; align-items: center; }
.hc-guia-escribir input { flex: 1; min-width: 0; border: 0; outline: 0; border-radius: 999px; padding: 8px 12px; font: 400 15px var(--ion-font-family);
  background: var(--hc-relleno, rgba(120, 120, 128, .12)); color: inherit; }
.hc-guia-escribir button { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; background: var(--ion-color-primary, #007aff); color: #fff; }

/* ─── Las lecciones ─── */
.hc-guia-lista { display: grid; gap: 5px; }
.hc-guia-fila { display: flex; align-items: center; gap: 10px; text-align: start; border: 0; border-radius: 13px; padding: 9px 11px; cursor: pointer;
  background: var(--hc-relleno, rgba(120, 120, 128, .1)); color: inherit; }
.hc-guia-fila:active { background: var(--hc-relleno-2, rgba(120, 120, 128, .18)); }
/* El Tour es la puerta de entrada al producto, no una lección más de la lista: lleva a Cicerón delante y pesa el
   doble que las demás, para que quien abre esto por primera vez sepa por dónde empezar sin tener que leer. */
.hc-guia-fila.destacada { padding: 11px 13px; background: linear-gradient(135deg, rgba(122, 79, 181, .16), rgba(54, 168, 223, .14));
  box-shadow: inset 0 0 0 .5px rgba(122, 79, 181, .3); }
.hc-guia-fila.destacada strong { font-size: 15.5px; }
.hc-guia-fila.destacada hc-ciceron { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 0%, #8f66cf, #4a2f86 62%); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.hc-guia-fila.destacada hc-ciceron .hc-cara { opacity: 0; }
.hc-guia-fila.destacada hc-ciceron .hc-cara-senala { opacity: 1; }
.hc-guia-fila > span:not(.hc-guia-pasos) { display: grid; flex: 1; min-width: 0; }
.hc-guia-fila strong { font-size: 14.5px; font-weight: 600; }
.hc-guia-fila small { font-size: 12.5px; line-height: 1.25; color: var(--hc-tinta-2, rgba(60, 60, 67, .6)); }
.hc-guia-pasos { flex: none; font-size: 11.5px; color: var(--hc-tinta-2, rgba(60, 60, 67, .5)); font-variant-numeric: tabular-nums; }
.hc-guia-separador { margin: 8px 0 1px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hc-tinta-2, rgba(60, 60, 67, .5)); }
.hc-guia-leccion { display: grid; gap: 9px; }
/* Reproduciendo: sin título, sin «volver» y con el texto justo — la tarjeta baja de media pantalla a un subtítulo. */
.hc-guia-leccion.tocando { gap: 7px; }
.hc-guia-leccion.tocando .hc-guia-dice { font-size: 14.5px; }
.hc-guia-volver { justify-self: start; border: 0; background: none; padding: 0; cursor: pointer; font: 500 13px var(--ion-font-family); color: var(--ion-color-primary, #007aff); }
.hc-guia-leccion h4 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
/* Por dónde va el recorrido: una línea que cambia sola mientras el rotulador baja por la pantalla. */
.hc-guia-recorre { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 600; color: #8a6200; }
.hc-guia-recorre span { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fec229; animation: hc-guia-latido .9s ease-in-out infinite alternate; }
:root.hc-oscuro .hc-guia-recorre { color: #f0b23c; }
.hc-guia-fin { margin: 0; font-size: 13px; color: var(--hc-tinta-2, rgba(60, 60, 67, .62)); }
/* La barra de pasos: una muesca por paso, para que se vea cuánto falta sin contar. */
.hc-guia-barra { display: flex; gap: 3px; }
.hc-guia-barra i { flex: 1; height: 3px; border-radius: 2px; background: var(--hc-relleno-2, rgba(120, 120, 128, .22)); transition: background .3s; }
.hc-guia-barra i.hecho { background: #7a4fb5; }
.hc-guia-transporte { display: flex; align-items: center; gap: 6px; padding-top: 2px; }
.hc-guia-transporte button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--hc-relleno, rgba(120, 120, 128, .12)); color: inherit; font-size: 17px; }
.hc-guia-transporte button[disabled] { opacity: .32; }
.hc-guia-transporte button.grande { width: 42px; height: 42px; background: #7a4fb5; color: #fff; font-size: 19px; }
.hc-guia-transporte button.velocidad { margin-inline-start: auto; width: auto; padding: 0 11px; font: 600 12.5px var(--ion-font-family); font-variant-numeric: tabular-nums; }

/* ─── Las láminas: las imágenes que acompañan a la narración ───
   Se posan sobre la aplicación, no la sustituyen: el velo la deja entrever, porque la lámina habla de lo que el
   producto hace y tenerlo detrás es parte del argumento. Quedan por encima de la pantalla y por debajo de los mandos,
   así que siempre se puede pausar. Y no reciben el toque: la persona sigue pudiendo usar la aplicación debajo. */
.hc-guia-laminas { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: grid; place-items: center;
  padding: calc(var(--hc-guia-techo, 44px) + 42vh) 16px calc(var(--hc-guia-piso, 78px) + 16px);
  background: rgba(14, 10, 28, .52); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: hc-guia-vela .35s ease; }
@keyframes hc-guia-vela { from { opacity: 0; } }
.hc-guia-laminas img { width: min(100%, 520px); border-radius: 16px; display: block;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .85), inset 0 0 0 .5px rgba(255, 255, 255, .18);
  animation: hc-guia-lamina .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes hc-guia-lamina { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@media (min-width: 992px) { .hc-guia-laminas { padding-top: calc(var(--hc-guia-techo, 44px) + 22vh); } .hc-guia-laminas img { width: min(100%, 680px); } }
@media (prefers-reduced-motion: reduce) { .hc-guia-laminas, .hc-guia-laminas img { animation: none; } }

/* ─── El cursor: el puntero que Cicerón mueve como lo movería una persona ─── */
.hc-guia-cursor-capa { position: fixed; inset: 0; z-index: 20045; pointer-events: none; opacity: 0; transition: opacity .25s; }
.hc-guia-cursor-capa.visible { opacity: 1; }
.hc-guia-cursor { position: absolute; top: 0; left: 0; width: 30px; height: 30px; margin: -9px 0 0 -7px;
  transition: scale .12s cubic-bezier(.3, 1.4, .5, 1); will-change: transform; }
.hc-guia-cursor .disco { position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, rgba(122, 79, 181, .3), rgba(122, 79, 181, 0) 70%); }
.hc-guia-cursor svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(20, 10, 40, .45)); }
.hc-guia-cursor .flecha { fill: #fdfaf2; stroke: #3d2570; stroke-width: 1.5; stroke-linejoin: round; }
.hc-guia-cursor.pulsando { scale: .78; }
.hc-guia-cursor.escribiendo .disco { animation: hc-guia-teclea 1s ease-in-out infinite; }
@keyframes hc-guia-teclea { 50% { transform: scale(1.3); opacity: .6; } }
.hc-guia-cursor.rodando .disco { background: radial-gradient(circle, rgba(54, 168, 223, .38), rgba(54, 168, 223, 0) 70%); }
/* El anillo que sale del punto tocado: la persona ve qué se tocó aunque la pantalla cambie enseguida. */
.hc-guia-onda-clic { position: absolute; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(122, 79, 181, .8); animation: hc-guia-clic .62s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes hc-guia-clic { to { box-shadow: 0 0 0 2px rgba(122, 79, 181, 0); scale: 3.4; opacity: 0; } }

/* ─── La pizarra ─── */
.hc-guia-lienzo { position: fixed; inset: 0; z-index: 20040; pointer-events: none; }
.hc-guia-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hc-guia-trazo { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.hc-guia-trazo.trazando { stroke-dasharray: var(--largo); stroke-dashoffset: var(--largo); animation: hc-guia-traza .62s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes hc-guia-traza { to { stroke-dashoffset: 0; } }
.hc-guia-halo { fill: rgba(102, 64, 153, .1); stroke: #664099; stroke-width: 2.4; stroke-dasharray: 7 7; animation: hc-guia-halo 1.8s ease-in-out infinite alternate, hc-guia-marcha 14s linear infinite; }
@keyframes hc-guia-halo { from { opacity: .55; } to { opacity: 1; } }
@keyframes hc-guia-marcha { to { stroke-dashoffset: -140; } }
/* El rotulador: translúcido y multiplicando, para que lo marcado siga leyéndose debajo. Sin `multiply` un trazo
   grueso tapa el texto y deja de ser un resaltado para ser un tachón. */
.hc-guia-trazo.hc-guia-resalte { stroke-linecap: round; opacity: .38; mix-blend-mode: multiply; filter: none; }
/* El cerco: la misma orden sobre una zona demasiado alta para el rotulador. */
.hc-guia-trazo.hc-guia-cerco { opacity: .95; }
:root.hc-oscuro .hc-guia-trazo.hc-guia-resalte { opacity: .5; mix-blend-mode: screen; }
.hc-guia-velo { fill: rgba(8, 6, 20, .5); }
.hc-guia-hueco { fill: #000; }
/* La llamada: rótulo escrito a mano sobre la pizarra. El fondo es casi opaco porque se posa encima de la aplicación
   y tiene que leerse sobre lo que haya debajo; el trazo de la caja lo pone el SVG, no un borde del CSS. */
.hc-guia-llamada { position: absolute; top: 0; left: 0; max-width: min(260px, 72vw); padding: 6px 12px;
  font: 600 14px/1.3 var(--ion-font-family); color: var(--tinta, #664099);
  background: var(--hc-tarjeta, rgba(255, 255, 255, .95)); border-radius: 4px;
  animation: hc-guia-entra .3s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
:root.hc-oscuro .hc-guia-llamada { background: rgba(24, 24, 28, .95); color: #fff; }
.hc-guia-trazo.hc-guia-caja { stroke-width: 2.6; }
.hc-guia-trazo.hc-guia-guia { stroke-width: 2.4; }
.hc-guia-diana { fill: none; stroke-width: 2.6; animation: hc-guia-diana 1.6s ease-in-out infinite alternate; }
@keyframes hc-guia-diana { from { opacity: .5; r: 7; } to { opacity: 1; r: 10; } }
.hc-guia-nota { position: absolute; max-width: 240px; padding: 5px 10px; border-radius: 11px; font: 600 13px/1.25 var(--ion-font-family);
  background: var(--tinta, #ee3854); color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); animation: hc-guia-entra .26s cubic-bezier(.22, 1, .36, 1); }

:root.hc-oscuro .hc-guia-panel, :root.hc-oscuro .hc-guia-abanico button { background: rgba(28, 28, 32, .9); }
:root.hc-oscuro hc-guia { --hc-guia-tinta: #a87fe0; }
:root.hc-oscuro .hc-guia-panel header { background: linear-gradient(rgba(28, 28, 32, .92) 72%, transparent); }
:root.hc-oscuro .hc-guia-mandos button.activo { color: #ff8095; }
:root.hc-oscuro .hc-guia-abanico ion-icon { color: #b28ce8; }
:root.hc-oscuro .hc-guia-barra i.hecho, :root.hc-oscuro .hc-guia-transporte button.grande { background: #8f66cf; }

@media (prefers-reduced-motion: reduce) {
  .hc-guia-fab.activa .hc-guia-anillo { animation: none; opacity: .9; background: linear-gradient(90deg, #36a8df, #664099, #ee3854, #fec229); }
  .hc-guia-fab.activa::after, .hc-guia-estado, .hc-guia-halo, .hc-guia-abanico button, .hc-guia-fab:not(.activa) hc-ciceron { animation: none; }
  .hc-guia-trazo.trazando { animation: none; stroke-dashoffset: 0; }
  .hc-guia-onda-clic { animation-duration: .01s; }
}

/* ─── El manual: la referencia que sale de los pods, y el texto que se escribió a partir de ella ─── */
.hc-guia-buscar { width: 100%; border: 0; outline: 0; border-radius: 12px; padding: 9px 12px; font: 400 15px var(--ion-font-family);
  background: var(--hc-relleno, rgba(120, 120, 128, .12)); color: inherit; }
.hc-guia-grupo { margin: 12px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hc-tinta-2, rgba(60, 60, 67, .5)); }
.hc-guia-ref { margin: 0; display: grid; gap: 7px; }
.hc-guia-ref dt { font-size: 13.5px; font-weight: 600; }
/* El papel que una acción pide va pegado a su nombre y en otro color: es lo que decide si la persona puede o no. */
.hc-guia-ref dt em { font-style: normal; font-size: 11.5px; font-weight: 500; color: #b06a00; }
.hc-guia-ref dd { margin: 1px 0 0; font-size: 13px; line-height: 1.38; color: var(--hc-tinta-2, rgba(60, 60, 67, .68)); }
.hc-guia-ref code { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hc-guia-md { font-size: 14.5px; line-height: 1.5; }
.hc-guia-md h3 { margin: 12px 0 4px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.hc-guia-md p { margin: 0 0 8px; }
.hc-guia-md ul, .hc-guia-md ol { margin: 0 0 8px; padding-inline-start: 20px; }
.hc-guia-md li { margin-bottom: 3px; }

/* ─── El taller ─── */
.hc-guia-pestanas { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--hc-relleno, rgba(120, 120, 128, .1)); }
.hc-guia-pestanas button { flex: 1; border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer; background: none; color: inherit;
  font: 600 13px var(--ion-font-family); transition: background .2s; }
.hc-guia-pestanas button.activa { background: var(--hc-tarjeta, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.hc-guia-pestanas button[disabled] { opacity: .4; }
.hc-guia-form { display: grid; gap: 7px; justify-items: end; }
.hc-guia-form textarea { width: 100%; border: 0; outline: 0; border-radius: 13px; padding: 10px 12px; resize: vertical;
  font: 400 15px/1.4 var(--ion-font-family); background: var(--hc-relleno, rgba(120, 120, 128, .12)); color: inherit; }
.hc-guia-sug { display: grid; gap: 3px; border-radius: 13px; padding: 9px 11px; background: var(--hc-relleno, rgba(120, 120, 128, .1)); }
.hc-guia-sug header { display: flex; align-items: baseline; gap: 8px; }
.hc-guia-sug header strong { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.hc-guia-sug p { margin: 0; font-size: 13px; line-height: 1.38; color: var(--hc-tinta-2, rgba(60, 60, 67, .7)); }
.hc-guia-sug small { font-size: 11.5px; color: var(--hc-tinta-2, rgba(60, 60, 67, .5)); }
.hc-guia-estado-sug { flex: none; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--hc-relleno-2, rgba(120, 120, 128, .2)); color: var(--hc-tinta-2, rgba(60, 60, 67, .7)); }
.hc-guia-estado-sug.aceptada { background: rgba(54, 168, 223, .18); color: #1d6f99; }
.hc-guia-estado-sug.en_curso { background: rgba(254, 194, 41, .22); color: #8a6200; }
.hc-guia-estado-sug.hecha { background: rgba(47, 174, 118, .2); color: #1c7a50; }
.hc-guia-estado-sug.descartada { opacity: .65; text-decoration: line-through; }
.hc-guia-hilo { display: grid; gap: 8px; }

/* Una propuesta: el alcance primero, porque es lo que decide si hay que pensárselo. */
.hc-guia-propuesta { display: grid; gap: 4px; border-radius: 13px; padding: 10px 12px;
  background: var(--hc-relleno, rgba(120, 120, 128, .1)); box-shadow: inset 3px 0 0 var(--borde, #7a4fb5); }
.hc-guia-propuesta.suave { --borde: #2fae76; }
.hc-guia-propuesta.medio { --borde: #36a8df; }
.hc-guia-propuesta.fuerte { --borde: #ee3854; background: rgba(238, 56, 84, .07); }
.hc-guia-propuesta.hecho { opacity: .72; }
.hc-guia-alcance { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--borde, #7a4fb5); }
.hc-guia-propuesta strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.hc-guia-propuesta small { font-size: 12px; line-height: 1.35; color: var(--hc-tinta-2, rgba(60, 60, 67, .65)); }
.hc-guia-propuesta small.hc-guia-mal { color: #c32038; }
.hc-guia-propuesta small.hc-guia-hecho { color: #1c7a50; font-weight: 600; }
.hc-guia-propuesta pre { margin: 3px 0 0; padding: 8px 10px; border-radius: 9px; overflow: auto; max-height: 190px;
  background: rgba(10, 8, 20, .06); font: 400 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
/* Lo que decía antes y lo que diría: uno tachado y otro no, que es lo que un diff enseña en dos líneas. */
.hc-guia-diff { margin: 3px 0 0; display: grid; gap: 2px; }
.hc-guia-diff dt { font: 400 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--hc-tinta-2, rgba(60, 60, 67, .55)); }
.hc-guia-diff dd { margin: 0; padding: 4px 8px; border-radius: 7px; font: 400 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }
.hc-guia-diff dd.antes { background: rgba(238, 56, 84, .1); text-decoration: line-through; opacity: .75; }
.hc-guia-diff dd.despues { background: rgba(47, 174, 118, .14); }
.hc-guia-mandos button.aplicar { background: #7a4fb5; color: #fff; font-weight: 600; }

:root.hc-oscuro .hc-guia-pestanas button.activa { background: rgba(72, 72, 80, .9); }
:root.hc-oscuro .hc-guia-propuesta pre { background: rgba(255, 255, 255, .07); }
:root.hc-oscuro .hc-guia-ref dt em { color: #f0b23c; }

/* «Escuchar «Cicerón»» (MOC-76): the wake-word switch at the foot of the fan, a card like the modes. */
.hc-guia-escucha { display: flex; align-items: center; gap: 11px; width: min(272px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 6px 22px rgba(0, 0, 0, .14); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--hc-guia-tinta, #7a4fb5), 0 14px 32px -18px rgba(38, 20, 76, .75); animation: hc-guia-sube .32s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--orden) * 38ms); }
.hc-guia-escucha input { width: 22px; height: 22px; accent-color: var(--hc-guia-tinta, #7a4fb5); flex: none; }
.hc-guia-escucha span { display: grid; gap: 1px; }
.hc-guia-escucha small { color: var(--hc-tinta-3, #6e6e73); font-size: 11.5px; line-height: 1.3; }
:root.hc-oscuro .hc-guia-escucha { background: rgba(28, 28, 32, .9); }

/* ─── MOC-101: the popover wears the button's colours ───
   The owner: «a purple gradient background, like his button». The fan's cards, the wake-word switch and the panel take
   the FAB's own gradient, and inside them the theme's text, line and fill variables are redefined to white tints, so
   every inner element (states, lists, proposals, the Taller thread) follows without its own rule — the same in light
   and in dark mode, because the surface is no longer the theme's card. Fields stay light: something to write in reads
   as a field. */
.hc-guia-panel, .hc-guia-abanico button, .hc-guia-escucha, :root.hc-oscuro .hc-guia-escucha {
  --hc-tarjeta: #5a3a9e; --ion-text-color: #fff; --hc-tinta-2: rgba(255, 255, 255, .74); --hc-tinta-3: rgba(255, 255, 255, .6);
  --hc-linea: rgba(255, 255, 255, .2); --hc-relleno: rgba(255, 255, 255, .14); --ion-color-primary: #fff; --ion-color-primary-contrast: #4a2f86;
  color: #fff; background: radial-gradient(130% 120% at 50% 0%, #8f66cf, #4a2f86 58%, #2b1a5c);
  box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .3), 0 20px 44px -22px rgba(38, 20, 76, .85); }
.hc-guia-abanico button:active { background: radial-gradient(130% 120% at 50% 0%, #9d77da, #5a3a9e 58%, #36226e); }
.hc-guia-abanico ion-icon, .hc-guia-abanico button:active ion-icon { color: #e6d8ff; }
.hc-guia-abanico small, .hc-guia-escucha small { color: rgba(255, 255, 255, .72); }
.hc-guia-escucha input { accent-color: #e6d8ff; }
.hc-guia-panel header { background: linear-gradient(#7a56bd 70%, rgba(122, 86, 189, 0)); }
.hc-guia-panel .hc-guia-cerrar { background: rgba(255, 255, 255, .18); color: #fff; }
.hc-guia-panel textarea, .hc-guia-panel input[type="text"], .hc-guia-panel .hc-guia-escribir input { background: rgba(255, 255, 255, .94); color: #1c1c1e; }
.hc-guia-panel textarea::placeholder, .hc-guia-panel input::placeholder { color: rgba(60, 60, 67, .55); }
.hc-guia-panel .hc-guia-pestanas button.activa, :root.hc-oscuro .hc-guia-panel .hc-guia-pestanas button.activa { background: rgba(255, 255, 255, .24); color: #fff; }
.hc-guia-panel .hc-guia-mandos button.aplicar { background: #fff; color: #4a2f86; }
.hc-guia-panel .hc-guia-propuesta pre { background: rgba(10, 8, 20, .25); color: #fff; }
.hc-guia-panel .hc-guia-propuesta small.hc-guia-hecho { color: #a6f0c8; }
.hc-guia-panel .hc-guia-propuesta small.hc-guia-mal { color: #ffc2cb; }
.hc-guia-panel a { color: #fff; }

/* ─── MOC-101: Taller — solicitudes de cambio ─── */
.hc-taller-nueva { width: 100%; border: 0; border-radius: 14px; padding: 12px; cursor: pointer; font: 650 15px var(--ion-font-family); color: #4a2f86; background: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5); }
.hc-taller-fila { width: 100%; text-align: start; border: 0; cursor: pointer; color: inherit; font: inherit; }
.hc-taller-volver { justify-self: start; border: 0; background: none; color: rgba(255, 255, 255, .85); cursor: pointer; font: 500 13px var(--ion-font-family); padding: 0; }
.hc-taller-aviso { background: rgba(255, 255, 255, .14); border-radius: 10px; padding: 7px 10px; }
.hc-taller-hilo { max-height: 34vh; overflow: auto; padding-right: 2px; }
.hc-taller-tu { margin: 0; justify-self: end; max-width: 88%; background: #fff; color: #2b1a5c; border-radius: 14px 14px 4px 14px; padding: 8px 11px; font-size: 14px; line-height: 1.38; }
.hc-taller-tu small { display: block; margin-top: 3px; color: #6b5a8e; font-size: 11.5px; }
.hc-taller-dice { justify-self: start; max-width: 94%; display: grid; gap: 6px; }
.hc-taller-dice p { margin: 0; background: rgba(255, 255, 255, .16); border-radius: 14px 14px 14px 4px; padding: 8px 11px; font-size: 14px; line-height: 1.42; }
.hc-taller-miniatura { border: 0; padding: 0; background: none; cursor: zoom-in; justify-self: start; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.hc-taller-boceto { margin: 0; display: grid; gap: 4px; }
.hc-taller-boceto svg { display: block; max-width: 100%; height: auto; }
.hc-taller-boceto figcaption { font-size: 12px; color: rgba(255, 255, 255, .8); padding: 0 2px; }
.hc-taller-amplio { display: grid; gap: 10px; justify-items: center; }
.hc-taller-bocetos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.hc-taller-spec { background: rgba(255, 255, 255, .1); border-radius: 13px; padding: 8px 11px; font-size: 13px; }
.hc-taller-spec summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
.hc-taller-spec summary::-webkit-details-marker { display: none; }
.hc-taller-spec dl { margin: 6px 0 0; display: grid; gap: 2px; }
.hc-taller-spec dt { font-size: 11px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: rgba(255, 255, 255, .66); margin-top: 6px; }
.hc-taller-spec dd { margin: 0; line-height: 1.4; }
.hc-taller-spec ul { margin: 0; padding-left: 18px; }
.hc-taller-editar { margin-left: auto; border: 0; border-radius: 999px; padding: 3px 10px; cursor: pointer; background: rgba(255, 255, 255, .2); color: #fff; font: 500 12px var(--ion-font-family); }
.hc-taller-campo { display: grid; gap: 3px; margin-bottom: 7px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.hc-taller-campo textarea { border: 0; border-radius: 9px; padding: 6px 8px; font: 400 13.5px var(--ion-font-family); resize: vertical; }
.hc-taller-escribir .hc-guia-mandos { flex-wrap: wrap; }
.hc-taller-escribir .hc-guia-mandos button.activo { background: #fff; color: #4a2f86; }
.hc-taller-senalado { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.hc-taller-senalado button { border: 0; background: none; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; }
.hc-taller-cabeza { display: flex; align-items: baseline; gap: 8px; }
.hc-taller-cabeza strong { flex: 1; font-size: 15px; }
.hc-taller-meta { font-size: 12px; color: rgba(255, 255, 255, .72); }
.hc-taller-notas { display: grid; gap: 6px; font-size: 13px; }
.hc-taller-notas p { margin: 0; background: rgba(255, 255, 255, .1); border-radius: 10px; padding: 6px 9px; }
.hc-taller-notas small { display: block; font-size: 11px; color: rgba(255, 255, 255, .65); }
/* While the person points, every tap is a choice: the cursor says so. */
html.hc-taller-senalando, html.hc-taller-senalando * { cursor: crosshair !important; }
/* The panel's one column is the panel's width, never its widest child's (a long request title pushed the Taller's
   buttons off the right edge, MOC-101). */
.hc-guia-panel { grid-template-columns: minmax(0, 1fr); }
.hc-guia-panel > * { min-width: 0; }
.hc-taller-tu, .hc-taller-dice p { overflow-wrap: anywhere; }

/* ─── MOC-103: one purple bubble, grown out of his button ───
   The owner: «the Cicerón UI should have a purple bubble that is integrated into his button». Whatever Cicerón shows —
   the fan of modes or the panel of an open mode — is ONE speech bubble hanging from the pill: no gap, a tail that comes
   out of the pill's underside in the pill's own colour, the brightest part of the gradient at the corner nearest the
   button, so the two read as one shape. The same in light and dark mode: the old dark rule painted the panel the
   theme's grey card, and it was more specific than the purple one (the review of 2026-10-13 saw it). */
hc-guia { gap: 0; }
.hc-guia-panel, .hc-guia-abanico,
:root.hc-oscuro .hc-guia-panel, :root.hc-oscuro .hc-guia-abanico {
  --hc-tarjeta: #5a3a9e; --ion-text-color: #fff; --hc-tinta-2: rgba(255, 255, 255, .76); --hc-tinta-3: rgba(255, 255, 255, .62);
  --hc-linea: rgba(255, 255, 255, .2); --hc-relleno: rgba(255, 255, 255, .15);
  position: relative; margin-top: 11px; color: #fff; border-radius: 22px 9px 22px 22px;
  background: radial-gradient(140% 110% at 88% 0%, #9a73d8 0%, #6a46b0 34%, #4a2f86 66%, #2f1d63 100%);
  box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .3), 0 24px 50px -24px rgba(38, 20, 76, .9); }
/* The tail: a rounded wedge under the pill, in the bubble's top colour. */
.hc-guia-panel::before, .hc-guia-abanico::before { content: ""; position: absolute; top: -10px; right: 38px; width: 24px; height: 24px; border-radius: 5px 0 0 0;
  background: #936cd2; transform: rotate(45deg); box-shadow: inset .6px .6px 0 rgba(255, 255, 255, .3); pointer-events: none; }
.hc-guia-panel > header, :root.hc-oscuro .hc-guia-panel > header { background: linear-gradient(#8a63cb 72%, rgba(138, 99, 203, 0)); border-radius: 22px 9px 0 0; }
/* The fan is a bubble too: its modes are rows inside it, not loose cards. */
.hc-guia-abanico { padding: 8px; gap: 2px; align-items: stretch; width: min(296px, calc(100vw - 24px)); box-sizing: border-box; overflow: hidden auto; }
.hc-guia-abanico button, .hc-guia-abanico .hc-guia-escucha, :root.hc-oscuro .hc-guia-abanico button, :root.hc-oscuro .hc-guia-abanico .hc-guia-escucha {
  width: 100%; background: transparent; box-shadow: none; border-radius: 14px; }
.hc-guia-abanico button:hover { background: rgba(255, 255, 255, .1); }
.hc-guia-abanico button:active { background: rgba(255, 255, 255, .18); }
.hc-guia-abanico .hc-guia-tour { background: rgba(255, 255, 255, .14); margin-bottom: 4px; }
.hc-guia-abanico .hc-guia-rotulo, :root.hc-oscuro .hc-guia-abanico .hc-guia-rotulo { color: rgba(255, 255, 255, .6); align-self: flex-start; margin: 6px 10px 2px; }
.hc-guia-abanico .hc-guia-escucha { border-top: .5px solid rgba(255, 255, 255, .18); border-radius: 0 0 14px 14px; margin-top: 4px; }
/* A reading mode wants height: on a phone, all of it below the button. */
/* …and never over the tab bar or the mini player: `--hc-guia-piso` is what guia.js measured below. */
.hc-guia-panel.hoja { max-height: min(calc(100dvh - var(--hc-guia-techo, 44px) - var(--hc-guia-piso, 18px) - 34px), 760px); }
@media (max-width: 599px) { .hc-guia-panel.hoja { width: calc(100vw - 20px); } }

/* Folded (Taller, while the person points or looks at the marks): a strip under the button, the screen free. */
.hc-guia-panel.mini { width: auto; max-width: calc(100vw - 20px); max-height: none; padding: 8px 8px 8px 14px; gap: 0; }
.hc-guia-panel.mini header { display: none; }
.hc-taller-tira { display: flex; align-items: center; gap: 10px; font: 600 13.5px var(--ion-font-family); }
.hc-taller-tira button { border: 0; border-radius: 999px; padding: 6px 12px; background: #fff; color: #4a2f86; font: 650 13px var(--ion-font-family); cursor: pointer; }

/* A request's state, readable on purple: each its own light chip with dark text, the closed ones quieter. */
.hc-taller-chip { flex: none; border-radius: 999px; padding: 2px 8px; font: 650 11px/1.5 var(--ion-font-family); letter-spacing: .01em; background: #fff; color: #4a2f86; white-space: nowrap; }
.hc-taller-chip[data-estado="borrador"] { background: rgba(255, 255, 255, .22); color: #fff; }
.hc-taller-chip[data-estado="propuesta"] { background: #e8ddff; color: #3d2473; }
.hc-taller-chip[data-estado="aceptada"] { background: #cfe8ff; color: #0b3a66; }
.hc-taller-chip[data-estado="en_curso"] { background: #ffe2a8; color: #5c3b00; }
.hc-taller-chip[data-estado="construida"] { background: #fec229; color: #3d2a00; }
.hc-taller-chip[data-estado="hecha"] { background: #bff0d4; color: #0d4a2a; }
.hc-taller-chip[data-estado="descartada"] { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .78); }

.hc-taller-filtro { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .16); }
.hc-taller-filtro button { flex: 1; border: 0; border-radius: 9px; padding: 6px; background: none; color: rgba(255, 255, 255, .82); font: 600 13px var(--ion-font-family); cursor: pointer; }
.hc-taller-filtro button[aria-selected="true"] { background: rgba(255, 255, 255, .22); color: #fff; }
.hc-taller-filtro b { font-weight: 700; opacity: .7; margin-left: 3px; }
.hc-taller-lista { display: grid; gap: 6px; }
.hc-taller-fila { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .1); }
.hc-taller-fila:active { background: rgba(255, 255, 255, .18); }
.hc-taller-titulo { display: flex; align-items: flex-start; gap: 8px; }
.hc-taller-titulo strong { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; }
.hc-taller-fila small, .hc-taller-meta { font-size: 12px; color: rgba(255, 255, 255, .74); }
.hc-taller-fila small b.alerta, .hc-taller-meta b.alerta { color: #ffd166; }
.hc-taller-todas { justify-self: center; border: 0; background: none; color: rgba(255, 255, 255, .86); font: 600 13px var(--ion-font-family); cursor: pointer; padding: 4px; }
.hc-taller-cabeza { align-items: flex-start; }

/* The thread scrolls with the panel; nothing scrolls inside it (a nested scroller hid Cicerón's question). */
.hc-taller-hilo { max-height: none; overflow: visible; }
.hc-taller-piensa { animation: hc-guia-latido 1.1s ease-in-out infinite alternate; }
.hc-taller-ver { justify-self: start; border: 0; border-radius: 999px; padding: 4px 10px; background: rgba(255, 255, 255, .18); color: #fff; font: 600 12px var(--ion-font-family); cursor: pointer; }
.hc-taller-fallo { display: flex; align-items: center; gap: 10px; background: rgba(238, 56, 84, .22); border-radius: 12px; padding: 8px 10px; }
.hc-taller-fallo p { margin: 0; flex: 1; font-size: 13px; }
.hc-taller-fallo button { border: 0; border-radius: 999px; padding: 6px 12px; background: #fff; color: #4a2f86; font: 650 13px var(--ion-font-family); cursor: pointer; }
.hc-taller-enviar.listo { background: #fec229 !important; color: #3d2a00 !important; font-weight: 700 !important; }

/* The spec editor: the fields grow, and Guardar · Cancelar stay at the bottom of the bubble while it scrolls. */
.hc-taller-campo textarea { field-sizing: content; min-height: 2.6em; max-height: 40vh; }
.hc-taller-fijos { position: sticky; bottom: -12px; margin: 4px -11px -8px; padding: 10px 11px; background: linear-gradient(rgba(74, 47, 134, 0), #4a2f86 40%); }

/* A decision in a request (accept with its risk, check it, discard): a lighter card, the buttons in reach. */
.hc-taller-decide { display: grid; gap: 8px; background: rgba(255, 255, 255, .13); border-radius: 14px; padding: 10px 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.hc-taller-decide p { margin: 0; font-size: 13.5px; line-height: 1.4; }
.hc-taller-decide textarea { border: 0; border-radius: 10px; padding: 7px 9px; font: 400 13.5px var(--ion-font-family); }
.hc-taller-riesgos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hc-taller-riesgos button { border: 0; border-radius: 10px; padding: 8px 4px; background: #fff; color: #4a2f86; font: 650 13px var(--ion-font-family); cursor: pointer; }