/* ==========================================================================
   PassNow CRM – Design System CSS (PRO)
   Ruta: /assets/css/app.css
   ========================================================================== */

/* ===== Reset + tokens ===== */
:root {
  /* Tipografía y escalas */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --fs-12: 0.75rem;  --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem;
  --fs-20: 1.25rem; --fs-24: 1.5rem;   --fs-28: 1.75rem;

  /* Colores (light) */
  --brand:#0f62fe; --brand-600:#1558d6;
  --bg:#f7f8fb;   --card:#ffffff; --surface:#f1f5f9;
  --text:#1f2330; --muted:#667085; --line:#e6e8ef;

  /* Estados */
  --success:#16a34a; --warning:#f59e0b; --danger:#ef4444; --info:#06b6d4;

  /* Radios y sombras */
  --radius-8:8px; --radius-10:10px; --radius-12:12px; --radius-14:14px; --radius-16:16px;
  --shadow-sm:0 2px 10px rgba(23,29,43,.06);
  --shadow-md:0 8px 24px rgba(23,29,43,.08);
  --shadow-lg:0 18px 40px rgba(23,29,43,.12);

  /* Focus ring accesible */
  --ring:0 0 0 3px rgba(15,98,254,.18);

  /* iOS safe areas */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand:#4f83ff; --brand-600:#3d6ee0;
    --bg:#0d1117; --card:#0f172a; --surface:#0b1220;
    --text:#e6edf3; --muted:#9aa7b2; --line:#1f2937;
    --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  }
}

/* Modo oscuro manual */
[data-theme="dark"] {
  --brand:#4f83ff; --brand-600:#3d6ee0;
  --bg:#0d1117; --card:#0f172a; --surface:#0b1220;
  --text:#e6edf3; --muted:#9aa7b2; --line:#1f2937;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 var(--fs-14)/1.6 var(--font-sans);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Accesibilidad: focus ring */
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px}

/* ===== Utilidades ===== */
.hidden{display:none!important}
.m-0{margin:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.p-8{padding:8px}.p-12{padding:12px}.p-16{padding:16px}.p-20{padding:20px}
.grid{display:grid}.grid-2{grid-template-columns:1fr 1fr;gap:12px}.grid-3{grid-template-columns:repeat(3,1fr);gap:12px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-8{gap:8px}.gap-12{gap:12px}
.text-muted{color:var(--muted)}.text-sm{font-size:var(--fs-12)}.text-base{font-size:var(--fs-14)}.text-lg{font-size:var(--fs-18)}.text-xl{font-size:var(--fs-24);font-weight:700}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:20;
  padding:calc(10px + var(--safe-t)) 12px 10px 12px;
  background:var(--card); box-shadow:var(--shadow-md);
  display:flex; gap:10px; align-items:center;
}

/* En desktop, deja espacio para la sidebar fija */
@media (min-width:1024px){
  .topbar{ padding-left: calc(240px + 12px); }
}

.tb-chip{
  padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface); color:#0b4fd6;
}
[data-theme="dark"] .tb-chip{ color:#95b4ff }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 12px; border:1px solid var(--line);
  background:#fff; color:inherit; border-radius:var(--radius-10);
  cursor:pointer; transition:transform .02s ease, background .2s ease, border-color .2s ease;
}
[data-theme="dark"] .btn{ background:transparent }
.btn:hover{ border-color:rgba(0,0,0,.12) }
.btn:active{ transform:translateY(1px) }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff }
.btn.primary:hover{ background:var(--brand-600); border-color:var(--brand-600) }
.btn.ghost{ background:var(--surface) }
.btn.icon{ padding:8px 10px }

/* Buscador */
.search{flex:1; display:flex; gap:8px}
.search input{
  flex:1; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--radius-10); background:#fbfcff; color:inherit;
}
[data-theme="dark"] .search input{ background:var(--surface); border-color:#162036 }

/* ===== Sidebar ===== */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:240px;
  background:#0b1a3a; color:#e6ecff; padding:14px;
  transform:translateX(-100%); transition:transform .22s ease;
  z-index:30; /* por encima del backdrop y topbar */
}
.sidebar.open{ transform:translateX(0) }
.sidebar .logo{ font-weight:700; margin-bottom:10px; letter-spacing:.2px; display:flex; align-items:center; justify-content:space-between; gap:8px }
.menu{ display:flex; flex-direction:column; gap:6px; overflow:auto; height:calc(100% - 48px) }
.menu a, .menu .item{ color:#e6ecff; padding:10px 12px; border-radius:10px }
.menu a:hover, .menu .item:hover, .menu .item.active{ background:rgba(255,255,255,.12) }

/* Botón cerrar (solo móvil) */
.sidebar-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.1); color:#e6ecff;
  border:1px solid rgba(255,255,255,.15);
}
@media (min-width:1024px){ .sidebar-close{ display:none } }

/* Backdrop móvil */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px); z-index:25; display:none;
}
.backdrop.show{ display:block }

/* ===== Contenido ===== */
.content{ padding:14px; margin-left:0 }
@media (min-width:1024px){
  .sidebar{ transform:none }            /* visible fija */
  .content{ margin-left:240px }         /* espacio lateral */
  #btnOpenSidebar{ display:none }       /* sin hamburguesa en desktop */
}

/* ===== Cards y títulos ===== */
.card{
  background:var(--card); color:inherit;
  border-radius:var(--radius-12); box-shadow:var(--shadow-md);
  padding:14px; margin-bottom:12px;
}
h1,h2,h3{ margin:0 0 10px 0 }
h2{ font-size:var(--fs-20); font-weight:700 }
h3{ font-size:var(--fs-16); font-weight:600 }

/* ===== KPIs ===== */
.kpis{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
@media (min-width:1024px){ .kpis{ grid-template-columns:repeat(4,1fr) } }
.kpi{
  background:var(--card); border-radius:var(--radius-12); box-shadow:var(--shadow-md);
  padding:14px; position:relative; overflow:hidden;
}
.kpi .label{ color:var(--muted); font-size:var(--fs-12) }
.kpi .value{ font-size:var(--fs-24); font-weight:700; margin-top:4px }
.kpi .trend{ font-size:var(--fs-12); margin-top:2px }
.kpi .mini{ height:8px; background:var(--surface); border-radius:999px; overflow:hidden; margin-top:8px }
.kpi .mini span{ display:block; height:100%; width:50%; background:rgba(15,98,254,.22) }
.kpi.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:shimmer 1.1s infinite; opacity:.35; pointer-events:none;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ===== Tablas ===== */
table{ width:100%; border-collapse:collapse }
th,td{ padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; font-size:var(--fs-14); vertical-align:top }
th{ color:var(--muted); font-weight:600 }
tr:hover td{ background:rgba(15,98,254,.03) }
[data-theme="dark"] tr:hover td{ background:rgba(79,131,255,.06) }
.table-zebra tbody tr:nth-child(odd) td{ background:rgba(0,0,0,.015) }
[data-theme="dark"] .table-zebra tbody tr:nth-child(odd) td{ background:rgba(255,255,255,.025) }

/* Chips de estado */
.status{ padding:6px 10px; border-radius:999px; font-size:var(--fs-12); display:inline-block }
.st-hot{ background:#ecfdf5; color:#065f46 }
.st-warm{ background:#fffbeb; color:#92400e }
.st-cold{ background:#eef2ff; color:#3730a3 }

/* ===== Formularios ===== */
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--radius-10); background:#fff; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:var(--surface); border-color:#162036;
}
input:focus,select:focus,textarea:focus{ box-shadow:var(--ring); border-color:var(--brand) }
label{ font-size:var(--fs-12); color:var(--muted); display:block; margin-bottom:6px }

/* Filtros inline */
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px }
.input{ padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-10); background:transparent; color:inherit }

/* Breadcrumb */
.breadcrumb{ font-size:var(--fs-12); color:var(--muted); margin-bottom:8px }

/* Agenda */
.agenda{ display:flex; flex-direction:column; gap:8px }
.slot{ padding:10px 12px; border:1px dashed var(--line); border-radius:12px; background:var(--card) }

/* FAB móvil */
.fab{
  position:fixed; left:0; right:0; bottom:0; z-index:15;
  display:flex; gap:10px; justify-content:space-around;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  padding:10px 10px calc(10px + var(--safe-b)) 10px;
}
[data-theme="dark"] .fab{ background:rgba(15,23,42,.85) }

/* Chips / Badges */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface); cursor:pointer; font-size:var(--fs-12);
}
.chip.active{ background:rgba(15,98,254,.08); border-color:rgba(15,98,254,.26); color:var(--brand-600) }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:var(--fs-12); background:var(--surface); color:var(--muted) }
.badge.success{ background:#ecfdf5; color:#0f5132 }
.badge.warn{ background:#fff7ed; color:#9a3412 }
.badge.danger{ background:#fee2e2; color:#991b1b }
.badge.info{ background:#e0f7fb; color:#0b7285 }

/* Toolbars */
.toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }

/* Skeleton genérico */
.skeleton{ position:relative; overflow:hidden; background:var(--surface); border-radius:8px; min-height:12px }
.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); animation:shimmer 1.1s infinite; opacity:.35 }

/* Responsive móvil */
@media (max-width:1023.98px){
  .topbar{ z-index:25 }
  .tb-chip{ display:none }
  .content{ margin-left:0; padding-bottom:calc(64px + var(--safe-b)) } /* espacio para FAB */
}

/* Alertas */
.alert{ padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface) }
.alert.success{ border-color:#16a34a33 }
.alert.warn{ border-color:#f59e0b33 }
.alert.danger{ border-color:#ef444433 }

/* Motion preferencia */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important }
}

/* Print */
@media print{
  .sidebar,.topbar,.fab{ display:none!important }
  .content{ margin:0!important }
}