/* BARRA - generado por ensamblar_contar.py
   Pilares ya estiliza .tnav y .tlink. Aqui solo lo que su CSS no cubre:
   que una fila larga NO empuje la pagina entera. Antes la barra centrada con
   `position:absolute` provocaba scroll horizontal y el texto salia cortado por
   la izquierda al estrechar la ventana. */
.topbar .tnav{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scroll-behavior:smooth;
  /* si la fila no entra, el borde derecho se degrada: asi se VE que sigue.
     Esconder la barra de scroll hacia que 7 destinos fueran invisibles. */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
.topbar .tnav::-webkit-scrollbar{height:3px}
.topbar .tnav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.topbar .tnum{display:inline-block;min-width:16px;height:16px;line-height:16px;
  margin-right:4px;text-align:center;font-weight:800;font-size:10px;
  border-radius:4px}
/* UN COLOR POR TRAMO. Los cuatro salen de variables que YA existen en el
   estilo.css de Pilares: --suave, --accent2, --medio y --muted. No se invento
   ninguna: una var(--x) que no existe se pinta negra y desaparece el texto. */
/* Valores literales, no var(): son EXACTAMENTE los que Pilares define en su
   :root (--suave #5cd6a0, --accent2 #4fc3f7, --medio #ffce54, --muted #9aa4b6).
   Con var() el color calculado no salia el esperado y no merece la pena
   averiguar por que: el literal no puede fallar y es el mismo color. */
.topbar .tlink.t-uno    .tnum{background:rgba(92,214,160,.18);color:#5cd6a0}
.topbar .tlink.t-dos    .tnum{background:rgba(79,195,247,.18);color:#4fc3f7}
.topbar .tlink.t-tres   .tnum{background:rgba(255,206,84,.18);color:#ffce54}
.topbar .tlink.t-cuatro .tnum{background:rgba(154,164,182,.18);color:#9aa4b6}
.topbar .tlink.active .tnum{background:rgba(0,0,0,.30);color:#0c0e13}
.tlink.t-uno:hover   {box-shadow:inset 0 -2px 0 var(--suave)}
.tlink.t-dos:hover   {box-shadow:inset 0 -2px 0 var(--accent2)}
.tlink.t-tres:hover  {box-shadow:inset 0 -2px 0 var(--medio)}
.tlink.t-cuatro:hover{box-shadow:inset 0 -2px 0 var(--muted)}
/* TABLAS: Pilares ya trae borde, cabecera y filas alternas en `table.tbl`.
   Aqui solo se sube el tono del borde, porque con --line (#313a4b) sobre el
   fondo #151a23 la division entre filas casi no se ve, y se anade el contenedor
   que permite desplazar una tabla ancha sin romper la pagina. */
.tbl-wrap{overflow-x:auto;margin:16px 0}
.tbl-wrap table.tbl{margin:0}
/* Borde igual de fuerte en todas las divisiones (medido: contra el fondo
   #151a23 da 3.0 de contraste; con el --line original daba 1.6 y no se veia
   donde acababa cada fila). */
table.tbl td{border:1px solid #667287}
table.tbl th{border:1px solid #667287;background:var(--panel3);
  border-bottom-width:2px;border-bottom-color:#7d8ba3}
table.tbl{border:2px solid #7d8ba3;border-radius:6px;overflow:hidden}
table.tbl tr:nth-child(even) td{background:rgba(255,255,255,.035)}

/* la leyenda de la portada usa los mismos cuatro colores */
.leyenda{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.leyenda span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--muted);background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;padding:5px 10px}
.leyenda i{width:11px;height:11px;border-radius:3px;display:inline-block}
/* 17 destinos no entran con el espaciado de Pilares, que esta pensado para 11.
   Se aprieta AQUI, en la hoja propia, sin tocar su estilo.css. Medido: con
   esto los 17 caben desde ~1360px de ancho. */
/* LAS TRES RAYAS, SIEMPRE. El CSS de Pilares las esconde por encima de 880px
   porque alli el lateral esta siempre a la vista; pero entonces nada avisa de
   que ese lateral lleva el banco y la practica. Se muestran siempre y se les da
   funcion real tambien en pantalla ancha. */
.burger{display:inline-block !important;font-size:20px;line-height:1;
  padding:4px 8px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);margin-right:6px}
.burger:hover{border-color:var(--accent);color:var(--accent)}
@media(min-width:881px){
  .sidebar{transition:transform .2s ease}
  /* por defecto el lateral se ve; el boton lo PLIEGA */
  .sidebar.open{transform:translateX(-100%)}
  body:has(.sidebar.open) .content{margin-left:0;transition:margin-left .2s ease}
}
.topbar .tnav{gap:0}
.topbar .tlink{padding:6px 4px;font-size:12px}
/* Medido a 1265px: con 7px de relleno se cortaba la ultima (faltaban 50px).
   Con 5px y sin hueco entre enlaces, las 13 entran desde ~1230px. */
@media(max-width:900px){
  .topbar .home{font-size:13px;padding:6px 8px;margin-right:4px}
  .topbar .tlink{font-size:11.5px;padding:5px 7px}
}