:root{
  --celeste:#B8E8F5; --celeste-dark:#89D4ED; --celeste-light:#E4F6FC;
  --fucsia:#E91E8C; --fucsia-dark:#C91278; --fucsia-light:#FFE0F2; --fucsia-claro:#FF6FB5;
  --accent:#8B5CF6; --accent-light:#C9A9FF; --accent-rgb:139,92,246;
  --grad-a:#7FE8E0; --grad-b:#B89AFF;
  --blanco:#FDFCFF; --gris-10:#F5F4F8; --gris-20:#EDEAF2; --gris-40:#C8C4D4;
  --gris-60:#8F8AA0; --gris-80:#4A4560; --negro:#1A1730;
  --verde:#2ECC71; --verde-light:#D5F5E3; --amarillo:#F39C12; --amarillo-light:#FDEBD0;
  --rojo:#E74C3C; --rojo-light:#FADBD8;
  --nequi-pastel:#FFD3E6; --nequi-dark:#FF8FB8; --nequi-text:#C2185B;
  --banco-pastel:#FFF3C4; --banco-dark:#FFE07A; --banco-text:#9A7B00;
  --radius:16px; --shadow:0 4px 20px rgba(26,23,48,.07); --shadow-md:0 8px 30px rgba(26,23,48,.14);
  --bg:#F5F4F8; --surface:#FFFFFF; --surface-2:#FDFCFF; --borde:#EDEAF2; --texto:#1A1730; --sidebar-bg:#1A1730;
}

/* ===== PALETAS DE TEMA (identidad visual gradiente) ===== */
[data-tema="atena"]{
  --celeste:#B8E8F5; --celeste-dark:#89D4ED; --celeste-light:#E4F6FC;
  --fucsia:#E91E8C; --fucsia-dark:#C91278; --fucsia-light:#FFE0F2; --fucsia-claro:#FF6FB5;
  --accent:#8B5CF6; --accent-light:#C9A9FF; --accent-rgb:139,92,246;
  --grad-a:#7FE8E0; --grad-b:#B89AFF;
}
[data-tema="oceano"]{
  --celeste:#A8E1FF; --celeste-dark:#4FA8E8; --celeste-light:#DDF3FF;
  --fucsia:#0E9BDB; --fucsia-dark:#0B7BBA; --fucsia-light:#D9F0FF; --fucsia-claro:#4FC3F7;
  --accent:#2F6BFF; --accent-light:#8FB6FF; --accent-rgb:47,107,255;
  --grad-a:#4FC3F7; --grad-b:#2F6BFF;
}
[data-tema="violeta"]{
  --celeste:#CFC0FF; --celeste-dark:#8B5CF6; --celeste-light:#EFE9FF;
  --fucsia:#7C3AED; --fucsia-dark:#6D28D9; --fucsia-light:#EFE9FF; --fucsia-claro:#A78BFA;
  --accent:#A78BFA; --accent-light:#D3C4FF; --accent-rgb:167,139,250;
  --grad-a:#A78BFA; --grad-b:#6D28D9;
}
[data-tema="esmeralda"]{
  --celeste:#9DF0CF; --celeste-dark:#10B981; --celeste-light:#D9FBEF;
  --fucsia:#059669; --fucsia-dark:#047857; --fucsia-light:#D1FAE5; --fucsia-claro:#34D399;
  --accent:#0D9488; --accent-light:#5EEAD4; --accent-rgb:13,148,136;
  --grad-a:#34D399; --grad-b:#0D9488;
}
[data-tema="amanecer"]{
  --celeste:#FFE3A8; --celeste-dark:#F59E0B; --celeste-light:#FFF4D9;
  --fucsia:#F97316; --fucsia-dark:#EA580C; --fucsia-light:#FFE7D1; --fucsia-claro:#FBBF24;
  --accent:#EF4444; --accent-light:#FCA5A5; --accent-rgb:239,68,68;
  --grad-a:#FBBF24; --grad-b:#F97316;
}
[data-tema="rosa"]{
  --celeste:#FFC7E4; --celeste-dark:#EC4899; --celeste-light:#FFE6F3;
  --fucsia:#DB2777; --fucsia-dark:#BE185D; --fucsia-light:#FFE0F0; --fucsia-claro:#F9A8D4;
  --accent:#A855F7; --accent-light:#D8B4FE; --accent-rgb:168,85,247;
  --grad-a:#F472B6; --grad-b:#A855F7;
}

/* ===== MODO NOCHE ===== */
[data-modo="noche"]{
  --blanco:#141627;
  --gris-10:#1A1D33; --gris-20:#2A2E4A; --gris-40:#454B70;
  --gris-60:#8F8AA0; --gris-80:#C9C6DC;
  --bg:#10121F; --surface:#171A2E; --surface-2:#1F2240; --borde:#2A2E4A;
  --texto:#ECEAF6; --sidebar-bg:#0B0D1A;
  --celeste-light:color-mix(in srgb, var(--celeste) 18%, transparent);
  --fucsia-light:color-mix(in srgb, var(--fucsia) 16%, transparent);
  --verde-light:color-mix(in srgb, var(--verde) 18%, transparent);
  --amarillo-light:color-mix(in srgb, var(--amarillo) 18%, transparent);
  --rojo-light:color-mix(in srgb, var(--rojo) 18%, transparent);
  --nequi-pastel:color-mix(in srgb, var(--fucsia) 14%, transparent);
  --banco-pastel:color-mix(in srgb, var(--amarillo) 14%, transparent);
}

/* ===== MODO NOCHE · fondo oscuro con ambientación del color elegido ===== */
[data-modo="noche"] body{
  background:
    radial-gradient(1200px 620px at 8% -6%, color-mix(in srgb, var(--grad-a) 15%, transparent), transparent 62%),
    radial-gradient(1300px 660px at 92% -8%, color-mix(in srgb, var(--grad-b) 15%, transparent), transparent 62%),
    radial-gradient(1050px 540px at 48% 14%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    radial-gradient(1150px 600px at 8% 90%, color-mix(in srgb, var(--grad-a) 10%, transparent), transparent 62%),
    radial-gradient(1150px 600px at 92% 92%, color-mix(in srgb, var(--grad-b) 10%, transparent), transparent 62%),
    var(--bg);
  background-attachment:fixed;
}
[data-modo="noche"] body::before{opacity:.3;}
*{margin:0;padding:0;box-sizing:border-box;}
/* Sin scroll horizontal: la vista siempre cabe al ancho del dispositivo */
html,body{overflow-x:clip;max-width:100%;}

/* ============================================================
   BACKGROUND BASE · identidad visual de la app
   Degradado transparente del color elegido que cubre TODA
   la pantalla (halos repartidos en todo el viewport).
   ============================================================ */
body{
  font-family:'Poppins',sans-serif;color:var(--texto);min-height:100vh;isolation:isolate;
  background:
    radial-gradient(1200px 620px at 8% -6%, color-mix(in srgb, var(--grad-a) 20%, transparent), transparent 62%),
    radial-gradient(1300px 660px at 92% -8%, color-mix(in srgb, var(--grad-b) 20%, transparent), transparent 62%),
    radial-gradient(1050px 540px at 48% 14%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    radial-gradient(1150px 600px at 8% 90%, color-mix(in srgb, var(--grad-a) 13%, transparent), transparent 62%),
    radial-gradient(1150px 600px at 92% 92%, color-mix(in srgb, var(--grad-b) 13%, transparent), transparent 62%),
    radial-gradient(950px 500px at 45% 106%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    #FAF9FB;
  background-attachment:fixed;
  transition:background .3s ease, color .3s ease;
}

/* Reflejos de luz detrás de la interfaz (capa glassmorphism) */
body::before{
  content:'';position:fixed;inset:-12%;z-index:-1;pointer-events:none;will-change:transform;
  background:
    radial-gradient(42% 38% at 18% 14%, rgba(255,255,255,.5), rgba(255,255,255,0) 66%),
    radial-gradient(38% 34% at 82% 20%, rgba(255,255,255,.44), rgba(255,255,255,0) 66%),
    radial-gradient(32% 28% at 64% 74%, color-mix(in srgb, var(--grad-b) 15%, transparent), rgba(0,0,0,0) 70%),
    radial-gradient(30% 28% at 24% 66%, color-mix(in srgb, var(--grad-a) 16%, transparent), rgba(0,0,0,0) 70%);
  animation:luzAmbiental 40s ease-in-out infinite alternate;
}
@keyframes luzAmbiental{
  0%{transform:translate3d(-1.2%,-.8%,0) scale(1);}
  50%{transform:translate3d(1.2%,1%,0) scale(1.05);}
  100%{transform:translate3d(-.4%,1.2%,0) scale(.98);}
}

.layout{display:flex;min-height:100vh;}
.sidebar{
  width:250px;min-height:100vh;transition:width .25s;overflow:hidden;flex-shrink:0;
  padding:0 10px;
  background:var(--sidebar-bg);
  border-right:1px solid rgba(255,255,255,.05);
  box-shadow:3px 0 22px rgba(26,23,48,.05);
}
.sidebar.collapsed{width:60px;padding:0 6px;}
.sidebar-logo{padding:20px 10px;cursor:pointer;white-space:nowrap;}
.sidebar-logo-text h1{font-family:'Nunito',sans-serif;font-size:14px;font-weight:900;color:var(--celeste);line-height:1.2;white-space:nowrap;}
.sidebar-logo span{font-size:10px;color:var(--gris-60);}
.sidebar.collapsed .sidebar-logo span,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-label{display:none;}
.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--gris-60);padding:16px 10px 6px;white-space:nowrap;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;position:relative;color:var(--gris-40);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--celeste);}
.nav-ico{width:18px;text-align:center;flex-shrink:0;}
.main{flex:1;min-width:0;padding:20px 24px;max-width:1800px;margin:0 auto;width:100%;}

.mod-head{background:linear-gradient(135deg,var(--celeste),var(--celeste-dark));padding:22px 28px;border-radius:18px;margin-bottom:18px;}
.mod-head h2{font-family:'Nunito',sans-serif;font-size:26px;font-weight:900;color:var(--fucsia);}

.view{display:none;}
.view.active{display:block;}
.tabs{display:flex;gap:8px;margin-bottom:0;background:var(--surface);padding:6px;border-radius:50px;box-shadow:var(--shadow);width:100%;}
.tab{padding:8px 18px;border-radius:50px;font-size:12px;font-weight:700;cursor:pointer;color:var(--gris-60);flex:1;text-align:center;}
.tab{padding:8px 18px;border-radius:50px;font-size:12px;font-weight:700;cursor:pointer;color:var(--gris-60);}
.tab.active{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));color:#fff;box-shadow:0 4px 12px rgba(var(--accent-rgb),.3);}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
.kpi-card{background:var(--surface);border-radius:14px;padding:16px;box-shadow:var(--shadow);border-left:4px solid var(--celeste-dark);}
.kpi-card.fucsia{border-left-color:var(--fucsia);}
.kpi-card.verde{border-left-color:var(--verde);}
.kpi-card.amarillo{border-left-color:var(--amarillo);}
.kpi-card.total{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));color:#fff;border-left:none;}
.kpi-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--gris-60);}
.kpi-card.total .kpi-label{color:#fff;opacity:.85;}
.kpi-value{font-family:'Nunito',sans-serif;font-size:22px;font-weight:900;margin-top:2px;}
.kpi-sub{font-size:10px;color:var(--gris-60);margin-top:4px;}
.kpi-card.total .kpi-sub{color:#fff;opacity:.85;}

/* KPIs del dashboard: degradados suaves semánticos (se ajustan al tema/modo) */
.kpi-card.kpi-verde{background:linear-gradient(135deg,var(--verde-light),color-mix(in srgb,var(--verde) 45%,var(--surface)));border-left:none;}
.kpi-verde .kpi-label,.kpi-verde .kpi-value,.kpi-verde .kpi-sub{color:#1E8449;}
.kpi-card.kpi-azul{background:linear-gradient(135deg,var(--celeste-light),color-mix(in srgb,var(--celeste-dark) 45%,var(--surface)));border-left:none;}
.kpi-azul .kpi-label,.kpi-azul .kpi-value,.kpi-azul .kpi-sub{color:#1A5FA0;}
.kpi-card.kpi-rojo{background:linear-gradient(135deg,var(--rojo-light),color-mix(in srgb,var(--rojo) 45%,var(--surface)));border-left:none;}
.kpi-rojo .kpi-label,.kpi-rojo .kpi-value,.kpi-rojo .kpi-sub{color:#B03A2E;}
[data-modo="noche"] .kpi-verde .kpi-label,
[data-modo="noche"] .kpi-verde .kpi-value,
[data-modo="noche"] .kpi-verde .kpi-sub{color:#7BE0A7;}
[data-modo="noche"] .kpi-azul .kpi-label,
[data-modo="noche"] .kpi-azul .kpi-value,
[data-modo="noche"] .kpi-azul .kpi-sub{color:#9CC9FF;}
[data-modo="noche"] .kpi-rojo .kpi-label,
[data-modo="noche"] .kpi-rojo .kpi-value,
[data-modo="noche"] .kpi-rojo .kpi-sub{color:#FF9B94;}

.toolbar{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:14px 18px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.toolbar-left{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.search-input{border:1.5px solid var(--gris-20);border-radius:50px;padding:8px 16px;font-size:12px;width:200px;background:var(--surface);color:var(--texto);}
/* Toolbar inventario: búsqueda más larga + opciones centradas */
.inv-toolbar{flex-direction:column;align-items:stretch;gap:12px;}
.inv-toolbar-top{display:flex;gap:10px;align-items:center;}
.inv-toolbar-top .search-input{flex:1;width:auto;min-width:0;padding:10px 18px;font-size:13px;}
.inv-toolbar-center{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;}
.inv-modo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;}
@media (max-width:768px){
  .inv-toolbar-top{flex-direction:column;align-items:stretch;}
  .inv-toolbar-top .search-input{width:100%;flex:none;}
  .inv-toolbar-top .btn{width:100%;justify-content:center;}
  .inv-toolbar-center{flex-direction:column;width:100%;}
}

.btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:50px;padding:9px 18px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Poppins',sans-serif;}
.btn-primary{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));color:#fff;box-shadow:0 4px 14px rgba(var(--accent-rgb),.25);}
.btn-primary:hover{background:linear-gradient(135deg,var(--fucsia-dark),var(--fucsia));transform:translateY(-1px);box-shadow:0 6px 18px rgba(var(--accent-rgb),.35);}
.btn-sm{padding:7px 14px;font-size:11px;}
.btn-secondary{background:var(--gris-20);color:var(--gris-80);}
@media (max-width:768px){
  .prod-card-actions .btn-secondary{background:transparent;border:1px solid var(--gris-20);padding:3px 6px;font-size:10px;border-radius:12px;}
}
.btn-secondary:hover{background:var(--gris-40);}
.btn-icon{border:none;background:none;cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px;}
.btn-icon:hover{background:var(--gris-20);}

.section-box{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{background:var(--gris-10);text-align:left;font-size:10px;text-transform:uppercase;color:var(--gris-60);padding:10px 14px;}
tbody td{padding:10px 14px;border-bottom:1px solid var(--gris-20);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}

.prod-cell{display:flex;align-items:center;gap:10px;}
.prod-thumb{width:38px;height:38px;border-radius:8px;background:var(--gris-10);display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid var(--gris-20);flex-shrink:0;}
.prod-thumb-lg{width:56px;height:56px;border-radius:12px;font-size:24px;}
.prod-name{font-weight:700;}
.prod-ref{font-size:10px;font-family:monospace;background:var(--gris-20);padding:1px 6px;border-radius:4px;color:var(--gris-80);}
.cont-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#8b95a5,#c3ccd9);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:900;font-size:20px;
  flex-shrink:0;box-shadow:0 4px 10px rgba(100,116,139,.28);}
.cont-avatar-img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.18);}
.cont-card-sub{font-size:11px;color:var(--gris-60);display:block;}

/* Toggle Lista / Cajitas */
.inv-modo-toggle{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--gris-20);border-radius:50px;padding:3px;gap:2px;flex-shrink:0;}
.inv-modo-btn{display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;border-radius:50px;padding:6px 14px;font-size:11px;font-weight:800;color:var(--gris-60);cursor:pointer;font-family:'Nunito',sans-serif;transition:all .15s;}
.inv-modo-btn:hover{color:var(--fucsia);}
.inv-modo-btn.active{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));color:#fff;box-shadow:0 3px 10px rgba(233,30,140,.3);}
.inv-lock-toggle{display:inline-flex;}
.inv-lock-btn{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--gris-30);background:var(--surface);border-radius:50px;padding:6px 13px;font-size:11px;font-weight:800;color:var(--gris-60);cursor:pointer;font-family:'Nunito',sans-serif;transition:all .15s;flex-shrink:0;}
.inv-lock-btn svg{flex-shrink:0;}
.inv-lock-btn:hover{border-color:var(--gris-60);color:var(--gris-80);}
.inv-lock-btn.abierto{border-color:var(--fucsia);color:var(--fucsia);background:linear-gradient(135deg,var(--fucsia-light),var(--surface));box-shadow:0 3px 10px rgba(233,30,140,.18);}
.inv-calc-toggle{display:inline-flex;}
.inv-calc-btn{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--celeste-dark);background:var(--surface);border-radius:50px;padding:6px 13px;font-size:11px;font-weight:800;color:var(--celeste-dark);cursor:pointer;font-family:'Nunito',sans-serif;transition:all .15s;flex-shrink:0;}
.inv-calc-btn svg{flex-shrink:0;}
.inv-calc-btn:hover{background:var(--celeste-light);box-shadow:0 3px 10px rgba(48,144,200,.18);}
@media (max-width:768px){
  .inv-lock-btn span, .inv-calc-btn span{display:none;}
  .inv-lock-btn, .inv-calc-btn{width:38px;height:38px;padding:0;border-radius:50%;justify-content:center;}
}

/* Cajitas de inventario */
.inv-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:14px;}
.inv-card{position:relative;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:14px;border:1px solid var(--gris-20);overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;}
.inv-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--grad-a),var(--grad-b));}
.inv-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.inv-card-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;min-width:0;}
.inv-card-mid{flex:1 1 0%;min-width:0;}
.inv-card-actions{display:flex;gap:4px;justify-content:flex-end;margin-top:10px;padding-top:9px;border-top:1px solid var(--gris-20);}
.inv-card-name{font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;line-height:1.25;margin-bottom:2px;overflow-wrap:break-word;display:block;}
.inv-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--gris-20);}
.inv-stat{display:flex;flex-direction:column;gap:2px;}
.inv-stat .lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--gris-60);}
.inv-stat strong{font-size:12px;font-weight:800;color:var(--gris-80);}
.orden-flechas{display:none;flex-direction:column;gap:2px;margin-left:6px;vertical-align:middle;}
#view-inventario:not(.orden-bloqueado) .orden-flechas{display:inline-flex;}
.orden-flecha{width:26px;height:19px;border:1px solid var(--gris-20);background:var(--gris-10);color:var(--gris-60);border-radius:6px;font-size:9px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;opacity:.65;transition:opacity .15s ease,background .15s ease,color .15s ease,border-color .15s ease;user-select:none;-webkit-user-select:none;touch-action:none;}
.orden-flecha:hover{opacity:1;color:var(--fucsia);border-color:var(--fucsia);}
.orden-flecha:active,.orden-flecha.presionada{background:var(--fucsia);border-color:var(--fucsia);color:#fff;opacity:1;}
#inv-tbody tr, tr.inv-fila, .inv-mov-row{transition:transform .18s ease;}
.inv-card[style*="opacity"], tr[style*="opacity"], .inv-mov-row[style*="opacity"]{transition:opacity .12s, transform .18s ease;}

@media (max-width:768px){
  .inv-cards-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
  .inv-card{padding:11px 12px;}
  .inv-card-name{font-size:13px;}
}
@media (max-width:560px){
  .inv-cards-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .inv-card{padding:9px 10px 10px;}
  .inv-card-name{font-size:12.5px;line-height:1.3;}
  .inv-card-head{flex-wrap:wrap;gap:8px;margin-bottom:6px;}
  .inv-card-mid{flex-basis:100%;}
  .inv-card-head>img{width:40px!important;height:40px!important;border-radius:10px!important;}
  .inv-card-head>div:first-child{width:40px!important;height:40px!important;font-size:17px!important;border-radius:10px!important;}
  .inv-card-stats{margin-top:8px;padding-top:8px;}
}

/* Cajitas inventario · foto grande, stock destacado y datos en una sola línea */
#inv-cards .inv-card{padding:10px 10px 8px;margin-bottom:0;}
#inv-cards .inv-card-photo-wrap{position:relative;width:100%;border-radius:12px;overflow:hidden;margin-bottom:8px;}
#inv-cards .inv-card-photo{width:100%;aspect-ratio:3/2;max-height:170px;background:linear-gradient(135deg,var(--gris-10),var(--gris-20));}
img.inv-card-photo{display:block;object-fit:cover;}
div.inv-card-photo{display:flex;align-items:center;justify-content:center;color:var(--gris-60);}
#inv-cards .inv-card-name{font-size:14px;margin-bottom:1px;}
#inv-cards .inv-card-stats{display:flex;gap:6px;margin-top:8px;padding-top:8px;}
#inv-cards .inv-stat{flex:1 1 0;min-width:0;align-items:center;text-align:center;gap:1px;}
#inv-cards .inv-stat .lbl{font-size:8.5px;}
#inv-cards .inv-stat strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
#inv-cards .inv-card-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:6px;}
#inv-cards .inv-card-btns{display:flex;align-items:center;gap:4px;}
#inv-cards .inv-stock-chico{flex-shrink:0;font-size:12px;font-weight:900;padding:3px 9px;border-radius:50px;}
#inv-cards .inv-stock-chico small{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;opacity:.8;margin-right:3px;}
#inv-cards .inv-card-actions .btn-icon{padding:5px 6px;}
@media (max-width:560px){
  #inv-cards .inv-card{padding:8px 8px 7px;}
  #inv-cards .inv-card-photo-wrap{margin-bottom:6px;}
  #inv-cards .inv-card-name{font-size:12.5px;}
  #inv-cards .inv-card-stats{gap:4px;margin-top:6px;padding-top:6px;}
  #inv-cards .inv-stat strong{font-size:11px;}
  #inv-cards .inv-stat .lbl{font-size:8px;}
  #inv-cards .inv-card-actions{margin-top:6px;padding-top:5px;gap:5px;}
  #inv-cards .inv-stock-chico{font-size:11px;padding:2px 8px;}
}


.badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:11px;font-weight:700;white-space:nowrap;}
.badge-verde{background:var(--verde-light);color:#1B7A43;}
.badge-amarillo{background:var(--amarillo-light);color:#B45309;}
.badge-rojo{background:var(--rojo-light);color:var(--rojo);}
.badge-gris{background:var(--gris-20);color:var(--gris-80);}
.pct-alta{color:var(--verde);font-weight:800;}
.pct-media{color:var(--amarillo);font-weight:800;}
.pct-baja{color:var(--rojo);font-weight:800;}

.grp-header{background:var(--celeste-light);padding:12px 18px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.grp-title{font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--fucsia-dark);}
.grp-chev{font-size:11px;color:var(--gris-60);transition:transform .2s;}
.grp-header.collapsed .grp-chev{transform:rotate(-90deg);}
.grp-body.collapsed{display:none;}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(26,23,48,.5);align-items:center;justify-content:center;z-index:999;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:18px;padding:28px;width:95%;max-width:720px;max-height:92vh;overflow-y:auto;}
.modal-head{display:flex;justify-content:space-between;margin-bottom:16px;}
.modal-head h3{font-family:'Nunito',sans-serif;color:var(--fucsia);font-weight:900;font-size:18px;}
.modal-close{cursor:pointer;color:var(--gris-60);font-size:18px;background:none;border:none;}
.modal-prod{max-width:880px;padding:30px;}
@media (max-width:768px){
  .modal-prod{padding:20px;max-width:95vw;}
}

.photo-drop{border:2px dashed var(--gris-40);border-radius:14px;padding:22px;text-align:center;display:block;cursor:pointer;font-size:13px;color:var(--gris-60);background:var(--gris-10);}
.photo-preview{width:130px;height:130px;border-radius:16px;object-fit:cover;border:2px solid var(--celeste-dark);margin:0 auto 8px;display:block;}
.photo-wrap{position:relative;display:block;width:fit-content;margin:0 auto 10px;cursor:pointer;}
.photo-wrap .photo-preview{margin:0;display:block;}
.photo-wrap:hover .photo-preview{opacity:.85;}
.photo-edit-hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none;}
.photo-wrap:hover .photo-edit-hint{opacity:1;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.form-group{display:flex;flex-direction:column;gap:4px;}
.form-group.full{grid-column:1/-1;}
.form-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--gris-60);}
.form-input,.form-select{width:100%;border:1.5px solid var(--gris-20);border-radius:8px;padding:8px 10px;font-size:13px;background:var(--surface);outline:none;}
.form-input:focus,.form-select:focus{border-color:var(--celeste-dark);}
.form-input[readonly]{background:var(--celeste-light);font-weight:800;color:var(--fucsia-dark);}
.form-hint{font-size:10px;color:var(--gris-60);}
.form-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--gris-20);}

.margen-box{grid-column:1/-1;display:none;background:var(--celeste-light);border-radius:10px;padding:10px 14px;font-size:13px;}

.cuadre-alert{background:linear-gradient(135deg,var(--verde-light),var(--surface));border-left:6px solid var(--verde);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow);margin-bottom:16px;display:flex;gap:16px;align-items:center;position:relative;overflow:hidden;}
.cuadre-alert.sobra{background:linear-gradient(135deg,var(--amarillo-light),var(--surface));border-left-color:var(--amarillo);}
.cuadre-alert.falta{background:linear-gradient(135deg,var(--rojo-light),var(--surface));border-left-color:var(--rojo);}
.cuadre-icon{width:60px;height:60px;flex-shrink:0;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--verde),#1e9e58);color:#fff;font-size:38px;box-shadow:0 6px 18px rgba(46,204,113,.4),0 0 0 4px rgba(46,204,113,.15);}
.cuadre-icon svg{stroke-width:3;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));animation:cuadrePop .35s cubic-bezier(.2,1.4,.5,1);}
@keyframes cuadrePop{0%{transform:scale(.4);opacity:.2}100%{transform:scale(1);opacity:1}}
.cuadre-alert.sobra .cuadre-icon{background:linear-gradient(135deg,var(--amarillo),#d9820b);box-shadow:0 6px 18px rgba(243,156,18,.45),0 0 0 4px rgba(243,156,18,.16);}
.cuadre-alert.falta .cuadre-icon{background:linear-gradient(135deg,var(--rojo),#c0392b);box-shadow:0 6px 18px rgba(231,76,60,.45),0 0 0 4px rgba(231,76,60,.16);}
.cuadre-title{font-family:'Nunito',sans-serif;font-weight:900;font-size:22px;line-height:1.2;color:#1B7A43;letter-spacing:.3px;text-transform:uppercase;}
.cuadre-alert.sobra .cuadre-title{color:#B45309;}
.cuadre-alert.falta .cuadre-title{color:var(--rojo);}
.cuadre-sub{font-size:12px;color:var(--gris-60);margin-top:2px;}

.caja-kpi{ border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s;}
.caja-kpi:hover{transform:translateY(-2px);}
/* Caja: KPI Efectivo / Bancolombia / Total llenan todo el ancho disponible */
#view-caja .kpi-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
@media (max-width:700px){
  #view-caja .kpi-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  #view-caja .caja-kpi{padding:10px;}
}

/* Efectivo — verde suave */
.caja-kpi.efectivo{background:linear-gradient(135deg,#51c884,#65c58a);border:none;color:#fff;}

.caja-kpi.nequi{background:linear-gradient(135deg,#b88cd8,#d4aff0);border:none;color:#fff;}

/* Bancolombia — blanco */
.caja-kpi.banco{background:var(--surface);border:2px solid var(--texto);color:var(--texto);}
.caja-kpi.banco .caja-kpi-value{color:var(--texto);}
.caja-kpi.banco .caja-kpi-hint{color:var(--gris-60);}
.caja-kpi.banco .caja-kpi-label{color:var(--gris-60);}
.caja-kpi.banco .caja-kpi-value{color:var(--texto);}
.caja-kpi.banco .caja-kpi-hint{color:var(--gris-60);}

/* Balance total — fucsia */
.caja-kpi.total{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));color:#fff;}
.caja-kpi.total .caja-kpi-label{color:#fff;opacity:.85;}
.caja-kpi.total .caja-kpi-hint{color:#fff;opacity:.85;}

/* Logos */
.caja-kpi-logo{font-size:24px;}
.caja-kpi-logo.nequi-logo{
  background:var(--surface);color:#5c0080;
  display:inline-block;padding:3px 10px;border-radius:8px;
  font-family:'Nunito',sans-serif;font-weight:900;font-size:11px;
  transform:rotate(-3deg);
}
.caja-kpi-logo.banco-logo{
  background:#3a2800;color:#ffcd00;
  display:inline-block;padding:3px 10px;border-radius:8px;
  font-family:'Nunito',sans-serif;font-weight:900;font-size:11px;
  transform:rotate(2deg);
}
.caja-kpi-value{font-family:'Nunito',sans-serif;font-size:20px;font-weight:900;}
.caja-kpi-hint{font-size:10px;font-weight:700;margin-top:4px;}
.caja-kpi-label{font-size:10px;font-weight:700;text-transform:uppercase;margin-top:6px;}

.expand-panel{display:none;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:18px;margin-bottom:16px;}
.expand-panel.open{display:block;}
.expand-title{font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;text-transform:uppercase;color:var(--gris-80);margin-bottom:12px;}

.denom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.denom-card{background:var(--gris-10);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:center;}
.denom-visual{
  width:64px;height:38px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Nunito',sans-serif;font-weight:900;font-size:13px;
  flex-shrink:0;position:relative;overflow:hidden;
}
.denom-visual::before{
  content:'';position:absolute;left:6px;top:0;bottom:0;width:3px;
  background:rgba(255,255,255,.5);
}
.denom-visual.coin{
  width:46px;height:46px;border-radius:50%;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.5);
}
.denom-visual.coin::before{display:none;}
.denom-visual.coin::after{
  content:'';position:absolute;inset:5px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.6);
}
/* ── BILLETES COLOMBIANOS REALISTAS ─────────────────────────── */
.denom-visual{
  width:90px;height:52px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;letter-spacing:.5px;
  position:relative;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .2s;cursor:default;
  border:1.5px solid rgba(255,255,255,.3);
}
.denom-visual:hover{transform:scale(1.08) rotate(-1deg);}
.denom-visual::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0px,rgba(255,255,255,.04) 1px,transparent 1px,transparent 8px);
}

/* $100.000 — azul/verde */
.bill-100000{background:linear-gradient(135deg,#1a6b5a 0%,#2d9e7f 40%,#1a6b5a 70%,#0d4a3d 100%);color:#b8f0e0;text-shadow:0 1px 3px rgba(0,0,0,.4);}
/* $50.000 — rosado/lila */
.bill-50000{background:linear-gradient(135deg,#8b3a7e 0%,#c45aad 40%,#8b3a7e 70%,#5e2056 100%);color:#f9d6f4;text-shadow:0 1px 3px rgba(0,0,0,.4);}
/* $20.000 — naranja/café */
.bill-20000{background:linear-gradient(135deg,#b85c1a 0%,#e07830 40%,#b85c1a 70%,#7a3a0d 100%);color:#ffe0c0;text-shadow:0 1px 3px rgba(0,0,0,.4);}
/* $10.000 — morado/violeta */
.bill-10000{background:linear-gradient(135deg,#4a2080 0%,#7040b8 40%,#4a2080 70%,#2d1050 100%);color:#e0d0ff;text-shadow:0 1px 3px rgba(0,0,0,.4);}
/* $5.000 — naranja claro */
.bill-5000{background:linear-gradient(135deg,#c47820 0%,#e8a030 40%,#c47820 70%,#8a5010 100%);color:#fff3cc;text-shadow:0 1px 3px rgba(0,0,0,.4);}
/* $2.000 — azul claro */
.bill-2000{background:linear-gradient(135deg,#1a5a9e 0%,#2878cc 40%,#1a5a9e 70%,#0d3a6a 100%);color:#c8e8ff;text-shadow:0 1px 3px rgba(0,0,0,.4);}
/* $1.000 — moneda bicolor plateada/bronce */
.bill-1000{
  width:44px !important;height:44px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, #e0e0e0 0%, #b8b8b8 38%, #c8920a 55%, #a07008 100%) !important;
  color:#5a3a00 !important;
  border:3px solid #a07008 !important;
  box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 2px 4px rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.2) !important;
  text-shadow:none !important;
  font-size:11px !important;
}
.bill-1000:hover{transform:scale(1.1) rotate(5deg) !important;}

/* ── MONEDAS COLOMBIANAS ─────────────────────────────────────── */
.coin{
  width:52px;height:52px;border-radius:50% !important;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:12px;
  position:relative;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 2px 4px rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.2);
  transition:transform .2s;cursor:default;
}
.coin:hover{transform:scale(1.1) rotate(5deg);}
.coin::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.4) 0%, transparent 60%);
}

/* 500 — plateada bicolor */
.coin-500{
  background:radial-gradient(circle,#d4d4d4 0%,#a8a8a8 40%,#c8c050 60%,#b8a840 100%);
  color:#444;border:2px solid #b0b0b0;
}
/* 200 — plateada */
.coin-200{
  background:radial-gradient(circle,#e0e0e0 0%,#b0b0b0 50%,#909090 100%);
  color:#333;border:2px solid #a0a0a0;
}
/* 100 — dorada */
.coin-100{
  background:radial-gradient(circle,#f0d060 0%,#c8a030 50%,#a07820 100%);
  color:#5a3a00;border:2px solid #b89028;
}
.denom-info{flex:1;min-width:0;}
.denom-qty{font-size:10px;color:var(--gris-60);}
.denom-input{width:44px;border:1.5px solid var(--gris-20);border-radius:8px;padding:4px 2px;font-size:14px;font-weight:800;text-align:center;color:var(--texto);background:var(--surface);}
.denom-sub{font-size:11px;font-weight:800;color:var(--fucsia);}

.subtotal-bar{background:var(--celeste-light);border-radius:10px;padding:10px 14px;margin-top:12px;display:flex;justify-content:space-between;font-family:'Nunito',sans-serif;font-weight:900;}
.subtotal-bar span:last-child{color:var(--fucsia);}

.bank-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--gris-20);font-size:13px;}
.bank-row:last-child{border-bottom:none;}

.transit-banner{background:linear-gradient(135deg,var(--fucsia-light),var(--surface));padding:10px 18px;font-weight:800;font-family:'Nunito',sans-serif;color:var(--fucsia-dark);display:flex;justify-content:space-between;font-size:12px;flex-wrap:wrap;gap:6px;}
.pendientes-banner{background:linear-gradient(135deg,var(--rojo-light),var(--surface));color:#B03A2E;}

.fuente-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:50px;font-size:10px;font-weight:800;}
.fuente-efectivo{background:#D5F5E3;color:#1B7A43;}
.fuente-nequi{background:#E8D5F5;color:#6C3483;}
.fuente-banco{background:var(--surface);color:var(--texto);}
.badge-rojo{background:#FADBD8;color:#C0392B;}

@keyframes slideIn{from{transform:translateX(40px);opacity:0;}to{transform:translateX(0);opacity:1;}}
.toast{position:fixed;bottom:24px;right:24px;color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:9999;font-family:'Poppins',sans-serif;animation:slideIn .3s ease;}
.toast-success{background:var(--verde);}
.toast-error{background:var(--rojo);}
.toast-info{background:var(--celeste-dark);color:var(--texto);}

@media (max-width: 900px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 768px){
  .layout{flex-direction:column;}
  .sidebar{width:100%;min-height:auto;}
  .sidebar.collapsed{width:100%;}
  .sidebar.collapsed .nav-item{display:none;}
  .main{padding:12px;max-width:100%;}
  .mod-head{padding:16px;}
  .mod-head h2{font-size:20px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .kpi-card,.caja-kpi{padding:12px;}
  .kpi-value,.caja-kpi-value{font-size:17px;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar-left{flex-direction:column;align-items:stretch;}
  .search-input{width:100%;}
  table.desktop-table{display:none;}
  .form-grid{grid-template-columns:1fr;}
  .denom-grid{grid-template-columns:repeat(2,1fr);}
}

.mobile-cards{display:none;}
@media (max-width:768px){
  .mobile-cards{display:block;}
  .prod-card{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--gris-20);}
  .prod-card:last-child{border-bottom:none;}
  .prod-card-thumb{width:50px;height:50px;border-radius:10px;background:var(--gris-10);display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid var(--gris-20);flex-shrink:0;}
  .prod-card-body{flex:1;min-width:0;}
  .prod-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
  .prod-card-name{font-weight:800;font-size:13px;}
  .prod-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px 10px;margin-top:6px;font-size:11px;}
  .prod-card-grid .lbl{color:var(--gris-60);}
  .prod-card-grid .val{font-weight:700;text-align:right;}
  .prod-card-actions{display:flex;gap:6px;margin-top:8px;}
.prod-card-actions .btn{font-size:11px;padding:6px 10px;border-radius:20px;flex:1;}
}
html, body { height: 100%; }
.layout { width: 100%; }
.main { width: 100%; }
.fab-resumen{position:fixed;bottom:24px;right:24px;background:linear-gradient(135deg,var(--fucsia-dark),var(--fucsia));color:#fff;border:none;border-radius:50px;padding:12px 22px;font-size:13px;font-weight:800;font-family:'Nunito',sans-serif;box-shadow:0 8px 24px rgba(233,30,140,.4);cursor:pointer;display:flex;align-items:center;gap:8px;z-index:80;}
[data-modo="noche"] .fab-resumen{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));box-shadow:0 10px 28px rgba(255,111,181,.55),0 0 0 1px rgba(255,255,255,.12) inset;}
.fab-scroll-top{position:fixed;bottom:84px;right:24px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(233,30,140,.55),rgba(212,50,160,.55));color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 14px rgba(233,30,140,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;z-index:80;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s ease,transform .3s ease,visibility .3s;}
.fab-scroll-top.visible{opacity:.75;visibility:visible;transform:translateY(0);}
.fab-scroll-top:hover{opacity:1;}
[data-modo="noche"] .fab-scroll-top{background:linear-gradient(135deg,rgba(255,111,181,.45),rgba(233,30,140,.45));box-shadow:0 6px 18px rgba(255,111,181,.3),0 0 0 1px rgba(255,255,255,.1) inset;}
@media (max-width:768px){ .fab-scroll-top{right:16px;bottom:156px;} }
.resumen-panel{position:fixed;bottom:136px;right:24px;width:260px;background:var(--fucsia-light);border-radius:14px;box-shadow:0 10px 26px rgba(233,30,140,.18);padding:18px;z-index:80;display:none;border:1.5px solid var(--fucsia-claro);overflow:hidden;}
.resumen-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--grad-a),var(--grad-b));}
[data-modo="noche"] .resumen-panel{background:color-mix(in srgb,var(--celeste) 30%,var(--surface));box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08) inset;border:1px solid var(--celeste-dark);}
.resumen-panel.open{display:block;}
.resumen-item{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--gris-20);font-size:12px;}
.resumen-item:last-child{border-bottom:none;}
.resumen-total{margin-top:8px;padding-top:8px;border-top:2px solid var(--fucsia-claro);display:flex;justify-content:space-between;font-weight:900;font-family:'Nunito',sans-serif;color:var(--fucsia);}

/* ── CALCULADORA DE PRECIO (modal flotante) ──────────────────── */
.calc-body{padding-top:2px;}
.calc-refs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.calc-ref{background:var(--gris-10);border-radius:10px;padding:8px 10px;}
.calc-ref span{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--gris-60);}
.calc-ref strong{display:block;font-family:'Nunito',sans-serif;font-weight:900;font-size:15px;margin-top:2px;}
.calc-ref.min strong{color:var(--amarillo);}
.calc-ref.opt strong{color:var(--fucsia);}
.calc-est{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;border-radius:8px;font-family:'Nunito',sans-serif;font-weight:900;font-size:12px;}
.calc-est span{font-weight:800;}
.calc-bad{background:#FADBD8;color:#C0392B;}
.calc-ok{background:#FEF9E7;color:#B9770E;}
.calc-opt{background:#D5F5E3;color:#1B7A43;}
[data-modo="noche"] #calc-panel .modal{background:var(--surface-2);box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08) inset;}
[data-modo="noche"] .calc-ref{background:rgba(255,255,255,.06);}
@media (max-width:768px){ .resumen-panel{width:calc(100% - 32px);right:16px;} .fab-resumen{right:16px;bottom:16px;} }
html, body { height: 100%; }
.layout { width: 100%; }
.main { width: 100%; }
.venta-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;align-items:start;}
.autocomplete-wrap{position:relative;}
.autocomplete-list{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1.5px solid var(--gris-20);border-radius:10px;box-shadow:var(--shadow-md);max-height:220px;overflow-y:auto;z-index:9999;display:none;}
.autocomplete-list.open{display:block;}
.autocomplete-item{padding:8px 12px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--gris-20);}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item .ac-ref{font-size:10px;font-family:monospace;background:var(--gris-20);padding:1px 5px;border-radius:4px;margin-left:6px;}
.autocomplete-item .ac-stock{float:right;font-size:10px;color:var(--gris-60);}
.venta-tipo-banner{padding:10px 14px;border-radius:10px;font-size:12px;font-weight:700;margin-top:8px;display:none;}
.venta-tipo-banner.show{display:block;}
.venta-tipo-banner.contra{background:var(--fucsia-light);color:var(--fucsia-dark);}

.filtro-fecha{display:flex;gap:8px;align-items:center;}
.filtro-fecha select{border:1.5px solid var(--gris-20);border-radius:8px;padding:7px 10px;font-size:12px;background:var(--surface);}

.venta-grupo{border-bottom:1px solid var(--gris-20);}
.venta-grupo:last-child{border-bottom:none;}
.venta-grupo-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;transition:background .15s;background:var(--surface-2);}
.venta-grupo-head.tipo-credito{background:var(--rojo-light);}
.venta-grupo-head.tipo-contado{background:var(--verde-light);}
.venta-grupo-head.tipo-contra{background:var(--amarillo-light);}
.venta-grupo-head.multi{background:var(--fucsia-light);}
.venta-cliente{display:flex;align-items:center;gap:10px;}
.venta-cliente-nombre{font-weight:700;font-size:13px;}
.venta-badge-items{background:#FFB3D9;color:#8B0050;font-size:10px;font-weight:800;padding:4px 10px;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;}
.venta-grupo-total{font-weight:800;font-family:'Nunito',sans-serif;color:var(--fucsia-dark);}
.venta-grupo-meta{display:flex;align-items:center;gap:10px;}
.venta-chev{font-size:11px;color:var(--gris-60);transition:transform .2s;}
.venta-grupo-head.collapsed .venta-chev{transform:rotate(-90deg);}
.venta-detalle{background:var(--gris-10);}
.venta-detalle.collapsed{display:none;}
.venta-item-row{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 32px;font-size:12px;border-bottom:1px solid var(--gris-20);}
.venta-item-row:last-child{border-bottom:none;}
.venta-item-thumb{width:30px;height:30px;border-radius:7px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid var(--gris-20);flex-shrink:0;}
.venta-item-info{flex:1;}
.venta-item-total{font-weight:700;}

.multi-item-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:start;margin-bottom:8px;padding:10px;background:var(--gris-10);border-radius:10px;position:relative;}
.multi-item-remove{background:var(--rojo-light);color:var(--rojo);border:none;border-radius:8px;width:28px;height:28px;cursor:pointer;font-weight:900;align-self:center;}

/* Tarjeta de producto en Venta / Compra / Cotización */
.pi-card{background:var(--surface);border:1px solid var(--gris-20);border-radius:14px;padding:12px 12px 12px;margin-bottom:10px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.pi-card:hover{border-color:var(--gris-30);}
.pi-remove{position:absolute;top:6px;right:6px;width:26px;height:26px;border:none;background:transparent;color:var(--gris-60);font-size:15px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.55;transition:.15s;z-index:5;}
.pi-remove:hover{opacity:1;background:var(--rojo-light);color:var(--rojo);}
.pi-head{display:flex;gap:10px;align-items:stretch;}
.pi-head .autocomplete-wrap{flex:1;min-width:0;}
.pi-head .form-hint{margin-top:4px;display:block;}
.pi-thumb{width:68px;height:68px;border-radius:12px;background:var(--gris-10);border:1px solid var(--gris-20);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.pi-thumb img{width:100%;height:100%;object-fit:cover;}
.pi-thumb-icon{font-size:30px;color:var(--gris-60);}
/* Miniatura clickeable solo en el simulador: se muestra la cámara al pasar el cursor */
.pi-thumb:has(.pi-thumb-cam){position:relative;cursor:pointer;}
.pi-thumb:has(.pi-thumb-cam) img{transition:opacity .15s;}
.pi-thumb:has(.pi-thumb-cam):hover img{opacity:.8;}
.pi-thumb-cam{position:absolute;right:4px;bottom:4px;font-size:11px;background:rgba(0,0,0,.58);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;pointer-events:none;line-height:1;}
.pi-thumb:has(.pi-thumb-cam):hover .pi-thumb-cam{opacity:1;}
.pi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;}
.pi-grid input{min-width:0;}
.pi-grid>div{min-width:0;}
.pi-grid>div>label{font-size:10px;font-weight:800;color:var(--gris-60);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:4px;}
.stepper{display:flex;align-items:center;border:1px solid var(--gris-30);border-radius:9px;overflow:hidden;background:var(--surface);height:36px;}
.stepper button{width:32px;height:36px;border:none;background:var(--gris-10);color:var(--gris-80);font-size:17px;font-weight:800;cursor:pointer;line-height:1;flex-shrink:0;}
.stepper button:active{transform:scale(.92);}
.stepper button:hover{background:var(--gris-20);}
.stepper input{flex:1;min-width:0;height:36px;border:none;text-align:center;font-weight:800;font-size:14px;background:transparent;outline:none;color:var(--gris-90);-moz-appearance:textfield;appearance:textfield;}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pi-sub{background:var(--surface-2);border:1px solid var(--gris-20);border-radius:9px;height:36px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--gris-70);white-space:nowrap;overflow:hidden;}
.btn-add-item-subtle{display:flex;align-items:center;gap:6px;width:100%;margin:4px 0 8px;padding:7px 12px;border:1.5px dashed var(--gris-30);background:transparent;color:var(--gris-60);font-size:12.5px;font-weight:800;font-family:'Nunito',sans-serif;cursor:pointer;border-radius:10px;transition:.15s;}
.btn-add-item-subtle:hover{background:var(--gris-10);color:var(--fucsia);border-color:var(--fucsia);}
@media (max-width:640px){ .pi-grid{grid-template-columns:1fr 1fr;} .pi-grid>div:last-child{grid-column:1/-1;} }
.multi-items-total{background:var(--celeste-light);border-radius:10px;padding:10px 14px;display:flex;justify-content:space-between;font-family:'Nunito',sans-serif;font-weight:900;margin-top:8px;}
.multi-items-total.subtotal{background:var(--gris-10);color:var(--gris-60);}
.multi-items-total.subtotal span{color:var(--gris-60);}
.multi-items-total span:last-child{color:var(--fucsia);}

.gastos-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start;}
@media (max-width:900px){ .gastos-layout{grid-template-columns:1fr;} }

.gasto-tipo-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:50px;font-size:10px;font-weight:800;}
.gasto-empaque{background:var(--celeste-light);color:#1A6E8A;}
.gasto-descuento{background:var(--fucsia-light);color:var(--fucsia-dark);}
.gasto-ajustes{background:var(--amarillo-light);color:#B45309;}
.gasto-envios{background:var(--banco-pastel);color:var(--banco-text);}
.gasto-otros{background:var(--gris-20);color:var(--gris-80);}

.chart-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.chart-bar-label{width:80px;font-size:12px;font-weight:700;color:var(--gris-80);flex-shrink:0;line-height:1.3;word-break:break-word;}
.chart-bar-track{flex:1;background:var(--gris-10);border-radius:50px;height:32px;overflow:hidden;}
.chart-bar-fill{height:100%;border-radius:50px;min-width:4px;transition:width .4s ease;}
.chart-bar-fill.outside span{color:var(--gris-80);position:absolute;right:-65px;font-size:12px;white-space:nowrap;}


.gasto-resumen-title{font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--gris-80);margin-bottom:12px;}


.denom-stepper{display:flex;align-items:center;gap:6px;margin:4px 0;}
.denom-step-btn{width:26px;height:26px;border-radius:50%;border:none;background:var(--gris-20);font-weight:900;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;color:var(--gris-80);flex-shrink:0;transition:all .15s;}
.denom-step-btn:hover{background:var(--fucsia);color:#fff;}

.pendiente-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--gris-20);font-size:13px;}
.pendiente-row:last-child{border-bottom:none;}
.pendiente-row.pagado{opacity:.5;text-decoration:line-through;}
.pendiente-row.resaltado{background:#FFFDE7;border-left:3px solid #F4C518;}
[data-modo="noche"] .pendiente-row.resaltado{background:rgba(255,213,79,.16);border-left-color:#F4C518;}
.pendiente-info{display:flex;flex-direction:column;gap:2px;}
.pendiente-tipo{font-size:10px;font-weight:800;color:var(--gris-60);text-transform:uppercase;}
.pendiente-monto{font-weight:800;color:var(--rojo);}
.pendiente-actions{display:flex;gap:6px;}

.pendiente-check{width:20px;height:20px;cursor:pointer;accent-color:var(--verde);}
.contra-actions{display:flex;gap:4px;justify-content:center;}
.pendiente-actions{display:flex;align-items:center;gap:10px;}
.pendiente-monto{display:flex;align-items:center;}
.contactos-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media (max-width:900px){ .contactos-layout{grid-template-columns:1fr;} }
.contacto-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--gris-20);font-size:13px;}
.contacto-row:last-child{border-bottom:none;}
.contacto-info{display:flex;flex-direction:column;gap:2px;}
.contacto-sub{font-size:11px;color:var(--gris-60);}
.contacto-actions{display:flex;gap:4px;}
.cotiz-mes-badge{background:var(--celeste-light);color:#1A6E8A;font-size:10px;font-weight:800;padding:3px 10px;border-radius:50px;}
.cotiz-check{width:20px;height:20px;cursor:pointer;accent-color:var(--verde);}
.cotiz-row.comprado .venta-grupo-head{opacity:.5;filter:grayscale(1);}
.cotiz-row.comprado{order:999;}
.cotiz-row{transition:all .3s;}
#cotizaciones-lista{display:flex;flex-direction:column;}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
@media (max-width:900px){ .dash-grid{grid-template-columns:1fr;} }

.meta-card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:18px;margin-bottom:14px;}
.meta-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.meta-title{font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--gris-80);}
.meta-edit-btn{font-size:11px;color:var(--fucsia);background:none;border:none;font-weight:700;cursor:pointer;}
.meta-progress-track{background:var(--gris-10);border-radius:50px;height:36px;overflow:hidden;position:relative;}
.meta-progress-fill{height:100%;border-radius:50px;transition:width 1.2s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:flex-end;padding-right:10px;background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));}.meta-progress-fill{height:100%;border-radius:50px;transition:width 1.2s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:flex-end;padding-right:10px;background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));}
.meta-progress-fill span{font-size:11px;font-weight:800;color:#fff;}
.meta-progress-fill.alcanzada{background:linear-gradient(135deg,var(--verde),#27AE60);}
.meta-progress-fill.superada{background:linear-gradient(135deg,var(--accent),var(--accent-light));}
.meta-msg{font-size:12px;font-weight:700;margin-top:8px;text-align:center;}
.meta-msg.lejos{color:var(--rojo);}
.meta-msg.medio{color:var(--amarillo);}
.meta-msg.alcanzada{color:var(--verde);}
.meta-msg.superada{color:var(--accent);}

.top-list{display:flex;flex-direction:column;gap:8px;}
.top-row{display:flex;align-items:center;gap:10px;}
.top-rank{width:22px;height:22px;border-radius:50%;background:var(--celeste-light);color:var(--fucsia-dark);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Nunito',sans-serif;}
.top-info{flex:1;font-size:12px;font-weight:700;}
.top-value{font-size:12px;font-weight:800;color:var(--fucsia);font-family:'Nunito',sans-serif;}
.bar-chart-vertical{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;height:200px;padding-top:30px;margin-top:10px;}
.bar-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;transition:transform .2s;}
.bar-chart-col:hover{transform:translateY(-4px);}
.bar-chart-value{font-size:7px;font-weight:800;color:var(--fucsia-dark);white-space:nowrap;display:block;text-align:center;margin-bottom:4px;overflow:hidden;}
.bar-chart-col:hover .bar-chart-value{color:var(--fucsia);transform:scale(1.1);}
.bar-chart-bar{width:100%;max-width:42px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--accent-light),var(--accent));transition:height 1s cubic-bezier(.34,1.56,.64,1), transform .2s, box-shadow .2s;box-shadow:0 4px 12px rgba(var(--accent-rgb),.25);cursor:pointer;transform-origin:bottom;}
.bar-chart-bar:hover{transform:scaleY(1.03) scaleX(1.08);box-shadow:0 6px 18px rgba(var(--accent-rgb),.4);}
.bar-chart-bar.actual{background:linear-gradient(180deg,var(--fucsia-light),var(--fucsia));box-shadow:0 4px 12px rgba(233,30,140,.3);}
.bar-chart-bar.actual:hover{box-shadow:0 6px 18px rgba(233,30,140,.45);}
.bar-chart-label{font-size:11px;font-weight:700;color:var(--gris-60);margin-top:8px;text-align:center;}
.bar-chart-label{font-size:11px;font-weight:700;color:var(--gris-60);margin-top:8px;text-align:center;}
.top-product-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--gris-10);margin-bottom:8px;}
.top-product-card:last-child{margin-bottom:0;}
.top-product-icon{width:42px;height:42px;border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid var(--gris-20);flex-shrink:0;}
.top-product-info{flex:1;}
.top-product-name{font-weight:700;font-size:12px;}
.top-product-sub{font-size:10px;color:var(--gris-60);}
.top-product-rank{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;font-family:'Nunito',sans-serif;color:#fff;flex-shrink:0;}
.rank-1{background:linear-gradient(135deg,#FFD700,#FFA500);}
.rank-2{background:linear-gradient(135deg,#C0C0C0,#A8A8A8);}
.rank-3{background:linear-gradient(135deg,#CD7F32,#A8662C);}
.rank-4, .rank-5{background:var(--gris-40);}

.cliente-medalla-card{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;background:var(--gris-10);margin-bottom:8px;}
.cliente-medalla-card:last-child{margin-bottom:0;}
.cliente-medalla{font-size:28px;flex-shrink:0;}
.cliente-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--celeste),var(--celeste-dark));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#fff;font-family:'Nunito',sans-serif;flex-shrink:0;}
.cliente-medalla-info{flex:1;}
.cliente-medalla-name{font-weight:800;font-size:13px;}
.cliente-medalla-sub{font-size:10px;color:var(--gris-60);}
.cliente-medalla-value{font-weight:900;font-family:'Nunito',sans-serif;color:var(--fucsia);font-size:14px;}

.bar-chart-bar{cursor:pointer;}
.bar-chart-bar:hover{transform:scaleY(1.03) scaleX(1.08);box-shadow:0 6px 18px rgba(var(--accent-rgb),.4);}
.bar-chart-bar.actual:hover{box-shadow:0 6px 18px rgba(233,30,140,.45);}
.bar-chart-col{transition:transform .2s;}
.bar-chart-col:hover{transform:translateY(-4px);}
.bar-chart-col:hover .bar-chart-value{color:var(--fucsia);transform:translateX(-50%) translateY(-4px) scale(1.1);transition:all .2s;}

.meta-progress-fill:hover{filter:brightness(1.1);transform:scaleY(1.08);}
.meta-progress-track{transition:box-shadow .2s;}
.meta-progress-track:hover{box-shadow:0 4px 16px rgba(233,30,140,.25);}
.bar-chart-label{font-size:10px;}
.bar-chart-vertical{display:flex;align-items:flex-end;justify-content:space-around;gap:16px;height:220px;padding:20px 10px 0;margin-top:10px;border-bottom:2px solid var(--gris-20);}
.bar-chart-col{flex:1;max-width:70px;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;}
.bar-chart-bar{width:100%;border-radius:10px 10px 0 0;background:linear-gradient(180deg,var(--accent-light),var(--accent));box-shadow:0 4px 12px rgba(var(--accent-rgb),.2);position:relative;}
.bar-chart-bar.actual{background:linear-gradient(180deg,var(--fucsia-light),var(--fucsia));box-shadow:0 4px 12px rgba(233,30,140,.25);}
.bar-chart-value{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;color:var(--gris-80);white-space:nowrap;background:var(--surface);padding:2px 6px;border-radius:6px;box-shadow:var(--shadow);}
.bar-chart-label{font-size:12px;font-weight:700;color:var(--gris-80);margin-top:10px;text-align:center;}
.bar-chart-value .bcv-short{display:none;}
@media (max-width:768px){
  .bar-chart-vertical{gap:8px;padding:24px 4px 0;}
  .bar-chart-col{max-width:none;}
  .bar-chart-value{top:-20px;font-size:9.5px;padding:2px 5px;z-index:2;}
  .bar-chart-value .bcv-full{display:none;}
  .bar-chart-value .bcv-short{display:inline;}
}

.top3-products{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:stretch;}
.top3-card{flex:1;background:var(--surface);border-radius:14px;border:1.5px solid var(--gris-20);overflow:hidden;display:flex;flex-direction:column;text-align:center;position:relative;transition:transform .2s;}
.top3-card:hover{transform:translateY(-4px);}
.top3-medal{font-size:30px;line-height:1;margin:4px 0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));}
.top3-icon{width:64px;height:64px;border-radius:14px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:30px;margin:8px auto 10px;border:1px solid var(--gris-20);box-shadow:var(--shadow);}
.top3-name{font-weight:800;font-size:12px;margin-bottom:2px;}
.top3-ref{font-size:10px;color:var(--gris-60);font-family:monospace;background:var(--gris-20);padding:1px 6px;border-radius:4px;display:inline-block;margin-bottom:8px;}
.top3-units{font-family:'Nunito',sans-serif;font-weight:900;font-size:18px;color:var(--fucsia);}
.top3-units-label{font-size:9px;color:var(--gris-60);text-transform:uppercase;font-weight:700;}
@media (max-width:600px){ .top3-products{flex-direction:column;} }

.kpi-card{transition:transform .25s, box-shadow .25s;}
.kpi-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 10px 28px rgba(26,23,48,.15);}

@keyframes confetti-fall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1;}
  100%{transform:translateY(120px) rotate(360deg);opacity:0;}
}
.confetti-container{position:relative;overflow:visible;height:0;}
.confetti{position:absolute;top:0;font-size:18px;animation:confetti-fall 1.5s ease-in forwards;}
.calendario-icon{width:40px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--gris-20);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;box-shadow:var(--shadow);}
.calendario-mes{background:var(--fucsia);color:#fff;font-size:8px;font-weight:800;text-align:center;padding:2px 0;letter-spacing:1px;}
.calendario-dia{flex:1;display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:900;font-size:16px;color:var(--gris-80);}

.mod-head{
  background:linear-gradient(120deg,var(--grad-a) 0%,var(--grad-b) 100%);
  box-shadow:0 10px 28px rgba(var(--accent-rgb),.25);
  padding:22px 28px;border-radius:18px;margin-bottom:18px;
  position:relative;
}
.mod-head h2{
  font-family:'Nunito',sans-serif;font-size:26px;font-weight:900;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.1);position:relative;z-index:2;
}
.mod-head-sub{font-size:12px;font-weight:600;color:rgba(255,255,255,.9);margin-top:2px;position:relative;z-index:2;}
.mod-head::after{
  content:'';position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  width:280px;height:280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,0) 72%);
  filter:blur(45px);
}
@media (max-width:768px){
  .mod-head h2{font-size:20px;}
  .mod-head::after{width:180px;height:180px;right:-20px;}
}
.sidebar-logo{padding:20px 10px;display:flex;align-items:center;gap:10px;cursor:pointer;}
.sidebar-logo img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 2px 8px rgba(184,232,245,.3);}
.sidebar-logo-text{overflow:hidden;white-space:nowrap;}
.sidebar-logo-text h1{font-family:'Nunito',sans-serif;font-size:16px;font-weight:900;color:var(--celeste);line-height:1.1;}
.sidebar-logo-text span{font-size:9px;color:var(--gris-60);}
.sidebar.collapsed .sidebar-logo img{margin:0 auto;display:block;width:34px;height:34px;}
.sidebar.collapsed .sidebar-logo{justify-content:center;padding:18px 8px;}

.nav-ico svg{width:18px;height:18px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;position:relative;color:#C8C4D4;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--celeste);}
.nav-item.active{
  background:rgba(255,255,255,.09);
  color:var(--celeste);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.nav-item.active::before{
  content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:99px;
  background:linear-gradient(180deg,var(--grad-a),var(--grad-b));
  box-shadow:0 0 10px rgba(var(--accent-rgb),.4);
}
.nav-ico{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}

/* ===== MÓVIL: topbar + bottom nav + menú hamburguesa ===== */
.mobile-topbar{display:none;}
.bottom-nav{display:none;}
.mobile-menu-overlay{display:none;}

@media (max-width:768px){
  .sidebar{display:none;}
  .layout{flex-direction:column;}
  .main{padding:12px;padding-bottom:90px;max-width:100%;}

  /* TOPBAR */
  .mobile-topbar{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--sidebar-bg);padding:12px 16px;position:sticky;top:0;z-index:50;
  }
  .mobile-topbar-logo{display:flex;align-items:center;gap:8px;}
  .mobile-topbar-logo img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
  .mobile-topbar-logo h1{font-family:'Nunito',sans-serif;font-size:15px;font-weight:900;color:var(--celeste);}
  .hamburger-btn{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .hamburger-btn svg{width:20px;height:20px;color:var(--celeste);}

  /* BOTTOM NAV */
  .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    background:var(--surface);box-shadow:0 -4px 20px rgba(26,23,48,.1);
    justify-content:space-around;padding:8px 4px 14px;z-index:60;
    border-radius:20px 20px 0 0;
  }
  .bottom-nav-item{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--gris-60);font-size:9px;font-weight:700;cursor:pointer;
    padding:4px 10px;border-radius:12px;transition:all .2s;
  }
  .bottom-nav-item.active{color:var(--fucsia);background:var(--fucsia-light);}
  .bottom-nav-item svg{width:20px;height:20px;}

  /* MENU OVERLAY */
  .mobile-menu-overlay{
    display:block;position:fixed;inset:0;background:rgba(26,23,48,.5);
    z-index:100;opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .mobile-menu-overlay.open{opacity:1;pointer-events:all;}
  .mobile-menu-panel{
    position:absolute;top:0;right:0;width:78%;max-width:300px;height:100%;
    background:var(--sidebar-bg);padding:20px;overflow-y:auto;
    transform:translateX(100%);transition:transform .25s ease;
  }
  .mobile-menu-overlay.open .mobile-menu-panel{transform:translateX(0);}
  .mobile-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);}
  .mobile-menu-header h1{font-family:'Nunito',sans-serif;color:var(--celeste);font-size:16px;font-weight:900;}
  .mobile-menu-close{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);border:none;color:var(--celeste);font-size:16px;cursor:pointer;}
  .mobile-menu-panel .nav-item{border-radius:10px;}
  .mobile-menu-panel .nav-item.active{border-left:none;}
}

@media (max-width:768px){
  .fab-resumen{bottom:100px;}
  .resumen-panel{bottom:214px;}
}
@media (max-width:768px){
  .venta-grupo-head{flex-wrap:wrap;gap:8px;padding:12px;}
  .venta-cliente{flex:1 1 100%;}
  .venta-cliente-nombre{font-size:12px;}
  .venta-grupo-meta{flex-wrap:wrap;justify-content:flex-end;gap:6px;width:100%;}
  .venta-item-row{padding:8px 12px 8px 20px;font-size:11px;}
}

@media (max-width:768px){
  .denom-grid{grid-template-columns:1fr 1fr;gap:8px;width:100%;overflow:hidden;}
  .denom-card{padding:8px;border-radius:10px;background:var(--surface);box-shadow:var(--shadow);display:flex;gap:6px;align-items:center;min-width:0;overflow:hidden;}
  .denom-visual{width:50px;height:30px;font-size:9px;flex-shrink:0;}
  .denom-visual.coin{width:34px;height:34px;font-size:9px;}
  .denom-info{flex:1;min-width:0;overflow:hidden;}
  .denom-stepper{gap:3px;}
  .denom-input{width:32px;font-size:12px;font-weight:900;text-align:center;}
  .denom-step-btn{width:22px;height:22px;font-size:13px;flex-shrink:0;}
  .denom-sub{font-size:10px;font-weight:800;margin-top:2px;}
}
 

.dash-mes-select{width:auto;font-size:12px;padding:6px 12px;background:var(--surface);}
.gasto-resumen-card{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;height:100%;}
.gasto-resumen-title{font-family:'Nunito',sans-serif;font-weight:900;font-size:15px;color:var(--gris-80);margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.cerrar-mes-mini{
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  position:relative;z-index:2;flex-shrink:0;
}
.cerrar-mes-mini button{
  font-size:11px;font-weight:800;border:none;
  border-radius:50px;padding:8px 18px;background:var(--rojo);
  color:#fff;cursor:pointer;white-space:nowrap;
  opacity:1;box-shadow:0 4px 16px rgba(231,76,60,.55),0 0 0 3px rgba(231,76,60,.18);
}
.cerrar-mes-mini button:hover:enabled{filter:brightness(1.08);transform:translateY(-1px);}
.cerrar-mes-mini button:disabled{
  cursor:not-allowed;
  filter:grayscale(.95) blur(2px) saturate(.3) opacity(.55);
  background:#9aa0a6;box-shadow:none;transform:none;
}

.cerrar-mes-mini span{font-size:10px;color:rgba(255,255,255,.85);font-weight:600;}
@media (max-width:768px){ .cerrar-mes-mini{align-items:flex-start;} }

.mod-head-caja::after{content:none;}
.mod-head-caja{display:flex;align-items:center;justify-content:space-between;}
.fab-saldo-inicial{
  position:fixed;bottom:24px;right:24px;z-index:80;
  background:linear-gradient(135deg,var(--fucsia-dark),var(--fucsia));color:#fff;border:none;border-radius:50px;
  padding:12px 22px;font-size:13px;font-weight:800;font-family:'Nunito',sans-serif;
  box-shadow:0 8px 24px rgba(233,30,140,.4);cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
[data-modo="noche"] .fab-saldo-inicial{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));box-shadow:0 10px 28px rgba(255,111,181,.55),0 0 0 1px rgba(255,255,255,.12) inset;}
@media (max-width:768px){ .fab-saldo-inicial{bottom:216px;right:16px;font-size:11px;padding:10px 16px;} }
.fab-saldo-inicial{
  position:fixed;bottom:150px;right:24px;z-index:80;
  background:linear-gradient(135deg,var(--fucsia-dark),var(--fucsia));color:#fff;border:none;border-radius:50px;
  padding:12px 22px;font-size:13px;font-weight:800;font-family:'Nunito',sans-serif;
  box-shadow:0 8px 24px rgba(233,30,140,.4);cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
[data-modo="noche"] .fab-saldo-inicial{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));box-shadow:0 10px 28px rgba(255,111,181,.55),0 0 0 1px rgba(255,255,255,.12) inset;}
.chart-bar-fill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
.chart-bar-track{position:relative;}/* ===== ENVÍOS ===== */
.envios-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media (max-width:900px){.envios-layout{grid-template-columns:1fr;}}

.envio-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--gris-20);cursor:pointer;transition:background .15s;}
.envio-item:last-child{border-bottom:none;}
.envio-item.env-selected{background:var(--fucsia-light);border-left:3px solid var(--fucsia);}
.envio-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.envio-info{flex:1;min-width:0;}
.envio-cliente-nombre{font-weight:700;font-size:13px;}
.envio-detalle-sub{font-size:11px;color:var(--gris-60);margin-top:2px;}
.envio-monto{font-family:'Nunito',sans-serif;font-weight:900;font-size:14px;color:var(--fucsia);white-space:nowrap;}

.env-estado-btns{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
.env-btn-estado{padding:3px 8px;border-radius:50px;border:1.5px solid var(--gris-20);background:var(--surface);font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;font-family:'Poppins',sans-serif;}
.env-btn-estado:hover{border-color:var(--fucsia);color:var(--fucsia);}
.env-btn-estado.est-prep{border-color:var(--amarillo);background:var(--amarillo-light);color:#B45309;}
.env-btn-estado.est-camino{border-color:var(--celeste-dark);background:var(--celeste-light);color:#1A6E8A;}
.env-btn-estado.est-entregado{border-color:var(--verde);background:var(--verde-light);color:#1B7A43;}
.env-btn-estado.est-devuelto{border-color:var(--rojo);background:var(--rojo-light);color:var(--rojo);}

/* Camión animado */
@keyframes env-camion-walk{
  0%  {transform:translateY(0px) rotate(0deg);}
  20% {transform:translateY(-4px) rotate(-1.5deg);}
  40% {transform:translateY(-1px) rotate(0.5deg);}
  60% {transform:translateY(-3px) rotate(-1deg);}
  80% {transform:translateY(-1px) rotate(0.5deg);}
  100%{transform:translateY(0px) rotate(0deg);}
}
#env-camion{animation:env-camion-walk 0.7s ease-in-out infinite;}
#env-camion.parado{animation:none;}

/* Ruta animada */
@keyframes env-dash-move{to{stroke-dashoffset:-20;}}
#env-ruta-activa{animation:env-dash-move 1.5s linear infinite;}
#env-ruta-activa.sin-animar{animation:none;stroke-dasharray:3,5;opacity:.35;}

@media (max-width:768px){
  .autocomplete-list{position:fixed;left:12px;right:12px;top:auto;}
  .autocomplete-item{padding:12px 14px;font-size:14px;}
  .autocomplete-item img{width:36px;height:36px;}

  .mobile-cards{display:block;}

  .prod-card{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--gris-20);align-items:flex-start;}
  .prod-card-thumb{width:40px;height:40px;border-radius:8px;background:var(--gris-10);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--gris-20);flex-shrink:0;}
  .prod-card-body{flex:1;min-width:0;}
  .prod-card-top{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-bottom:4px;}
  .prod-card-name{font-weight:800;font-size:12px;line-height:1.3;}
  .prod-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:11px;}
  .prod-card-grid .lbl{color:var(--gris-60);}
  .prod-card-grid .val{font-weight:700;text-align:right;}
  .prod-card-actions{display:flex;gap:6px;margin-top:6px;}
  .prod-card-actions .btn{flex:1;font-size:11px;padding:6px 8px;border-radius:20px;justify-content:center;}
}

@media (max-width:768px){
  .autocomplete-list{position:fixed;left:12px;right:12px;top:auto;}
  .autocomplete-item{padding:12px 14px;font-size:14px;}
  .autocomplete-item img{width:36px;height:36px;}

  .mobile-cards{display:block;}

  .prod-card{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--gris-20);align-items:flex-start;}
  .prod-card-thumb{width:40px;height:40px;border-radius:8px;background:var(--gris-10);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--gris-20);flex-shrink:0;}
  .prod-card-body{flex:1;min-width:0;}
  .prod-card-top{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-bottom:4px;}
  .prod-card-name{font-weight:800;font-size:12px;line-height:1.3;}
  .prod-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:11px;}
  .prod-card-grid .lbl{color:var(--gris-60);}
  .prod-card-grid .val{font-weight:700;text-align:right;}
  .prod-card-actions{display:flex;gap:6px;margin-top:6px;}
  .prod-card-actions .btn{flex:1;font-size:11px;padding:6px 8px;border-radius:20px;justify-content:center;}
}
#env-mapa-leaflet{height:320px !important;width:100% !important;}
.leaflet-container{height:100% !important;}
@media (max-width:768px){
  .venta-grupo-head{flex-wrap:wrap;gap:4px;padding:10px 12px;}
  .venta-cliente{flex:1 1 100%;display:flex;align-items:center;gap:6px;}
  .venta-cliente-nombre{font-size:12px;font-weight:700;flex:1;min-width:0;}
  .venta-grupo-meta{width:100%;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;padding-left:0;}
  .venta-grupo-meta .badge,
  .venta-grupo-meta .fuente-efectivo,
  .venta-grupo-meta .fuente-nequi,
  .venta-grupo-meta .fuente-banco,
  .venta-grupo-meta .badge-rojo,
  .venta-grupo-meta .badge-amarillo{font-size:9px;padding:2px 6px;flex-shrink:0;}
  .venta-grupo-meta span[style*="font-size:11px"]{font-size:10px !important;}
}

#modal-factura-preview.open {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#modal-factura-preview .modal {
  width: 90%;
  max-width: 600px;
}

.gasto-nomina { background:#fce4ec; color:#c2185b; }

/* ===== CONFIGURACIÓN / TEMAS ===== */
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media(max-width:900px){ .config-grid{grid-template-columns:1fr;} }
.config-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:20px;border:1px solid var(--gris-20);}
.config-card-title{font-family:'Nunito',sans-serif;font-weight:900;font-size:15px;color:var(--gris-80);margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.config-card-sub{font-size:11px;color:var(--gris-60);margin-bottom:14px;}
.tema-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;}
.tema-option{border:2px solid var(--gris-20);border-radius:14px;padding:10px;cursor:pointer;text-align:center;transition:all .2s;background:var(--surface-2);}
.tema-option:hover{transform:translateY(-2px);border-color:var(--celeste-dark);}
.tema-option.active{border-color:var(--fucsia);box-shadow:0 4px 14px rgba(var(--accent-rgb),.25);}
.tema-swatch{height:46px;border-radius:10px;margin-bottom:8px;border:1px solid rgba(255,255,255,.25);}
.tema-name{font-size:11px;font-weight:700;color:var(--gris-80);}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--gris-20);}
.toggle-row:last-child{border-bottom:none;}
.toggle-label{font-size:13px;font-weight:600;color:var(--texto);}
.toggle-sub{font-size:10px;color:var(--gris-60);}
.switch{position:relative;width:46px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;inset:0;background:var(--gris-40);border-radius:50px;cursor:pointer;transition:.25s;}
.switch .slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;}
.switch input:checked + .slider{background:var(--fucsia);}
.switch input:checked + .slider::before{transform:translateX(20px);}
.color-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.color-field{display:flex;flex-direction:column;gap:6px;}
.color-field label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--gris-60);}
.color-field input[type="color"]{width:100%;height:44px;border:1.5px solid var(--gris-20);border-radius:10px;background:var(--surface);cursor:pointer;padding:4px;}
.config-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.config-btn{border:none;border-radius:50px;padding:10px 18px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif;transition:all .2s;}
.config-btn-primary{background:var(--fucsia);color:#fff;}
.config-btn-primary:hover{background:var(--fucsia-dark);}
.config-btn-secondary{background:var(--gris-20);color:var(--gris-80);}
.config-btn-secondary:hover{background:var(--gris-40);}
.config-preview{height:90px;border-radius:14px;overflow:hidden;margin-top:14px;border:1px solid var(--gris-20);position:relative;}
.config-preview .cp-head{height:44px;background:linear-gradient(120deg,var(--grad-a),var(--grad-b));display:flex;align-items:center;padding:0 14px;gap:8px;}
.config-preview .cp-head .cp-dot{width:12px;height:12px;border-radius:4px;background:var(--fucsia);}
.config-preview .cp-head .cp-bar{width:60px;height:8px;border-radius:4px;background:rgba(255,255,255,.8);}
.config-preview .cp-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:12px 14px;background:var(--surface);}
.config-preview .cp-card{height:26px;border-radius:8px;background:var(--surface-2);border:1px solid var(--gris-20);}

/* ===== AJUSTES MODO NOCHE ===== */
[data-modo="noche"] input,
[data-modo="noche"] select,
[data-modo="noche"] textarea{color:var(--texto);}
[data-modo="noche"] input::placeholder{color:var(--gris-60);}
[data-modo="noche"] .modal{background:var(--surface);}
[data-modo="noche"] .badge-verde{color:#6EE7B7;}
[data-modo="noche"] .badge-amarillo{color:#FCD34D;}
[data-modo="noche"] .badge-rojo{color:#FCA5A5;background:var(--rojo-light);}
[data-modo="noche"] .fuente-efectivo{color:#6EE7B7;background:color-mix(in srgb, var(--verde) 18%, transparent);}
[data-modo="noche"] .fuente-nequi{color:#D8B4FE;background:color-mix(in srgb, var(--accent) 20%, transparent);}
[data-modo="noche"] .gasto-empaque{color:#7DD3FC;}
[data-modo="noche"] .gasto-descuento{color:#F9A8D4;}
[data-modo="noche"] .gasto-ajustes{color:#FCD34D;}
[data-modo="noche"] .gasto-envios{color:#FDE68A;}
[data-modo="noche"] .gasto-nomina{color:#F9A8D4;background:rgba(233,30,140,.18);}
[data-modo="noche"] .env-btn-estado.est-prep{color:#FCD34D;}
[data-modo="noche"] .env-btn-estado.est-camino{color:#7DD3FC;}
[data-modo="noche"] .env-btn-estado.est-entregado{color:#6EE7B7;}
[data-modo="noche"] .env-btn-estado.est-devuelto{color:#FCA5A5;}
[data-modo="noche"] .cotiz-mes-badge{color:#7DD3FC;}
[data-modo="noche"] .caja-kpi-logo.nequi-logo{background:#fff;color:#5c0080;}
[data-modo="noche"] .top-rank{color:#F9A8D4;}
[data-modo="noche"] .toast-info{color:#1A1730;}
[data-modo="noche"] .form-input[readonly]{color:var(--fucsia);}
[data-modo="noche"] .cuadre-title{color:#6EE7B7;}
[data-modo="noche"] .cuadre-alert.sobra .cuadre-title{color:#FCD34D;}
[data-modo="noche"] .cuadre-alert.falta .cuadre-title{color:#FCA5A5;}
[data-modo="noche"] .transit-banner{color:#F9A8D4;}
[data-modo="noche"] .pendientes-banner{color:#FCA5A5;}
[data-modo="noche"] .grp-title{color:#F9A8D4;}
[data-modo="noche"] .venta-grupo-total{color:#F9A8D4;}
[data-modo="noche"] .denom-input{background:var(--surface-2);}
[data-modo="noche"] .sidebar-logo-text h1{color:var(--celeste);}

/* ===== GLASSMORPHISM TRANSPARENTE Y MODERNO (día y noche) ===== */
.kpi-card,
.section-box,
.toolbar,
.tabs,
.meta-card,
.gasto-resumen-card,
.inv-card{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 28px rgba(26,23,48,.07);
}
.modal{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 60px rgba(26,23,48,.18);
}
.search-input,
.form-select,
.form-input,
textarea{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
[data-modo="noche"] .modal-overlay{background:rgba(8,10,22,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
[data-modo="noche"] .kpi-card,
[data-modo="noche"] .section-box,
[data-modo="noche"] .toolbar,
[data-modo="noche"] .tabs,
[data-modo="noche"] .meta-card,
[data-modo="noche"] .gasto-resumen-card,
[data-modo="noche"] .inv-card{
  background:rgba(23,26,46,.42);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
[data-modo="noche"] .kpi-card.kpi-verde{background:linear-gradient(135deg,var(--verde-light),color-mix(in srgb,var(--verde) 45%,var(--surface)));}
[data-modo="noche"] .kpi-card.kpi-azul{background:linear-gradient(135deg,var(--celeste-light),color-mix(in srgb,var(--celeste-dark) 45%,var(--surface)));}
[data-modo="noche"] .kpi-card.kpi-rojo{background:linear-gradient(135deg,var(--rojo-light),color-mix(in srgb,var(--rojo) 45%,var(--surface)));}
[data-modo="noche"] .modal{background:rgba(23,26,46,.6);}
[data-modo="noche"] .search-input,
[data-modo="noche"] .form-select,
[data-modo="noche"] .form-input,
[data-modo="noche"] textarea{background:rgba(26,29,51,.5);border-color:var(--gris-20);}

/* ============================================================
   KPIs PREMIUM · Dashboard "Atenas Style Shop"
   Glassmorphism delicado · fondo ambiental verde→azul→lila→rosa
   ============================================================ */
#view-dashboard{position:relative;isolation:isolate;}

/* Fondo ambiental casi imperceptible del dashboard
   (left:0 y right:0 → NUNCA desborda el viewport ni tapa el menú) */
.dash-ambient{
  position:absolute;inset:-70px 0 -30px 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(720px 320px at 10% 0%, rgba(94,214,168,.30), transparent 70%),
    radial-gradient(760px 340px at 42% 2%, rgba(148,183,255,.28), transparent 70%),
    radial-gradient(760px 340px at 74% 0%, rgba(196,181,253,.30), transparent 70%),
    radial-gradient(620px 300px at 100% 4%, rgba(251,199,222,.26), transparent 70%);
}

/* Contenedor */
.kpi-grid-premium{gap:16px;align-items:stretch;}

/* Tarjeta base */
.kpi-card.kpi-premium{
  display:flex;align-items:center;gap:13px;
  border-left:none;border-radius:16px;
  padding:18px 16px;min-height:112px;
  position:relative;overflow:hidden;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 12px 34px rgba(26,23,48,.07), inset 0 1px 0 rgba(255,255,255,.75);
  transition:transform .25s ease, box-shadow .25s ease;
}
.kpi-card.kpi-premium::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,rgba(var(--k,167,139,250),.45),rgba(var(--k,167,139,250),0));
}
.kpi-card.kpi-premium:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(26,23,48,.11), inset 0 1px 0 rgba(255,255,255,.75);
}

/* Tinte suave por tarjeta (blanco translúcido + color muy pálido) */
.kpi-card.kpi-premium.kpi-verde{--k:46,204,113;background:linear-gradient(150deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.62) 55%,rgba(228,250,241,.72) 100%);border-color:rgba(46,204,113,.16);}
.kpi-card.kpi-premium.kpi-morado{--k:139,92,246;background:linear-gradient(150deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.62) 55%,rgba(244,238,255,.72) 100%);border-color:rgba(139,92,246,.14);}
.kpi-card.kpi-premium.kpi-azul{--k:62,155,245;background:linear-gradient(150deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.62) 55%,rgba(234,245,255,.72) 100%);border-color:rgba(62,155,245,.15);}
.kpi-card.kpi-premium.kpi-coral{--k:244,127,164;background:linear-gradient(150deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.62) 55%,rgba(255,239,246,.72) 100%);border-color:rgba(244,127,164,.16);}

/* Círculo de icono */
.kpi-icon{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 12px rgba(26,23,48,.06);
}
.kpi-icon svg{width:19px;height:19px;}
.kpi-ico-verde{background:linear-gradient(145deg,rgba(46,204,113,.18),rgba(46,204,113,.04));color:#23AD71;}
.kpi-ico-morado{background:linear-gradient(145deg,rgba(139,92,246,.17),rgba(139,92,246,.04));color:#8B5CF6;}
.kpi-ico-azul{background:linear-gradient(145deg,rgba(62,155,245,.17),rgba(62,155,245,.04));color:#3E9BF5;}
.kpi-ico-coral{background:linear-gradient(145deg,rgba(244,127,164,.18),rgba(244,127,164,.05));color:#F477A2;}

/* Cuerpo de texto */
.kpi-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.kpi-card.kpi-premium .kpi-label{font-size:10px;letter-spacing:1.1px;color:#9B96AC;font-weight:800;}
.kpi-card.kpi-premium .kpi-value{font-size:22px;line-height:1.2;color:#1A1730;font-weight:900;white-space:nowrap;font-feature-settings:'tnum' 1;}
.kpi-card.kpi-premium .kpi-sub{font-size:10px;color:#B3AEC0;font-weight:500;margin-top:3px;line-height:1.3;}

/* Gráficos */
.kpi-chart{width:58px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;}
.kpi-chart svg.spark{width:100%;height:100%;overflow:visible;}
.spark-line{stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.spark-line.l-verde{stroke:#2BBF7E;filter:drop-shadow(0 0 5px rgba(43,191,126,.45));}
.spark-line.l-azul{stroke:#3E9BF5;filter:drop-shadow(0 0 5px rgba(62,155,245,.45));}
.spark-line.l-coral{stroke:#F477A4;filter:drop-shadow(0 0 5px rgba(244,127,164,.45));}
.spark-dot{filter:drop-shadow(0 1px 3px rgba(26,23,48,.25));}

/* Donut del margen */
.kpi-donut{
  --p:0;width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--donut-c,#A78BFA) calc(var(--p)*1%), rgba(167,139,250,.14) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  box-shadow:0 0 12px rgba(167,139,250,.16);
}

/* Responsive */
@media (max-width:900px){
  .kpi-grid-premium{gap:12px;}
  .kpi-card.kpi-premium{min-height:104px;padding:15px 13px;gap:11px;}
  .kpi-icon{width:38px;height:38px;}
  .kpi-icon svg{width:17px;height:17px;}
  .kpi-chart{width:50px;height:38px;}
  .kpi-donut{width:40px;height:40px;}
  .kpi-card.kpi-premium .kpi-value{font-size:19px;}
}
@media (max-width:480px){
  .kpi-card.kpi-premium .kpi-value{font-size:17px;}
  .kpi-chart{width:44px;}
  .kpi-icon{width:36px;height:36px;}
}
@media (max-width:420px){
  .kpi-chart{display:none;}
  .kpi-card.kpi-premium{min-height:96px;padding:13px 12px;}
  .kpi-card.kpi-premium .kpi-value{font-size:16px;}
}

/* Modo noche · adaptación delicada */
[data-modo="noche"] .dash-ambient{opacity:.45;}
[data-modo="noche"] .kpi-card.kpi-premium{
  background:linear-gradient(150deg,rgba(29,33,58,.88),rgba(23,26,46,.55));
  border-color:rgba(255,255,255,.08);
  box-shadow:0 14px 38px rgba(0,0,0,.3);
}
[data-modo="noche"] .kpi-card.kpi-premium.kpi-verde{background:linear-gradient(150deg,rgba(29,33,58,.88),rgba(18,38,32,.6));}
[data-modo="noche"] .kpi-card.kpi-premium.kpi-morado{background:linear-gradient(150deg,rgba(29,33,58,.88),rgba(32,26,54,.6));}
[data-modo="noche"] .kpi-card.kpi-premium.kpi-azul{background:linear-gradient(150deg,rgba(29,33,58,.88),rgba(20,32,52,.6));}
[data-modo="noche"] .kpi-card.kpi-premium.kpi-coral{background:linear-gradient(150deg,rgba(29,33,58,.88),rgba(44,26,40,.6));}
[data-modo="noche"] .kpi-card.kpi-premium .kpi-value{color:#ECEAF6;}
[data-modo="noche"] .kpi-card.kpi-premium .kpi-label{color:#8F8AA0;}
[data-modo="noche"] .kpi-card.kpi-premium .kpi-sub{color:#6F6A84;}

/* ============================================================
   BARRA DE MENÚ MÓVIL · superficie oscura uniforme
   ============================================================ */
.mobile-topbar,
.mobile-menu-panel{
  background:var(--sidebar-bg);
}

/* ============================================================
   INVERSIONES · inversionistas, abonos y egresos
   ============================================================ */
.btn-mini{padding:7px 12px;font-size:11px;border-radius:10px;line-height:1;}

.inv-card{
  background:var(--surface);
  border:1px solid var(--gris-20);
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s;
}
.inv-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(26,23,48,.10);}

.inv-card-top{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.inv-avatar{
  width:42px;height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--fucsia),var(--celeste-dark));
  color:#fff;
  font-weight:900;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:var(--shadow);
}
.inv-datos{flex:1;min-width:160px;}
.inv-nombre{
  font-family:'Nunito',sans-serif;
  font-weight:800;font-size:15px;color:var(--gris-80);
}
.inv-notas{color:var(--gris-60);font-weight:600;font-size:12px;}
.inv-acciones{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

.inv-saldo{
  margin-top:14px;
  padding:16px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,#E8FBF0,#F4FDF8);
  text-align:center;
  border:1px solid #C7EED7;
}
.inv-saldo-label{
  font-size:10px;font-weight:800;color:#1D6A3A;
  text-transform:uppercase;letter-spacing:.6px;opacity:.85;
}
.inv-saldo-valor{
  font-family:'Nunito',sans-serif;
  font-size:34px;font-weight:900;line-height:1.1;letter-spacing:-.5px;
  color:var(--verde);margin-top:2px;
}
.inv-neg{color:var(--rojo) !important;}

.inv-resumen-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.inv-resumen-item{
  background:var(--surface);
  border:1px solid var(--gris-20);
  border-radius:10px;
  padding:8px 6px;
  text-align:center;
  min-width:0;
}
.inv-resumen-lbl{
  display:block;
  font-size:9px;font-weight:800;color:var(--gris-60);
  text-transform:uppercase;letter-spacing:.3px;
}
.inv-resumen-valor{
  display:block;
  font-size:12px;font-weight:800;color:var(--gris-80);
  margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.inv-acciones{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

.inv-movs-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:14px;padding:10px 12px;
  background:var(--gris-20);
  border-radius:10px;
  cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:var(--gris-60);
}
.inv-movs-head:hover{color:var(--gris-80);}
.inv-toggle{font-size:12px;}

.inv-movs{display:none;margin-top:10px;}
.inv-movs.open{display:block;}

.inv-mov-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 8px;border-radius:10px;
  border-bottom:1px solid var(--gris-20);
}
.inv-mov-row:last-child{border-bottom:none;}
.inv-mov-row:hover{background:var(--gris-20);}
.inv-mov-ico{
  width:32px;height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  background:var(--gris-20);color:var(--gris-60);
}
.inv-ico-verde{background:#D5F5E3;color:#1D6A3A;}
.inv-ico-roja{background:#FADBD8;color:#943126;}
.inv-ico-celeste{background:#D4E6F1;color:#1A5276;}
.inv-mov-info{flex:1;min-width:0;}
.inv-mov-concepto{
  font-size:12.5px;font-weight:700;color:var(--gris-80);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.inv-mov-meta{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  margin-top:2px;
}
.inv-mov-fecha{font-size:10px;color:var(--gris-60);}
.inv-mov-dot{font-size:9px;color:var(--gris-40);}
.inv-mov-origen{
  font-size:9px;font-weight:800;color:var(--celeste-dark);
  background:var(--celeste-light);padding:1px 6px;border-radius:6px;
}
.inv-ver-factura{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9.5px;font-weight:800;color:var(--celeste-dark);
  background:var(--celeste-light);border:none;cursor:pointer;
  padding:2px 7px;border-radius:6px;
}
.inv-ver-factura:hover{filter:brightness(.95);}
.inv-mov-right{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.inv-mov-monto{font-size:13px;font-weight:800;white-space:nowrap;min-width:74px;text-align:right;}
.inv-mov-pos{color:#1D6A3A;}
.inv-mov-neg{color:var(--rojo);}
.inv-mov-btns{display:flex;gap:2px;flex-shrink:0;}
.inv-vacio{
  padding:18px;text-align:center;color:var(--gris-60);
  font-size:12px;
  border:1px dashed var(--gris-20);border-radius:10px;
}
.inv-fact-preview{
  background:var(--gris-10);
  border:1px solid var(--gris-20);
  border-radius:10px;
  padding:10px 12px;
}

/* Inversiones: KPIs en 2 columnas y tarjetas de inversionista en 2 columnas */
#view-inversiones .kpi-grid{grid-template-columns:repeat(4,1fr);gap:12px;}
#inversionistas-lista{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  padding:16px;
  align-items:start;
}
#inversionistas-lista .inv-card{margin-bottom:0;padding:14px;}
#inversionistas-lista > :not(.inv-card){grid-column:1 / -1;}
@media (max-width:900px){
  #inversionistas-lista{grid-template-columns:1fr;padding:12px;gap:12px;}
}

[data-modo="noche"] .inv-card{background:var(--surface-2);}
[data-modo="noche"] .inv-saldo{background:rgba(39,174,96,.12);border-color:rgba(39,174,96,.3);}
[data-modo="noche"] .inv-saldo-label{color:#8FE0B0;}
[data-modo="noche"] .inv-resumen-item{background:rgba(255,255,255,.04);}
[data-modo="noche"] .inv-movs-head{background:rgba(255,255,255,.05);}
[data-modo="noche"] .inv-mov-row:hover{background:rgba(255,255,255,.05);}

@media (max-width:640px){
  .inv-card-top{flex-direction:column;align-items:flex-start;}
  .inv-acciones{width:100%;justify-content:flex-end;}
  .inv-mov-origen{display:none;}
  .inv-mov-monto{min-width:0;font-size:12px;}
  #view-inversiones .kpi-grid{grid-template-columns:repeat(2,1fr);}
}

/* Chips estilo tienda (categoría / tipo de venta) en el formulario de producto */
.fx-chips{display:flex;gap:7px;flex-wrap:wrap;}
.fx-chip{
  padding:8px 14px;border-radius:50px;border:1.5px solid var(--gris-30,#d8d2e6);
  background:#fff;font-family:inherit;font-size:12px;font-weight:600;
  color:var(--texto,#28364a);cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.fx-chip:hover{border-color:var(--fucsia);}
.fx-chip.active{background:var(--fucsia);border-color:var(--fucsia);color:#fff;}

/* Desplegable (lista) con diseño del software */
.fx-select-wrap{position:relative;}
.fx-select-wrap::after{
  content:'';position:absolute;right:13px;top:50%;width:8px;height:8px;
  margin-top:-6px;border-right:2px solid var(--fucsia);border-bottom:2px solid var(--fucsia);
  transform:rotate(45deg);pointer-events:none;
}
select.fx-select{
  width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1.5px solid var(--gris-20);border-radius:10px;
  padding:9px 32px 9px 12px;font-size:13px;font-weight:600;font-family:inherit;
  color:var(--texto,#28364a);background:linear-gradient(135deg,#FAF8FF,#FFFFFF);
  box-shadow:0 4px 14px rgba(122,90,248,.08);
  outline:none;cursor:pointer;
}
select.fx-select:focus{border-color:var(--fucsia);box-shadow:0 0 0 3px rgba(236,35,136,.12);}
[data-modo="noche"] select.fx-select{
  background:rgba(26,29,51,.5);border-color:var(--gris-30,#3a3f5c);color:var(--texto,#e8e6f5);
}

/* ============================================================
   ACCESO · login y cierre de sesión
   ============================================================ */
.auth-loader{display:none;position:fixed;inset:0;z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);color:var(--gris-60);font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;}
body.auth-pendiente .auth-loader{display:flex;}
.auth-spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--gris-20);border-top-color:var(--fucsia);animation:authSpin .8s linear infinite;}
@keyframes authSpin{to{transform:rotate(360deg);}}

body.auth-pendiente .layout,
body.login-abierto .layout{display:none;}

.login-screen{display:none;position:fixed;inset:0;z-index:150;align-items:center;justify-content:center;padding:20px;overflow-y:auto;
  background:
    radial-gradient(900px 520px at 10% -5%, var(--fucsia-light), transparent 62%),
    radial-gradient(820px 620px at 102% 108%, var(--celeste-light), transparent 62%),
    var(--bg);}
body.login-abierto .login-screen{display:flex;}
.login-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.login-bg::before,.login-bg::after{content:'';position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;}
.login-bg::before{width:420px;height:420px;left:-130px;top:-90px;background:linear-gradient(135deg,var(--fucsia-claro),var(--grad-b));}
.login-bg::after{width:380px;height:380px;right:-120px;bottom:-130px;background:linear-gradient(135deg,var(--grad-a),var(--celeste-dark));}

.login-card{position:relative;width:100%;max-width:382px;padding:28px 24px 22px;border-radius:22px;
  background:rgba(255,255,255,.74);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 20px 60px rgba(26,23,48,.18);font-family:'Poppins',sans-serif;}
.login-logo{width:78px;height:78px;margin:0 auto 12px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--fucsia),var(--fucsia-claro));box-shadow:0 10px 26px rgba(233,30,140,.35);}
.login-logo img{width:58px;height:58px;object-fit:contain;border-radius:14px;}
.login-title{font-family:'Nunito',sans-serif;font-size:19px;font-weight:900;color:var(--texto);text-align:center;margin:0 0 2px;}
.login-sub{font-size:11px;font-weight:600;color:var(--gris-60);text-align:center;margin-bottom:20px;}
.login-label{display:block;font-family:'Nunito',sans-serif;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--gris-80);margin-bottom:6px;}
.login-field{position:relative;display:flex;align-items:center;margin-bottom:14px;}
.login-ico{position:absolute;left:12px;display:flex;color:var(--gris-60);pointer-events:none;}
.login-input{width:100%;padding:12px 42px;border-radius:12px;border:1.5px solid var(--gris-20);background:rgba(255,255,255,.78);
  font-family:'Poppins',sans-serif;font-size:13px;color:var(--texto);outline:none;transition:border-color .15s,box-shadow .15s;}
.login-input::placeholder{color:var(--gris-40);}
.login-input:focus{border-color:var(--fucsia);box-shadow:0 0 0 3px rgba(233,30,140,.15);}
.login-eye{position:absolute;right:6px;display:flex;padding:8px;border:none;border-radius:9px;background:none;color:var(--gris-60);cursor:pointer;}
.login-eye:hover{color:var(--fucsia);background:var(--fucsia-light);}
.login-eye.activo{color:var(--fucsia);}
.login-error{min-height:16px;margin-bottom:8px;font-size:11.5px;font-weight:700;color:var(--rojo);text-align:center;}
.login-btn{width:100%;padding:13px;border:none;border-radius:13px;background:linear-gradient(135deg,var(--fucsia-dark),var(--fucsia));
  color:#fff;font-family:'Nunito',sans-serif;font-size:14px;font-weight:900;letter-spacing:.3px;cursor:pointer;
  box-shadow:0 10px 24px rgba(233,30,140,.35);transition:transform .15s,box-shadow .15s,opacity .15s;}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(233,30,140,.42);}
.login-btn:disabled{opacity:.6;cursor:default;transform:none;}
.login-foot{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:10.5px;font-weight:700;color:var(--gris-60);}

[data-modo="noche"] .login-screen{background:
  radial-gradient(900px 520px at 10% -5%, rgba(233,30,140,.22), transparent 62%),
  radial-gradient(820px 620px at 102% 108%, rgba(139,92,246,.22), transparent 62%),
  var(--bg);}
[data-modo="noche"] .login-card{background:rgba(23,26,46,.62);border-color:rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.45);}
[data-modo="noche"] .login-input{background:rgba(26,29,51,.5);border-color:var(--gris-20);}
@media (max-width:420px){ .login-card{padding:24px 18px 18px;} }

.nav-logout{margin:18px 0 16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);color:var(--fucsia-claro);}
.nav-logout:hover{background:rgba(233,30,140,.14);color:#fff;}