/* =============================================================
   Funerales Andana — ayuda en pantalla y manual de uso
   El botón flotante, el panel lateral, el recorrido guiado y las
   páginas del manual. Usa los colores y medidas de app.css; aquí
   no se define ningún color nuevo que no salga de esa paleta.
   ============================================================= */

/* ---------------------------------------------------------------
   Botón flotante
   Una pestaña pegada al borde derecho, abajo. Plegada deja asomar
   sólo la flecha; al desplegarse se desliza hacia la izquierda.
   Va en el teal de la marca, el mismo de la cabecera del panel:
   sobre el contenido claro, una pestaña blanca pasaba inadvertida.
   --------------------------------------------------------------- */
.ayuda-flotante {
  position: fixed;
  right: 0;
  bottom: 22px;
  z-index: 60;
  display: flex;
  align-items: stretch;
  border-radius: 999px 0 0 999px;
  box-shadow: 0 2px 4px rgba(6,36,44,.18), 0 10px 26px -8px rgba(6,36,44,.5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.ayuda-flotante.plegado {
  /* Sólo queda a la vista la flecha, 30px */
  transform: translateX(calc(100% - 30px));
}

.ayuda-boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 12px;
  background: var(--and-800);
  color: #fff;
  border: 0;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
}
.ayuda-boton svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: var(--oro-claro); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ayuda-boton:hover { background: var(--and-700); }
.ayuda-boton:focus-visible,
.ayuda-plegar:focus-visible {
  outline: 2px solid var(--and-500);
  outline-offset: 2px;
}
.ayuda-boton[aria-expanded="true"] { background: var(--and-700); }

.ayuda-plegar {
  width: 30px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0 0 0 3px;
  background: var(--and-900);
  color: var(--and-200);
  border: 0;
  border-right: 1px solid rgba(255,255,255,.12);
  border-radius: 999px 0 0 999px;
  cursor: pointer;
}
.ayuda-plegar:hover { background: var(--and-950); color: #fff; }
.ayuda-plegar svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s ease;
}
/* Plegada, la flecha es lo único que queda: más visible y apuntando
   hacia donde vuelve a salir. */
.ayuda-flotante.plegado .ayuda-plegar svg { transform: rotate(180deg); }
.ayuda-flotante.plegado .ayuda-plegar { background: var(--and-800); color: #fff; }

/* La primera vez, un pulso breve para que se note que existe. */
.ayuda-flotante.nuevo .ayuda-boton svg {
  animation: ayuda-pulso 1.6s ease-out 3;
  border-radius: 50%;
}
@keyframes ayuda-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(176,141,63,.55); }
  100% { box-shadow: 0 0 0 12px rgba(176,141,63,0); }
}

/* El final de cada pantalla puede subir por encima del botón: sin este
   margen, la última fila de una tabla o el «Siguiente» de la paginación
   quedaban tapados al llegar abajo. */
.contenido { padding-bottom: 96px; }

/* ---------------------------------------------------------------
   Panel lateral
   Entra desde la derecha, donde está el botón, y deja a la vista el
   menú. No bloquea la pantalla: se puede leer un paso y hacerlo sin
   cerrarlo.
   --------------------------------------------------------------- */
.ayuda-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  box-shadow: 0 0 0 1px rgba(6,36,44,.04), -18px 0 48px -18px rgba(6,36,44,.42);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
}
.ayuda-panel.abierto {
  transform: none;
  visibility: visible;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s;
}

.ayuda-cab {
  flex: none;
  background: var(--and-900);
  color: var(--and-100);
  padding: 14px 18px 14px;
}
.ayuda-cab-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ayuda-nombre {
  margin: 0;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .04em;
  color: #fff;
}
.ayuda-nombre svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--oro-claro); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ayuda-cerrar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radio);
  color: var(--and-200); cursor: pointer;
}
.ayuda-cerrar:hover { background: rgba(255,255,255,.08); color: #fff; }
.ayuda-cerrar:focus-visible { outline: 2px solid var(--and-300); outline-offset: 1px; }
.ayuda-cerrar svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.ayuda-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ayuda-nav button {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 13px;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.18);
  background: none;
  color: var(--and-100);
  cursor: pointer;
}
.ayuda-nav button:hover { background: rgba(255,255,255,.08); color: #fff; }
.ayuda-nav button:focus-visible { outline: 2px solid var(--and-300); outline-offset: 1px; }
.ayuda-nav button[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--and-900);
  font-weight: 600;
}
/* «Preguntar» abre el asistente: va al extremo, en el dorado de la marca,
   para que no se confunda con el buscador del manual. */
.ayuda-nav .ayuda-nav-preguntar {
  margin-left: auto;
  background: var(--oro-claro);
  border-color: var(--oro-claro);
  color: var(--and-950);
  font-weight: 600;
}
.ayuda-nav .ayuda-nav-preguntar:hover { background: #E6CD94; border-color: #E6CD94; color: var(--and-950); }
.ayuda-nav .ayuda-nav-preguntar[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--oro-claro);
  box-shadow: inset 0 0 0 1px var(--oro-claro);
}
.ayuda-nav svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ayuda-busca { position: relative; margin-top: 12px; }
.ayuda-busca-asis { margin: 6px 2px 0; font-size: 12px; color: var(--and-300); }
.ayuda-busca-asis button {
  font: inherit; color: var(--oro-claro); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ayuda-busca-asis button:hover { color: #fff; }
.ayuda-busca-asis button:focus-visible { outline: 2px solid var(--and-300); outline-offset: 1px; }
.ayuda-busca svg {
  position: absolute; left: 11px; top: 50%;
  width: 17px; height: 17px; margin-top: -8.5px;
  fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round;
  pointer-events: none;
}
.ayuda-busca input[type=search] {
  padding: 9px 12px 9px 36px;
  border-color: transparent;
  border-radius: 99px;
  font-size: 14px;
}
.ayuda-busca input[type=search]:focus {
  border-color: var(--and-400);
  box-shadow: 0 0 0 3px rgba(147,198,211,.35);
}

.ayuda-cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 28px;
}
.ayuda-cuerpo:focus { outline: none; }
.ayuda-cuerpo[aria-busy="true"] { opacity: .55; transition: opacity .15s; }

.ayuda-pie {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 22px;
  border-top: 1px solid var(--rule-soft);
  background: var(--and-50);
  font-size: 13px;
  color: var(--muted);
}
.ayuda-pie a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--and-700); font-weight: 500; text-decoration: none;
}
.ayuda-pie a:hover { text-decoration: underline; }
.ayuda-pie a svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ayuda-tecla { white-space: nowrap; }
kbd {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 1px 5px;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------
   Contenido de la ayuda — igual en el panel y en el manual
   --------------------------------------------------------------- */
.ay-bloque { font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.ay-bloque > * + * { margin-top: 12px; }
.ay-bloque p { margin: 0; }
.ay-bloque a { color: var(--and-700); }
.ay-bloque a:hover { color: var(--and-900); }

.ay-ceja {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--and-600);
}
.ay-ceja a { color: inherit; text-decoration: none; }
.ay-ceja a:hover { text-decoration: underline; }
.ay-bloque .ay-ceja + .ay-titulo { margin-top: 4px; }

.ay-titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.ay-titulo:focus { outline: none; }

/* Rótulos de pantalla: botones y campos tal como se leen en el sistema */
.ay-ui {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--and-200);
  border-radius: 3px;
  background: var(--and-50);
  color: var(--and-900);
  font-size: .92em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.ay-seccion { padding-top: 6px; }
.ay-seccion > * + * { margin-top: 10px; }
.ay-bloque h3, .ay-bloque h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--and-800);
}
.ay-seccion-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}

/* Paso a paso: números en círculo, como en una hoja de instrucciones */
.ay-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
  display: grid;
  gap: 2px;
}
.ay-pasos li {
  counter-increment: paso;
  position: relative;
  padding: 8px 10px 8px 42px;
  border-radius: var(--radio);
}
.ay-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 8px;
  top: 7px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--and-100);
  color: var(--and-800);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ay-pasos li.en-foco { background: var(--and-50); }
.ay-pasos li.en-foco::before { background: var(--oro); color: #fff; }
/* «Mostrar» sigue al texto en la misma línea: como columna aparte, dejaba
   el paso apretado en la mitad del panel. */
.ay-pasos .ay-mostrar { margin-left: 6px; vertical-align: 1px; }

.ay-mostrar,
.ay-recorrer {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 9px 2px 7px;
  border: 1px solid var(--and-200);
  border-radius: 99px;
  background: var(--surface);
  color: var(--and-700);
  cursor: pointer;
  white-space: nowrap;
}
.ay-mostrar:hover,
.ay-recorrer:hover { background: var(--and-50); border-color: var(--and-400); color: var(--and-900); }
.ay-mostrar:focus-visible,
.ay-recorrer:focus-visible { outline: 2px solid var(--and-500); outline-offset: 1px; }
.ay-mostrar svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
}
.ay-recorrer {
  background: var(--and-800);
  border-color: var(--and-800);
  color: #fff;
  padding: 4px 12px 4px 9px;
}
.ay-recorrer:hover { background: var(--and-700); border-color: var(--and-700); color: #fff; }
.ay-recorrer svg { width: 13px; height: 13px; fill: currentColor; }

/* Notas: un consejo informa, una advertencia frena */
.ay-nota {
  padding: 11px 14px 12px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  border-left-width: 3px;
}
.ay-nota > * + * { margin-top: 6px; }
.ay-nota ul { margin: 0; padding-left: 18px; }
.ay-nota li + li { margin-top: 4px; }
.ay-consejo { background: var(--and-50); border-color: var(--and-200); border-left-color: var(--and-500); }
.ay-cuidado { background: var(--warn-bg); border-color: #EBD9B6; border-left-color: var(--warn); }
.ay-bloque .ay-cuidado h3,
.ay-bloque .ay-cuidado h4 { color: var(--warn); }

/* Preguntas frecuentes */
.ay-pregunta {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radio);
  background: var(--surface);
}
.ay-pregunta + .ay-pregunta { margin-top: 6px; }
.ay-pregunta summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 12px 9px 34px;
  position: relative;
  font-weight: 500;
  color: var(--ink);
}
.ay-pregunta summary::-webkit-details-marker { display: none; }
.ay-pregunta summary::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--and-600);
  border-bottom: 2px solid var(--and-600);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.ay-pregunta[open] summary::before { transform: rotate(45deg); top: 13px; }
.ay-pregunta summary:hover { background: var(--and-50); }
.ay-pregunta summary:focus-visible { outline: 2px solid var(--and-500); outline-offset: -2px; }
.ay-respuesta { padding: 0 14px 12px 34px; }

.ay-siguiente {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}
.ay-siguiente > span {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.ay-siguiente a { font-weight: 500; }
.ay-siguiente a::after { content: " \2192"; }

/* Listas de enlaces al pie del panel */
.ay-mas {
  margin-top: 22px !important;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}
.ay-mas ul { list-style: none; margin: 8px 0 0; padding: 0; }
.ay-mas li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--and-700);
  text-decoration: none;
  font-size: 14px;
}
.ay-mas li:last-child a { border-bottom: 0; }
.ay-mas li a::after { content: "\203A"; color: var(--and-400); font-size: 18px; line-height: 1; }
.ay-mas li a:hover { color: var(--and-900); background: var(--and-50); }

/* Índice dentro del panel */
.ay-grupo { margin-top: 18px !important; }
.ay-grupo ul { list-style: none; margin: 6px 0 0; padding: 0; }
.ay-grupo li a {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--radio);
  text-decoration: none;
}
.ay-grupo li a:hover { background: var(--and-50); }
.ay-t { display: block; color: var(--and-800); font-weight: 600; font-size: 14.5px; }
.ay-d { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 1px; }

/* Resultados de búsqueda */
.ay-resultados { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ay-resultados button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radio);
  background: var(--surface);
  cursor: pointer;
}
.ay-resultados button:hover,
.ay-resultados button:focus-visible { border-color: var(--and-300); background: var(--and-50); outline: none; }
.ay-resultados .ay-r-tema {
  display: block;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--and-600);
}
.ay-resultados .ay-r-titulo { display: block; font-weight: 600; color: var(--ink); margin-top: 2px; }
.ay-resultados .ay-r-frag { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.ay-bloque mark, .ay-resultados mark {
  background: rgba(217,190,126,.45);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.ay-aviso-busqueda { font-size: 13px; color: var(--muted); }

.ay-error {
  padding: 14px;
  border-radius: var(--radio);
  background: var(--crit-bg);
  color: var(--crit);
}

/* ---------------------------------------------------------------
   Recorrido en pantalla
   Un marco dorado alrededor del elemento y el resto en penumbra,
   con una burbuja que explica qué es. Se puede seguir usando la
   pantalla: el marco no atrapa los clics.
   --------------------------------------------------------------- */
.ay-foco {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--oro), 0 0 0 7px rgba(217,190,126,.45), 0 0 0 100vmax rgba(6,36,44,.5);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.ay-burbuja {
  position: fixed;
  z-index: 81;
  width: min(340px, calc(100vw - 24px));
  padding: 14px 16px 12px;
  background: var(--surface);
  border-radius: 6px;
  border-top: 3px solid var(--oro);
  box-shadow: var(--sombra-2);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.ay-burbuja:focus { outline: none; }
.ay-burbuja .ay-b-cuenta {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--and-600);
}
.ay-burbuja .ay-b-texto { margin: 6px 0 0; }
.ay-burbuja .ay-b-botones {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 12px;
}
.ay-burbuja .ay-b-botones div { display: flex; gap: 6px; }
.ay-burbuja .btn { padding: 6px 12px; font-size: 13.5px; }

/* ---------------------------------------------------------------
   Páginas del manual
   --------------------------------------------------------------- */
.ay-manual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
  align-items: start;
}
.ay-manual-cuerpo { display: grid; gap: 20px; min-width: 0; }
.ay-manual .ay-bloque.ay-pagina,
.ay-manual .ay-bloque.ay-completo {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px 26px 24px;
  scroll-margin-top: 16px;
}
.ay-manual .ay-bloque > p,
.ay-manual .ay-bloque .ay-pasos,
.ay-manual .ay-bloque .ay-nota,
.ay-manual .ay-bloque .ay-pregunta { max-width: 74ch; }
.ay-bloque:target { border-color: var(--and-400); box-shadow: 0 0 0 3px rgba(147,198,211,.35), var(--sombra); }

.ay-indice-lateral {
  position: sticky;
  top: 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radio);
  padding: 14px 16px 16px;
  font-size: 13.5px;
}
.ay-indice-lateral h2 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--and-800);
}
.ay-indice-lateral ul { list-style: none; margin: 0; padding: 0; }
.ay-indice-lateral li a {
  display: block;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: var(--radio);
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.4;
}
.ay-indice-lateral li a:hover { background: var(--and-50); color: var(--and-900); }
.ay-indice-lateral h2 + ul + h2 { margin-top: 16px; }

.ay-indice-pagina {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.ay-lista-temas { list-style: none; margin: 0; padding: 6px 0; }
.ay-lista-temas a {
  display: block;
  padding: 10px 18px;
  text-decoration: none;
}
.ay-lista-temas a:hover { background: var(--and-50); }
.ay-lista-temas li + li a { border-top: 1px solid var(--rule-soft); }

.ay-portada {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
}
.ay-portada .panel-cuerpo p { margin: 0; }
.ay-como-usar { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.ay-buscador-pagina { display: flex; gap: 8px; }
.ay-buscador-pagina input { flex: 1; }

.ay-tema-cab {
  margin: 12px 0 0;
  padding-top: 4px;
  font-size: 22px;
  font-weight: 650;
  color: var(--and-900);
  letter-spacing: -.01em;
}
.ay-tema-cab + p { margin: 4px 0 0; color: var(--muted); }
.ay-completo-tema { display: grid; gap: 16px; }
.ay-completo-tema + .ay-completo-tema { margin-top: 36px; }

@media (max-width: 1100px) {
  .ay-manual { grid-template-columns: 1fr; }
  .ay-indice-lateral { position: static; order: -1; }
  .ay-portada { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .ayuda-flotante { bottom: 14px; }
  .ay-manual .ay-bloque.ay-pagina,
  .ay-manual .ay-bloque.ay-completo { padding: 18px 16px 20px; }
}

@media print {
  .ayuda-flotante, .ayuda-panel, .ay-foco, .ay-burbuja,
  .ay-indice-lateral, .ay-mostrar, .ay-recorrer, .ay-buscador-pagina { display: none !important; }
  .contenido { padding-bottom: 0; }
  .ay-manual { display: block; }
  .ay-manual .ay-bloque.ay-pagina,
  .ay-manual .ay-bloque.ay-completo { box-shadow: none; border: 0; padding: 0; margin-top: 18px; }
  .ay-completo-tema { break-before: page; }
  .ay-completo-tema:first-child { break-before: auto; }
  .ay-bloque { break-inside: auto; }
  .ay-nota, .ay-pregunta, .ay-pasos li { break-inside: avoid; }
  .ay-ui { border-color: #999; background: none; }
  .ay-bloque a { color: inherit; text-decoration: none; }
}

/* El atributo hidden debe ganarle a los display de arriba: ayuda.js
   enciende y apaga botones con él. */
.ayuda-panel [hidden],
.ay-bloque [hidden],
.ayuda-flotante [hidden] { display: none !important; }

/* Resultados en la página del manual: enlaces en vez de botones */
.ay-resultados a.ay-resultado-enlace {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radio);
  text-decoration: none;
}
.ay-resultados a.ay-resultado-enlace:hover { border-color: var(--and-300); background: var(--and-50); }

/* Una lista que no es una secuencia: casos, reglas, colores */
.ay-lista { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.ay-lista li::marker { color: var(--and-500); }

/* ---------------------------------------------------------------
   «Preguntar»: el asistente dentro del panel. Ocupa el lugar del
   manual; la pregunta propia a la derecha, la respuesta a la izquierda.
   --------------------------------------------------------------- */
.asis { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.asis[hidden] { display: none; }
.asis-cab {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--rule-soft);
}
.asis-cab img { flex: none; }
.asis-cab div { flex: 1; min-width: 0; line-height: 1.25; }
.asis-cab strong { display: block; font-size: 14px; color: var(--and-900); }
.asis-cab small { display: block; font-size: 12px; color: var(--muted); }
.asis-nueva {
  flex: none;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 1px solid var(--rule); border-radius: var(--radio);
  color: var(--and-800); cursor: pointer;
}
.asis-nueva:hover { background: var(--and-50); }
.asis-nueva:focus-visible, .asis-ejemplo:focus-visible, .asis-enviar:focus-visible {
  outline: 2px solid var(--and-500); outline-offset: 2px;
}
.asis-nueva svg, .asis-enviar svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.asis-mensajes {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.asis-bienvenida p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.asis-ejemplos { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.asis-ejemplo {
  font: inherit; font-size: 13px; text-align: left;
  padding: 6px 11px;
  border: 1px solid var(--and-200); border-radius: 99px;
  background: var(--and-50); color: var(--and-800);
  cursor: pointer;
}
.asis-ejemplo:hover { background: var(--and-100); }
.asis-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.asis-yo { align-self: flex-end; background: var(--and-800); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.asis-bot { align-self: flex-start; background: var(--surface-2); color: var(--ink); border: 1px solid var(--rule-soft); border-bottom-left-radius: 4px; }
.asis-bot p { margin: 0 0 8px; }
.asis-bot p:last-child { margin-bottom: 0; }
.asis-bot ul { margin: 0 0 8px; padding-left: 18px; }
.asis-bot li { margin: 2px 0; }
.asis-bot a { color: var(--and-700); font-weight: 600; }
.asis-nw { white-space: nowrap; }
.asis-manual { font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--rule); padding-top: 6px; }
.asis-espera { color: var(--muted); font-style: italic; }
.asis-error { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.asis-entrada {
  flex: none;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 22px;
  border-top: 1px solid var(--rule-soft);
}
.asis-entrada textarea {
  flex: 1; resize: none; min-height: 38px; max-height: 110px;
  font: inherit; font-size: 14px; line-height: 1.4;
  padding: 8px 10px;
}
.asis-enviar {
  flex: none;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: var(--radio);
  background: var(--and-800); color: #fff; cursor: pointer;
}
.asis-enviar:hover { background: var(--and-700); }
.asis-enviar:disabled { opacity: .5; cursor: wait; }
.asis-nota { flex: none; margin: 0; padding: 0 22px 10px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
@media print { .asis { display: none !important; } }