/* tablas.css — tablas de contenido legibles en móvil (2026-09-29).
   Marcado (app/render.php, caso 'table'):
     .tabla[style=--cols:N] > p.tabla-hint + .tabla-marco > .table-scroll[tabindex][role=region] > table
   1) Ancho mínimo por columna: el texto corre en líneas de varias palabras. Si la tabla no entra, se
      hace más ancha que su recuadro A PROPÓSITO y se desliza dentro de .table-scroll.
   2) Solo con .desborda (la pone el JS de layout.php comparando scrollWidth vs clientWidth):
      primera columna fija, degradado a la derecha y aviso "Swipe to see more →". Si la tabla entra,
      no aparece nada de eso. */
.tabla{--c1:7.25rem;--cn:9.5rem;margin:8px 0 26px}
.prose .tabla table{margin:0;min-width:calc(var(--c1) + (var(--cols,3) - 1) * var(--cn));
  border-collapse:separate;border-spacing:0}  /* separate: con collapse el borde no acompaña a la celda fija */
.prose .tabla th,.prose .tabla td{min-width:var(--cn)}
.prose .tabla th:first-child,.prose .tabla td:first-child{min-width:var(--c1)}
.tabla-marco{position:relative}

/* Foco visible del contenedor desplazable (se recorre con ← → del teclado) */
.table-scroll:focus{outline:none}
.table-scroll:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:6px}

/* Aviso: oculto salvo desborde; tras el primer deslizamiento se desvanece SIN mover el layout */
.tabla-hint{display:none;margin:0 0 8px;text-align:right;font-size:.875rem;line-height:1.4;font-weight:500;
  color:var(--grey);letter-spacing:.01em;transition:opacity .3s ease}
.tabla-hint span{display:inline-block;margin-left:2px}
.tabla.desborda .tabla-hint{display:block}
.tabla.visto .tabla-hint{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .tabla.desborda:not(.visto) .tabla-hint span{animation:tabla-nudge 1.6s ease-in-out infinite}
}
@keyframes tabla-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* Degradado en el borde derecho: señala que hay más; se apaga al llegar al final */
.tabla-marco::after{content:"";position:absolute;top:0;right:0;bottom:0;width:40px;pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,0),var(--white));opacity:0;transition:opacity .25s ease}
html[data-theme=dark] .tabla-marco::after{background:linear-gradient(to right,rgba(14,14,16,0),var(--white))}
.tabla.desborda .tabla-marco::after{opacity:1}
.tabla.desborda.al-final .tabla-marco::after{opacity:0}

/* Primera columna fija, con fondo sólido (las variables ya cambian en modo oscuro) */
.tabla.desborda th:first-child,.tabla.desborda td:first-child{position:sticky;left:0;z-index:1;
  box-shadow:inset -1px 0 0 var(--line);transition:box-shadow .2s ease}
.tabla.desborda td:first-child{background:var(--white)}
.tabla.desborda th:first-child{background:var(--paper)}
.tabla.desborda.desplazada th:first-child,.tabla.desborda.desplazada td:first-child{
  box-shadow:inset -1px 0 0 var(--line),8px 0 10px -8px rgba(0,0,0,.22)}
html[data-theme=dark] .tabla.desborda.desplazada th:first-child,
html[data-theme=dark] .tabla.desborda.desplazada td:first-child{box-shadow:inset -1px 0 0 var(--line),8px 0 12px -8px rgba(0,0,0,.8)}

/* Móvil: un poco menos de relleno para que quepan más palabras por línea; letra ≥14 px */
@media (max-width:600px){
  .tabla{--c1:7rem;--cn:9.75rem}
  .prose .tabla table{font-size:.9rem}               /* 14,4 px */
  .prose .tabla th,.prose .tabla td{padding:11px 12px}
}