/* ---------- El (?) (RL 10, 2-nov-2026; diseño en diseno/ayudas.md): un globo que flota anclado a su (?), con flecha.
   Solo tokens. El componente vive en js/que.js; lo cargan la app (app.css lo importa) y la bienvenida. */
:root { --pop-sup: var(--paper-raised); --pop-pozo: var(--paper); --pop-borde: var(--line); }
[data-theme="noche"] { --pop-sup: var(--tel-pantalla); --pop-pozo: var(--noche-2); --pop-borde: var(--glass-border); }

/* El círculo (?) (Gregorio, 2-nov-2026: «más chiquito y amarillo, que resalte más. Pero eso no debe desalinear»):
   16 px a la vista, siempre mantequilla; 44 px de toque invisibles. Márgenes verticales negativos: no agranda la línea,
   así que nunca mueve el texto ni las cifras de al lado. */
.rita-que { display: inline; }
.rita-que-b {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 16px; height: 16px; margin: -4px 0 -4px 3px; padding: 0; vertical-align: middle;
  border-radius: 50%; border: 0; background: var(--vainilla);
  color: var(--on-mantequilla); font: 700 10px/1 var(--font-sans); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s, transform .2s;
}
.rita-que-b::after { content: ""; position: absolute; inset: -14px; }           /* 44 × 44 de toque, sin ocupar espacio */
.rita-que-b:hover { background: var(--mantequilla-hover); }
.rita-que-b:active { transform: scale(.92); }
/* Nuevo (nunca abierto): mantequilla plena. Visto: vainilla, un mantequilla más suave. Nunca gris. */
.rita-que-b.is-nuevo { background: var(--mantequilla); }
.rita-que-b.is-nuevo:hover { background: var(--mantequilla-hover); }
/* Abierto */
.rita-que-b[aria-expanded="true"] { background: var(--heading); color: var(--paper-raised); }
[data-theme="noche"] .rita-que-b:not(.is-nuevo) { background: var(--mantequilla-hover); }
[data-theme="noche"] .rita-que-b[aria-expanded="true"] { background: var(--ink); color: var(--noche); }

/* Patrón pegado: la palabra y el círculo son un solo botón. Subrayado punteado; no cambia el tamaño de la cifra. */
.rita-que-p {
  display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit;
  cursor: pointer; white-space: nowrap; text-align: inherit; -webkit-tap-highlight-color: transparent;
}
.rita-que-p .rita-que-pal { text-decoration: underline dotted; text-decoration-thickness: max(1.5px, .06em); text-underline-offset: .18em; text-decoration-color: var(--apagado); transition: text-decoration-color .2s; }
.rita-que-p:hover .rita-que-pal, .rita-que-p[aria-expanded="true"] .rita-que-pal { text-decoration-color: currentColor; }
.rita-que-p .rita-que-b { pointer-events: none; }                               /* el toque lo recibe el botón entero */
.rita-que-p:hover .rita-que-b { background: var(--mantequilla-hover); }
.rita-que-p[aria-expanded="true"] .rita-que-b { background: var(--heading); color: var(--paper-raised); }
[data-theme="noche"] .rita-que-p[aria-expanded="true"] .rita-que-b { background: var(--ink); color: var(--noche); }
.rita-que-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La nota en el DOM es solo la fuente del contenido: nunca se pinta en su lugar. */
.rita-que-t { display: none !important; }

/* El globo: flota, no empuja nada. */
.rita-pop {
  position: fixed; inset: auto; margin: 0; padding: 0; overflow: visible; color: var(--ink);   /* reinicio de [popover] */
  top: 0; left: 0; z-index: 1000; width: 340px;
  background: var(--pop-sup);
  border: 1px solid var(--pop-borde);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(29,27,23,.06), 0 14px 36px -10px rgba(29,27,23,.28);
  font-size: 15px; line-height: 1.45; text-align: left; letter-spacing: 0; text-transform: none; font-weight: 400; white-space: normal;
  opacity: 0; transform: translateY(var(--pop-dy, 14px)) scale(.92);
  transform-origin: var(--pop-ox, 50%) var(--pop-oy, 0%);
  transition: opacity .2s cubic-bezier(.2,.9,.3,1), transform .26s cubic-bezier(.34,1.42,.56,1);
}
.rita-pop[hidden]:not([popover]) { display: none; }
.rita-pop.is-open { opacity: 1; transform: none; }
.rita-pop.is-cerrando { transition-duration: .14s; transition-timing-function: ease-in; }
/* El foco entra al globo para que el lector lo anuncie; la caja no lleva anillo: el (?) abierto ya marca dónde estás. */
.rita-pop:focus, .rita-pop:focus-visible { outline: none; }
[data-theme="noche"] .rita-pop { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 20px 48px -10px rgba(0,0,0,.7); }

.rita-pop-flecha {
  position: absolute; left: var(--pop-ax, 50%); width: 14px; height: 14px; margin-left: -7px;
  background: inherit; border: inherit; border-radius: 0 0 3px 0; pointer-events: none;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.rita-pop[data-lado="abajo"] .rita-pop-flecha { top: -7px; transform: rotate(-135deg); }
.rita-pop[data-lado="arriba"] .rita-pop-flecha { bottom: -7px; transform: rotate(45deg); }

.rita-pop-in { position: relative; padding: var(--space-3) var(--space-4) var(--space-4); max-height: var(--pop-maxh, none); overflow: auto; overscroll-behavior: contain; border-radius: inherit; display: grid; gap: var(--space-3); }
.rita-pop-cab { display: flex; align-items: flex-start; gap: 8px; }
.rita-pop-t { flex: 1; margin: 0; padding-top: 4px; font-size: 17px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--heading); }
.rita-pop-t small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-muted); }
.rita-pop--de-donde .rita-pop-t { font-size: 22px; letter-spacing: -.02em; }
.rita-pop-x {
  position: relative; flex: none; width: 32px; height: 32px; margin: -2px -6px 0 0; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-muted); cursor: pointer; transition: background-color .2s, color .2s;
}
.rita-pop-x::after { content: ""; position: absolute; inset: -6px; }            /* 44 × 44 */
.rita-pop-x:hover { background: var(--hover-crema); color: var(--heading); }
[data-theme="noche"] .rita-pop-x:hover { background: rgba(255,255,255,.1); color: var(--ink); }
.rita-pop-x svg { width: 16px; height: 16px; }
.rita-pop-frase { margin: 0; color: var(--ink); }
.rita-pop-frase, .rita-pop-ej, .rita-pop-imp { text-wrap: pretty; }   /* sin palabras huérfanas a 375 px */
.rita-pop-ej { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--pop-pozo); font-size: 14px; color: var(--ink); }
.rita-pop-ej b { color: var(--heading); font-weight: 700; white-space: nowrap; }
/* El resaltador: al abrirse, la cifra clave se subraya con mantequilla de izquierda a derecha.
   padding-bottom baja la franja a la zona de los descendentes: no pasa por encima de las cifras (contraste en noche). */
.rita-pop-ej b:last-of-type {
  padding-bottom: .12em;
  background: linear-gradient(var(--mantequilla), var(--mantequilla)) 0 100% / 0% .5em no-repeat;
  transition: background-size 560ms cubic-bezier(.65,0,.35,1) 220ms;
}
.rita-pop.is-open .rita-pop-ej b:last-of-type { background-size: 100% .5em; }
.rita-pop.is-quieto, .rita-pop.is-quieto .rita-pop-ej b:last-of-type { transition: none; }
.rita-pop--de-donde .rita-pop-ej { font-size: 15px; line-height: 1.6; }
.rita-pop-et { display: block; margin-bottom: var(--space-1); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--miel); }
.rita-pop-imp { margin: 0; padding: 0 0 0 12px; border-left: 3px solid var(--mantequilla); font-size: 14px; color: var(--ink); }   /* la raya ya dice «por qué te importa»: sin etiqueta */
.rita-pop-mas {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 -10px; padding: 0;
  border: 0; background: none; color: var(--heading); font-size: 14px; font-weight: 600; cursor: pointer;
}
.rita-pop-mas span { transition: transform .2s; }
.rita-pop-mas:hover span { transform: translateX(3px); }
[data-theme="noche"] .rita-pop-mas { color: var(--mantequilla); }

@media (prefers-reduced-motion: reduce) {
  .rita-pop, .rita-pop.is-cerrando { transform: none !important; transition: opacity .12s linear; }
  .rita-que-b, .rita-pop-mas span { transition: none; }
  .rita-pop-ej b:last-of-type { background-size: 100% .5em; transition: none; }   /* el resaltador sale pintado */
}
.rita-pop-c { display: grid; gap: var(--space-3); }