:root{ --ev-morado:#2B0A5E; --ev-morado-2:#3d1580; --ev-azul:#0a63b5; }
body{ background:#f5f6fa; }
.ev-navbar{ background:linear-gradient(90deg,var(--ev-morado),var(--ev-morado-2)); box-shadow:0 2px 10px rgba(0,0,0,.12); }
.ev-navbar .nav-link{ display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border-radius:.4rem; color:rgba(255,255,255,.85); }
.ev-navbar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.10); }
.ev-navbar .nav-link.active{ color:#fff; background:rgba(255,255,255,.18); font-weight:600; }
.ev-navbar .nav-link i{ font-size:1.05rem; }

/* Offcanvas: menú lateral en móvil/tablet/laptop chica; Bootstrap lo aplana en >=1200px
   (navbar-expand-xl) para que una laptop de 1024-1199px no vea la barra apretada. */
.ev-offcanvas .offcanvas-title{ font-size:1rem; }
@media (min-width:1200px){
  .ev-offcanvas .offcanvas-body{ align-items:center; }
}
@media (max-width:1199.98px){
  #menuAdmin{ background:var(--ev-morado) !important; color:#fff; width:100vw !important; max-width:100%; height:100dvh; }
  #menuAdmin .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.12); }
  #menuAdmin .offcanvas-title{ color:#fff; }
  #menuAdmin .rol-chip{ color:#1a1a1a !important; }
  #menuAdmin .navbar-nav{ width:100%; }
  #menuAdmin .nav-link, #menuAdmin .nav-link span:not(.badge){ color:#fff !important; }
  #menuAdmin .nav-link{ font-size:1.05rem; padding:.8rem .25rem;
    border-bottom:1px solid rgba(255,255,255,.10); border-radius:0; background:transparent !important;
    display:flex; align-items:center; gap:.5rem; }
  #menuAdmin .nav-link.active{ background:rgba(255,255,255,.14) !important; border-radius:.4rem; }
  #menuAdmin .nav-link .badge{ margin-left:auto; }
  #menuAdmin .dropdown-menu{ position:static !important; background:rgba(255,255,255,.06); border:0;
    box-shadow:none; padding-left:.5rem; transform:none !important; }
  #menuAdmin .dropdown-item{ color:#fff; padding:.6rem .5rem; }
  #menuAdmin .dropdown-item:hover, #menuAdmin .dropdown-item:focus{ background:rgba(255,255,255,.12); color:#fff; }
  #menuAdmin .dropdown-divider{ border-color:rgba(255,255,255,.15); }
}
/* Contenido no debe estirarse infinito en monitores muy anchos */
main.container-fluid{ max-width:1680px; margin:0 auto; }

.ev-btn{ background:var(--ev-morado); color:#fff; }
.ev-btn:hover{ background:#1d0740; color:#fff; }
h1.h3{ color:var(--ev-morado); }

.card{ border:0; box-shadow:0 1px 3px rgba(0,0,0,.06); border-radius:.6rem; }
.card-kpi{ border-left:4px solid var(--ev-azul); }
.card-kpi.alerta{ border-left-color:#d93025; }
a.card-kpi{ display:block; transition:box-shadow .12s, transform .12s; }
a.card-kpi:hover{ box-shadow:0 4px 14px rgba(0,0,0,.12); transform:translateY(-1px); }
.kpi-delta{ font-size:.78rem; font-weight:600; margin-top:.15rem; }
.kpi-delta.up{ color:#198754; }
.kpi-delta.down{ color:#dc3545; }
.kpi-delta .text-muted{ font-weight:400; }

/* Panel de alertas del dashboard */
/* Contenedor fijo para los <canvas> de Chart.js: sin esto, un donut (aspect 1:1)
   dentro de una columna ancha de escritorio ocupa tanto de alto como de ancho. */
.chart-box{ position:relative; height:200px; }
.chart-box-lg{ height:230px; }
@media (min-width:992px){ .chart-box{ height:190px; } .chart-box-lg{ height:220px; } }
/* Gráficos de proporción/composición (pocos estados): una sola barra apilada
   horizontal en vez de dona/barras con eje — ocupa una fracción de la altura. */
.chart-box-slim{ position:relative; height:90px; }

.panel-alertas{ display:flex; flex-wrap:wrap; gap:.5rem; }
.panel-alertas .alerta-item{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem;
  border-radius:2rem; font-size:.9rem; font-weight:600; text-decoration:none; }
.panel-alertas .alerta-item:hover{ filter:brightness(.94); }

canvas{ max-width:100%; }

.tabla-compacta td, .tabla-compacta th{ padding:.45rem .6rem; font-size:.92rem; }
/* Una card con tabla puede desbordar en móvil sin romper el layout de la página */
.card-body:has(.tabla-compacta), .card-body:has(> .table){ overflow-x:auto; }
@media (max-width:575.98px){
  .tabla-compacta td, .tabla-compacta th{ padding:.35rem .45rem; font-size:.82rem; }
  .container-fluid{ padding-left:.75rem; padding-right:.75rem; }
}
.table > :not(caption) > * > *{ background-color:transparent; }
.estado-Vencida{ color:#c62828; font-weight:600; }
.estado-Pagada{ color:#2e7d32; }
.estado-Anulada{ color:#999; text-decoration:line-through; }

.pos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.6rem; }
.pos-prod{ cursor:pointer; border:1px solid #e3e3ec; border-radius:.55rem; padding:.55rem; text-align:center; transition:.12s; background:#fff; }
.pos-prod:hover{ border-color:var(--ev-azul); box-shadow:0 4px 12px rgba(0,0,0,.10); transform:translateY(-2px); }
.pos-prod.sinstock{ opacity:.4; cursor:not-allowed; }

@media (max-width:575px){ h1.h3{ font-size:1.2rem; } }