/* Tablas de multiplicar con Ed. Sobre guia-mkt.css + calculadora-notas.css
   (nt-header, btn-nt, nt-app, nt-ed, nt-pop) + ed-app.css. */
.tb-hero { padding:28px 20px 4px; max-width:1120px; margin:0 auto; }
.tb-hero h1 { margin:0; font-size:40px; line-height:46px; letter-spacing:-1px; font-weight:700; }
.tb-hero .lead { margin:10px 0 0; max-width:760px; font-size:16px; line-height:25px; color:var(--text-secondary); }

/* La tabla en texto: lo primero que se ve (y lo que Google lee) */
.tb-lista { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:18px 0 0; padding:0; list-style:none; }
.tb-lista li { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:10px 14px; border-radius:12px; background:var(--card-surface); border:1px solid var(--border-subtle); font-size:17px; font-variant-numeric:tabular-nums; color:var(--text-secondary); }
.tb-lista li strong { font-size:19px; color:var(--text-primary); }
.tb-lista li.dificil { border-color:var(--calc-alert-line); background:var(--calc-alert-tint); }

.tb-app { position:relative; overflow:hidden; }
.tb-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tb-top .nt-tabs { flex:1; grid-template-columns:repeat(2,1fr); }
.tb-icono { width:44px; height:44px; border-radius:14px; border:1px solid var(--border-solid); background:var(--card-surface); font-size:18px; cursor:pointer; }
.tb-pantalla { text-align:center; padding:18px 4px 6px; }
.tb-pantalla[hidden] { display:none; }
.tb-ed-wrap { display:flex; justify-content:center; padding-top:14px; }
.tb-ed-wrap .nt-ed { width:120px; height:120px; transition:width 200ms ease,height 200ms ease; }
.tb-app[data-pantalla="juego"] .tb-ed-wrap .nt-ed { width:84px; height:84px; }
.tb-inicio-t { margin:10px 0 0; font-size:26px; font-weight:800; letter-spacing:-.5px; }
.tb-inicio-d { margin:6px auto 0; max-width:420px; font-size:14.5px; line-height:22px; color:var(--text-secondary); }
.tb-mejor { margin:10px 0 0; font-size:14px; font-weight:700; color:var(--brand-ink); }
.tb-racha { margin:4px 0 0; font-size:13.5px; font-weight:700; color:var(--text-secondary); }
.tb-inicio .btn-nt.brand { margin-top:16px; min-width:240px; }

/* Juego */
.tb-progreso { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--text-secondary); }
.tb-pista { height:8px; border-radius:99px; background:var(--border-subtle); overflow:hidden; margin:8px 0 12px; }
.tb-barra { height:100%; width:0; border-radius:99px; background:var(--ed); transition:width 250ms ease; }
.tb-pregunta { margin:8px 0 0; font-size:58px; line-height:62px; font-weight:800; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.tb-opciones { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px auto 0; max-width:420px; }
.tb-op { height:64px; font-family:var(--font-roboto); font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text-primary); background:var(--card-surface); border:2px solid var(--border-solid); border-radius:18px; box-shadow:0 4px 0 var(--border-solid); cursor:pointer; transition:transform 80ms ease; }
.tb-op:active { transform:translateY(3px); box-shadow:0 1px 0 var(--border-solid); }
.tb-op.bien { background:var(--ed-ya); border-color:var(--ed-ya); color:#08090a; box-shadow:0 4px 0 #1a9a61; }
.tb-op.mal { background:var(--ed-ayuda); border-color:var(--ed-ayuda); color:#08090a; box-shadow:0 4px 0 #d8554a; }
.tb-op:disabled { cursor:default; }
.tb-entrada { margin:12px auto 0; width:160px; height:62px; border-radius:18px; border:2px solid var(--border-solid); background:var(--surface-raised); font-size:36px; font-weight:800; line-height:58px; font-variant-numeric:tabular-nums; }
.tb-teclas { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px auto 0; max-width:320px; }
.tb-teclas button { height:56px; font-family:var(--font-roboto); font-size:24px; font-weight:800; color:var(--text-primary); background:var(--card-surface); border:2px solid var(--border-solid); border-radius:16px; box-shadow:0 3px 0 var(--border-solid); cursor:pointer; }
.tb-teclas button:active { transform:translateY(2px); box-shadow:0 1px 0 var(--border-solid); }
.tb-teclas .ok { background:var(--green); border-color:var(--green); box-shadow:0 3px 0 var(--green-dark); color:#08090a; }
#tb-teclado[hidden], .tb-opciones[hidden] { display:none; }
.tb-feedback { min-height:44px; margin:12px 0 0; font-size:16px; font-weight:700; }
.tb-feedback.ok { color:var(--brand-ink); }
.tb-feedback.mal { color:var(--text-primary); }
.tb-truco { display:block; margin-top:4px; font-size:13px; font-weight:500; color:var(--text-secondary); }
.tb-salir { margin-top:10px; background:none; border:0; font-family:var(--font-roboto); font-size:13px; color:var(--text-tertiary); cursor:pointer; text-decoration:underline; }

/* Fin */
.tb-fin-t { margin:10px 0 0; font-size:34px; line-height:40px; font-weight:800; letter-spacing:-.8px; }
.tb-fin-s { margin:4px 0 0; font-size:17px; font-weight:700; color:var(--text-secondary); }
.tb-fin-m { margin:10px auto 0; max-width:420px; font-size:14.5px; line-height:22px; color:var(--text-secondary); }
.tb-fin-reto { margin:12px auto 0; max-width:420px; padding:10px 14px; border-radius:14px; background:var(--calc-brand-tint); border:1px solid var(--calc-brand-line); font-size:14.5px; font-weight:700; }
.tb-fin-reto[hidden] { display:none; }
.tb-acciones { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.tb-nombre { max-width:320px; margin:14px auto 0; }
.tb-nombre input { height:44px; font-size:15px; font-weight:600; text-align:center; }
.tb-reto { margin:0 0 14px; padding:12px 14px; border-radius:16px; background:var(--calc-brand-tint); border:1px solid var(--calc-brand-line); display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.tb-reto[hidden] { display:none; }
.tb-reto p { margin:0; font-size:14.5px; font-weight:600; }
.tb-aviso { margin:16px auto 0; max-width:420px; padding:14px 16px; border-radius:16px; background:var(--card-surface); border:1px solid var(--border-subtle); text-align:left; }
.tb-aviso[hidden] { display:none; }
.tb-aviso strong { display:block; font-size:14.5px; }
.tb-aviso p { margin:4px 0 10px; font-size:13px; line-height:19px; color:var(--text-secondary); }

/* Pagina principal: mapa de progreso y mezcla */
.tb-mapa { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:16px 0 0; }
.tb-mapa a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:14px; border:1px solid var(--border-subtle); background:var(--card-surface); }
.tb-mapa a strong { font-size:20px; font-weight:800; color:var(--text-primary); }
.tb-mapa a span { font-size:11px; color:var(--text-tertiary); }
.tb-mapa a .tb-est { font-size:11px; letter-spacing:1px; color:var(--ed-meterle); }
.tb-mapa a.dominada { border-color:var(--calc-brand-line); background:var(--calc-brand-tint); }
.tb-mezcla { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:12px auto 0; max-width:460px; }
.tb-mezcla label { position:relative; }
.tb-mezcla input { position:absolute; opacity:0; }
.tb-mezcla span { display:inline-block; min-width:40px; padding:7px 10px; border-radius:99px; border:1px solid var(--border-solid); font-size:13px; font-weight:700; color:var(--text-secondary); cursor:pointer; background:var(--card-surface); }
.tb-mezcla input:checked + span { color:#08090a; background:var(--green); border-color:var(--green); }
.tb-mezcla input:focus-visible + span { outline:2px solid var(--green); outline-offset:2px; }

/* Tabla pitagorica */
.tb-pitagorica { border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:13.5px; min-width:560px; }
.tb-pitagorica th, .tb-pitagorica td { width:44px; height:36px; text-align:center; border:1px solid var(--border-subtle); }
.tb-pitagorica th { background:var(--surface-raised); color:var(--text-primary); font-weight:700; }
.tb-pitagorica td { color:var(--text-secondary); }
.tb-pitagorica td.cuadrado { background:var(--calc-brand-tint); color:var(--brand-ink); font-weight:700; }

.tb-multiplos { font-size:16px; line-height:28px; font-variant-numeric:tabular-nums; color:var(--text-primary) !important; font-weight:600; }
.tb-del1al10 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:14px 0 18px; }
.tb-del1al10 a { display:flex; flex-direction:column; gap:1px; padding:12px; border-radius:14px; background:var(--card-surface); border:1px solid var(--border-subtle); text-decoration:none !important; font-variant-numeric:tabular-nums; }
.tb-del1al10 a:hover { border-color:var(--text-tertiary); }
.tb-del1al10 strong { font-size:14.5px; color:var(--brand-ink); margin-bottom:4px; }
.tb-del1al10 span { font-size:13px; line-height:19px; color:var(--text-secondary); }
.tb-galeria { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0 0; }
.tb-galeria a { display:block; text-align:center; text-decoration:none !important; }
.tb-galeria img { width:100%; height:auto; border-radius:10px; border:1px solid var(--border-subtle); display:block; }
.tb-galeria span { display:block; margin-top:4px; font-size:13px; font-weight:600; color:var(--text-secondary); }
@media (max-width:760px) { .tb-del1al10 { grid-template-columns:repeat(2,minmax(0,1fr)); } .tb-galeria { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tb-nav { display:flex; justify-content:space-between; gap:10px; margin:28px 0 0; flex-wrap:wrap; }
.tb-nav a { font-size:14px; font-weight:600; color:var(--brand-ink); }

/* Impresion: solo la hoja de practica */
.tb-hoja { display:none; }
@media print {
  body.tb-imprimiendo * { visibility:hidden !important; }
  body.tb-imprimiendo .tb-hoja, body.tb-imprimiendo .tb-hoja * { visibility:visible !important; color:#000 !important; background:#fff !important; }
  body.tb-imprimiendo .tb-hoja { display:block !important; position:absolute; left:0; top:0; width:100%; font-family:Arial, sans-serif; }
  .tb-hoja h2 { font-size:26px; margin:0 0 6px; }
  .tb-hoja .tb-hoja-sub { font-size:12px; margin:0 0 14px; }
  .tb-hoja .tb-hoja-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px 18px; font-size:17px; margin-bottom:18px; }
  .tb-hoja .tb-hoja-ej { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 18px; font-size:17px; }
  .tb-hoja .tb-hoja-sol { margin-top:22px; font-size:10px; color:#555 !important; }
  .tb-hoja svg { width:90px; height:90px; float:right; }
}

@media (max-width:760px) {
  .tb-hero { padding:18px 16px 0; }
  .tb-hero h1 { font-size:28px; line-height:34px; letter-spacing:-.6px; }
  .tb-lista { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tb-pregunta { font-size:50px; line-height:54px; }
  .tb-mapa { grid-template-columns:repeat(4,minmax(0,1fr)); }
}