/* ═══════════════════════════════════
   TOAST / NOTIFICACIÓN FLOTANTE
   ═══════════════════════════════════ */
#toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--g800); color: #fff;
  padding: 12px 18px; border-radius: var(--r-lg);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--sh-lg);
  transform: translateY(80px); opacity: 0;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 9999; pointer-events: none;
  max-width: 340px;
}
#toast.show { transform: translateY(0); opacity: 1; }
#toast i { font-size: 18px; }
#toast.success { background: var(--ok); }
#toast.error   { background: var(--bad); }

/* ═══════════════════════════════════
   MODAL
   ═══════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,14,28,.72);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--g0);
  border-radius: var(--r-xl);
  padding: 24px;
  width: 480px;
  max-width: 95vw;
  box-shadow: var(--sh-lg);
  transform: scale(.95);
  transition: transform .2s;
  position: relative;
  z-index: 2001;
}
.modal-overlay.open .modal-box { transform: scale(1); }
/* ─── Clickable bars ─── */
.hbar-row.clickable { cursor:pointer; border-radius:8px; padding:2px 4px; margin-left:-4px; transition:background .15s,transform .1s; }
.hbar-row.clickable:hover { background:var(--g50); transform:translateX(2px); }
.hbar-arrow { display:inline-flex; align-items:center; color:var(--g300); font-size:14px; margin-left:4px; transition:color .15s; }
.hbar-row.clickable:hover .hbar-arrow { color:var(--primary); }
.vbar-col.clickable { cursor:pointer; border-radius:8px; padding:4px; transition:background .15s,transform .1s; }
.vbar-col.clickable:hover { background:var(--g50); transform:translateY(-2px); }
.kpi-card.clickable { cursor:pointer; }
.kpi-card.clickable:hover { box-shadow:0 0 0 2px var(--primary); }
/* ─── Modal detalle ─── */
.modal-box-lg { width:740px; max-width:96vw; max-height:90vh; display:flex; flex-direction:column; padding:0; overflow:hidden; }
.modal-box-lg > .modal-title { padding:20px 24px 0; flex-shrink:0; }
.modal-box-lg > .detalle-subtitulo { padding:0 24px; flex-shrink:0; }
.modal-box-lg > .detalle-kpis { padding:0 24px; flex-shrink:0; }
.modal-box-lg > .detalle-body { flex:1; overflow-y:auto; padding:0 24px; min-height:0; }
.modal-box-lg > .modal-footer { padding:12px 24px; border-top:1px solid var(--g100); flex-shrink:0; margin-top:0; }
.detalle-subtitulo { font-size:12px; color:var(--g400); margin-top:-10px; margin-bottom:14px; }
.detalle-kpis { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.detalle-kpi { background:var(--g50); border:1px solid var(--g100); border-radius:10px; padding:10px 14px; flex:1; min-width:110px; }
.detalle-kpi-val { font-size:20px; font-weight:700; color:var(--g800); }
.detalle-kpi-lbl { font-size:11px; color:var(--g400); margin-top:2px; }
.detalle-body { overflow-y:auto; }
.detalle-section-title { font-size:12px; font-weight:700; color:var(--g500); text-transform:uppercase; letter-spacing:.06em; margin:14px 0 6px; }
.modal-title { font-size: 15px; font-weight: 700; color: var(--g800); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.modal-title i { font-size: 20px; color: var(--primary); }
.form-group { margin-bottom: 14px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--g500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; display: block; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--g100); }