/* ═══════════════════════════════════════════════════════════════

   SURIAPP – Dashboard Styles (dashboard.css)

   Paleta: violet #7B3FE4 · sky #29B6F6 · cyan #00E5FF · gold #FFC107

   Tipografía: Syne (headings 800w) + DM Sans (body)

   ═══════════════════════════════════════════════════════════════ */





/* ─────────────────────────────────────────────────────────────

   1. VARIABLES GLOBALES

   ───────────────────────────────────────────────────────────── */

:root {

  --violet:  #7B3FE4;

  --violet2: #9B5FFF;

  --blue:    #1565C0;

  --sky:     #29B6F6;

  --cyan:    #00E5FF;

  --orange:  #FF8F00;

  --gold:    #FFC107;

  --green:   #22C55E;

  --red:     #EF4444;

  --yellow:  #F59E0B;

  --dark:    #0F1120;

  --dark1:   #141628;

  --dark2:   #1A1D30;

  --dark3:   #20233A;

  --dark4:   #272B42;

  --border:  rgba(255,255,255,.07);

  --border2: rgba(255,255,255,.12);

  --text1:   #F1F5F9;

  --text2:   #94A3B8;

  --text3:   #475569;

  --sidebar-w: 260px;

  --topbar-h:  64px;

}



/* ─────────────────────────────────────────────────────────────

   2. RESET & BASE

   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {

  font-family: 'DM Sans', sans-serif;

  background: var(--dark);

  color: var(--text2);

  overflow-x: hidden;

  min-height: 100vh;

}

h1,h2,h3,h4,h5,h6 { font-family: 'Syne', sans-serif; color: var(--text1); }

a { text-decoration: none; }

ul { list-style: none; }

input, select, textarea, button { font-family: inherit; }



/* ─────────────────────────────────────────────────────────────

   3. SCROLLBAR

   ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar       { width: 5px; height: 5px; }

::-webkit-scrollbar-track { background: var(--dark2); }

::-webkit-scrollbar-thumb { background: var(--dark4); border-radius: 3px; }

::-webkit-scrollbar-thumb:hover { background: var(--violet); }



/* ─────────────────────────────────────────────────────────────

   4. LAYOUT PRINCIPAL (sidebar fijo + main area flexible)

   ───────────────────────────────────────────────────────────── */

.app-wrapper {

  display: flex;

  min-height: 100vh;

}



/* Área principal: todo excepto el sidebar */

.main-area {

  margin-left: var(--sidebar-w);

  flex: 1;

  display: flex;

  flex-direction: column;

  min-height: 100vh;

  overflow-x: hidden;

  max-width: calc(100vw - var(--sidebar-w));

}



/* Contenido de las páginas */

.content { flex: 1; padding: 24px 28px; }



/* Visibilidad de páginas — controlada por navigate() en JS */

.page        { display: none; }

.page.active { display: block; }



/* ─────────────────────────────────────────────────────────────

   5. SIDEBAR

   Fijo a la izquierda, con scroll vertical. En mobile se

   oculta y se abre/cierra con la clase .open vía JS.

   ───────────────────────────────────────────────────────────── */

.sidebar {

  width: var(--sidebar-w);

  background: var(--dark1);

  border-right: 1px solid var(--border);

  display: flex;

  flex-direction: column;

  position: fixed;

  top: 0; left: 0; bottom: 0;

  z-index: 1000;

  transition: transform .3s ease;

  overflow-y: auto;

}



/* Sección del logo */

.sidebar-logo {

  padding: 22px 20px 18px;

  border-bottom: 1px solid var(--border);

  display: flex; align-items: center; gap: 10px;

}

.sidebar-logo-text { font-family:'Syne',sans-serif; font-weight:800; font-size:1.18rem; color:var(--text1); }

.sidebar-logo-text span { color: var(--sky); }



/* Info del usuario logueado */

.sidebar-user {

  padding: 16px 20px;

  border-bottom: 1px solid var(--border);

  display: flex; align-items: center; gap: 12px;

}

.sidebar-avatar {

  width:38px; height:38px; border-radius:10px;

  display:flex; align-items:center; justify-content:center;

  font-weight:700; font-size:.9rem; color:#fff; flex-shrink:0;

  background: linear-gradient(135deg,var(--violet),var(--sky));

}

.sidebar-user-name { font-size:.88rem; font-weight:600; color:var(--text1); line-height:1.2; }

.sidebar-user-role { font-size:.72rem; color:var(--text3); display:inline-flex; align-items:center; gap:4px; margin-top:2px; }



/* Badges de rol */

.role-badge { display:inline-block; font-size:.65rem; font-weight:700; padding:1px 7px; border-radius:50px; text-transform:uppercase; letter-spacing:.05em; }

.role-superadmin { background:rgba(123,63,228,.2);  color:#c084fc; }

.role-admin      { background:rgba(41,182,246,.15); color:var(--sky); }

.role-seller     { background:rgba(34,197,94,.15);  color:#4ade80; }

.role-operator   { background:rgba(251,191,36,.15); color:#fbbf24; }



/* Navegación */

.sidebar-nav { flex:1; padding:12px 0; }

.nav-section-title {

  font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;

  color:var(--text3); padding:10px 20px 6px;

}

.nav-item {

  display:flex; align-items:center; gap:10px;

  padding:10px 20px;

  color:var(--text3); font-size:.88rem; font-weight:500;

  cursor:pointer; transition:all .2s;

  position:relative; border-left:3px solid transparent;

}

.nav-item i { font-size:1rem; width:18px; text-align:center; flex-shrink:0; }

.nav-item:hover  { background:rgba(255,255,255,.04); color:var(--text2); }

.nav-item.active { background:rgba(123,63,228,.12); color:var(--violet2); border-left-color:var(--violet); }

.nav-item .nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:50px; }

.nav-item .nav-badge.badge-gold { background:rgba(255,193,7,.15); color:var(--gold); }



/* Footer del sidebar */

.sidebar-footer { padding:14px 20px; border-top:1px solid var(--border); }

.sidebar-footer .nav-item { padding:8px 0; border-left:none !important; background:transparent !important; }



/* ─────────────────────────────────────────────────────────────

   6. TOPBAR (barra superior sticky)

   ───────────────────────────────────────────────────────────── */

.topbar {

  height:var(--topbar-h);

  background:var(--dark1); border-bottom:1px solid var(--border);

  display:flex; align-items:center; justify-content:space-between;

  padding:0 28px; position:sticky; top:0; z-index:100;

}

.topbar-left  { display:flex; align-items:center; gap:16px; }

.topbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.topbar-title { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text1); }

.topbar-breadcrumb      { font-size:.8rem; color:var(--text3); }

.topbar-breadcrumb span { color:var(--sky); }



/* Búsqueda en el topbar */

.search-box {

  background:var(--dark3); border:1px solid var(--border); border-radius:10px;

  padding:8px 14px; display:flex; align-items:center; gap:8px;

  color:var(--text3); font-size:.85rem; transition:border-color .2s; width:220px;

}

.search-box input { background:none; border:none; outline:none; color:var(--text2); font-size:.85rem; width:100%; }

.search-box input::placeholder { color:var(--text3); }

.search-box:focus-within { border-color:rgba(123,63,228,.4); }



/* Botones ícono (campana, perfil) */

.icon-btn {

  width:38px; height:38px; border-radius:10px;

  border:1px solid var(--border); background:var(--dark3);

  display:flex; align-items:center; justify-content:center;

  color:var(--text3); cursor:pointer; transition:all .18s; position:relative;

  flex-shrink:0;

  touch-action:manipulation;

  -webkit-tap-highlight-color:transparent;

}

.icon-btn:hover  { background:var(--dark4); color:var(--text1); border-color:var(--border2); }

.icon-btn:active { opacity:.7; }





/* ─────────────────────────────────────────────────────────────

   7. KPI CARDS (métricas principales)

   ───────────────────────────────────────────────────────────── */

.kpi-card {

  background:var(--dark2); border:1px solid var(--border); border-radius:16px;

  padding:22px; transition:transform .25s, box-shadow .25s;

  overflow: hidden;          /* evita que el contenido desborde hacia otras cards */

  min-width: 0;              /* permite que flexbox/grid comprima la card */

}

.kpi-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.3); }

.kpi-icon  { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:14px; flex-shrink:0; }

.kpi-value {

  font-family:'Syne',sans-serif;

  font-size: clamp(.7rem, 1.8cqw, 1.9rem); /* cqw = container query width */

  font-weight:800;

  color:var(--text1);

  line-height:1.1;

  margin-bottom:4px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  min-width: 0;

  max-width: 100%;

}

.kpi-label { font-size:.8rem; color:var(--text3); letter-spacing:.03em; }



/* Container query support — permite que cqw funcione en .kpi-value */

[class*="col-"] > .kpi-card { container-type: inline-size; }



/* Fallback para browsers sin container queries: escalar por vw */

@supports not (font-size: 1cqw) {

  .kpi-value { font-size: clamp(.7rem, 1.8vw, 1.7rem); }

  #page-analytics .kpi-value { font-size: clamp(.65rem, 1.4vw, 1.3rem) !important; }

}

.kpi-trend { font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:3px; margin-top:10px; }

.trend-up   { color:var(--green); }

.trend-down { color:var(--red); }



/* ─────────────────────────────────────────────────────────────

   8. PANELS (contenedores de sección)

   Estructura: .panel > .panel-head + .panel-body

   ───────────────────────────────────────────────────────────── */

.panel { background:var(--dark2); border:1px solid var(--border); border-radius:16px; overflow:hidden; }

.panel-head { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }

.panel-title { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:700; color:var(--text1); display:flex; align-items:center; gap:8px; }

.panel-title i { color:var(--sky); }

.panel-body { padding:20px; }



/* ─────────────────────────────────────────────────────────────

   9. TABLA

   ───────────────────────────────────────────────────────────── */

.tbl { width:100%; border-collapse:collapse; font-size:.85rem; }

.tbl thead th {

  font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;

  color:var(--text3); padding:10px 14px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap;

}

.tbl tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }

.tbl tbody tr:last-child { border-bottom:none; }

.tbl tbody tr:hover { background:rgba(255,255,255,.03); }

.tbl td { padding:11px 14px; color:var(--text2); vertical-align:middle; }

.tbl td strong { color:var(--text1); }



/* ─────────────────────────────────────────────────────────────

   10. BADGES / PILLS

   ───────────────────────────────────────────────────────────── */

.badge-pill { display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:50px; text-transform:uppercase; letter-spacing:.04em; }

.bp-green  { background:rgba(34,197,94,.12);  color:#4ade80; }

.bp-red    { background:rgba(239,68,68,.12);  color:#f87171; }

.bp-yellow { background:rgba(251,191,36,.12); color:#fbbf24; }

.bp-blue   { background:rgba(41,182,246,.12); color:var(--sky); }



/* ─────────────────────────────────────────────────────────────

   11. BOTONES

   ───────────────────────────────────────────────────────────── */



/* Primario degradado */

.btn-grad {

  background:linear-gradient(135deg,var(--violet) 0%,var(--sky) 100%);

  color:#fff; border:none; border-radius:10px; padding:9px 18px;

  font-size:.88rem; font-weight:600; cursor:pointer;

  display:inline-flex; align-items:center; gap:7px;

  transition:opacity .2s, transform .2s; white-space:nowrap;

}

.btn-grad:hover    { opacity:.88; transform:translateY(-1px); }

.btn-grad:active   { transform:translateY(0); }

.btn-grad:disabled { opacity:.55; cursor:not-allowed; transform:none; }



/* Contorno */

.btn-outline {

  background:transparent; color:var(--text2); border:1px solid var(--border2);

  border-radius:10px; padding:9px 18px; font-size:.88rem; font-weight:500;

  cursor:pointer; display:inline-flex; align-items:center; gap:7px;

  transition:background .2s, color .2s; white-space:nowrap;

}

.btn-outline:hover { background:rgba(255,255,255,.06); color:var(--text1); }



/* Peligro (rojo) */

.btn-danger {

  background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.25);

  border-radius:10px; padding:9px 18px; font-size:.88rem; font-weight:600;

  cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:background .2s;

}

.btn-danger:hover { background:rgba(239,68,68,.25); }



/* Ícono pequeño */

.btn-icon {

  width:32px; height:32px; border-radius:8px; border:1px solid var(--border);

  background:var(--dark3); display:inline-flex; align-items:center; justify-content:center;

  color:var(--text3); cursor:pointer; font-size:.85rem; transition:all .2s;

}

.btn-icon:hover           { border-color:var(--border2); color:var(--text2); }

.btn-icon.bi-edit:hover   { background:rgba(41,182,246,.1);  color:var(--sky); }

.btn-icon.bi-delete:hover { background:rgba(239,68,68,.1);   color:#f87171; }

.btn-icon.bi-view:hover   { background:rgba(123,63,228,.1);  color:var(--violet2); }

.btn-icon.bi-add:hover    { background:rgba(34,197,94,.1);   color:#4ade80; }



/* ─────────────────────────────────────────────────────────────

   12. CAMPOS DE FORMULARIO

   ───────────────────────────────────────────────────────────── */

.form-field { margin-bottom:16px; }

.form-label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); margin-bottom:7px; }



/* Input/Select oscuro */

.form-control-dark {

  width:100%; background:var(--dark3); border:1px solid var(--border);

  border-radius:10px; padding:10px 13px; color:var(--text1);

  font-size:.9rem; outline:none; transition:border-color .2s, box-shadow .2s;

}

.form-control-dark::placeholder { color:var(--text3); }

.form-control-dark:focus { border-color:rgba(123,63,228,.5); box-shadow:0 0 0 3px rgba(123,63,228,.1); }



/* Barra de nivel de stock */

.stock-bar  { height:6px; background:var(--dark4); border-radius:3px; overflow:hidden; }

.stock-fill { height:100%; border-radius:3px; transition:width .5s; }

.sf-green  { background:linear-gradient(90deg,#22c55e,#4ade80); }

.sf-yellow { background:linear-gradient(90deg,var(--orange),var(--gold)); }

.sf-red    { background:linear-gradient(90deg,#ef4444,#f87171); }



/* ─────────────────────────────────────────────────────────────

   13. MODALES

   ───────────────────────────────────────────────────────────── */

.modal-overlay {

  display:none; position:fixed; inset:0;

  background:rgba(0,0,0,.7); z-index:5000;

  align-items:center; justify-content:center;

  padding:20px; backdrop-filter:blur(4px);

}

.modal-overlay.show { display:flex; }



.modal-box {

  background:var(--dark2); border:1px solid var(--border2); border-radius:20px;

  width:100%; max-width:580px;

  box-shadow:0 40px 80px rgba(0,0,0,.6);

  animation:modalIn .3s cubic-bezier(.34,1.56,.64,1) both;

  max-height:90vh; overflow-y:auto;

}

@keyframes modalIn {

  from { opacity:0; transform:scale(.93) translateY(12px); }

  to   { opacity:1; transform:scale(1)   translateY(0); }

}

.modal-head { padding:18px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }

.modal-title { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--text1); display:flex; align-items:center; gap:8px; }

.modal-close { background:none; border:none; color:var(--text3); font-size:1.3rem; cursor:pointer; line-height:1; padding:0 4px; transition:color .2s; }

.modal-close:hover { color:var(--text1); }

.modal-body { padding:24px; }

.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }



/* ─────────────────────────────────────────────────────────────

   14. TOASTS (notificaciones emergentes, esquina inferior derecha)

   ───────────────────────────────────────────────────────────── */




to{opacity:1;transform:translateX(0)} }



/* ─────────────────────────────────────────────────────────────

   15. ALERT BANNERS (dentro de páginas)

   ───────────────────────────────────────────────────────────── */

.alert-banner {

  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2);

  border-radius:12px; padding:12px 18px; display:flex; align-items:center;

  gap:12px; margin-bottom:20px; font-size:.88rem;

}

.alert-banner i      { color:var(--red); font-size:1.1rem; flex-shrink:0; }

.alert-banner strong { color:#f87171; }

.alert-banner.warn   { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.2); }

.alert-banner.warn i      { color:var(--yellow); }

.alert-banner.warn strong { color:#fbbf24; }



/* ─────────────────────────────────────────────────────────────

   16. GRÁFICO DE BARRAS

   ───────────────────────────────────────────────────────────── */

.bar-chart { display:flex; align-items:flex-end; gap:8px; height:120px; }

.bar-col   { flex:1; border-radius:6px 6px 0 0; position:relative; transition:opacity .2s; cursor:pointer; }

.bar-col:hover { opacity:.8; }

.bar-label { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); font-size:.65rem; color:var(--text3); white-space:nowrap; }



/* SVG trend chart */

.trend-chart-wrap { position:relative; width:100%; }

.trend-chart-wrap svg { width:100%; display:block; }

.trend-chart-wrap { position:relative; width:100%; }

.trend-tooltip {

  position:absolute;

  background:var(--dark2);

  border:1px solid rgba(41,182,246,.3);

  border-radius:8px;

  padding:5px 10px;

  font-size:.78rem;

  color:var(--text1);

  pointer-events:none;

  white-space:nowrap;

  opacity:0;

  transition:opacity .15s;

  transform:translate(-50%, -120%);

  z-index:20;

  box-shadow:0 4px 16px rgba(0,0,0,.4);

}



/* ─────────────────────────────────────────────────────────────

   17. ZONA DE CARGA DE ARCHIVOS

   ───────────────────────────────────────────────────────────── */

.upload-zone { border:2px dashed var(--border2); border-radius:14px; padding:40px; text-align:center; cursor:pointer; transition:all .2s; }

.upload-zone:hover, .upload-zone.drag-over { border-color:rgba(123,63,228,.5); background:rgba(123,63,228,.05); }

.upload-icon { font-size:2.5rem; color:var(--text3); margin-bottom:12px; }

.upload-text { font-size:.9rem; color:var(--text3); }

.upload-text span { color:var(--sky); font-weight:600; }



/* ─────────────────────────────────────────────────────────────

   18. TARJETAS DE USUARIO

   ───────────────────────────────────────────────────────────── */

.user-card { background:var(--dark3); border:1px solid var(--border); border-radius:14px; padding:18px; transition:border-color .2s, transform .2s; }

.user-card:hover { border-color:var(--border2); transform:translateY(-2px); }

.user-avatar-lg { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700; color:#fff; margin-bottom:12px; }



/* ─────────────────────────────────────────────────────────────

   19. ITEMS DE BACKUP

   ───────────────────────────────────────────────────────────── */

.backup-item { display:flex; align-items:center; justify-content:space-between; padding:14px; background:var(--dark3); border:1px solid var(--border); border-radius:12px; margin-bottom:10px; transition:border-color .2s; }

.backup-item:hover { border-color:var(--border2); }

.backup-info { display:flex; align-items:center; gap:12px; }

.backup-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }



/* ─────────────────────────────────────────────────────────────

   20. PERFIL DE USUARIO

   ───────────────────────────────────────────────────────────── */

.profile-avatar-wrap { position:relative; display:inline-block; }

.profile-avatar { width:90px; height:90px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--violet),var(--sky)); }

.avatar-edit-btn { position:absolute; bottom:-4px; right:-4px; width:28px; height:28px; border-radius:8px; background:var(--sky); color:var(--dark); border:2px solid var(--dark2); display:flex; align-items:center; justify-content:center; font-size:.8rem; cursor:pointer; }

.superadmin-badge { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,rgba(123,63,228,.2),rgba(41,182,246,.15)); border:1px solid rgba(123,63,228,.35); border-radius:8px; padding:6px 12px; font-size:.78rem; font-weight:700; color:#c084fc; letter-spacing:.04em; }



/* ─────────────────────────────────────────────────────────────

   21. FEED DE ACTIVIDAD

   ───────────────────────────────────────────────────────────── */

.activity-item { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }

.activity-item:last-child { border-bottom:none; }

.activity-dot  { width:32px; height:32px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.85rem; margin-top:2px; }

.activity-text { font-size:.85rem; color:var(--text2); line-height:1.5; }

.activity-text strong { color:var(--text1); }

.activity-time { font-size:.75rem; color:var(--text3); margin-top:2px; }



/* ─────────────────────────────────────────────────────────────

   22. BLOQUE ACCESO GLOBAL (SuperAdmin)

   ───────────────────────────────────────────────────────────── */

.global-access { background:rgba(123,63,228,.06); border:1px solid rgba(123,63,228,.15); border-radius:12px; padding:14px 18px; margin-bottom:20px; }

.global-access-title { font-size:.8rem; font-weight:700; color:#c084fc; margin-bottom:4px; }

.global-access p { font-size:.82rem; color:var(--text3); }



/* ─────────────────────────────────────────────────────────────

   23. UTILIDADES

   ───────────────────────────────────────────────────────────── */

.divider     { height:1px; background:var(--border); margin:16px 0; }

.text-sky    { color:var(--sky)    !important; }

.text-cyan   { color:var(--cyan)   !important; }

.text-violet { color:var(--violet2)!important; }

.text-gold   { color:var(--gold)   !important; }

.text-green  { color:var(--green)  !important; }

.text-red    { color:var(--red)    !important; }

.fw700       { font-weight:700; }

.mb0         { margin-bottom:0 !important; }

.legend-dot  { width:10px; height:10px; border-radius:3px; flex-shrink:0; }



/* ─────────────────────────────────────────────────────────────

   24. ANIMACIONES

   ───────────────────────────────────────────────────────────── */

.fade-in { animation:fadeIn .4s ease both; }

@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

@keyframes spin   { to { transform:rotate(360deg); } }







/* ═══════════════════════════════════════════════════════════════

   25. RESPONSIVE COMPLETO

   Breakpoints: 1199 · 991 · 767 · 575 · 430 · 360

   ═══════════════════════════════════════════════════════════════ */



/* ── Base: prevenir overflow horizontal en toda la app ──────── */

html { overflow-x: hidden; max-width: 100vw; }

.app-wrapper, .main-area, .content, .page {

  max-width: 100%;

  overflow-x: hidden;

}



/* Tablas: siempre con scroll horizontal propio */

/* Scrollbar horizontal ARRIBA — transform flip trick */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  transform: rotateX(180deg);
}
.tbl-wrap > * {
  transform: rotateX(180deg);
}
.tbl-wrap::-webkit-scrollbar       { height: 5px; }
.tbl-wrap::-webkit-scrollbar-track { background: var(--dark2); border-radius: 3px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 3px; }
.tbl-wrap::-webkit-scrollbar-thumb:hover { background: var(--violet2); }



/* Sidebar toggle oculto en desktop */

.sidebar-toggle {

  display: none;

  background: none; border: none;

  color: var(--text2); font-size: 1.3rem;

  cursor: pointer; padding: 4px; line-height: 1;

}

.sidebar-overlay {

  display: none; position: fixed; inset: 0;

  background: rgba(0,0,0,.6); z-index: 999; backdrop-filter: blur(2px);

}





/* ─────────────────────────────────────────────────────────────

   ≤ 1199px — Laptop pequeña / tablet grande

   ───────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {

  :root { --sidebar-w: 230px; }

  .content { padding: 20px 22px; }

  .kpi-value { font-size: 1.7rem; }

  .tbl td, .tbl thead th { padding: 9px 10px; }

  .panel-body { padding: 16px; }

}





/* ─────────────────────────────────────────────────────────────

   ≤ 991px — Tablet (sidebar como drawer)

   ───────────────────────────────────────────────────────────── */

@media (max-width: 991px) {

  /* Sidebar */

  .sidebar { transform: translateX(-100%); box-shadow: 4px 0 30px rgba(0,0,0,.5); }

  .sidebar.open { transform: translateX(0); }

  .sidebar-overlay.show { display: block; }

  .main-area { margin-left: 0; max-width: 100vw; }

  .sidebar-toggle { display: flex; }



  /* Topbar y contenido */

  :root { --topbar-h: 58px; }

  .topbar { padding: 0 16px; height: 58px; }

  .content { padding: 14px 16px; }

  .search-box { width: 180px; }



  /* Modales */

  .modal-box { max-width: 95vw; }

  .panel-head { flex-wrap: wrap; gap: 8px; }

}





/* ─────────────────────────────────────────────────────────────

   ≤ 767px — Móvil grande

   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {



  /* ── GLOBALS ─────────────────────────────────────────────── */

  :root { --topbar-h: 54px; }

  .topbar { height: 54px; padding: 0 12px; }

  .topbar-title { font-size: .9rem; font-weight: 700; }

  .topbar-breadcrumb { display: none; }

  .topbar-right { gap: 5px; }

  .icon-btn { width: 34px; height: 34px; }



  /* Notif + perfil: siempre visibles */

  #notif-btn, .topbar-right .icon-btn:last-child { display:flex !important; }



  /* Settings inyectado: ocultar nombre del idioma */

  .lang-name, .st-lang-trigger .bi-chevron-down { display:none !important; }

  .st-lang-trigger { padding:0 6px !important; }

  .navbar-settings { gap:4px !important; }



  /* Ocultar búsqueda del TOPBAR (no la de las páginas) */

  .topbar .search-box { display: none; }



  .content { padding: 10px 10px; }



  /* ── KPI CARDS ────────────────────────────────────────────── */

  .kpi-card  { padding: 12px 10px; border-radius: 12px; }

  .kpi-icon  { width: 34px; height: 34px; font-size: .9rem; margin-bottom: 8px; }

  .kpi-value { font-size: 1.3rem; line-height: 1; }

  .kpi-label { font-size: .68rem; letter-spacing: 0; }



  /* ── PANELS ───────────────────────────────────────────────── */

  .panel        { border-radius: 12px; }

  .panel-head   { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 12px; }

  .panel-body   { padding: 12px; }

  .panel-title  { font-size: .88rem; }

  /* Botones del panel-head: ancho completo */

  .panel-head .btn-grad,

  .panel-head .btn-outline { width: 100%; justify-content: center; font-size: .82rem; }



  /* ── TABLAS ────────────────────────────────────────────────── */

  .tbl { font-size: .75rem; }

  .tbl thead th { padding: 7px 6px; font-size: .66rem; letter-spacing: 0; }

  .tbl td { padding: 7px 6px; }

  /* Ocultar columnas secundarias */

  .col-hide-mobile { display: none !important; }

  /* Botones de acción */

  .btn-icon { width: 26px; height: 26px; font-size: .72rem; border-radius: 5px; }



  /* ── MODALES ─────────────────────────────────────────────── */

  .modal-overlay { padding: 0; align-items: flex-end; }

  .modal-box {

    max-width: 100%; width: 100%;

    border-radius: 20px 20px 0 0; max-height: 92vh;

  }

  .modal-head   { padding: 14px 16px; }

  .modal-body   { padding: 14px 16px; }

  .modal-footer { padding: 12px 16px; }

  .modal-title  { font-size: .9rem; }



  /* ── ALERT BANNERS ────────────────────────────────────────── */

  .alert-banner { padding: 10px 12px; font-size: .8rem; flex-wrap: wrap; gap: 6px; }
/* ── BOTONES GLOBALES ─────────────────────────────────────── */

  .btn-grad, .btn-outline { padding: 8px 12px; font-size: .82rem; }



  /* ══════════════════════════════════════════════════════════

     INVENTARIO

     ══════════════════════════════════════════════════════════ */

  /* Toolbar: columna completa */

  #page-inventory .page-toolbar {

    flex-direction: column; align-items: stretch; gap: 8px;

  }

  /* Búsqueda: visible y ancho completo */

  #page-inventory .page-toolbar .search-box {

    display: flex !important; width: 100%; max-width: 100%;

    min-width: 0;

  }

  /* Fila de botones */

  #page-inventory .page-toolbar > .d-flex {

    width: 100%; gap: 8px;

  }

  #page-inventory .page-toolbar .btn-outline,

  #page-inventory .page-toolbar .btn-grad {

    flex: 1; justify-content: center;

  }

  /* Tabla inventario: acciones más compactas */

  #inv-tbody td:last-child { white-space: nowrap; }

  #inv-tbody .stock-bar { width: 50px !important; }



  /* ══════════════════════════════════════════════════════════

     VENTAS

     ══════════════════════════════════════════════════════════ */

  /* Toolbar: columna completa */

  #page-sales .page-toolbar {

    flex-direction: column; align-items: stretch; gap: 8px;

  }

  #page-sales .page-toolbar .search-box {

    display: flex !important; width: 100%; max-width: 100%; min-width: 0;

  }

  /* Selector + botones en una fila */

  #page-sales .page-toolbar > .d-flex {

    width: 100%; flex-wrap: nowrap; gap: 6px;

  }

  #page-sales .page-toolbar select {

    flex: 1.5; min-width: 0; font-size: .78rem; padding: 7px 8px;

  }

  #page-sales .page-toolbar .btn-outline {

    flex: 1; justify-content: center; min-width: 0; padding: 7px 8px; font-size: .78rem;

  }

  #page-sales .page-toolbar .btn-grad {

    flex: 1.2; justify-content: center; min-width: 0; padding: 7px 8px; font-size: .78rem;

  }

  /* KPIs ventas: 2 columnas SIN desbordamiento */

  #page-sales .row.g-3 { margin: 0 -4px; }

  #page-sales .row.g-3 > [class*="col-"] {

    padding: 0 4px; flex: 0 0 50%; max-width: 50%;

  }

  #page-sales .kpi-value { font-size: 1.2rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  #page-sales .kpi-label { font-size: .65rem !important; }

  /* Tabla ventas: fecha recortada */

  #sales-tbody td { white-space: nowrap; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }



  /* ══════════════════════════════════════════════════════════

     ANALYTICS

     ══════════════════════════════════════════════════════════ */

  /* Toolbar año: apilado */

  .analytics-toolbar {

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 6px !important;

  }

  .analytics-toolbar > div { font-size: .8rem; }

  .analytics-toolbar select,

  #analytics-year {

    width: 100% !important;

    max-width: 100% !important;

    font-size: .84rem !important;

  }

  /* KPIs analytics: 2×2 sin desbordamiento */

  #page-analytics .row.g-3 { margin: 0 -4px; }

  #page-analytics .row.g-3 > [class*="col-"] {

    padding: 0 4px;

  }

  #page-analytics .kpi-value { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Gráfico tendencia: altura reducida */

  #an-bar-chart { height: 90px !important; gap: 4px !important; }

  /* Tabla top productos: solo # + Producto + Ingresos */

  #an-top-products th:nth-child(3),

  #an-top-products td:nth-child(3),

  #an-top-products th:nth-child(5),

  #an-top-products td:nth-child(5) { display: none; }



  /* ══════════════════════════════════════════════════════════

     BACKUPS

     ══════════════════════════════════════════════════════════ */

  /* Banner del countdown */

  #backup-status-banner { flex-wrap: wrap; gap: 4px; }

  #backup-status-banner div { font-size: .8rem; line-height: 1.6; }



  /* KPIs backup: 3 en fila comprimida */

  #page-backups .row.g-3.mb-3 > [class*="col"] {

    flex: 0 0 33.333% !important; max-width: 33.333% !important;

    padding-left: 3px !important; padding-right: 3px !important;

  }

  #page-backups .kpi-card  { padding: 10px 6px; text-align: center; }

  #page-backups .kpi-icon  { margin: 0 auto 6px; }

  #page-backups .kpi-value { font-size: .95rem; }

  #page-backups .kpi-label { font-size: .6rem; }



  /* Config selects: 1 columna */

  #page-backups .panel-body .col-12.col-md-4 {

    flex: 0 0 100% !important; max-width: 100% !important;

  }



  /* Backup items */

  .backup-item { padding: 10px 10px; flex-wrap: wrap; gap: 8px; }

  .backup-info { flex: 1; min-width: 0; }

  .backup-info div:first-child { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  .backup-icon { width: 32px; height: 32px; font-size: .85rem; }

}





/* ─────────────────────────────────────────────────────────────

   ≤ 430px — Móvil mediano (iPhone SE, Galaxy A)

   ───────────────────────────────────────────────────────────── */

@media (max-width: 430px) {

  .content { padding: 8px 8px; }



  /* KPIs más comprimidos */

  .kpi-card  { padding: 10px 8px; }

  .kpi-value { font-size: 1.15rem; }

  .kpi-icon  { width: 30px; height: 30px; font-size: .82rem; margin-bottom: 7px; }



  /* Ventas: KPIs ultra comprimidos */

  #page-sales .kpi-value { font-size: 1rem !important; }

  #page-sales .kpi-card { padding: 8px 6px; }



  /* Analytics: KPIs */

  #page-analytics .kpi-value { font-size: clamp(.65rem, 1.5vw, 1.3rem) !important; }



  /* Backups: KPIs en 1 columna */

  #page-backups .row.g-3.mb-3 > [class*="col"] {

    flex: 0 0 100% !important; max-width: 100% !important;

    padding-left: 6px !important; padding-right: 6px !important;

  }

  #page-backups .kpi-card  { text-align: left; }

  #page-backups .kpi-icon  { margin: 0 0 8px; }

  #page-backups .kpi-value { font-size: 1.3rem; }



  /* Acciones en tabla: solo 2 botones visibles */

  .btn-icon { width: 24px; height: 24px; font-size: .68rem; }



  /* Tabla: reducir más */

  .tbl { font-size: .72rem; }

  .tbl thead th { padding: 6px 5px; }

  .tbl td { padding: 6px 5px; }



  /* Gráfico analytics */

  #an-bar-chart { height: 70px !important; }



  /* Backup items: columna vertical */

  .backup-item { flex-direction: column; align-items: flex-start; }

  .backup-item > div:last-child { width: 100%; display: flex; justify-content: flex-end; gap: 6px; }

}





/* ─────────────────────────────────────────────────────────────

   ≤ 360px — Móvil muy pequeño

   ───────────────────────────────────────────────────────────── */

/* ≤ 430px — Redmi, Galaxy A, iPhone SE */

@media (max-width: 430px) {

  .topbar { padding: 0 10px; }

  .topbar-right { gap: 4px; }

  .icon-btn { width: 32px; height: 32px; font-size: .84rem; }

  #notif-btn, .topbar-right .icon-btn:last-child { display:flex !important; }

  .st-theme-btn { width:28px !important; height:28px !important; }

}



/* ≤ 360px — Móvil muy pequeño */

@media (max-width: 360px) {

  :root { --topbar-h: 52px; }

  .topbar { padding: 0 8px; }

  .topbar-right { gap: 3px; }

  .icon-btn { width: 30px; height: 30px; border-radius: 7px; font-size: .8rem; }



  /* Notif + perfil siempre visibles */

  #notif-btn, .topbar-right .icon-btn:last-child { display:flex !important; }



  /* Settings (tema + idioma) compactos pero VISIBLES en 360px */

  .navbar-settings { display:flex !important; gap: 3px !important; align-items: center; }

  .navbar-settings .nav-sep { display: none !important; }

  .st-theme-btn { width: 28px !important; height: 28px !important; font-size: .78rem !important; padding: 0 !important; border-radius: 7px !important; }

  .st-lang-trigger { height: 28px !important; padding: 0 6px !important; font-size: .72rem !important; gap: 2px !important; border-radius: 7px !important; }

  .lang-name, .st-lang-trigger .bi-chevron-down { display: none !important; }

  .st-lang-dropdown { right: 0 !important; min-width: 130px; max-width: calc(100vw - 16px); }



  .content { padding: 6px 6px; }

  .kpi-value { font-size: 1rem; }

  .kpi-card  { padding: 8px 6px; }

  .tbl td, .tbl thead th { padding: 5px 4px; font-size: .68rem; }

  #page-sales .kpi-value { font-size: .9rem !important; }

  #page-sales .kpi-label { font-size: .6rem !important; }

}



/* ─────────────────────────────────────────────────────────────

   LIGHT THEME — overrides adicionales (dashboard)

   ───────────────────────────────────────────────────────────── */

[data-theme="light"] .icon-btn {

  background: #F0F4F8;

  border-color: rgba(0,0,0,.12);

  color: #334155;

}

[data-theme="light"] .icon-btn:hover {

  background: #E2E8F0;

  color: #0F172A;

  border-color: rgba(0,0,0,.20);

}

[data-theme="light"] .sidebar-toggle {

  color: #1E293B;

}

/* ─────────────────────────────────────────────────────────────
   POLISH FINAL — Responsive 360x800 (móvil chico)
   - Asegura que NADA desborde y que el topbar aloje
     hamburger + título + bell + tema + idioma + perfil
   ───────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  /* Topbar: que el lado izquierdo pueda achicarse para hacer lugar */
  .topbar              { padding: 0 8px; gap: 6px; }
  .topbar-left         { gap: 8px; min-width: 0; flex: 1 1 auto; }
  .topbar-left > div   { min-width: 0; flex: 1 1 auto; }
  .topbar-title        { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .topbar-right        { gap: 3px; flex-shrink: 0; flex-wrap: nowrap; }

  /* Sidebar toggle ocupa lo mínimo */
  .sidebar-toggle      { font-size: 1.15rem; padding: 4px 6px; }

  /* Iconos: ligeramente más chicos para que entren todos */
  .icon-btn            { width: 30px; height: 30px; font-size: .8rem; border-radius: 7px; }

  /* Modales: edge-to-edge sin desbordar */
  .modal-overlay       { padding: 0; }
  .modal-box           { width: 100% !important; max-width: 100% !important; border-radius: 18px 18px 0 0; }
  .modal-head          { padding: 12px 14px !important; }
  .modal-body          { padding: 12px 14px !important; }
  .modal-footer        { padding: 10px 14px !important; flex-wrap: wrap; gap: 6px; }
  .modal-footer button { flex: 1 1 auto; min-width: 0; font-size: .78rem; padding: 8px 10px; }
  .modal-title         { font-size: .85rem; }

  /* Forms: que los inputs no fuercen ancho */
  .form-control-dark   { font-size: .85rem; min-width: 0; max-width: 100%; }

  /* Page toolbar: columna llena, gap chico */
  .page-toolbar        { gap: 6px !important; }

  /* Panel head más compacto */
  .panel-head          { padding: 10px 12px; }
  .panel-body          { padding: 12px; }
  .panel-title         { font-size: .85rem; }

  /* Tablas: el contenedor con scroll horizontal limpio */
  .tbl-wrap            { max-width: 100%; }

  /* Notificaciones: el dropdown no desborda */
  .notif-dropdown,
  #notif-dropdown      { max-width: calc(100vw - 16px); right: 4px !important; }

  /* Inputs/selects en modales no rebalsan */
  .modal-body input,
  .modal-body select,
  .modal-body textarea { max-width: 100%; }
}

@media (max-width: 360px) {
  /* Tema + idioma todavía más comprimidos */
  .st-theme-btn        { width: 26px !important; height: 26px !important; }
  .st-lang-trigger     { height: 26px !important; padding: 0 5px !important; }

  /* Iconos chicos */
  .icon-btn            { width: 28px; height: 28px; font-size: .78rem; }

  /* Título: aún más chico para hacer lugar */
  .topbar-title        { font-size: .78rem; }

  /* Botones de tabla: 24px */
  .btn-icon            { width: 24px !important; height: 24px !important; font-size: .68rem; }

  /* Modal action: textos más cortos */
  .modal-footer button { font-size: .74rem; padding: 7px 8px; }

  /* Inventario chip de WhatsApp en proveedores: que no desborde */
  .btn-contact-supplier { font-size: .68rem !important; padding: 4px 8px !important; }
}


/* ─────────────────────────────────────────────────────────────
   PANEL "Ventas esta semana" — RANGO + GRAFICO + TOOLTIP + LOADER
   ───────────────────────────────────────────────────────────── */

/* Selector de rango (Semana / Mes / Año) */
.sales-range-group {
  display:inline-flex !important;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:10px;
  padding:3px;
  gap:2px;
  flex-shrink:0;
  width:auto !important;
}
.sales-range-group .sales-range-btn,
button.sales-range-btn {
  background:transparent !important;
  border:none !important;
  outline:none !important;
  color:var(--text3) !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:.74rem !important;
  font-weight:600 !important;
  padding:5px 11px !important;
  border-radius:7px !important;
  cursor:pointer;
  transition:all .18s;
  letter-spacing:.2px;
  width:auto !important;
  min-width:0 !important;
  line-height:1.2 !important;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:none !important;
}
.sales-range-group .sales-range-btn:hover,
button.sales-range-btn:hover  {
  color:var(--text1) !important;
  background:rgba(255,255,255,.04) !important;
}
.sales-range-group .sales-range-btn.active,
button.sales-range-btn.active {
  background:linear-gradient(135deg,#7B3FE4,#29B6F6) !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(123,63,228,.35) !important;
}
[data-theme="light"] .sales-range-group { background:rgba(0,0,0,.03); }
[data-theme="light"] .sales-range-btn:hover { background:rgba(0,0,0,.05) !important; }

/* Animación suave al subir cada barra */
.bar-col { transition: height .55s cubic-bezier(.22,.61,.36,1), opacity .2s; }
.bar-col:hover { opacity: .85; filter: brightness(1.08); }

/* Tooltip flotante en hover de barra */
.bar-tooltip {
  position:absolute; display:none; transform:translate(-50%, -100%);
  background:var(--dark2); color:var(--text1);
  border:1px solid rgba(123,63,228,.35); border-radius:8px;
  padding:6px 10px; font-size:.75rem; line-height:1.35;
  pointer-events:none; z-index:30; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.bar-tooltip strong { color:var(--text1); font-weight:700; }
[data-theme="light"] .bar-tooltip { background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.15); border-color:rgba(123,63,228,.25); }

/* Loader del panel de ventas */
.sales-loader {
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(15,18,33,.55); backdrop-filter:blur(2px);
  border-radius:inherit; z-index:20;
}
[data-theme="light"] .sales-loader { background:rgba(255,255,255,.6); }
.sales-loader .spinner {
  width:32px; height:32px; border-radius:50%;
  border:3px solid rgba(123,63,228,.25);
  border-top-color:#7B3FE4;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Animación de entrada de los items de actividad */
.activity-item {
  opacity:0;
  transform:translateY(6px);
  animation: actIn .35s ease forwards;
}
@keyframes actIn {
  to { opacity:1; transform:translateY(0); }
}

/* Skeleton mientras carga la actividad */
.activity-skeleton { padding:6px 0; }
.activity-skeleton .sk-row {
  height:42px; margin:8px 0; border-radius:10px;
  background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 100%);
  background-size:200% 100%;
  animation: skShimmer 1.4s infinite linear;
}
[data-theme="light"] .activity-skeleton .sk-row {
  background:linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 100%);
  background-size:200% 100%;
}
@keyframes skShimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* En 380px: rango compacto y barras un poco más bajas */
@media (max-width: 380px) {
  .sales-range-btn { font-size:.68rem !important; padding:4px 8px !important; }
  .bar-chart       { height:100px; gap:5px; }
  .bar-tooltip     { font-size:.7rem; padding:5px 8px; }
}

/* Sales panel en mobile (≤767px): el toggle queda alineado a la izquierda
   debajo del título, pero NO se estira al 100% como los btn-grad/btn-outline */
@media (max-width: 767px) {
  .panel-head .sales-range-group {
    width: auto !important;
    align-self: flex-start;
  }
  /* Métricas inferiores: tipografía más chica para que "Tasa de conversión" no se rompa raro */
  #chart-best-day-val, #chart-avg, #chart-conv {
    font-size: 1rem !important;
  }
  #page-overview .panel-body .row.g-2 .col-4 > div:last-child {
    font-size: .68rem !important;
    line-height: 1.25;
  }
  #page-overview .panel-body .row.g-2 .col-4 {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Bar chart: altura mínima cuando no hay datos para que se vea bien el estado vacío */
.bar-chart:has(> div:only-child) {
  min-height: 140px;
  align-items: center;
  justify-content: center;
}