/* ═══════════════════════════════════════════════════════════════
   TETRAPP · Design System v1.0
   Tetraplastic Guatemala — Sistema Digital de Operaciones
   Álvaro Mendoza · Administrador
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables de módulos (nuevos) ───────────────────────────── */
:root {
  /* Producción */
  --prod:        #B07D2A;
  --prod-l:      #FDEDC0;
  --prod-xl:     #FFFBEB;
  --prod-dark:   #7A4800;
  /* Ventas */
  --ventas:      #1D4ED8;
  --ventas-l:    #BFDBFE;
  --ventas-xl:   #EFF6FF;
  --ventas-dark: #1E3A8A;
  /* Bodega */
  --bodega:      #0E7490;
  --bodega-l:    #A5F3FC;
  --bodega-xl:   #ECFEFF;
  --bodega-dark: #164E63;

  /* Tokens de diseño */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.18);
  --shadow-xl: 0 20px 48px rgba(0,0,0,.28);

  --t-fast: 100ms ease;
  --t-base: 150ms ease;
  --t-slow: 220ms ease;
}

/* ── Scrollbar personalizado ──────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #D0CEC8; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: #A8A6A0; }

/* ── Logo nav: animación dropdown ────────────────────────────── */
.logo-nav.open {
  animation: ds-dropDown 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ds-dropDown {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Items bloqueados en el dropdown */
.logo-nav a.nav-locked {
  opacity: .38;
  pointer-events: none;
  cursor: default;
}
.logo-nav a.nav-locked::after {
  content: '🔒';
  font-size: 10px;
  margin-left: auto;
}

/* ── Modal: fade + slide-up ───────────────────────────────────── */
.overlay.open {
  animation: ds-fadeIn 180ms ease;
}
@keyframes ds-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.overlay.open .modal {
  animation: ds-slideUp 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ds-slideUp {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Botones: press feedback ─────────────────────────────────── */
.btn:active {
  transform: scale(0.97);
}

/* ── Progress bars: animación de ancho ───────────────────────── */
.pr-bar,
.rank-bar,
.proc-bar,
.det-proc-bar,
.det-op-bar {
  transition: width .75s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Vista "En Construcción" ─────────────────────────────────── */
.wip-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 32px;
  text-align: center;
  overflow-y: auto;
}
.wip-icon {
  font-size: 64px;
  line-height: 1;
  animation: ds-float 3.5s ease-in-out infinite;
}
@keyframes ds-float {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-10px); }
}
.wip-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #0C0C0B;
}
.wip-sub {
  font-size: 13px;
  color: #6B6B6A;
  max-width: 400px;
  line-height: 1.7;
}
.wip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
  max-width: 500px;
}
.wip-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #E0DED8;
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #6B6B6A;
}
.wip-chip span {
  font-size: 9px;
  font-weight: 700;
  background: #FFF3D6;
  color: #B87200;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ── Área de contenido principal (flex fill) ─────────────────── */
.views {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-width: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
  .kpi-strip:not(.kpi-strip-h) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile ≤ 768px */
@media (max-width: 768px) {
  .topbar {
    padding: 8px 14px !important;
    height: auto !important;
    min-height: 52px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-sub,
  .clock           { display: none !important; }
  .nav-btns        { display: none !important; }

  .modal {
    width: 96% !important;
    max-height: 92vh !important;
    border-radius: 14px !important;
  }
  .fr              { grid-template-columns: 1fr !important; }
  .c-grid          { grid-template-columns: 1fr 1fr !important; }

  /* Split pane: apilar en mobile */
  .app {
    flex-direction: column !important;
    height: auto !important;
    overflow-y: auto !important;
  }
  .sidenav {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    padding: 6px 12px !important;
    border-right: none !important;
    border-bottom: 1px solid #E0DED8 !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }
  .sn-div          { display: none !important; }
  .main            { overflow: visible !important; }
  .split           { flex-direction: column !important; height: auto !important; }
  .pane-l          { width: 100% !important; max-height: 48vh !important; }
  .pane-r          { min-height: 380px !important; }

  /* Index area grid */
  .areas-grid      { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* Mobile pequeño ≤ 480px */
@media (max-width: 480px) {
  .logo            { font-size: 15px !important; }
  .uname,
  .user-name       { display: none !important; }
  .areas-grid      { grid-template-columns: 1fr !important; padding: 14px !important; }
}