/* TablaPeriodica.net — estilos de la home (tabla interactiva) */
/* ---------- Buscador ---------- */
.buscador{position:relative;margin-bottom:12px}
.buscador input{width:100%;padding:14px 16px 14px 44px;font-size:16px;font-family:inherit;
  border:2px solid var(--tinta);border-radius:var(--radio);background:#fff;outline:none}
.buscador input:focus{box-shadow:4px 4px 0 var(--tinta)}
.buscador .lupa{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--tinta-2);pointer-events:none}
.resultados{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);background:#fff;
  border:2px solid var(--tinta);border-radius:var(--radio);display:none;
  box-shadow:6px 6px 0 rgba(24,34,46,.12);max-height:280px;overflow-y:auto}
.resultados.abierto{display:block}
.resultado{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--linea)}
.resultado:last-child{border-bottom:none}
.resultado:hover{background:#F0F3EA}
.resultado .chip-sym{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;
  font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;color:#fff;flex:none}
.resultado .meta{font-size:12px;color:var(--tinta-2);font-family:'IBM Plex Mono',monospace}
.resultado .nombre{font-weight:600}
.sin-res{padding:14px;color:var(--tinta-2);font-size:14px}

/* ---------- Controles: filtros + práctica ---------- */
.filtros-zona{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.grupo{display:flex;align-items:center;gap:8px}
.etq-grupo{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-2);flex:none;font-weight:600;min-width:62px}
.carril-caja{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.flecha{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--tinta-2);background:#fff;
  color:var(--tinta);cursor:pointer;font-size:14px;line-height:1;display:none}
.flecha:disabled{opacity:.25;cursor:default}
.carril-caja.con-flechas .flecha{display:block}
.carril{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:4px 2px;flex:1;min-width:0}
.carril::-webkit-scrollbar{display:none}
.vista,.modo{flex:none;padding:8px 14px;border:1.5px solid var(--tinta);border-radius:999px;background:#fff;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--tinta);transition:transform .08s}
.vista:active,.modo:active{transform:scale(.96)}
.vista.activa{background:var(--tinta);color:#fff}
.vista-reset{border-style:solid;display:flex;align-items:center;gap:6px}
.vista-reset::before{content:'↺';font-size:14px;font-weight:700}
.vista-reset.sugerido{border-color:var(--tra);color:var(--tra);box-shadow:2px 2px 0 var(--tra)}
.vista-reset.activa{border-color:var(--tinta);color:#fff;box-shadow:none}
.separador-carril{flex:none;width:1.5px;background:var(--linea);margin:2px 2px;align-self:stretch}
.modo{border-style:dashed;border-color:var(--tinta-2)}
.modo.activo{background:var(--tinta);color:#fff;border-style:solid;border-color:var(--tinta)}
.btn-ayuda{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--tinta);background:#fff;
  font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;cursor:pointer;color:var(--tinta)}
.btn-ayuda:hover{background:var(--tinta);color:#fff}
.sel-filtro{display:none;flex:1;padding:11px 12px;font-family:inherit;font-size:15px;font-weight:600;
  border:2px solid var(--tinta);border-radius:var(--radio);background:#fff;color:var(--tinta)}
@media(max-width:599px){
  .carril-caja{display:none}
  .sel-filtro{display:block}
}

/* ---------- modo proyector ---------- */
.btn-proyector{display:none}
@media(min-width:960px){.btn-proyector{display:block}}
body.proyector .buscador,body.proyector .contenido,body.proyector footer,
body.proyector .alternar,body.proyector header .lema,body.proyector .explica,
body.proyector .nav-principal,body.proyector .h1-seo,body.proyector .dia,body.proyector .nav-toggle{display:none}
body.proyector .wrap{max-width:none;padding:6px 28px;display:flex;flex-direction:column;height:100vh;overflow:hidden}
body.proyector header{padding:2px 2px 8px}
body.proyector .marca{font-size:18px}
body.proyector .filtros-zona{margin-bottom:4px}
body.proyector .tabla-zona{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
body.proyector .tabla{
  --celda:min(calc((100vw - 56px)/19 - 4px), calc((100vh - 235px)/11 - 4px));
  grid-template-columns:repeat(19,var(--celda));grid-auto-rows:var(--celda);width:max-content;
}
body.proyector .celda{aspect-ratio:auto;padding-top:10px}
body.proyector .celda .sym{font-size:clamp(14px,2.2vh,26px)}
body.proyector .celda .nom{font-size:clamp(7px,1vh,11px)}
body.proyector .celda .masa{font-size:clamp(6px,0.9vh,10px)}
body.proyector .leyenda{margin:8px 0 2px}
body.proyector .chip{font-size:13px;padding:6px 12px}
body.proyector .vista,body.proyector .modo{font-size:14px;padding:9px 16px}
/* la ficha debe seguir apareciendo sobre la tabla en modo proyector/pantalla completa */
body.proyector .panel{z-index:2147483647}
body.proyector .panel.abierto{transform:translateX(0)}
:fullscreen .panel{z-index:2147483647}
:fullscreen .panel.abierto{transform:translateX(0)}

/* descripción contextual de la lente */
.explica{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--tinta-2);
  background:#fff;border:1px solid var(--linea);border-left:4px solid var(--tinta);
  border-radius:8px;padding:9px 12px;margin-bottom:12px;line-height:1.4}
.explica button{margin-left:auto;flex:none;border:none;background:none;color:var(--tra);font-weight:600;
  cursor:pointer;font-family:inherit;font-size:13px;text-decoration:underline}

/* ---------- Banner de modos (quiz / comparar) ---------- */
.banner{display:none;align-items:center;gap:10px;flex-wrap:wrap;background:var(--tinta);color:#fff;
  border-radius:var(--radio);padding:11px 14px;margin-bottom:12px;font-size:14px}
.banner.visible{display:flex}
.banner .grande{font-family:'Bricolage Grotesque';font-weight:700;font-size:17px}
.banner .puntos{font-family:'IBM Plex Mono',monospace;font-size:13px;margin-left:auto}
.banner button{border:1.5px solid #fff;background:transparent;color:#fff;border-radius:999px;
  padding:6px 12px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.banner button.primario{background:#fff;color:var(--tinta)}

/* ---------- Temperatura ---------- */
.panel-temp{display:none;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--tinta);
  border-radius:var(--radio);padding:10px 14px;margin-bottom:12px}
.panel-temp.visible{display:flex}
.panel-temp input[type=range]{flex:1;accent-color:var(--tinta)}
.temp-valor{font-family:'IBM Plex Mono',monospace;font-size:14px;min-width:84px;text-align:right}

/* ---------- Tabla ---------- */
.tabla-zona{position:relative}
.pista-scroll{font-size:12px;color:var(--tinta-2);text-align:center;margin:4px 0 8px;transition:opacity .4s}
.pista-scroll.oculta{opacity:0}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.tabla{display:grid;grid-template-columns:repeat(19,var(--celda));grid-auto-rows:var(--celda);
  gap:3px;width:max-content;margin:0 auto;--celda:42px}
/* encabezados de grupo y periodo */
.cab{border:none;background:transparent;font-family:'IBM Plex Mono',monospace;font-size:10px;
  color:var(--tinta-2);cursor:pointer;border-radius:6px;display:grid;place-items:center;padding:0}
.cab:hover{background:#fff;color:var(--tinta)}
.cab.activo{background:var(--tinta);color:#fff;font-weight:700}
/* tendencia periódica (zona vacía superior) */
#tendencia{grid-column:5/14;grid-row:2/4;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;text-align:center;pointer-events:none}
#tendencia.visible{display:flex}
#tendencia .flecha-t{font-size:clamp(18px,4.5vw,40px);line-height:1;font-weight:800;color:var(--tinta)}
#tendencia .txt-t{font-size:clamp(7px,1.6vw,12.5px);color:var(--tinta-2);font-weight:600;max-width:95%}
/* elemento del día */
.dia{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--linea);
  border-radius:12px;padding:10px 14px;margin-bottom:12px}
.dia .chip-sym{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;flex:none;
  font-family:'Bricolage Grotesque';font-weight:800;font-size:19px;color:#fff}
.dia .ojal-dia{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--tra);font-weight:700}
.dia .txt-dia{font-size:13.5px;line-height:1.4}
.dia .txt-dia strong{font-family:'Bricolage Grotesque';font-weight:700}
.dia button{margin-left:auto;flex:none;padding:8px 14px;border-radius:999px;border:1.5px solid var(--tinta);
  background:#fff;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.dia button:hover{background:var(--tinta);color:#fff}
/* sub-selector de abundancia */
.panel-ab{display:none;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--tinta);
  border-radius:var(--radio);padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}
.panel-ab.visible{display:flex}
.panel-ab .chip-ab{padding:7px 13px;border:1.5px solid var(--tinta);border-radius:999px;background:#fff;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--tinta)}
.panel-ab .chip-ab.activo{background:var(--tinta);color:#fff}
.celda{position:relative;border-radius:7px;cursor:pointer;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform .1s,opacity .25s,background-color .35s;
  -webkit-tap-highlight-color:transparent;border:none;font-family:inherit;padding:0}
.celda:active{transform:scale(.92)}
@media(hover:hover){.celda:hover{transform:scale(1.12);z-index:5;box-shadow:3px 3px 0 rgba(24,34,46,.25)}}
.celda .z{position:absolute;top:2px;left:4px;font-size:8px;opacity:.85;font-family:'IBM Plex Mono',monospace}
.celda .sym{font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;line-height:1}
.celda .nom,.celda .masa{display:none}
.celda.atenuada{opacity:.18}
.celda.sin-dato{background:#D8DCD2 !important;color:var(--tinta-2);
  background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,.05) 4px,rgba(0,0,0,.05) 8px) !important}
.celda.seleccionada{
  outline:3px solid var(--tinta);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,255,255,.9), 4px 5px 0 rgba(24,34,46,.28);
  transform:scale(1.16);z-index:8;
}
.celda:focus-visible{outline:3px dashed var(--tinta);outline-offset:2px;z-index:8}
.celda.acierto{animation:flashOk .7s}
.celda.fallo{animation:flashMal .5s}
@keyframes flashOk{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 5px var(--ok)}}
@keyframes flashMal{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 5px var(--mal)}}
.marcador{border-radius:7px;display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;
  font-size:9px;color:#fff;opacity:.75;cursor:pointer;border:none;
  transition:transform .1s,opacity .2s}
.marcador.activo{opacity:1;outline:3px solid var(--tinta);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,255,255,.9), 4px 5px 0 rgba(24,34,46,.28);
  transform:scale(1.12);z-index:8;font-weight:700}
.hueco-f{grid-column:1/-1;height:10px}
.tabla.muda .sym,.tabla.muda .nom,.tabla.muda .masa{visibility:hidden}
.tabla.muda .celda.revelada .sym,.tabla.muda .celda.revelada .nom,.tabla.muda .celda.revelada .masa{visibility:visible}

/* ---------- modo ajuste a pantalla (móvil) ---------- */
.alternar{display:none;margin:0 auto 8px;padding:7px 14px;border:1.5px solid var(--tinta-2);border-radius:999px;
  background:#fff;font-family:inherit;font-size:12px;font-weight:600;color:var(--tinta);cursor:pointer}
@media(max-width:959px){
  .alternar{display:block}
  .tabla-zona.ajuste .tabla-scroll{overflow-x:hidden;touch-action:none}
  .tabla-zona.ajuste .tabla{--celda:calc((100vw - 28px - 36px)/19);gap:2px}
  .tabla-zona.ajuste .celda{border-radius:3px}
  .tabla-zona.ajuste .celda .z{display:none}
  .tabla-zona.ajuste .celda .sym{font-size:min(7.5px,2.1vw);font-weight:600}
  .tabla-zona.ajuste .marcador{font-size:6px;border-radius:3px}
  .tabla-zona.ajuste .cab{font-size:6.5px}
  .tabla-zona.ajuste #tendencia .flecha-t{font-size:16px}
  .tabla-zona.ajuste .pista-scroll{display:none}
  .celda.bajo-dedo{outline:2.5px solid var(--tinta);outline-offset:0;z-index:7;transform:scale(1.3)}
  .tabla-zona.ajuste .celda.seleccionada{transform:scale(1.55);outline-width:2px;outline-offset:1px;
    box-shadow:0 0 0 4px rgba(255,255,255,.9), 2px 3px 0 rgba(24,34,46,.3)}
}
.lupa-flotante{
  position:fixed;z-index:80;display:none;pointer-events:none;
  background:#fff;border:2px solid var(--tinta);border-radius:14px;
  box-shadow:5px 5px 0 rgba(24,34,46,.2);padding:10px 14px;
  align-items:center;gap:11px;min-width:170px;
}
.lupa-flotante.visible{display:flex}
.lupa-flotante .lf-sym{width:52px;height:52px;border-radius:10px;display:grid;place-items:center;flex:none;
  font-family:'Bricolage Grotesque';font-weight:800;font-size:24px;color:#fff;position:relative}
.lupa-flotante .lf-z{position:absolute;top:2px;left:5px;font-size:9px;font-family:'IBM Plex Mono',monospace;opacity:.9}
.lupa-flotante .lf-n{font-weight:700;font-size:16px;line-height:1.1}
.lupa-flotante .lf-m{font-size:11px;color:var(--tinta-2);font-family:'IBM Plex Mono',monospace}
.lupa-flotante::after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  border:8px solid transparent;border-bottom:none;border-top:8px solid var(--tinta)}

/* ---------- Leyenda ---------- */
.leyenda{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;justify-content:center}
.chip{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#fff;
  border:1.5px solid var(--linea);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--tinta)}
.chip .punto{width:11px;height:11px;border-radius:3px}
.chip.activo{border-color:var(--tinta);box-shadow:2px 2px 0 var(--tinta)}
.escala{display:none;align-items:center;gap:10px;margin:14px auto;max-width:420px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--tinta-2)}
.escala.visible{display:flex}
.escala .barra{flex:1;height:12px;border-radius:6px;border:1px solid var(--tinta)}

/* ---------- Paneles deslizantes (ficha / ayuda / comparación) ---------- */
.velo{position:fixed;inset:0;background:rgba(24,34,46,.35);opacity:0;pointer-events:none;transition:opacity .25s;z-index:50}
.velo.visible{opacity:1;pointer-events:auto}
.panel{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-radius:18px 18px 0 0;border:2px solid var(--tinta);border-bottom:none;
  transform:translateY(105%);transition:transform .3s cubic-bezier(.32,.72,.27,1);
  max-height:85vh;display:flex;flex-direction:column}
.panel.abierto{transform:translateY(0)}
.asa{width:44px;height:5px;border-radius:3px;background:var(--linea);margin:10px auto 0;flex:none}
.panel-scroll{overflow-y:auto;padding:10px 18px 26px}
.cerrar{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--tinta);
  background:#fff;font-size:16px;cursor:pointer;flex:none;align-self:flex-start}

/* ficha */
.ficha-cab{display:flex;gap:14px;align-items:center;margin-bottom:4px}
.ficha-sym{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;flex:none;
  font-family:'Bricolage Grotesque';font-weight:800;font-size:30px;color:#fff;position:relative}
.ficha-sym .fz{position:absolute;top:4px;left:7px;font-size:11px;font-family:'IBM Plex Mono',monospace;opacity:.9}
.ficha-nombre{font-family:'Bricolage Grotesque';font-weight:800;font-size:26px;letter-spacing:-.4px}
.ficha-cat{font-size:13px;font-weight:600}
.etiqueta-estado{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
  color:#fff;margin-top:4px}
.pne{display:flex;gap:8px;margin:12px 0}
.pne .caja{flex:1;text-align:center;background:#F7F8F3;border:1px solid var(--linea);border-radius:8px;padding:8px 4px}
.pne .num{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:17px}
.pne .et{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-2)}
.ficha-uso{font-size:14px;color:var(--tinta-2);margin:4px 0 4px;line-height:1.45}
.seccion{margin-top:16px}
.seccion h3{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-2);margin-bottom:8px;
  display:flex;align-items:center;gap:8px}
.seccion h3::after{content:'';flex:1;height:1px;background:var(--linea)}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dato{background:#F7F8F3;border:1px solid var(--linea);border-radius:8px;padding:8px 10px}
.dato .k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-2);font-weight:600}
.dato .v{font-family:'IBM Plex Mono',monospace;font-size:13.5px;margin-top:2px;font-weight:500}
.dato.ancho{grid-column:1/-1}
.dato .v.texto{font-family:'Instrument Sans';font-size:13.5px}
.cfg{font-family:'IBM Plex Mono',monospace;font-size:15px;background:#F7F8F3;border:1px solid var(--linea);
  border-radius:8px;padding:10px;text-align:center}
.bohr-zona{text-align:center}
.acciones{display:flex;gap:8px;margin-top:18px}
.accion{flex:1;text-align:center;padding:12px;border-radius:var(--radio);font-weight:600;font-size:14px;
  cursor:pointer;font-family:inherit;border:2px solid var(--tinta);text-decoration:none;
  display:flex;align-items:center;justify-content:center}
.accion.solida{background:var(--tinta);color:#fff}
.accion.hueca{background:#fff;color:var(--tinta)}

/* glosario */
.glosario h2,.comp h2{font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;margin-bottom:4px}
.glos-item{padding:12px 0;border-bottom:1px solid var(--linea)}
.glos-item:last-child{border:none}
.glos-item .t{font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:3px}
.glos-item .t .punto{width:12px;height:12px;border-radius:3px;background:var(--tinta)}
.glos-item p{font-size:14px;color:var(--tinta-2);line-height:1.5}
.glos-item .ej{font-size:13px;margin-top:4px;color:var(--tinta);background:#F7F8F3;border-left:3px solid var(--tra);
  padding:6px 10px;border-radius:0 6px 6px 0}

/* comparación */
.comp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:stretch;margin-top:10px}
.comp-cab{display:grid;place-items:center;border-radius:10px;color:#fff;padding:12px 6px;text-align:center;text-decoration:none}
.comp-cab .s{font-family:'Bricolage Grotesque';font-weight:800;font-size:26px}
.comp-cab .n{font-size:12px;font-weight:600}
.comp-vs{display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:800;color:var(--tinta-2)}
.comp-fila{display:contents}
.comp-v{background:#F7F8F3;border:1px solid var(--linea);border-radius:8px;padding:7px 9px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;text-align:center;align-self:center}
.comp-v.gana{border-color:var(--tinta);box-shadow:2px 2px 0 var(--tinta);font-weight:600}
.comp-k{display:grid;place-items:center;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tinta-2);font-weight:600;text-align:center;padding:0 4px}


/* ---------- Desktop ---------- */
@media(min-width:960px){
  .wrap{padding-bottom:24px}
  .tabla{--celda:minmax(54px,1fr);width:100%;gap:4px}
  .tabla-scroll{overflow:visible}
  .pista-scroll{display:none}
  .celda{aspect-ratio:1;justify-content:flex-start;padding-top:14px}
  .celda .sym{font-size:18px}
  .celda .nom{display:block;font-size:9px;margin-top:2px;opacity:.95;max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .celda .masa{display:block;font-size:8px;font-family:'IBM Plex Mono',monospace;opacity:.8;margin-top:1px}
  .panel{left:auto;right:24px;bottom:24px;width:400px;border-radius:16px;border-bottom:2px solid var(--tinta);
    transform:translateX(120%);box-shadow:8px 8px 0 rgba(24,34,46,.15);max-height:calc(100vh - 48px)}
  .panel.abierto{transform:translateX(0)}
  .asa{display:none}
  .velo{display:none}
}