/* ============================================================================
   LA FILA DE PESTANAS PROPIAS DEL CRM (public/abiertas.js, window.Abiertas).
   Una fila delgada (siempre en escritorio desde 2026-09-30: lleva el «+» para abrir una pestana nueva), PRIMER hijo de section.main (la columna del CRM, no debajo de la barra de arriba: eso movia el chat y las
   constantes de 48 px del rediseno de la barra). Solo tokens de cuarto-oscuro.css: pildora = se toca, sin cajas, sin animacion de
   teclado (cambiar de pestana es de las cosas que se hacen cien veces al dia).
   Va DESPUES de cuarto-oscuro.css y piezas.css en index.html.

   Su alto se publica como --abiertas-h en #app MIENTRAS LA FILA EXISTE (la pone CSS con :has, no JS: no puede quedar desfasado de la
   fila ni olvidarse al quitarla). Lo que va pegado abajo (#subtabs, las pestanas del portal) lo suma a su `top`. En telefono y en el
   lado dividido la fila no se ve y el alto vale 0.
   ============================================================================ */
:root{ --abi-alto:36px; }
@media (pointer:coarse){ :root{ --abi-alto:52px; } }   /* 44 de objetivo tactil + aire */

#app:has(#abiertas){ --abiertas-h:var(--abi-alto); }

.abi{
  position:sticky; top:0; z-index:var(--z-pegajoso);
  flex:none; display:flex; align-items:center;
  height:var(--abi-alto); padding:0 var(--e-4);
  background:var(--pag);
  box-shadow:inset 0 -1px 0 var(--linea);
  overflow:hidden;
}
/* Con seis nombres largos no caben: SOLO la tira de pestanas se desliza (nunca se parten en dos renglones, mismo criterio que .pz-tabs) y el «+» se queda a la vista al final. */
.abi-lista{ display:flex; align-items:center; flex:0 1 auto; min-width:0; gap:var(--e-1); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.abi-lista::-webkit-scrollbar{ display:none; }

.abi-item{ position:relative; flex:none; display:flex; align-items:center; }
.abi-tab{
  display:inline-flex; align-items:center; min-height:var(--e-6); max-width:calc(var(--e-7) * 4);
  margin:0; padding:0 var(--e-6) 0 var(--e-3);
  border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio);
  font-family:inherit; font-size:var(--t-meta); line-height:1; white-space:nowrap; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  transition:background-color var(--d-toque) var(--curva-cambia), color var(--d-toque) var(--curva-cambia);
}
/* El nombre se recorta con puntos suspensivos; el completo esta en title. isolate: un nombre con caracteres de derecha a izquierda no
   reordena a sus vecinos. */
.abi-rot{ min-width:0; overflow:hidden; text-overflow:ellipsis; unicode-bidi:isolate; }
.abi-item.on .abi-tab{ background:var(--piedra-on); color:var(--tinta); }
@media (hover:hover){ .abi-item:not(.on) .abi-tab:hover{ background:var(--tinte-toque); color:var(--tinta); } }

/* La x: a la derecha DENTRO de la pildora. Se ve en la activa, al pasar el cursor y con foco; en tactil (sin hover) siempre. */
.abi-x{
  position:absolute; right:var(--e-1); top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center; width:var(--e-5); height:var(--e-5);
  margin:0; padding:0; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio);
  cursor:pointer; appearance:none; -webkit-appearance:none;
}
.abi-ico{ width:var(--e-3); height:var(--e-3); flex:none; }
@media (hover:hover){
  .abi-item:not(.on) .abi-x{ opacity:0; }   /* sin transicion: el foco de teclado no se anima */
  .abi-item:hover .abi-x, .abi-item:focus-within .abi-x{ opacity:1; }
  .abi-x:hover{ background:var(--tinte-toque); color:var(--tinta); }
}
/* El foco de teclado: el anillo del sistema, pegado a la pildora (la fila recorta lo que sobresale). */
.abi-tab:focus-visible{ outline:2px solid var(--tinta); outline-offset:-2px; }
.abi-x:focus-visible{ outline:2px solid var(--tinta); outline-offset:-2px; }

/* Objetivo tactil de 44 px SOLO donde se toca (la regla no aplica a un puntero fino). */
@media (pointer:coarse){
  .abi-tab{ min-height:var(--e-7); padding-right:calc(var(--e-7) + var(--e-1)); }
  .abi-x{ width:var(--e-7); height:var(--e-7); right:0; }
}

/* La pestana "virtual": la pantalla que se ve cuando todavia no hay pestanas guardadas. Se dibuja como la activa, sin x (no hay nada que cerrar) y sin tocarse. */
.abi-virtual{ padding-right:var(--e-3); cursor:default; }

/* El «+»: una pildora redonda al final de la tira. Se toca (pildora), asi que lleva su objetivo tactil y su foco como las pestanas. */
.abi-mas{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:var(--e-6); height:var(--e-6); margin:0 0 0 var(--e-1); padding:0;
  border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio);
  cursor:pointer; appearance:none; -webkit-appearance:none;
  transition:background-color var(--d-toque) var(--curva-cambia), color var(--d-toque) var(--curva-cambia);
}
@media (hover:hover){ .abi-mas:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.abi-mas[aria-expanded="true"]{ background:var(--piedra-on); color:var(--tinta); }
.abi-mas:focus-visible{ outline:2px solid var(--tinta); outline-offset:-2px; }
@media (pointer:coarse){ .abi-mas{ width:var(--e-7); height:var(--e-7); } }

/* Movimiento reducido: no hay nada que deslizar; solo color, y sin transicion. */
@media (prefers-reduced-motion:reduce){ .abi-tab, .abi-mas{ transition:none; } }

/* Telefono y lado dividido: no se ve, y su alto vale 0 para quien se pega debajo. */
@media (max-width:860px){
  .abi{ display:none; }
  #app:has(#abiertas){ --abiertas-h:0px; }
}
html.marco .abi{ display:none; }
html.marco #app:has(#abiertas){ --abiertas-h:0px; }