/* ============================================================
   SMART BUSINESS — Design System v2.0 (Dark)
   Mejores Decisiones · smart-business.cl
   ============================================================
   Reemplaza la v1.1 (tema claro/navy) por el tema oscuro con acento
   cian desarrollado y validado en SmartControl (Control de Gas).
   Fondo casi negro, tarjetas con borde definido, un solo color de
   acento, badges de estado con fondo tenue, tablas densas con
   celdas bordeadas. Los nombres de clase se mantienen iguales a la
   v1.1 para que los proyectos existentes solo necesiten actualizar
   este archivo, sin tocar su HTML/JSX.
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

/* ── Tokens de marca ──────────────────────────────────────── */
:root {
  /* Superficie (oscura) */
  --bg:             #07101c;
  --surface:        #0d1b2a;   /* = --card, alias abajo */
  --card:           #0d1b2a;
  --elevated:       #112240;
  --row-hover:      #1a2e4a;
  --border:         #1e3a5f;
  --border-strong:  #2c4a73;

  /* Acento único de marca — cian Smart Business */
  --sb-blue:        #00aeef;   /* Acento primario (antes azul fuerte #0563C7) */
  --sb-blue-soft:   #33c1f3;   /* Variante clara, hover de texto/íconos      */
  --sb-blue-dark:   #0089bc;   /* Hover de botones                          */
  --sb-navy:        #050d18;   /* Fondo del sidebar (más oscuro que --card) */
  --sb-blue-mid:    #33c1f3;
  --sb-blue-light:  rgba(0,174,239,.12);  /* fondo tenue (hover filas, focos) */
  --sb-blue-dim:    rgba(0,174,239,.20);
  --sb-gradient:    linear-gradient(90deg, #00aeef, #33c1f3);
  --sb-gradient-bg: radial-gradient(circle at 20% 20%, #0d2440 0%, #050d18 60%);

  /* Semánticos — con variante de fondo tenue + texto de color para badges */
  --ok:             #10b981;
  --ok-dim:         rgba(16,185,129,.15);
  --ok-text:        #34d399;
  --warn:           #f59e0b;
  --warn-dim:       rgba(245,158,11,.15);
  --warn-text:      #fcd34d;
  --danger:         #ef4444;
  --danger-dim:     rgba(239,68,68,.15);
  --danger-text:    #f87171;
  --info:           #00aeef;
  --info-dim:       rgba(0,174,239,.15);
  --info-text:      #33c1f3;
  --purple:         #a78bfa;   /* 5º color semántico — estados "sin datos"/otros, NUNCA gris/plomo */
  --purple-dim:     rgba(167,139,250,.15);
  --purple-text:    #c4b5fd;

  /* Texto */
  --text:           #e8edf3;
  --text-mid:       #c3cdd6;
  --muted:          #90a4ae;
  --faint:          #546e7a;

  /* Sidebar */
  --sidebar-bg:          #050d18;
  --sidebar-hover:       #112240;
  --sidebar-active:      #00aeef;
  --sidebar-border:      #0d1826;
  --sidebar-text:        #90a4ae;
  --sidebar-text-active: #071019;  /* texto oscuro sobre el activo cian, para contraste */

  /* Sombras (más marcadas sobre fondo oscuro) */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.35);
  --shadow:     0 4px 16px rgba(0,0,0,.45);
  --shadow-md:  0 8px 28px rgba(0,0,0,.50);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.55);
  --shadow-btn: 0 4px 14px rgba(0,174,239,.35);

  /* Radio */
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  26px;

  /* Tipografía — Inter para todo (cuerpo y títulos). Plus Jakarta Sans queda
     disponible como opción de "display" para portadas/hero de marketing,
     pero los componentes de producto usan Inter en negrita. */
  --font-body:  'Inter', system-ui, sans-serif;
  --font-head:  'Inter', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;

  /* Transiciones */
  --transition: all .15s ease;

  /* Aliases de compatibilidad con v1.1 */
  --accent:     var(--sb-blue);
  --accent-dim: var(--sb-blue-light);
  --line:       var(--border);
  --text-dim:   var(--muted);
}

/* ── Reset base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout principal ─────────────────────────────────────── */
.app-shell   { display: flex; min-height: 100vh; }
.sidebar     { width: 220px; flex-shrink: 0; background: var(--sidebar-bg);
               border-right: 1px solid var(--sidebar-border);
               display: flex; flex-direction: column; padding: 0; }
.main-area   { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar      { height: 52px; background: var(--surface); border-bottom: 1px solid var(--border);
               display: flex; align-items: center; justify-content: space-between;
               padding: 0 24px; flex-shrink: 0; }
.page-body   { flex: 1; overflow-y: auto; padding: 24px 28px 60px; background: var(--bg); }

/* ── Sidebar ──────────────────────────────────────────────── */
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 16px; border-bottom: 1px solid var(--sidebar-border);
}
.sb-mark {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--sb-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #071019; letter-spacing: -0.5px;
  font-family: var(--font-head); flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(0,174,239,.45);
}
.sb-brand-name  { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; }
.sb-brand-sub   { font-size: 10px; color: var(--sidebar-text); letter-spacing: .08em; text-transform: uppercase; }

.sb-section-label {
  font-size: 10px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .1em;
  padding: 18px 18px 6px;
}
.sb-nav { display: flex; flex-direction: column; padding: 4px 10px; gap: 2px; }
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--sidebar-text); font-size: 13.5px; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: var(--transition);
  background: none; border: none; width: 100%; text-align: left;
}
.sb-link:hover  { background: var(--sidebar-hover); color: #fff; }
.sb-link.active { background: var(--sidebar-active); color: var(--sidebar-text-active); font-weight: 700;
                  box-shadow: 0 2px 10px rgba(0,174,239,.40); }
.sb-link .icon  { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }

.sb-user {
  margin-top: auto; padding: 14px 18px;
  border-top: 1px solid var(--sidebar-border);
  display: flex; align-items: center; gap: 10px;
}
.sb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sb-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #071019; flex-shrink: 0;
}
.sb-user-name { font-size: 12.5px; font-weight: 600; color: #e2e8f0; }
.sb-user-role { font-size: 10px; color: var(--sidebar-text); text-transform: uppercase; letter-spacing: .05em; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
/* Títulos: siempre la misma tipografía, tamaño, negrita y color de acento —
   nunca texto plano/gris para un título. */
.card h3, .card h4 { font-size: 15px; font-weight: 700; color: var(--sb-blue); margin-bottom: 14px; font-family: var(--font-head); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* Título de sección (separador dentro de una página larga, sin otra tarjeta) */
.section-title {
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  color: var(--sb-blue); margin: 26px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}

/* ── KPI cards ────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi  {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow-sm); transition: var(--transition);
}
.kpi:hover { border-color: var(--sb-blue); box-shadow: 0 4px 16px rgba(0,174,239,.18); }
.kpi .n    { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; font-family: var(--font-head); letter-spacing: -.4px; }
.kpi .l    { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
/* Nunca dejar un KPI en gris/plomo por defecto — siempre asignar un color
   semántico (--sb-blue / --ok / --warn / --danger / --purple) según el dato. */

/* ── Botones ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--sb-blue); transition: var(--transition); width: 100%;
  background: var(--sb-blue); color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn:hover    { background: var(--sb-blue-dark); border-color: var(--sb-blue-dark); box-shadow: 0 6px 18px rgba(0,174,239,.45); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.secondary { background: var(--elevated); color: var(--text); border: 1.5px solid var(--border); box-shadow: none; }
.btn.secondary:hover { background: var(--row-hover); box-shadow: none; }
.btn.ghost    { background: transparent; color: var(--sb-blue); border: 1.5px solid var(--sb-blue); box-shadow: none; }
.btn.ghost:hover { background: var(--sb-blue-light); }
.btn.danger   { background: transparent; color: var(--danger-text); border: 1.5px solid var(--danger); box-shadow: none; }
.btn.danger:hover { background: var(--danger-dim); }
.btn.small    { padding: 5px 12px; font-size: 12px; width: auto; }

/* ── Formularios ──────────────────────────────────────────── */
.field        { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label  { font-size: 12px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: .04em; }
input, select, textarea {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--elevated);
  font-size: 13.5px; color: var(--text); font-family: var(--font-body);
  transition: var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sb-blue); box-shadow: 0 0 0 3px rgba(0,174,239,.15);
}
input[readonly] { background: var(--bg); color: var(--muted); }
textarea       { min-height: 80px; resize: vertical; }
.grid          { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

/* ── Tablas ───────────────────────────────────────────────── */
table          { width: 100%; border-collapse: collapse; font-size: 13px; }
thead          { border-bottom: 2px solid var(--border); }
th             { padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 700;
                 color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
                 background: var(--elevated); border: 1px solid var(--border); }
td             { padding: 9px 12px; border: 1px solid var(--border); color: var(--text); }
tbody tr       { transition: var(--transition); }
tbody tr:hover td { background: var(--row-hover); }
/* Resalta la mejor/peor fila de un ranking (ej. cumplimiento por sucursal) */
tr.rank-best  td.rank-label { color: var(--ok-text); font-weight: 700; }
tr.rank-worst td.rank-label { color: var(--danger-text); font-weight: 700; }

/* ── Badges / Pills — SIEMPRE con color, nunca gris por defecto ─────────── */
/* Variante sólida (fondo de color plano + texto blanco) — para categorías/
   estados discretos con su propio color de marca. */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: #fff;
}
.badge.blue    { background: var(--sb-blue); color: #071019; }
.badge.navy    { background: var(--sb-navy); color: #fff; border: 1px solid var(--border); }
.badge.green   { background: var(--ok); color: #052e1a; }
.badge.amber   { background: var(--warn); color: #451a03; }
.badge.red     { background: var(--danger); color: #fff; }
.badge.purple  { background: var(--purple); color: #2e1065; }
/* Variante "suave" (fondo tenue + texto de color) — la preferida para
   porcentajes y valores dentro de tablas densas. */
.badge.soft-green  { background: var(--ok-dim);      color: var(--ok-text); }
.badge.soft-amber  { background: var(--warn-dim);    color: var(--warn-text); }
.badge.soft-red    { background: var(--danger-dim);  color: var(--danger-text); }
.badge.soft-blue   { background: var(--sb-blue-light); color: var(--sb-blue-soft); }
.badge.soft-purple { background: var(--purple-dim);  color: var(--purple-text); }

/* ── Alertas ──────────────────────────────────────────────── */
.alert         { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; border-left: 3px solid; background: var(--elevated); }
.alert.info    { color: var(--info-text); border-color: var(--info); }
.alert.success { color: var(--ok-text); border-color: var(--ok); }
.alert.warning { color: var(--warn-text); border-color: var(--warn); }
.alert.error   { color: var(--danger-text); border-color: var(--danger); }
.error-banner  { background: var(--danger-dim); color: var(--danger-text); padding: 10px 14px;
                 border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px;
                 border: 1px solid var(--danger); }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs          { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 16px; gap: 4px; }
.tab-btn       { padding: 9px 18px; background: none; border: none; border-bottom: 2px solid transparent;
                 margin-bottom: -2px; cursor: pointer; font-size: 13.5px; font-weight: 500;
                 color: var(--muted); transition: var(--transition); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab-btn:hover  { color: var(--sb-blue); background: var(--sb-blue-light); }
.tab-btn.active { color: var(--sb-blue); border-bottom-color: var(--sb-blue); font-weight: 700; }

/* ── Filtros ──────────────────────────────────────────────── */
.filters       { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filters select { width: auto; min-width: 160px; }

/* ── Empty state ──────────────────────────────────────────── */
.empty         { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 13px; }

/* ── Login (fondo radial oscuro, tarjeta flotante) ─────────── */
.login-bg {
  min-height: 100vh;
  background: var(--sb-gradient-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px; position: relative; overflow: hidden;
}
.login-card-wrap {
  display: flex; width: 100%; max-width: 940px;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.login-panel-dark {
  flex: 1; padding: 52px 48px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
}
.login-panel-white {
  width: 420px; flex-shrink: 0; background: var(--surface);
  padding: 44px 40px; display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
}

/* ── Utilidades ───────────────────────────────────────────── */
.text-blue     { color: var(--sb-blue); }
.text-navy     { color: var(--muted); }
.text-muted    { color: var(--muted); }
.text-ok       { color: var(--ok-text); }
.text-warn     { color: var(--warn-text); }
.text-danger   { color: var(--danger-text); }
.text-purple   { color: var(--purple-text); }
.font-head     { font-family: var(--font-head); }
.font-display  { font-family: var(--font-display); }
.shadow        { box-shadow: var(--shadow); }
.shadow-md     { box-shadow: var(--shadow-md); }
.rounded       { border-radius: var(--radius); }
.rounded-lg    { border-radius: var(--radius-lg); }
.surface       { background: var(--surface); }