/* ═══ tria-barra-plegable.css — Plegar la barra lateral de TRIA (SOLO escritorio), 24-oct-2026 ═══════════════════
   Encargo de Javidan (24-oct): «que la parte izquierda del panel sea desplegable; al cerrar que salgan solo los
   iconos, se pueda pinchar en un icono y abra su pestaña, y al pasar encima salga el nombre».

   Vive APARTE de tria-base.css a propósito: así no choca con los otros PR que tocan esa hoja (menú «Más»
   reagrupado, #60…). Se enlaza DESPUÉS de tria-base.css en index.php y admin.php. Sin la clase .tria-armazon
   (que pone tria-armazon.js al encender el diseño nuevo) este fichero no pinta nada.

   Lo que hace tria-armazon.js: pone la clase .t-plegada en el <html>, guarda la elección en localStorage
   (misma clave en panel y backoffice) y, al terminar de montar, añade .t-anima para que la restauración no se
   vea animarse. El tooltip lo coloca JS (position:fixed) para que no lo recorte el overflow de la barra.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── El botón de plegar/desplegar, arriba junto al logo TRIA ─── */
html[data-diseno="nuevo"].tria-armazon .t-plegar {
  flex: none; width: 28px; height: 28px; margin-left: auto; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--t-radio-1); background: transparent; color: var(--t-texto-3); cursor: pointer;
  transition: background-color var(--t-dur-0) ease-out, color var(--t-dur-0) ease-out;
}
html[data-diseno="nuevo"].tria-armazon .t-plegar .t-ico { width: 18px; height: 18px; fill: currentColor; }
html[data-diseno="nuevo"].tria-armazon .t-plegar:focus-visible { outline: 2px solid var(--t-azul); outline-offset: 1px; }
@media (hover: hover) {
  html[data-diseno="nuevo"].tria-armazon .t-plegar:hover { background: var(--t-hover); color: var(--t-texto); }
}
/* En el móvil NO hay barra lateral que plegar: ni botón (y el estado guardado no afecta al móvil). */
@media (max-width: 768px) {
  html[data-diseno="nuevo"].tria-armazon .t-plegar { display: none; }
}

/* ─── La transición del ancho (y de todo lo que cuelga de --t-barra-ancho). Solo cuando ya está montada (.t-anima),
       para que restaurar el pliegue no se vea mover. Respeta prefers-reduced-motion: las --t-dur caen a ~0. ─── */
@media (min-width: 769px) {
  html[data-diseno="nuevo"].tria-armazon.t-anima :is(#tria-barra, #app-shell, .admin-shell,
    #contacts-dialog, #agenda-dialog, #wesign-dialog, #misval-dialog, #mail-overlay) {
    transition: margin-left var(--t-dur-2) var(--t-curva), left var(--t-dur-2) var(--t-curva), width var(--t-dur-2) var(--t-curva);
  }

  /* ─── Plegada: barra estrecha (≈64 px), solo iconos centrados ─── */
  html[data-diseno="nuevo"].tria-armazon.t-plegada { --t-barra-ancho: 64px; }
  html[data-diseno="nuevo"].tria-armazon.t-plegada #tria-barra { padding-left: 8px; padding-right: 8px; }
  html[data-diseno="nuevo"].tria-armazon.t-plegada .t-barra-cab { flex-direction: column; gap: 8px; padding: 4px 0 8px; }
  html[data-diseno="nuevo"].tria-armazon.t-plegada .t-plegar { margin: 0; }
  /* Se esconde todo el texto; queda el icono. El logo TRIA (triángulo) se mantiene. */
  html[data-diseno="nuevo"].tria-armazon.t-plegada #tria-barra :is(.t-marca, .t-nav-tx, .t-buscar-tx, .t-buscar kbd,
    .t-grupo-tit, .t-pleg-cuerpo, .sidebar-footer-copy, .v2-topbar-user-info) { display: none; }
  html[data-diseno="nuevo"].tria-armazon.t-plegada #tria-barra :is(.t-nav, .t-pleg, .t-buscar) { justify-content: center; gap: 0; padding: 0; }
  html[data-diseno="nuevo"].tria-armazon.t-plegada #tria-barra .t-buscar { margin-bottom: 8px; }

  /* El número de Agenda (y de cualquier sección): punto/badge pequeño SOBRE el icono. Solo sale si hay cifra real
     (lo decide tria-armazon.js, que lee el mismo globo que ya pinta la barra; nunca un número inventado). */
  html[data-diseno="nuevo"].tria-armazon.t-plegada #tria-barra .t-nav { position: relative; }
  html[data-diseno="nuevo"].tria-armazon.t-plegada #tria-barra .t-nav-n {
    position: absolute; top: 2px; left: calc(50% + 4px); margin: 0;
    min-width: 15px; height: 15px; padding: 0 3px; display: grid; place-items: center; border-radius: 999px;
    background: var(--t-texto-3); color: var(--t-sobre-azul); font-size: var(--t-fs-3xs); font-weight: 600;
  }
  html[data-diseno="nuevo"].tria-armazon.t-plegada #tria-barra .t-nav-n.rojo { background: var(--t-ko); color: var(--t-sobre-azul); }

  /* La cuenta del pie: solo las iniciales (el círculo), centradas. Su nombre sale en el tooltip al pasar por encima. */
  html[data-diseno="nuevo"].tria-armazon.t-plegada #tria-barra .t-barra-pie { flex-direction: column; gap: 8px; }
  html[data-diseno="nuevo"].tria-armazon.t-plegada #tria-barra :is(.sidebar-footer-agent, .v2-topbar-user) { justify-content: center; padding: 4px 0; }
}

/* ─── El tooltip propio: un único nodo flotante (position:fixed, colocado por JS), a la derecha del icono. No se
       recorta por el overflow de la barra. Tokens del diseño nuevo, flecha a la izquierda y sombra suave. ─── */
html[data-diseno="nuevo"].tria-armazon #tria-tooltip {
  position: fixed; left: 0; top: 0; z-index: 2147483001;
  max-width: 240px; padding: 5px 9px;
  background: var(--t-texto); color: var(--t-sobre-azul);
  border-radius: var(--t-radio-1); box-shadow: var(--t-sombra-flota);
  font: 500 var(--t-fs-xs) var(--t-fuente); line-height: 1.3; white-space: nowrap;
  pointer-events: none; opacity: 0; translate: -4px 0;
  transition: opacity var(--t-dur-1) ease-out, translate var(--t-dur-1) ease-out;
}
html[data-diseno="nuevo"].tria-armazon #tria-tooltip.visible { opacity: 1; translate: 0 0; }
html[data-diseno="nuevo"].tria-armazon #tria-tooltip[hidden] { display: none; }
html[data-diseno="nuevo"].tria-armazon #tria-tooltip::before {
  content: ""; position: absolute; left: -3px; top: 50%; width: 8px; height: 8px;
  background: var(--t-texto); border-radius: 2px; transform: translateY(-50%) rotate(45deg);
}
/* En el móvil no hay barra plegada; por si acaso, el tooltip nunca sale. */
@media (max-width: 768px) {
  html[data-diseno="nuevo"].tria-armazon #tria-tooltip { display: none; }
}