/* Tablas de deducción — estilo alineado con la web pública de edumaterial.net
   (paleta y tokens de tools/publico.py: fondo #FDFBF7, tinta #1A1720,
   mostaza #E8B23C, coral #D8433B, teal #2D968E). Sin arte figurativo:
   solo tablas y cuadrículas técnicas. */

.tablas-raiz {
  --fondo: #FDFBF7;
  --tinta: #1A1720;
  --tinta-suave: #6C6577;
  --linea: rgba(26, 23, 32, .09);
  --linea-fuerte: rgba(26, 23, 32, .22);
  --mostaza: #E8B23C;
  --coral: #D8433B;
  --teal: #2D968E;
  --cristal: rgba(255, 255, 255, .78);
  --cristal-alto: #FFFFFF;
  --radio: 16px;
  --radio-g: 22px;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(.75rem, 3vw, 2rem);
}

.tablas-raiz *, .tablas-raiz *::before { box-sizing: border-box; }

.tablas-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .35rem; }
.tablas-cabecera h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); margin: 0; letter-spacing: .01em; }
.tablas-cabecera .tablas-sub { color: var(--tinta-suave); margin: 0; }
.tablas-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 .9rem; }
.tablas-meta span {
  background: var(--cristal); border: 1px solid var(--linea);
  border-radius: 999px; padding: .14rem .65rem; font-size: .82rem; color: var(--tinta-suave);
}
.tablas-meta .tablas-dificultad { color: var(--tinta); border-color: var(--linea-fuerte); }

.tablas-consigna {
  background: var(--cristal); border: 1px solid var(--linea); border-left: 4px solid var(--mostaza);
  border-radius: var(--radio); padding: .8rem 1rem; margin: 0 0 .9rem;
}
.tablas-consigna p { margin: .35rem 0; }
.tablas-consigna .tablas-reglas { color: var(--tinta-suave); font-size: .92rem; }

.tablas-panel { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .tablas-panel { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); align-items: start; }
}

.tablas-tabla-envuelta { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radio); }
.tablas-tabla-envuelta[data-amplia="true"] {
  border: 1px dashed var(--linea-fuerte);
  padding: .5rem;
}
.tablas-aviso-desplaz {
  display: none; color: var(--tinta-suave); font-size: .82rem; margin: 0 0 .4rem;
}
.tablas-tabla-envuelta[data-amplia="true"] + .tablas-aviso-desplaz { display: block; }

table.tablas-malla { border-collapse: collapse; background: var(--cristal-alto); margin: 0 auto; }
table.tablas-malla + table.tablas-malla { margin-top: .9rem; }
.tablas-malla caption {
  caption-side: top; text-align: left; font-weight: 650; padding: .3rem .2rem;
  color: var(--tinta);
}
.tablas-malla th, .tablas-malla td {
  border: 1px solid var(--linea-fuerte);
  padding: 0; text-align: center; min-width: 2.6rem; height: 2.6rem;
}
.tablas-malla thead th {
  background: var(--fondo); font-size: .85rem; padding: .3rem .45rem; height: auto;
  max-width: 7.5rem; overflow-wrap: anywhere;
}
.tablas-malla tbody th {
  background: var(--fondo); font-size: .85rem; font-weight: 600; text-align: left;
  padding: .3rem .5rem; max-width: 8rem; overflow-wrap: anywhere; height: auto; min-width: 5.5rem;
}
.tablas-celda {
  width: 100%; height: 100%; min-width: 2.6rem; min-height: 2.6rem;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
}
.tablas-celda:hover { background: rgba(232, 178, 60, .14); }
.tablas-celda:focus-visible { outline: 3px solid var(--mostaza); outline-offset: -3px; z-index: 1; position: relative; }
.tablas-celda .tablas-marca { font-weight: 700; font-size: 1.15rem; line-height: 1; pointer-events: none; }
.tablas-celda[data-marca="si"] { background: rgba(45, 150, 142, .16); }
.tablas-celda[data-marca="si"] .tablas-marca { color: var(--teal); }
.tablas-celda[data-marca="no"] { background: rgba(216, 67, 59, .10); }
.tablas-celda[data-marca="no"] .tablas-marca { color: var(--coral); }
.tablas-celda[data-resalte="pista"] { outline: 3px solid var(--mostaza); outline-offset: -3px; }

.tablas-lateral { display: flex; flex-direction: column; gap: .8rem; }
.tablas-bloque {
  background: var(--cristal); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .7rem .9rem;
}
.tablas-bloque h3 { margin: 0 0 .45rem; font-size: 1rem; }
.tablas-pistas { margin: 0; padding-left: 1.2rem; }
.tablas-pistas li { margin: .3rem 0; }
.tablas-pistas li[data-pista-activa="true"] { background: rgba(232, 178, 60, .22); border-radius: 6px; }

.tablas-controles { display: flex; flex-wrap: wrap; gap: .45rem; }
.tablas-boton {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--linea-fuerte); border-radius: 12px;
  background: var(--cristal-alto); color: var(--tinta);
  padding: .5rem .9rem; min-height: 2.6rem;
}
.tablas-boton:hover { border-color: var(--tinta); }
.tablas-boton:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 2px; }
.tablas-boton:disabled { opacity: .45; cursor: not-allowed; }
.tablas-boton[data-activo="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.tablas-boton-tab { font-size: .85rem; padding: .35rem .6rem; min-height: 2.2rem; }

.tablas-mensaje { border-radius: var(--radio); padding: .6rem .8rem; border: 1px solid var(--linea); background: var(--cristal); }
.tablas-mensaje[data-tipo="ok"] { border-left: 4px solid var(--teal); }
.tablas-mensaje[data-tipo="alerta"] { border-left: 4px solid var(--coral); }
.tablas-mensaje[data-tipo="info"] { border-left: 4px solid var(--mostaza); }
.tablas-mensaje p { margin: .2rem 0; }

.tablas-ayuda-marcas { color: var(--tinta-suave); font-size: .85rem; margin: .5rem 0 0; }
.tablas-teclado { color: var(--tinta-suave); font-size: .8rem; margin: .4rem 0 0; }

.tablas-solucion table { border-collapse: collapse; margin-top: .5rem; }
.tablas-solucion th, .tablas-solucion td {
  border: 1px solid var(--linea-fuerte); padding: .3rem .6rem; font-size: .9rem; text-align: left;
}
.tablas-solucion thead th { background: var(--fondo); }

.tablas-explicacion ol { margin: .3rem 0; padding-left: 1.4rem; }
.tablas-explicacion li { margin: .45rem 0; }
.tablas-explicacion .tablas-exp-consec { font-weight: 650; }
.tablas-explicacion .tablas-exp-premisas { color: var(--tinta-suave); font-size: .88rem; }

@media (max-width: 480px) {
  .tablas-raiz { font-size: 15px; padding: .6rem; }
  .tablas-malla th, .tablas-malla td { min-width: 2.35rem; height: 2.9rem; }
  .tablas-celda { min-width: 2.35rem; min-height: 2.9rem; }
  .tablas-boton { padding: .55rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tablas-raiz * { transition: none !important; }
}

/* Keep the actual column labels readable inside the scrolling region. */
.tablas-zona-tabla { min-width: 0; }
.tablas-tabla-envuelta[data-amplia="true"] .tablas-malla {
  width: max-content;
  min-width: max-content;
}
.tablas-tabla-envuelta[data-amplia="true"] .tablas-malla th {
  white-space: nowrap;
  overflow-wrap: normal;
  max-width: none;
}