/* ═══════════════════════════════════════════════════════════════
   THEME.CSS — ETE Industrias · Control de Planta
   Tipografía global y clases semánticas de texto.
   Importado desde index.html. Afecta toda la app.

   ESCALA TIPOGRÁFICA (base 14px → todo +1–2px vs original):
   ──────────────────────────────────────────────────────────
   --fs-xs    10px  → etiquetas de filtro, badges, chips pequeños
   --fs-sm    12px  → texto auxiliar, subtítulos de card, pills
   --fs-base  14px  → texto de cuerpo, nav-items, inputs, selects
   --fs-md    15px  → títulos de modal, items de lista destacados
   --fs-lg    17px  → card-ttl, page-sub, section headers
   --fs-xl    20px  → valores secundarios, totales en tablas
   --fs-2xl   30px  → KPI .val principal
   --fs-3xl   28px  → page-title

   CLASES SEMÁNTICAS (usar en todo elemento de texto nuevo):
   ──────────────────────────────────────────────────────────
   .txt-label   → etiqueta de campo / filtro / encabezado de sección
   .txt-body    → texto de cuerpo general
   .txt-sub     → texto secundario / descripción / helper
   .txt-caption → texto diminuto (metadatos, fechas, chips)
   .txt-mono    → valores numéricos y códigos
   .txt-title   → título de sección o card
   .txt-page    → título de página (h1 equiv.)
   .txt-kpi     → valor grande de KPI card

   Para cambiar toda la escala: solo editar las variables --fs-*
   ═══════════════════════════════════════════════════════════════ */

:root {
  --fs-xs   : 11px;
  --fs-sm   : 13px;
  --fs-base : 14px;
  --fs-md   : 15px;
  --fs-lg   : 17px;
  --fs-xl   : 20px;
  --fs-2xl  : 30px;
  --fs-3xl  : 28px;
}

/* ── Clases semánticas ── */
.txt-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text3);
}

.txt-body {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.55;
}

.txt-sub {
  font-size: var(--fs-sm);
  color: var(--text2);
  line-height: 1.45;
}

.txt-caption {
  font-size: var(--fs-xs);
  color: var(--text3);
}

.txt-mono {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--accent2);
}

.txt-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}

.txt-page {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.025em;
}

.txt-kpi {
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: -.03em;
  line-height: 1;
}

/* ── Override clases existentes con nueva escala ── */

/* Títulos de página */
.page-title    { font-size: var(--fs-3xl); }
.page-sub      { font-size: var(--fs-md);  }

/* Cards */
.card-ttl      { font-size: var(--fs-lg);  }
.card-sub      { font-size: var(--fs-sm);  }

/* KPI stat-cards */
.lbl           { font-size: var(--fs-xs);  }
.val           { font-size: var(--fs-2xl); }
.dl            { font-size: var(--fs-sm);  }

/* Navegación */
.nav-item      { font-size: var(--fs-base); }
.nav-label     { font-size: var(--fs-xs);   }

/* Tablas */
table          { font-size: var(--fs-sm);  }
th             { font-size: var(--fs-xs);  letter-spacing: .05em; }

/* Inputs y selects */
.inp, .sel     { font-size: var(--fs-base); }
.btn           { font-size: var(--fs-sm);   }
.btn-sm        { font-size: var(--fs-xs);   }

/* Modales */
.modal-ttl     { font-size: var(--fs-md);   font-weight: 600; }

/* Filtros */
.filter-label  { font-size: var(--fs-xs);   }

/* Pills y chips */
.pill          { font-size: var(--fs-xs);   }
.vchip         { font-size: var(--fs-xs);   }
.badge         { font-size: var(--fs-xs);   }

/* Bodegas */
.bc-name       { font-size: var(--fs-base); }
.bc-code       { font-size: var(--fs-sm);   }
.bc-suc        { font-size: var(--fs-sm);   }
.et-cnt        { font-size: var(--fs-xl);   }
.et-code       { font-size: var(--fs-sm);   }

/* Config / secciones */
.cfg-grp             { font-size: var(--fs-xs);  }
.form-label-section  { font-size: var(--fs-xs);  }
.check-item          { font-size: var(--fs-base); }
.radio-item          { font-size: var(--fs-base); }

/* ── Grids responsivos del dashboard ──────────────────────────────
   Usar estas clases en lugar de grid-template-columns inline.
   Colapsan a 1 columna en móvil (< 640px).
   dash-grid-2 → 2 columnas en desktop, 1 en móvil
   dash-grid-3 → 3 columnas en desktop, 1 en móvil          */
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  min-width: 0;
}
.dash-grid-2 > *,
.dash-grid-3 > * {
  min-width: 0;  /* crítico: sin esto los grid items ignoran su track y desbordan */
  overflow: hidden;
}
.dash-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  min-width: 0;
}

/* Usar 768px igual que el resto de la app (no 640px) */
@media (max-width: 768px) {
  .dash-grid-2,
  .dash-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ── Contención de overflow horizontal (mobile) ───────────────────
   #main y .page tienen overflow-x:hidden para que ningún widget
   hijo pueda expandir el viewport y desplazar el topbar.
   Si un widget necesita scroll horizontal (tablas), usar .tbl-wrap
   que ya tiene overflow-x:auto contenido dentro del bloque. ── */
@media (max-width: 640px) {
  #main {
    padding: 14px;
  }
}

/* ── Sidebar tab — flecha permanente para abrir/cerrar (tablet >768px) ── */
#sidebar-tab {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: var(--nav-w-col);
  z-index: 95;
  width: 22px;
  height: 70px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 16px 16px 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, left .2s ease;
}
#sidebar-tab:hover { background: var(--accent); border-color: var(--accent); }
#sidebar-tab:hover svg { color: #fff; }
#sidebar-tab svg { width: 15px; height: 15px; color: var(--text2); transition: transform .2s; }

@media (min-width: 769px) {
  /* Siempre visible cuando colapsado y no pinned */
  body.nav-col:not(.nav-pinned) #sidebar-tab { display: flex; }

  /* Cuando peek activo: se desplaza al borde del sidebar expandido y flecha gira */
  body.nav-col.sidebar-peek:not(.nav-pinned) #sidebar-tab {
    left: var(--nav-w);
  }
  body.sidebar-peek #sidebar-tab svg { transform: rotate(180deg); }
}

/* ── Sidebar peek — overlay temporal (tablet, >768px) ─────── */
@media (min-width: 769px) {
  body.sidebar-peek #sidebar {
    width: var(--nav-w) !important;
    position: fixed !important;
    z-index: 91 !important;
    box-shadow: 4px 0 28px rgba(0,0,0,.45) !important;
  }
  body.sidebar-peek #sidebar .nav-txt     { display: inline !important; }
  body.sidebar-peek #sidebar .nav-label   { display: block !important; }
  body.sidebar-peek #sidebar .nav-chevron { display: block !important; }
  body.sidebar-peek #sidebar .nav-item    { justify-content: flex-start !important; padding: 8px 10px !important; }
  body.sidebar-peek #sidebar .badge       { display: inline-flex !important; }
  body.sidebar-peek #sidebar .logo-wrap   { width: var(--nav-w) !important; justify-content: flex-start !important; overflow: visible !important; }
  body.sidebar-peek #sidebar .logo-wrap img.logo-full { display: block !important; }
  body.sidebar-peek #sidebar .logo-wrap img.logo-icon { display: none !important; }
  body.sidebar-peek #sidebar .nav-divider { margin: 8px 12px !important; }
  body.sidebar-peek #sidebar-pin-area     { display: none !important; }

  /* Overlay que cierra al tocar fuera */
  #sidebar-overlay {
    position: fixed;
    inset: 0;
    left: var(--nav-w);
    z-index: 90;
    display: none;
    background: rgba(0,0,0,.22);
    cursor: pointer;
  }
  body.sidebar-peek #sidebar-overlay { display: block; }
}

@media (max-width: 768px) { #sidebar-tab { display: none !important; } }

/* ── Bottom bar (solo móvil) ─────────────────────────────────── */
#bottom-bar { display: none; }

/* FAB para reactivar el bottom bar */
#bb-fab {
  display: none;
}

/* ── Sidebar footer (solo móvil) ────────────────────────────── */
#sidebar-footer { display: none; }

@media (max-width: 768px) {
  /* Ocultar topbar — reemplazado por bottom bar */
  #topbar { display: none !important; }

  /* Main sin margen superior ni izquierdo */
  #main { margin-top: 0 !important; padding-bottom: 72px; }

  /* Sidebar ocupa toda la altura y hace scroll sin que bottom bar lo tape */
  #sidebar {
    top: 0 !important;
    padding-bottom: 72px;
  }

  /* Panel avisos: aparece sobre el bottom bar */
  #panel-alertas {
    top: auto !important;
    bottom: calc(58px + 8px) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }

  /* Bottom bar */
  #bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 58px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    z-index: 300;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    transition: transform 0.25s ease;
    overflow: visible;
  }
  #bottom-bar.bb-hidden { transform: translateY(100%); }

  /* Indicador rectángulo redondeado — sobresale por arriba y llega al fondo */
  #bb-indicator {
    position: absolute;
    top: -7px;
    bottom: 0;
    background: var(--accent);
    border-radius: 16px;
    box-shadow: 0 -2px 12px rgba(99,102,241,.35), 0 4px 12px rgba(99,102,241,.25);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  #bb-indicator.visible { opacity: 1; }

  /* SVG arch — oculto, ya no se usa */
  #bb-bg-svg, #bb-bubble, #bb-particles { display: none; }

  /* FAB reactivar bottom bar */
  #bb-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    color: #fff;
    box-shadow: 0 4px 16px rgba(99,102,241,.5);
    z-index: 301;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.3,0.64,1);
  }
  #bb-fab.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  .bb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    padding: 5px 8px;
    font-family: var(--font);
    font-size: 9.5px;
    position: relative;
    flex: 1;
    z-index: 3;
    transition: color 0.35s ease;
  }
  .bb-item svg { width: 20px; height: 20px; transition: transform 0.45s cubic-bezier(0.34, 1.08, 0.64, 1); }
  .bb-item.active { color: #fff; }
  .bb-item.active svg { transform: scale(1.15); }
  .bb-item:not(.active):active { color: var(--accent2); }

  /* Sidebar footer — usuario + tema + logout */
  #sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px;
    border-top: 1px solid var(--border);
    margin-top: auto;
    background: var(--bg2);
  }
  .sf-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
  }
  .sf-avatar {
    width: 34px; height: 34px;
    font-size: 14px;
    flex-shrink: 0;
  }
  .sf-nombre {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sf-rol {
    font-size: 10px;
    color: var(--text3);
    margin-top: 1px;
  }
  .sf-actions {
    display: flex;
    gap: 8px;
  }
  .sf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text2);
    transition: background .15s;
  }
  .sf-btn svg { width: 14px; height: 14px; }
  .sf-btn:hover { background: var(--bg2); color: var(--text); }
  .sf-logout { color: var(--danger); margin-left: auto; }
  .sf-logout:hover { background: rgba(224,92,92,.12); }

  /* Bottom bar — tema claro con degradado + wave */
  [data-theme="light"] #bottom-bar {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 58' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C100,40 200,0 300,18 C350,28 375,22 400,18 L400,0 L0,0 Z' fill='rgba(255,255,255,0.09)'/%3E%3Cpath d='M0,10 C80,28 160,0 240,11 C300,20 350,8 400,10 L400,0 L0,0 Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E") top/100% auto no-repeat,
      linear-gradient(0deg,#27538a 0%,#34679a 60%,#3d82cc 100%);
    border-top-color: rgba(0,0,0,.1);
  }
  [data-theme="light"] .bb-item { color: rgba(255,255,255,.65); }
  [data-theme="light"] .bb-item.active { color: #fff; }
  [data-theme="light"] #bb-indicator {
    background: rgba(255,255,255,.22);
    box-shadow: 0 -2px 12px rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.2);
  }
}