/* ══════════════════════════════════════════════════════════════════════════════
   Control de Pagos · Proveedores v2.0 — Styles
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --sidebar-bg:#0f172a; --sidebar-w:230px;
  --blue:#3b82f6; --blue-d:#1d4ed8;
  --green:#10b981; --green-d:#065f46;
  --red:#ef4444; --red-d:#991b1b;
  --orange:#f59e0b; --orange-d:#92400e;
  --purple:#8b5cf6;
  --bg:#f0f4f8; --card:#fff;
  --text:#1e293b; --muted:#64748b;
  --border:#e2e8f0;
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar-w); height:100vh; background:var(--sidebar-bg);
  position:fixed; top:0; left:0; z-index:200;
  display:flex; flex-direction:column;
  box-shadow:4px 0 24px rgba(0,0,0,.25);
}
.sidebar-brand{
  padding:1.1rem 1rem; border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.brand-logo{
  width:100%; display:flex; justify-content:center;
}
.brand-logo .logo{
  width:150px; height:auto; mix-blend-mode:lighten; opacity:.95;
}
.brand-text{
  width:100%; text-align:center;
}
.brand-text h6{color:#f1f5f9;font-size:.85rem;font-weight:700;margin:0;line-height:1.2}
.brand-text small{color:#64748b;font-size:.7rem}
.sidebar nav{padding:.5rem 0;flex:1;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem 1rem; color:#94a3b8; font-size:.82rem; font-weight:500;
  cursor:pointer; border-radius:0; transition:all .15s; border:none; background:none; width:100%;
  text-align:left;
}
.nav-item:hover{color:#e2e8f0; background:rgba(255,255,255,.06)}
.nav-item.active{color:#fff; background:rgba(59,130,246,.18); border-right:3px solid #3b82f6}
.nav-item i{font-size:1rem;width:1.2rem;text-align:center;flex-shrink:0}
.nav-section{padding:.4rem 1rem .2rem;color:#475569;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.notif-pill{
  background:#ef4444;color:#fff;border-radius:10px;
  padding:.05rem .4rem;font-size:.65rem;font-weight:700;margin-left:auto;
}
.sidebar-footer{padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.07);color:#475569;font-size:.7rem}

/* ── TOPBAR ── */
.topbar{
  position:fixed;top:0;left:var(--sidebar-w);right:0;height:56px;z-index:100;
  background:rgba(240,244,248,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem;
}
.topbar-title{font-size:.95rem;font-weight:700;color:var(--text)}
.topbar-title small{color:var(--muted);font-weight:400;font-size:.78rem}
.topbar-actions{display:flex;align-items:center;gap:.75rem}

/* Currency toggle */
.currency-toggle{
  display:flex;background:#e2e8f0;border-radius:8px;padding:2px;gap:2px;
}
.currency-toggle button{
  border:none;background:none;border-radius:6px;padding:.2rem .65rem;
  font-size:.75rem;font-weight:700;color:var(--muted);cursor:pointer;transition:all .15s;
}
.currency-toggle button.active{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* ── MAIN ── */
.main{margin-left:var(--sidebar-w);padding-top:56px;min-height:100vh}
.page{padding:1.5rem 1.75rem;animation:fadeInUp .3s ease}

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

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:1.25rem}
.kpi-card{
  border-radius:14px;padding:1.25rem 1.4rem;color:#fff;
  position:relative;overflow:hidden;cursor:default;
  transition:transform .2s,box-shadow .2s;
}
.kpi-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.kpi-card::after{
  content:'';position:absolute;top:-30%;right:-20%;
  width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.1);
}
.kpi-card.blue {background:linear-gradient(135deg,#1d4ed8,#3b82f6)}
.kpi-card.red  {background:linear-gradient(135deg,#991b1b,#ef4444)}
.kpi-card.orange{background:linear-gradient(135deg,#92400e,#f59e0b)}
.kpi-card.green {background:linear-gradient(135deg,#065f46,#10b981)}
.kpi-card.purple{background:linear-gradient(135deg,#4c1d95,#8b5cf6)}
.kpi-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;opacity:.85}
.kpi-value{font-size:1.7rem;font-weight:800;line-height:1.1;margin:.3rem 0}
.kpi-sub{font-size:.75rem;opacity:.8}
.kpi-icon{position:absolute;top:.9rem;right:1rem;font-size:1.8rem;opacity:.25}

/* ── WHITE CARDS ── */
.wcard{background:var(--card);border-radius:14px;border:1px solid var(--border);overflow:hidden;transition:box-shadow .2s}
.wcard:hover{box-shadow:0 4px 20px rgba(0,0,0,.07)}
.wcard-header{
  padding:.85rem 1.2rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.wcard-title{font-size:.85rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:.5rem}
.wcard-body{padding:1.2rem}

/* ── TABLE ── */
.table{margin:0}
.table thead th{
  background:#f8fafc;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  border-bottom:2px solid var(--border);padding:.65rem 1rem;white-space:nowrap;
}
.table tbody td{font-size:.82rem;padding:.65rem 1rem;vertical-align:middle;border-color:var(--border)}
.table tbody tr{transition:background .1s}
.table tbody tr:hover{background:#f8fafc}
.monto{font-weight:700;font-variant-numeric:tabular-nums}

/* ── BADGES ── */
.sbadge{
  display:inline-flex;align-items:center;gap:.28rem;
  padding:.18rem .6rem;border-radius:20px;font-size:.72rem;font-weight:700;
}
.s-pagado   {background:#d1fae5;color:#065f46}
.s-pendiente{background:#dbeafe;color:#1d4ed8}
.s-vencida  {background:#fee2e2;color:#991b1b}
.s-por_vencer{background:#fef3c7;color:#92400e}
.s-ocupada  {background:#ede9fe;color:#5b21b6}
.s-aplicada {background:#f3e8ff;color:#6d28d9}

/* ── PROVIDER PILL ── */
.ppill{
  display:inline-block;padding:.15rem .55rem;border-radius:6px;
  background:#ede9fe;color:#5b21b6;font-size:.72rem;font-weight:700;
  cursor:pointer;transition:all .15s;
}
.ppill:hover{background:#8b5cf6;color:#fff}

/* ── FILTERS ── */
.filters{
  background:var(--card);border-radius:12px;border:1px solid var(--border);
  padding:.85rem 1.1rem;margin-bottom:1rem;
}
.filters label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:.2rem}
.form-control,.form-select{
  font-size:.82rem;border-radius:8px;border:1.5px solid var(--border);
  transition:border-color .15s;padding:.35rem .65rem;
}
.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}

/* ── BUTTONS ── */
.btn{border-radius:8px;font-size:.82rem;font-weight:600;transition:all .15s}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{background:var(--green-d);border-color:var(--green-d)}
.btn-sm{padding:.25rem .6rem;font-size:.75rem}

/* ── ALERT ITEMS ── */
.alert-item{
  background:var(--card);border-radius:10px;
  padding:.85rem 1rem;border-left:4px solid;
  display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;
  transition:box-shadow .15s;
}
.alert-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.alert-item.vencida   {border-color:#ef4444}
.alert-item.por_vencer{border-color:#f59e0b}
.alert-item .ai-icon{font-size:1.4rem}
.alert-item.vencida    .ai-icon{color:#ef4444}
.alert-item.por_vencer .ai-icon{color:#f59e0b}

/* ── CHART CONTAINERS ── */
.chart-wrap{position:relative;padding:.5rem}
.chart-label{font-size:.75rem;color:var(--muted);text-align:center;margin-top:.25rem}

/* ── TIMELINE (Historial) ── */
.timeline{position:relative;padding-left:2rem}
.timeline::before{
  content:'';position:absolute;left:.6rem;top:0;bottom:0;
  width:2px;background:var(--border);
}
.tl-item{position:relative;margin-bottom:1rem}
.tl-dot{
  position:absolute;left:-1.65rem;top:.3rem;
  width:14px;height:14px;border-radius:50%;border:2px solid var(--card);
  box-shadow:0 0 0 2px var(--border);
}
.tl-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:.65rem .9rem;transition:box-shadow .15s;
}
.tl-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.07)}
.tl-date{font-size:.7rem;color:var(--muted)}
.tl-desc{font-size:.82rem;font-weight:600;color:var(--text);margin:.1rem 0}
.tl-meta{font-size:.72rem;color:var(--muted)}

/* ── PROVIDER CARD ── */
.prov-card{
  background:var(--card);border-radius:14px;border:1px solid var(--border);
  padding:1.25rem;cursor:pointer;transition:all .2s;
}
.prov-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.1);border-color:var(--blue)}
.prov-name{font-size:.95rem;font-weight:800;color:var(--text);margin-bottom:.75rem}
.prov-kpi{display:flex;justify-content:space-between;gap:.5rem}
.prov-kpi-item{flex:1;text-align:center;padding:.4rem .2rem;border-radius:8px}
.prov-kpi-item .v{font-size:1rem;font-weight:800}
.prov-kpi-item .l{font-size:.62rem;color:var(--muted);font-weight:600;text-transform:uppercase}
.progress-bar-wrap{margin-top:.75rem}
.prog-label{display:flex;justify-content:space-between;font-size:.7rem;margin-bottom:.2rem}
.prog-track{height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}
.prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#3b82f6,#10b981);transition:width .6s ease}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty i{font-size:2.5rem;display:block;margin-bottom:.5rem;opacity:.4}

/* ── MODAL ── */
.modal-content{border:none;border-radius:16px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.15)}
.modal-header{border-bottom:1px solid var(--border);padding:1rem 1.25rem}
.modal-title{font-weight:700;font-size:.95rem}
.modal-footer{border-top:1px solid var(--border)}
.form-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* ── TOAST ── */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999}
.toast{border:none;border-radius:10px;font-size:.85rem;min-width:280px}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* ── SKELETON ── */
.skel{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px;height:16px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── CASOS / GARANTIAS / SERVICIO TECNICO ── */
.casos-toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.casos-toolbar input,.casos-toolbar select{padding:.35rem .7rem;border:1px solid var(--border);border-radius:8px;font-size:.82rem;background:#fff}
.casos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.caso-card{background:#fff;border-radius:12px;padding:1.1rem 1.2rem;box-shadow:0 1px 4px rgba(0,0,0,.07);border:1px solid var(--border);cursor:pointer;transition:box-shadow .15s}
.caso-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.caso-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}
.caso-numero{font-weight:700;font-size:.9rem;color:var(--text)}
.caso-badge{padding:.2rem .6rem;border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase}
.badge-pendiente{background:#dbeafe;color:#1d4ed8}
.badge-diagnostico{background:#fef3c7;color:#92400e}
.badge-listo{background:#d1fae5;color:#065f46}
.badge-entregado{background:#f1f5f9;color:#475569}
.caso-cliente{font-size:.82rem;color:var(--muted);margin-bottom:.3rem}
.caso-productos-preview{font-size:.78rem;color:var(--muted)}

/* Modal casos */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-box{background:#fff;border-radius:16px;width:min(720px,95vw);max-height:90vh;overflow-y:auto;padding:1.5rem;position:relative}
.modal-box h5{font-size:1rem;font-weight:700;margin-bottom:1rem;color:var(--text)}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted)}
.form-label-sm{font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.2rem;display:block}
.form-control-sm2{width:100%;padding:.38rem .65rem;border:1px solid var(--border);border-radius:8px;font-size:.83rem;background:#fff}
.prod-row{display:grid;grid-template-columns:1fr 1fr 1.5fr auto;gap:.5rem;align-items:center;margin-bottom:.5rem}

/* Firma canvas */
.firma-box{border:2px dashed var(--border);border-radius:10px;padding:.5rem;text-align:center;background:#fafafa}
.firma-box canvas{border:1px solid var(--border);border-radius:6px;background:#fff;touch-action:none;cursor:crosshair}
.firma-box .firma-label{font-size:.72rem;color:var(--muted);margin-top:.3rem}

/* Detalle caso */
.detalle-section{margin-bottom:1.2rem}
.detalle-section h6{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;padding-bottom:.25rem;border-bottom:1px solid var(--border)}
.detalle-field{display:flex;gap:.5rem;font-size:.83rem;margin-bottom:.2rem}
.detalle-field strong{min-width:90px;color:var(--muted)}
.img-thumb{width:90px;height:70px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid var(--border)}
.img-grid{display:flex;flex-wrap:wrap;gap:.5rem}

/* ── LOGIN ── */
.login-wrapper{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);
}
.login-card{
  background:#fff;border-radius:20px;padding:2.5rem;width:min(420px,92vw);
  box-shadow:0 25px 60px rgba(0,0,0,.3);
}
.login-card .logo-wrap{text-align:center;margin-bottom:1.5rem}
.login-card .logo-dark-bg{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  border-radius:14px;padding:1.2rem 1.5rem;margin-bottom:1rem;
}
.login-card .logo-dark-bg img{width:180px;opacity:.95}
.login-card h4{text-align:center;font-weight:800;color:var(--text);margin-bottom:.25rem}
.login-card .subtitle{text-align:center;font-size:.82rem;color:var(--muted);margin-bottom:1.5rem}
.login-card .form-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.login-card .form-control{
  border-radius:10px;padding:.6rem .9rem;font-size:.88rem;
  border:1.5px solid var(--border);transition:border-color .15s;
}
.login-card .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.login-card .btn-login{
  width:100%;padding:.65rem;border-radius:10px;font-size:.9rem;font-weight:700;
  background:linear-gradient(135deg,#1d4ed8,#3b82f6);border:none;color:#fff;
  transition:transform .15s,box-shadow .15s;
}
.login-card .btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(59,130,246,.35)}
.login-card .alert{font-size:.82rem;border-radius:10px}

/* ── USER BADGE (topbar) ── */
.user-badge{
  display:flex;align-items:center;gap:.5rem;
  padding:.25rem .6rem;border-radius:8px;background:#f1f5f9;
  font-size:.78rem;font-weight:600;color:var(--text);
}
.user-badge i{color:var(--blue)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .sidebar{width:56px}.brand-logo,.brand-text,.nav-item span,.nav-section,.notif-pill{display:none}
  .main{margin-left:56px}.topbar{left:56px}
  .prod-row{grid-template-columns:1fr 1fr;}.prod-row input:last-child{grid-column:span 2}
}