/* =====================================================================
   CREDISAN | CENTRO DE INTELIGENCIA DE COMPRAS
   styles.css — sistema de diseño
   ===================================================================== */

:root{
  /* Marca */
  --purple:#662D91;
  --purple-dark:#4A1F6B;
  --purple-deep:#35154F;
  --purple-soft:#EADCF7;
  --purple-softest:#F4EEFB;
  --purple-light:#F4EEFB;
  --yellow:#FFF200;
  --black:#141116;
  --white:#FFFFFF;

  /* Neutros */
  --cream:#FBFAFC;
  --bg:#FBFAFC;
  --grey-900:#201C24;
  --grey-700:#4B4553;
  --grey:#7A7486;
  --grey-500:#7A7486;
  --grey-300:#DDD7E6;
  --grey-light:#F2EFF7;
  --grey-100:#F2EFF7;

  /* Semánticos */
  --success:#1E8E4F; --success-bg:#E7F6ED;
  --warn:#B8860B;    --warn-bg:#FCF3D9;
  --danger:#C0392B;  --danger-bg:#FBEAE8;
  --info:#2563A8;    --info-bg:#E6EFF8;

  --radius-sm:9px; --radius:14px; --radius-lg:22px;
  --shadow-sm:0 2px 10px rgba(20,10,30,.06);
  --shadow:0 8px 26px rgba(20,10,30,.10);
  --shadow-lg:0 18px 50px rgba(20,10,30,.18);

  --font:'Poppins',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'SF Mono','Consolas','Courier New',monospace;

  --sidebar-w:254px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:var(--font-body); background:var(--cream); color:var(--grey-900);
  -webkit-font-smoothing:antialiased; font-size:14px;
}
h1,h2,h3,h4{ font-family:var(--font); font-weight:700; margin:0; color:var(--black); letter-spacing:-.2px; }
p{ margin:0; }
button{ font-family:var(--font-body); cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:var(--font-body); }
:focus-visible{ outline:2.5px solid var(--purple); outline-offset:2px; border-radius:4px; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#cfc7dd; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#b9addb; }

/* =====================================================================
   LAYOUT
   ===================================================================== */
#app{ display:flex; min-height:100vh; }

#sidebar{
  width:var(--sidebar-w); flex-shrink:0; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; overflow-y:auto; z-index:40;
  background:linear-gradient(178deg, var(--black) 0%, #191320 55%, var(--purple-deep) 140%);
  color:#fff;
}
#sidebar .logo-box{ padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,.09); }
#sidebar .logo-box img{ width:100%; max-width:148px; display:block; }

nav.nav{ padding:12px 10px 8px; flex:1; }
.navgroup-label{
  font-size:9.5px; text-transform:uppercase; letter-spacing:1.6px; font-weight:800;
  color:rgba(255,255,255,.34); margin:16px 12px 7px;
}
.navlink{
  display:flex; align-items:center; gap:11px; padding:10px 12px; margin-bottom:2px;
  border-radius:10px; color:rgba(255,255,255,.74); font-size:13px; font-weight:600;
  cursor:pointer; user-select:none; position:relative;
  transition:background .16s, color .16s, transform .12s;
}
.navlink:hover{ background:rgba(255,255,255,.07); color:#fff; }
.navlink.active{ background:var(--purple); color:#fff; box-shadow:0 4px 14px rgba(102,45,145,.45); }
.navlink.active::before{
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--yellow);
}
.navlink .ic{ width:17px; text-align:center; font-size:13px; flex-shrink:0; }

#sidebar .sidebar-foot{
  padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.09);
  font-size:10px; line-height:1.6; color:rgba(255,255,255,.38);
}

/* Selector de paneles */
.panel-selector{ padding:12px 8px 10px; border-bottom:1px solid rgba(255,255,255,.09); }
.panel-opt{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px;
  cursor:pointer; margin-bottom:7px; border:1.5px solid transparent;
  background:rgba(255,255,255,.05); transition:background .16s, border-color .16s, transform .12s;
}
.panel-opt:hover{ background:rgba(255,255,255,.1); transform:translateX(2px); }
.panel-opt.active{
  background:linear-gradient(135deg,var(--purple),var(--purple-dark));
  border-color:rgba(255,242,0,.55); box-shadow:0 6px 18px rgba(102,45,145,.4);
}
.panel-opt .ic{ font-size:16px; color:var(--yellow); flex-shrink:0; }
.panel-opt b{ display:block; font-family:var(--font); font-size:12px; color:#fff; line-height:1.3; }
.panel-opt small{ display:block; font-size:10px; color:rgba(255,255,255,.58); margin-top:1px; }
.panel-opt.active small{ color:rgba(255,255,255,.82); }

#main{ flex:1; min-width:0; display:flex; flex-direction:column; }

#topbar{
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--grey-300); padding:15px 26px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  position:sticky; top:0; z-index:30;
}
#topbar h2{ font-size:18.5px; }
#topbar .meta{ font-size:11.5px; color:var(--grey-500); margin-top:3px; font-weight:500; }
#content{ padding:26px; max-width:1480px; width:100%; margin:0 auto; }

.sidebar-collapse-btn{ display:none; }
@media (max-width:900px){
  #sidebar{ position:fixed; left:-270px; transition:left .22s ease; box-shadow:var(--shadow-lg); }
  #sidebar.open{ left:0; }
  .sidebar-collapse-btn{ display:inline-flex; margin-bottom:6px; }
  #content{ padding:16px; }
  #topbar{ padding:12px 16px; }
}

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn{
  border-radius:10px; padding:10px 17px; font-family:var(--font); font-weight:600; font-size:12.8px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap;
  transition:transform .12s, box-shadow .18s, background .18s, color .18s;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--purple); color:#fff; box-shadow:0 4px 14px rgba(102,45,145,.28); }
.btn-primary:hover{ background:var(--purple-dark); box-shadow:0 7px 20px rgba(102,45,145,.38); }
.btn-accent{ background:var(--yellow); color:var(--black); box-shadow:0 4px 14px rgba(255,242,0,.35); }
.btn-accent:hover{ box-shadow:0 7px 20px rgba(255,242,0,.5); transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--purple); border:1.5px solid var(--grey-300); }
.btn-ghost:hover{ border-color:var(--purple); background:var(--purple-softest); }
.btn-danger{ background:var(--danger-bg); color:var(--danger); }
.btn-danger:hover{ background:#f6d9d5; }
.btn-sm{ padding:7px 12px; font-size:11.8px; border-radius:8px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; }

/* =====================================================================
   TARJETAS Y GRID
   ===================================================================== */
.card{
  background:#fff; border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); border:1px solid var(--grey-100);
}
.grid{ display:grid; gap:16px; }
.grid-6{ grid-template-columns:repeat(6,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1200px){ .grid-6{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-6,.grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.kpi{
  position:relative; background:#fff; border-radius:var(--radius); padding:18px 20px;
  box-shadow:var(--shadow-sm); border:1px solid var(--grey-100); overflow:hidden;
  transition:transform .18s, box-shadow .18s;
}
.kpi:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.kpi::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grey-300); }
.kpi.accent::after{ background:var(--purple); }
.kpi.accent2::after{ background:var(--yellow); }
.kpi.accent3::after{ background:var(--danger); }
.kpi.accent4::after{ background:var(--success); }
.kpi .kpi-label{ font-size:10px; text-transform:uppercase; letter-spacing:.9px; color:var(--grey-500); font-weight:800; }
.kpi .kpi-value{ font-family:var(--font); font-size:28px; font-weight:700; margin-top:5px; line-height:1.1; letter-spacing:-1px; }
.kpi .kpi-sub{ font-size:11px; color:var(--grey-500); margin-top:5px; line-height:1.4; }

.section-title{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:32px 0 14px; flex-wrap:wrap; }
.section-title h3{
  font-size:12.5px; text-transform:uppercase; letter-spacing:1.1px; color:var(--purple-dark); font-weight:800;
  display:flex; align-items:center; gap:9px;
}
.section-title h3::before{ content:''; width:16px; height:3px; border-radius:3px; background:var(--yellow); }
.section-title .hint{ font-size:11.5px; color:var(--grey-500); font-weight:500; }

/* =====================================================================
   TABLAS
   ===================================================================== */
.tbl-scroll{ overflow-x:auto; border-radius:var(--radius-sm); }
table{ width:100%; border-collapse:collapse; font-size:12.8px; }
thead th, table tr:first-child th{
  text-align:left; background:var(--purple); color:#fff; padding:11px 13px;
  font-size:9.8px; text-transform:uppercase; letter-spacing:.7px; font-weight:800; white-space:nowrap;
}
th:first-child{ border-radius:var(--radius-sm) 0 0 0; }
th:last-child{ border-radius:0 var(--radius-sm) 0 0; }
td{ padding:11px 13px; border-bottom:1px solid var(--grey-100); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tr:hover td{ background:var(--purple-softest); }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* =====================================================================
   BADGES
   ===================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:4px; padding:3.5px 10px; border-radius:20px;
  font-size:10.5px; font-weight:800; white-space:nowrap; letter-spacing:.2px;
}
.badge-green{ background:var(--success-bg); color:var(--success); }
.badge-yellow{ background:var(--warn-bg); color:var(--warn); }
.badge-red{ background:var(--danger-bg); color:var(--danger); }
.badge-purple{ background:var(--purple-softest); color:var(--purple); }
.badge-grey{ background:var(--grey-100); color:var(--grey-500); }
.badge-blue{ background:var(--info-bg); color:var(--info); }

.sync-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800;
  padding:6px 12px; border-radius:20px; white-space:nowrap;
}
.sync-badge .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.sync-badge.ok{ background:var(--success-bg); color:var(--success); }
.sync-badge.ok .dot{ background:var(--success); box-shadow:0 0 0 3px rgba(30,142,79,.18); }
.sync-badge.local{ background:var(--purple-softest); color:var(--purple); }
.sync-badge.local .dot{ background:var(--purple); }
.sync-badge.bad{ background:var(--danger-bg); color:var(--danger); }
.sync-badge.bad .dot{ background:var(--danger); }

#libStatus{ font-size:10px; font-weight:800; padding:5px 11px; border-radius:20px; }
#libStatus.ok{ background:var(--success-bg); color:var(--success); }
#libStatus.bad{ background:var(--warn-bg); color:var(--warn); }

.user-badge{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--grey-700); font-weight:600; }
.user-badge .avatar{
  width:26px; height:26px; border-radius:50%; font-size:10.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--purple-dark));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* =====================================================================
   FORMULARIOS Y FILTROS
   ===================================================================== */
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:11px; font-weight:800; color:var(--purple-dark); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.field .helptext{ font-size:11px; color:var(--grey-500); margin-top:5px; font-style:italic; line-height:1.45; }
input[type=text],input[type=number],input[type=date],input[type=password],input[type=email],input[type=tel],select,textarea{
  width:100%; padding:10px 13px; border:1.5px solid var(--grey-300); border-radius:10px;
  font-size:13.2px; background:#fff; color:var(--grey-900); transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3.5px rgba(102,45,145,.11); }
textarea{ min-height:82px; resize:vertical; line-height:1.55; }
.row-flex{ display:flex; gap:13px; flex-wrap:wrap; }
.row-flex > *{ flex:1; min-width:165px; }

.filters-bar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px;
  background:#fff; padding:13px 15px; border-radius:var(--radius); box-shadow:var(--shadow-sm);
  border:1px solid var(--grey-100);
}
.filters-bar select,.filters-bar input{ padding:8px 11px; font-size:12.3px; min-width:135px; width:auto; }
.filters-bar .flabel{ font-size:10px; color:var(--grey-500); font-weight:800; text-transform:uppercase; letter-spacing:.5px; }

/* Buscador global */
.search-global{
  position:relative; display:flex; align-items:center; background:#fff; border:1.5px solid var(--grey-300);
  border-radius:11px; padding:0 13px; min-width:240px; flex:1; max-width:440px;
  transition:border-color .15s, box-shadow .15s;
}
.search-global:focus-within{ border-color:var(--purple); box-shadow:0 0 0 3.5px rgba(102,45,145,.11); }
.search-global input{ border:none; outline:none; padding:10px 8px; width:100%; background:transparent; font-size:13.2px; }
.search-global .sg-ic{ color:var(--grey-500); font-size:14px; flex-shrink:0; }
.search-global .sg-clear{
  background:var(--grey-100); color:var(--grey-500); width:21px; height:21px; border-radius:50%;
  display:none; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
}
.search-global.has-text .sg-clear{ display:flex; }

/* =====================================================================
   TARJETAS DE PROVEEDOR
   ===================================================================== */
.provcard{
  background:#fff; border-radius:var(--radius); padding:19px; box-shadow:var(--shadow-sm);
  border:1px solid var(--grey-100); border-top:4px solid var(--purple);
  transition:transform .18s, box-shadow .18s;
}
.provcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.provcard.inactive{ opacity:.55; border-top-color:var(--grey-300); }
.provcard h4{ font-size:14.5px; }
.provcard .provmeta{ font-size:11px; color:var(--grey-500); margin:7px 0 12px; line-height:1.5; }

.dropzone{
  border:2px dashed var(--grey-300); border-radius:11px; padding:16px; text-align:center;
  font-size:11.5px; color:var(--grey-500); cursor:pointer; line-height:1.55;
  transition:border-color .16s, background .16s, color .16s;
}
.dropzone:hover,.dropzone.drag{ border-color:var(--purple); color:var(--purple); background:var(--purple-softest); }

/* =====================================================================
   SCORE Y RECOMENDACIONES
   ===================================================================== */
.score-pill{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:50%; font-family:var(--font); font-weight:800; font-size:14.5px; color:#fff; flex-shrink:0;
}
.score-90{ background:linear-gradient(135deg,#25A55F,var(--success)); }
.score-70{ background:linear-gradient(135deg,#7FC98A,#5FA96A); }
.score-50{ background:linear-gradient(135deg,#D9A62B,var(--warn)); }
.score-0{ background:linear-gradient(135deg,#D4564A,var(--danger)); }

.rec-card{
  background:#fff; border-radius:var(--radius); border:1px solid var(--grey-100);
  border-left:5px solid var(--purple); padding:20px 22px; margin-bottom:16px; box-shadow:var(--shadow-sm);
  transition:box-shadow .18s;
}
.rec-card:hover{ box-shadow:var(--shadow); }
.rec-card h4{ color:var(--purple-dark); font-size:15.5px; }
.rec-num{
  display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px;
  border-radius:50%; background:var(--purple); color:#fff; font-size:10px; font-weight:800; margin-right:8px; flex-shrink:0;
}
.rec-row{ margin-top:9px; font-size:12.8px; line-height:1.6; }
.rec-row b{ color:var(--purple-dark); }
.missing-flag{
  background:var(--warn-bg); color:var(--warn); padding:3px 9px; border-radius:7px;
  font-size:10.2px; font-weight:700; margin:4px 5px 0 0; display:inline-block;
}

/* Desglose del score */
.score-breakdown{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--grey-300); }
.sb-row{ display:flex; align-items:center; gap:10px; margin-bottom:7px; font-size:11.5px; }
.sb-row .sb-lbl{ width:170px; flex-shrink:0; color:var(--grey-700); font-weight:600; }
.sb-row .sb-track{ flex:1; height:7px; background:var(--grey-100); border-radius:5px; overflow:hidden; min-width:60px; }
.sb-row .sb-track > div{ height:100%; border-radius:5px; background:linear-gradient(90deg,var(--purple),var(--purple-dark)); }
.sb-row .sb-val{ width:96px; text-align:right; font-family:var(--mono); font-weight:700; font-size:10.5px; }
.sb-row.na .sb-lbl,.sb-row.na .sb-val{ color:var(--warn); font-style:italic; }
.sb-row.na .sb-track > div{ background:var(--grey-300); }

/* =====================================================================
   GRÁFICOS
   ===================================================================== */
.chart-bars{ display:flex; flex-direction:column; gap:11px; }
.chart-bar-row{ display:flex; align-items:center; gap:12px; font-size:12px; }
.chart-bar-row .lbl{ width:160px; flex-shrink:0; color:var(--grey-700); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chart-bar-row .track{ flex:1; height:17px; background:var(--grey-100); border-radius:6px; overflow:hidden; }
.chart-bar-row .track > div{
  height:100%; border-radius:6px; background:linear-gradient(90deg,var(--purple),var(--purple-dark));
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.chart-bar-row .val{ width:66px; text-align:right; font-family:var(--mono); font-weight:800; font-size:11.5px; }

/* Evolución de precios */
.spark{ display:flex; align-items:flex-end; gap:7px; height:104px; padding:8px 2px 0; }
.spark .sp-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.spark .sp-bar{ width:100%; max-width:36px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--purple),var(--purple-dark)); transition:height .45s ease; }
.spark .sp-bar.up{ background:linear-gradient(180deg,#D4564A,var(--danger)); }
.spark .sp-bar.down{ background:linear-gradient(180deg,#25A55F,var(--success)); }
.spark .sp-val{ font-size:9.5px; font-weight:800; color:var(--grey-700); margin-bottom:4px; font-family:var(--mono); }
.spark .sp-lbl{ font-size:9px; color:var(--grey-500); margin-top:5px; text-align:center; white-space:nowrap; }

/* =====================================================================
   ALERTAS
   ===================================================================== */
.alert-item{
  display:flex; gap:11px; align-items:flex-start; padding:12px 15px; border-radius:11px;
  font-size:12.5px; font-weight:500; margin-bottom:9px; line-height:1.55;
  background:var(--danger-bg); color:var(--danger); border-left:3.5px solid var(--danger);
}
.alert-item.warn{ background:var(--warn-bg); color:var(--warn); border-left-color:var(--warn); }
.alert-item.info{ background:var(--info-bg); color:var(--info); border-left-color:var(--info); }
.alert-item.ok{ background:var(--success-bg); color:var(--success); border-left-color:var(--success); }
.alert-item b{ font-weight:800; }

.empty-state{ text-align:center; padding:54px 20px; color:var(--grey-500); }
.empty-state .ic{ font-size:34px; margin-bottom:12px; opacity:.45; }
.empty-state h3{ margin-bottom:8px; font-size:16px; color:var(--grey-700); }
.empty-state p{ font-size:12.8px; line-height:1.6; max-width:440px; margin:0 auto 16px; }

/* =====================================================================
   MODALES
   ===================================================================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,10,22,.55); backdrop-filter:blur(3px);
  z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .16s ease;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal{
  background:#fff; border-radius:var(--radius-lg); max-width:760px; width:100%;
  max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg);
  animation:slideUp .22s cubic-bezier(.22,1,.36,1);
}
@keyframes slideUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.modal-head{
  padding:19px 24px; border-bottom:1px solid var(--grey-100);
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  position:sticky; top:0; background:#fff; z-index:2; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-head h4{ font-size:15.5px; }
.modal-close{ font-size:19px; color:var(--grey-500); line-height:1; padding:4px; }
.modal-close:hover{ color:var(--danger); }
.modal-body{ padding:24px; }

/* =====================================================================
   CARRITO / ORDEN DE COMPRA
   ===================================================================== */
.cart-fab{
  position:fixed; right:22px; bottom:22px; z-index:150;
  background:var(--purple); color:#fff; border-radius:999px; padding:14px 22px;
  box-shadow:0 10px 30px rgba(102,45,145,.45); display:flex; align-items:center; gap:10px;
  font-family:var(--font); font-weight:700; font-size:13px;
  transition:transform .16s, box-shadow .2s;
}
.cart-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 38px rgba(102,45,145,.55); }
.cart-fab .cart-count{
  background:var(--yellow); color:var(--black); border-radius:999px; min-width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; padding:0 6px;
}
.cart-fab.hidden{ display:none; }

.cart-line{
  display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--grey-100);
}
.cart-line:last-child{ border-bottom:none; }
.cart-line .cl-main{ flex:1; min-width:0; }
.cart-line .cl-title{ font-weight:700; font-size:13px; }
.cart-line .cl-sub{ font-size:11px; color:var(--grey-500); margin-top:2px; }
.cart-line input[type=number]{ width:74px; padding:7px 9px; font-size:12.5px; }
.cart-total{
  display:flex; justify-content:space-between; align-items:baseline; padding:14px 16px; margin-top:14px;
  background:var(--purple-softest); border-radius:12px;
}
.cart-total .ct-label{ font-size:11.5px; font-weight:800; color:var(--purple-dark); text-transform:uppercase; letter-spacing:.6px; }
.cart-total .ct-value{ font-family:var(--font); font-size:24px; font-weight:800; color:var(--purple-dark); }

/* =====================================================================
   MISC
   ===================================================================== */
.progressbar{ height:7px; border-radius:5px; background:var(--grey-100); overflow:hidden; }
.progressbar > div{ height:100%; border-radius:5px; background:linear-gradient(90deg,var(--purple),var(--purple-dark)); transition:width .45s ease; }
.clickable{ cursor:pointer; }
.clickable:hover{ color:var(--purple); text-decoration:underline; }

@media print{
  #sidebar,#topbar,.no-print,.filters-bar,.cart-fab{ display:none !important; }
  #content{ padding:0; max-width:100%; }
  body{ background:#fff; }
  .card,.kpi{ box-shadow:none; border:1px solid #ddd; break-inside:avoid; }
}

/* =====================================================================
   PANTALLA DE INICIO DE SESIÓN
   ===================================================================== */
#loginRoot{
  display:none; position:fixed; inset:0; z-index:500;
  align-items:center; justify-content:center; padding:22px;
  background:linear-gradient(168deg, var(--black) 0%, #191320 55%, var(--purple-deep) 150%);
}
.login-card{
  background:#fff; border-radius:var(--radius-lg); padding:38px 34px;
  width:100%; max-width:396px; box-shadow:var(--shadow-lg);
  animation:slideUp .26s cubic-bezier(.22,1,.36,1);
}
.login-logo{ width:158px; display:block; margin:0 auto 10px; }
.login-sub{
  text-align:center; font-size:9.5px; font-weight:800; letter-spacing:1.5px;
  color:var(--purple); margin-bottom:26px;
}
.login-error{
  display:none; background:var(--danger-bg); color:var(--danger);
  padding:10px 13px; border-radius:9px; font-size:12px; font-weight:600; margin-bottom:13px;
  border-left:3px solid var(--danger);
}
.login-warn{
  background:var(--warn-bg); color:#7a5c00; padding:15px 16px; border-radius:11px;
  font-size:12px; line-height:1.6; margin-bottom:18px; border-left:3.5px solid var(--warn);
}
.login-warn b{ color:var(--warn); }
.login-foot{
  font-size:10.5px; color:var(--grey-500); text-align:center; margin-top:16px; line-height:1.6;
}