/* ═══════════════════════════════════════════════════════════════════════════
   Menú lateral compartido de TurisSaaS (sep-2026)
   Lo usan las 5 apps (Sistema, Portal, CRM, Panel del sitio, Academy) para que
   sean IDÉNTICAS: mismas medidas, colores, íconos, fecha y pie de usuario.
   Marcado y API: ver assets/turis-sidebar.js (arriba de todo).

   Por qué es suave al plegar:
   · Todo tiene la MISMA altura abierto y plegado (secciones, fecha, usuario):
     nada salta en vertical. Solo cambia el ancho.
   · Los íconos quedan quietos: su centro está siempre a 36px del borde del
     panel, así que al plegar no se corren, solo se esconde el texto.
   · El contenido de la derecha NO se re-calcula en cada cuadro: el JS cambia
     el ancho de una vez y lo desliza con transform (técnica FLIP).
   ═══════════════════════════════════════════════════════════════════════════ */

html { --tsb-w: 240px; --tsb-ease: cubic-bezier(.32, .72, 0, 1); --tsb-dur: .36s; }

.tsb {
  /* Tokens propios: no dependen de la paleta de cada app (así salen iguales). */
  --t-panel: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%), rgba(255,255,255,.70);
  --t-bd: rgba(255,255,255,.95);
  --t-shadow: 0 0 0 1px rgba(17,17,16,.05), 0 0 42px -10px rgba(245,166,35,.11), 0 14px 40px rgba(40,30,10,.07);
  --t-text: #141413;
  --t-text2: #4f4d48;
  --t-text3: #6a6a64;
  --t-logo: #0d3349;
  --t-hover: rgba(17,17,16,.05);
  --t-act-bg: rgba(245,166,35,.15);
  --t-act-fg: #945700;
  --t-act-ring: rgba(245,166,35,.34);
  --t-line: rgba(17,17,16,.08);
  --t-date-bg: rgba(17,17,16,.035);
  --t-date-bd: rgba(17,17,16,.08);
  --t-tip-bg: #141413;
  --t-tip-fg: #f7f7f5;
  --t-badge-bg: #F5A623;
  --t-badge-fg: #231600;

  position: fixed; z-index: 90;
  left: 12px; top: 12px; bottom: 12px;
  width: var(--tsb-w);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 0 12px 10px;
  border-radius: 20px;
  background: var(--t-panel);
  border: 1px solid var(--t-bd);
  box-shadow: var(--t-shadow);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  color: var(--t-text2);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: width var(--tsb-dur) var(--tsb-ease);
}
[data-theme="dark"] .tsb, .dark .tsb {
  --t-panel: linear-gradient(180deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,0) 30%), rgba(28,27,24,.62);
  --t-bd: rgba(255,255,255,.10);
  --t-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(245,166,35,.05), 0 0 38px -8px rgba(245,166,35,.13), 0 18px 48px rgba(0,0,0,.45);
  --t-text: #edede9;
  --t-text2: #a3a39c;
  --t-text3: #7c7c75;
  --t-logo: #f5f5f0;
  --t-hover: rgba(255,255,255,.06);
  --t-act-bg: rgba(245,166,35,.12);
  --t-act-fg: #F5A623;
  --t-act-ring: rgba(245,166,35,.28);
  --t-line: rgba(255,255,255,.08);
  --t-date-bg: rgba(255,255,255,.04);
  --t-date-bd: rgba(255,255,255,.08);
  --t-tip-bg: #f3f2ee;
  --t-tip-fg: #141413;
}
.tsb *, .tsb *::before, .tsb *::after { box-sizing: border-box; }

/* ── Marca ── */
.tsb .tsb-brand { display: flex; align-items: center; gap: 11px; height: 64px; padding: 0 0 0 8px; margin: 0; flex-shrink: 0; white-space: nowrap; text-decoration: none; }
.tsb .tsb-logo { width: 32px; height: auto; flex: none; display: block; }
.tsb .tsb-brand-txt { min-width: 0; transition: opacity .18s ease .1s; }
.tsb .tsb-name { font-family: 'Krona One', 'Geist', sans-serif; font-size: 12.5px; font-weight: 400; letter-spacing: .04em; line-height: 1.2; color: var(--t-logo); }
.tsb .tsb-sub { font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--t-text3); margin-top: 2px; }

/* ── Navegación ── */
.tsb .tsb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -12px; padding: 2px 12px 10px; scrollbar-width: none; }
.tsb .tsb-nav::-webkit-scrollbar { display: none; }
.tsb .tsb-sec {
  position: relative; height: 30px; margin: 0; padding: 0 0 7px 15px;
  display: flex; align-items: flex-end;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1;
  color: var(--t-text3); white-space: nowrap; background: none; border: 0;
}
.tsb .tsb-nav > .tsb-sec:first-child { height: 22px; }
.tsb .tsb-sec::after { content: ''; position: absolute; left: 12px; top: 50%; width: 24px; height: 1px; background: var(--t-line); opacity: 0; transition: opacity .2s ease; }

.tsb .tsb-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; height: 38px; margin: 0 0 2px; padding: 0 0 0 15px;
  border: 0; border-radius: 11px; background: transparent; box-shadow: none;
  color: var(--t-text2); font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; letter-spacing: 0;
  text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; overflow: hidden;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tsb .tsb-item > svg { width: 18px; height: 18px; flex: none; opacity: 1; transition: transform var(--tsb-dur) var(--tsb-ease); }
.tsb .tsb-item:hover { background: var(--t-hover); color: var(--t-text); }
.tsb .tsb-item.active, .tsb .tsb-item.active:hover {
  background: var(--t-act-bg); color: var(--t-act-fg); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--t-act-ring);
}
.tsb .tsb-item:focus-visible, .tsb .tsb-btn:focus-visible { outline: 2px solid rgba(245,166,35,.7); outline-offset: 1px; }
.tsb .tsb-t { transition: opacity .18s ease .1s; }
.tsb .tsb-item .tsb-t { overflow: hidden; text-overflow: clip; }

/* Contadores (reservas, chat, pendientes…): mismo círculo ámbar en todas las apps. */
.tsb .tsb-badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 18px; height: 18px; padding: 0 5px; margin: 0;
  border-radius: 9px; background: var(--t-badge-bg); color: var(--t-badge-fg);
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; letter-spacing: 0;
  transition: right var(--tsb-dur) var(--tsb-ease), top var(--tsb-dur) var(--tsb-ease), transform var(--tsb-dur) var(--tsb-ease),
              min-width var(--tsb-dur) var(--tsb-ease), height var(--tsb-dur) var(--tsb-ease), line-height var(--tsb-dur) var(--tsb-ease), font-size var(--tsb-dur) var(--tsb-ease);
}

/* ── Pie: plegar, fecha y usuario ── */
.tsb .tsb-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; margin: 0 -12px; padding: 8px 12px 0; border-top: 1px solid var(--t-line); }
.tsb .tsb-toggle { margin: 0; padding: 0; justify-content: center; color: var(--t-text3); font-size: 13px;
  transition: background .15s ease, color .15s ease, gap var(--tsb-dur) var(--tsb-ease); }
.tsb .tsb-toggle .tsb-t,
.tsb .tsb-date-val { display: inline-block; max-width: 170px; overflow: hidden; white-space: nowrap;
  transition: opacity .18s ease .1s, max-width var(--tsb-dur) var(--tsb-ease); }
.tsb .tsb-date {
  display: flex; align-items: center; justify-content: center; gap: 9px; height: 32px; padding: 0; margin: 0;
  transition: gap var(--tsb-dur) var(--tsb-ease);
  border-radius: 10px; background: var(--t-date-bg); border: 1px solid var(--t-date-bd);
  white-space: nowrap; overflow: hidden;
}
.tsb .tsb-date::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #F5A623; flex: none; box-shadow: 0 0 0 3px rgba(245,166,35,.16); }
.tsb .tsb-date-val { font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--t-text); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tsb .tsb-user { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 4px 0 9px; margin: 0; border-radius: 12px; white-space: nowrap; overflow: hidden; min-width: 0; }
.tsb .tsb-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: #F5A623; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; overflow: hidden;
}
.tsb .tsb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tsb .tsb-user-txt { flex: 1 1 auto; min-width: 0; transition: opacity .18s ease .1s; }
.tsb .tsb-user-name { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--t-text); overflow: hidden; text-overflow: ellipsis; }
.tsb .tsb-user-role { font-size: 11px; line-height: 1.25; color: var(--t-text3); overflow: hidden; text-overflow: ellipsis; }
.tsb .tsb-volver { text-decoration: none; margin-bottom: 6px; }
.tsb .tsb-acts { display: flex; align-items: center; gap: 1px; flex: none; transition: opacity .18s ease .1s; }
.tsb .tsb-btn {
  width: 28px; height: 28px; flex: 0 0 28px; padding: 0; margin: 0; border: 0; border-radius: 8px;
  background: none; color: var(--t-text3); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 0; transition: background .15s ease, color .15s ease;
}
.tsb .tsb-btn > svg { width: 16px; height: 16px; display: block; }
.tsb .tsb-btn:hover { background: rgba(245,166,35,.12); color: var(--t-act-fg); }
.tsb .tsb-btn-salir:hover { background: rgba(224,49,49,.10); color: #dc2626; }
/* Tema: la luna invita a pasar a oscuro; el sol, a volver a claro. */
.tsb .tsb-btn .i-sol { display: none; }
[data-theme="dark"] .tsb .tsb-btn .i-sol, .dark .tsb .tsb-btn .i-sol { display: block; }
[data-theme="dark"] .tsb .tsb-btn .i-luna, .dark .tsb .tsb-btn .i-luna { display: none; }

/* Globo con el nombre al pasar el mouse (menú plegado). Vive en <body>. */
.tsb-tip {
  position: fixed; z-index: 10000; left: 0; top: 0; padding: 7px 11px; border-radius: 9px;
  background: #141413; color: #f7f7f5; font: 600 12px/1.2 'Geist', system-ui, sans-serif; white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translateX(-4px); transition: opacity .14s ease, transform .14s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
[data-theme="dark"] .tsb-tip, .dark .tsb-tip { background: #f3f2ee; color: #141413; }
.tsb-tip.on { opacity: 1; transform: none; }

/* ── Lo de la derecha: el contenedor principal, el encabezado flotante y el contenido ── */
@media (min-width: 769px) {
  .tsb-main { margin-left: calc(var(--tsb-w) + 12px) !important; min-width: 0; }
  /* La sombra del menú va POR DEBAJO de las tarjetas (se notaba encima de las que arrancan la
     pantalla y tapaba el vidrio). El contenido sube de capa como ítem flex (z-index sin
     position: no cambia la referencia de nada absoluto adentro). Los globos y menús del menú
     viven en <body>, así que no quedan tapados. */
  .tsb { z-index: 1; }
  .tsb-main { z-index: 2; }
  .tsb-topbar {
    position: sticky; top: 12px; z-index: 50;
    height: 44px; margin: 12px 12px 0 12px; padding: 0 16px 0 18px;
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 0 0 1px rgba(17,17,16,.05), 0 8px 24px rgba(40,30,10,.06);
    backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  }
  [data-theme="dark"] .tsb-topbar, .dark .tsb-topbar {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)), rgba(22,22,20,.72);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.35);
  }
  /* Lo que pasa scrolleando no se ve alrededor del encabezado: una franja fija del color de la
     página, de todo el ancho, desde arriba hasta el pie del encabezado (56px; hay cosas pegajosas en top:56), por DEBAJO del
     encabezado (z 49 < 50). Antes tapaba sólo los 12px de arriba y el contenido se asomaba por
     los márgenes de los costados y por las esquinas redondeadas (29-sep-2026). Es el primer hijo
     de .tsb-main, pegajoso, con margen negativo para no correr nada. */
  .tsb-main::before { content: ''; display: block; position: sticky; top: 0; z-index: 49; height: 56px; margin-bottom: -56px; flex-shrink: 0; background: var(--tsb-page, var(--bg, #f7f7f5)); pointer-events: none; }
  .tsb-content { padding-left: 12px !important; padding-right: 12px !important; }
  .tsb-hamb { display: none !important; }

  /* ── Plegado (solo escritorio) ── */
  html.tsb-plegado { --tsb-w: 72px; }
  html.tsb-plegado .tsb .tsb-t,
  html.tsb-plegado .tsb .tsb-brand-txt,
  html.tsb-plegado .tsb .tsb-user-txt,
  html.tsb-plegado .tsb .tsb-acts,
  html.tsb-plegado .tsb .tsb-date-val { opacity: 0; pointer-events: none; transition-delay: 0s; transition-duration: .12s; }
  html.tsb-plegado .tsb .tsb-sec::after { opacity: 1; }
  html.tsb-plegado .tsb .tsb-nav > .tsb-sec:first-child::after { opacity: 0; }
  html.tsb-plegado .tsb .tsb-badge { right: 3px; top: 3px; transform: none; min-width: 16px; height: 16px; line-height: 16px; font-size: 9.5px; padding: 0 4px; }
  html.tsb-plegado .tsb .tsb-toggle > svg { transform: rotate(180deg); }
  html.tsb-plegado .tsb .tsb-toggle, html.tsb-plegado .tsb .tsb-date { gap: 0; }
  html.tsb-plegado .tsb .tsb-toggle .tsb-t, html.tsb-plegado .tsb .tsb-date-val { max-width: 0; transition: opacity .12s ease, max-width var(--tsb-dur) var(--tsb-ease); }
  html.tsb-plegado .tsb .tsb-date::before { box-shadow: 0 0 0 3px rgba(245,166,35,.22); }
}

/* ── Celular: cajón que entra desde la izquierda (siempre abierto, sin plegar) ── */
@media (max-width: 768px) {
  .tsb {
    left: 0; top: 0; bottom: 0; width: 272px; z-index: 300;
    border-radius: 0 20px 20px 0; border-left: 0;
    transform: translateX(-104%); visibility: hidden; box-shadow: none;
    transition: transform .32s var(--tsb-ease), visibility 0s linear .32s;
  }
  /* Cerrado queda invisible del todo: sin eso, el halo se asomaba por el borde izquierdo
     y con Tab se podía entrar a un menú que no se ve. */
  .tsb.tsb-open { transform: none; visibility: visible; box-shadow: var(--t-shadow); transition: transform .32s var(--tsb-ease), visibility 0s; }
  .tsb .tsb-toggle { display: none; }
  .tsb-main { margin-left: 0 !important; }
  .tsb-hamb { display: inline-flex !important; }
}
.tsb-backdrop { position: fixed; inset: 0; z-index: 299; background: rgba(0,0,0,.38); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.tsb-backdrop.on { opacity: 1; pointer-events: auto; }
@media (min-width: 769px) { .tsb-backdrop { display: none; } }

/* Mientras dura el deslizamiento del contenido, nada de scroll horizontal. */
html.tsb-anim, html.tsb-anim body { overflow-x: hidden !important; }
/* …y sin desenfoques adentro del contenido: cada tarjeta de vidrio re-calcula su blur en
   cada cuadro mientras se mueve, y eso es lo que traba. Sobre el fondo liso no se nota. */
html.tsb-anim .tsb-main * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  .tsb, .tsb *, .tsb-tip { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ── Pantallas táctiles y chicas (30-sep-2026, revisión responsive de las 6 apps) ── */
/* Objetivos para el dedo: en el cajón los ítems medían 38px y los botones del pie 28px. */
@media (max-width: 768px) {
  /* App instalada (pantalla completa): el logo y el nombre no van debajo del reloj y la cámara. */
  .tsb { width: min(272px, 86vw); padding-top: var(--sat, env(safe-area-inset-top, 0px)); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .tsb .tsb-item { height: 44px; }
  .tsb .tsb-btn { width: 40px; height: 40px; flex: 0 0 40px; }
  .tsb .tsb-user { height: 52px; }
  .tsb-hamb { min-width: 40px; min-height: 40px; }
  /* Rótulos chicos del cajón: 12px como mínimo en el celular. */
  .tsb .tsb-sub, .tsb .tsb-sec, .tsb .tsb-sec .tsb-t, .tsb .tsb-user-role { font-size: 12px; }
  .tsb-topbar { gap: 8px; min-width: 0; }
  .tsb-topbar .tsb-hamb { flex: none; }
}
/* Tablet en horizontal (menú fijo, pero con el dedo): botones del pie un poco más grandes. */
@media (pointer: coarse) and (min-width: 769px) {
  .tsb .tsb-btn { width: 36px; height: 36px; flex: 0 0 36px; }
}
/* Con el cajón abierto no scrollea lo de atrás. */
html:has(.tsb.tsb-open), html:has(.tsb.tsb-open) body,
html:has(.tsb.tsb-open) .tsb-main { overflow: hidden !important; overscroll-behavior: none; }
/* Celular en horizontal (poca altura): el menú fijo mostraba sólo 3 ítems. Versión compacta. */
@media (min-width: 769px) and (max-height: 520px) {
  .tsb { top: 8px; bottom: 8px; }
  .tsb .tsb-brand { height: 48px; }
  .tsb .tsb-toggle, .tsb .tsb-date { display: none; }
  .tsb .tsb-item { height: 36px; }
}