:root{
  --primary:#0ea5e9;           /* Color corporativo (cámbialo en Apariencia) */
  --bg:#0b1220;                /* Fondo general (modo oscuro elegante) */
  --panel:#0f172a;             /* Paneles/cards */
  --panel-2:#111827;           /* Hover/contraste */
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#1f2937;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
}
/* ===== Tema claro (toggle) ===== */
:root[data-theme="light"]{
  --primary:#0ea5e9;
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel-2:#f3f4f6;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
}

/* Ajustes visuales para claro */
:root[data-theme="light"] body{ background:var(--bg); color:var(--text) }
:root[data-theme="light"] .sidebar{
  background:linear-gradient(180deg, #ffffff, #f8fafc);
  border-right:1px solid var(--border);
}
:root[data-theme="light"] .topbar{ background:rgba(255,255,255,.75) }
:root[data-theme="light"] .nav a:hover{ background:#eef2f7; border-color:var(--border) }
:root[data-theme="light"] .nav a.active{ background:rgba(14,165,233,.12); border-color:rgba(14,165,233,.35) }
:root[data-theme="light"] .card{ box-shadow:0 10px 25px rgba(0,0,0,.08) }
:root[data-theme="light"] .table tbody tr:hover{ background:#eef2f7 }
:root[data-theme="light"] .btn{ background:var(--panel-2); border-color:var(--border); color:var(--text) }
:root[data-theme="light"] .badge{ background:#eef2f7; color:#111827 }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ===== Layout CRM ===== */
.layout{ display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh }
.main{ min-width:0 } /* evita que el contenido cree overflow y respete el 1fr */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr }
  .sidebar{ position:fixed; inset:0 30% 0 0; transform:translateX(-100%); transition:transform .2s ease; z-index:50 }
  .sidebar.open{ transform:none }
  .sidebar-scrim{ display:none }
  .sidebar.open + .sidebar-scrim{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40 }
}

/* ===== Sidebar ===== */
.sidebar{
  background:linear-gradient(180deg, #0f172a, #0b1321);
  border-right:1px solid var(--border);
  padding:1rem .8rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem; padding:.4rem .4rem .8rem;
}
.brand img{ height:36px; width:auto; border-radius:.5rem }
.brand h1{ font-size:1.05rem; margin:0; font-weight:700; letter-spacing:.2px }
.nav-section{ margin-top:1rem }
.nav-title{ color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin:.8rem .6rem }
.nav{
  display:flex; flex-direction:column; gap:.2rem;
}
.nav a{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem; border-radius:.6rem; color:var(--text); text-decoration:none;
  border:1px solid transparent;
}
.nav a:hover{ background:var(--panel-2); border-color:var(--border) }
.nav a.active{ background:rgba(14,165,233,.12); border-color:rgba(14,165,233,.25) }

/* ===== Topbar ===== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1rem; border-bottom:1px solid var(--border); background:rgba(15,23,42,.6); backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:30;
}
.topbar .left{ display:flex; align-items:center; gap:.6rem }
.hamburger{ display:none; border:1px solid var(--border); background:var(--panel); padding:.4rem .5rem; border-radius:.5rem; cursor:pointer }
@media (max-width: 980px){ .hamburger{ display:inline-flex } }
.userchip{ color:var(--muted); font-size:.92rem }

/* ===== Content ===== */
.content{ padding: 1.2rem 1.2rem 2rem }
.container{ max-width:1200px; margin:0 auto }

/* ===== Cards / Panels ===== */
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card + .card{ margin-top:1rem }
h2{ font-size:1.2rem; margin:.2rem 0 .8rem }
h3{ font-size:1.05rem; margin:.2rem 0 .8rem }

/* ===== Forms ===== */
input, select, textarea{
 color:var(--text); border:1px solid var(--border); border-radius:.6rem; width:100%;
}
label{ display:block; font-size:.88rem; color:var(--muted); margin-bottom:.25rem }
form .row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem }
@media (max-width: 860px){ form .row{ grid-template-columns:1fr } }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .75rem; border-radius:.7rem;
  border:1px solid var(--border); background:var(--panel-2); color:var(--text); cursor:pointer; text-decoration:none;
}
.btn:hover{ filter:brightness(1.05) }
.btn-primary{ background:var(--primary); border-color:transparent; color:#fff }
.btn-danger{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.35); color:#fecaca }
.btn-ghost{ background:transparent }

/* ===== Badges & helpers ===== */
.badge{ display:inline-block; padding:.2rem .5rem; border-radius:.5rem; background:#1f2937; font-size:.8rem; color:#cbd5e1 }
.kpi{ display:flex; align-items:center; gap:.6rem }
.kpi .dot{ width:8px; height:8px; background:var(--primary); border-radius:999px }

/* ===== Table (CRM) ===== */
.table{ width:100%; border-collapse:separate; border-spacing:0 6px }
.table thead th{
  text-align:left; font-size:.78rem; color:var(--muted); font-weight:600; padding:.5rem .7rem; border-bottom:1px solid var(--border);
}
.table tbody tr{
  background:var(--panel); border:1px solid var(--border);
}
.table tbody td{
  padding:.65rem .7rem; border-top:1px solid var(--border);
}
.table tbody tr:hover{ background:#0f1a2f }

/* ===== Breadcrumbs ===== */
.breadcrumbs{ color:var(--muted); font-size:.9rem; margin:.2rem 0 .8rem }
.breadcrumbs a{ color:#93c5fd; text-decoration:none }
.breadcrumbs a:hover{ text-decoration:underline }

/* ===== Pagination ===== */
.pager{ display:flex; gap:.4rem; justify-content:center; margin-top:1rem; flex-wrap:wrap }
.pager .btn[disabled]{ opacity:.5; pointer-events:none }
.pager .current{ background:#1f2937; color:#fff }

/* ===== Utilities ===== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media (max-width: 860px){ .grid-2{ grid-template-columns:1fr } }