/* ============================================================================
   OMNI CRM PRO — DESIGN SYSTEM v1
   Logibrand · 2026
   ----------------------------------------------------------------------------
   Sistema enterprise-flat (referencia: SAP Fiori / NetSuite / Siesa).
   Fuente única de verdad para color y tipografía en TODO el CRM.

   REGLAS:
   - Solo 6 familias de color (1 marca + neutros + 4 semánticos).
   - Solo 3 tipografías: Montserrat (títulos), Poppins (UI), Roboto (texto).
   - Contraste AA garantizado: cada color de texto está validado sobre su fondo.

   USO: cargar como ÚLTIMA hoja de estilos para que los tokens manden.
        En el código nuevo, usar SIEMPRE var(--token), nunca hex sueltos.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* ---- 1. MARCA (azul corporativo) ------------------------------------ */
  --primary:        #2563eb;   /* acción principal, links, estado activo   */
  --primary-hover:  #1d4ed8;
  --primary-active: #1e40af;
  --primary-soft:   #eff6ff;   /* fondo tenue de selección/realce          */
  --primary-border: #bfdbfe;
  --on-primary:     #ffffff;   /* texto sobre azul                          */

  /* ---- 2. NEUTROS (escala de grises — una sola familia) --------------- */
  --ink:            #1e293b;   /* texto principal (titulares, valores)      */
  --body:           #334155;   /* texto de cuerpo                           */
  --muted:          #64748b;   /* texto secundario, etiquetas, placeholders */
  --faint:          #94a3b8;   /* texto deshabilitado, ayudas               */
  --line:           #e2e8f0;   /* bordes, divisores                         */
  --line-strong:    #cbd5e1;   /* bordes de inputs/énfasis                  */
  --bg-subtle:      #f1f5f9;   /* fondo de sección/hover de fila            */
  --bg-page:        #f8fafc;   /* fondo general de la app                   */
  --surface:        #ffffff;   /* tarjetas, paneles, modales                */

  /* ---- 3-6. SEMÁNTICOS ------------------------------------------------- */
  --success:        #059669;   --success-soft: #ecfdf5;  --success-border:#a7f3d0;  --success-text:#065f46;
  --warning:        #d97706;   --warning-soft: #fffbeb;  --warning-border:#fde68a;  --warning-text:#92400e;
  --danger:         #dc2626;   --danger-soft:  #fef2f2;  --danger-border: #fecaca;  --danger-text: #991b1b;
  --info:           #0e7490;   --info-soft:    #ecfeff;  --info-border:   #a5f3fc;  --info-text:   #155e75;
  /* (info = cian sobrio; comparte rol "neutro-informativo", no compite con la marca) */

  /* ---- TIPOGRAFÍA ------------------------------------------------------ */
  --font-display: 'Montserrat', system-ui, sans-serif;  /* títulos, módulos  */
  --font-ui:      'Poppins', system-ui, sans-serif;     /* botones, labels   */
  --font-body:    'Roboto', system-ui, sans-serif;      /* cuerpo, tablas    */

  /* Escala tipográfica (enterprise: densa, base 14px) */
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px;
  --lh-tight: 1.25; --lh-normal: 1.5;

  /* ---- RADIOS, SOMBRAS, ESPACIO (planos, sobrios) --------------------- */
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow:    0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
}

/* ============================================================================
   BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Títulos: Montserrat. Nunca por debajo del contraste de --ink. */
h1, h2, h3, .ds-title {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
  font-weight: 700;
}
h1, .ds-title { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); font-weight: 600; }
h3 { font-size: var(--fs-md); font-weight: 600; font-family: var(--font-ui); }
h4, h5, h6 { font-family: var(--font-ui); font-weight: 600; color: var(--ink); margin: 0 0 var(--space-2); }

p { margin: 0 0 var(--space-3); color: var(--body); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

small, .ds-meta { font-size: var(--fs-sm); color: var(--muted); }

/* Números/monedas: Roboto con cifras tabulares (sin fuente mono extra) */
.ds-num, .num, [data-num], code, kbd, pre {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================================
   ETIQUETAS DE SECCIÓN / OVERLINE  (eyebrow azul de los módulos)
   ============================================================================ */
.ds-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ============================================================================
   BOTONES
   ============================================================================ */
.btn, button.ds, .ds-btn {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.btn-primary   { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active{ background: var(--primary-active); }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--bg-subtle); border-color: var(--muted); }

.btn-ghost     { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--primary-soft); }

.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }

.btn-success   { background: var(--success); color: #fff; }
.btn-success:hover { background: #047857; }

.btn:disabled, .ds-btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }
.btn-lg { padding: 12px 22px; font-size: var(--fs-md); }

/* ============================================================================
   TARJETAS / PANELES
   ============================================================================ */
.card, .ds-card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-body, .ds-card-body { padding: var(--space-5); }
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
}

/* KPI / métricas */
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.kpi-label { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-family: var(--font-ui); font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: var(--space-2); }
.kpi-sub   { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--space-1); }

/* ============================================================================
   TABLAS  (enterprise: densas, líneas finas, encabezado tenue)
   ============================================================================ */
table.ds, .ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.ds-table thead th {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
}
.ds-table tbody td {
  padding: 10px 14px;
  color: var(--body);
  border-bottom: 1px solid var(--line);
}
.ds-table tbody tr:hover { background: var(--bg-subtle); }
.ds-table .num, .ds-table [data-num] { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ============================================================================
   FORMULARIOS
   ============================================================================ */
label, .ds-label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
input, select, textarea, .ds-input {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 12px;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus, .ds-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ============================================================================
   BADGES / CHIPS / ESTADOS
   ============================================================================ */
.badge, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.4;
}
.badge-primary { background: var(--primary-soft); color: var(--primary-active); border-color: var(--primary-border); }
.badge-success { background: var(--success-soft); color: #047857; border-color: var(--success-border); }
.badge-warning { background: var(--warning-soft); color: #92400e; border-color: var(--warning-border); }
.badge-danger  { background: var(--danger-soft);  color: #b91c1c; border-color: var(--danger-border); }
.badge-info    { background: var(--info-soft);    color: var(--info); border-color: var(--info-border); }
.badge-neutral { background: var(--bg-subtle);    color: var(--body); border-color: var(--line); }

/* ============================================================================
   ALERTAS
   ============================================================================ */
.alert { border: 1px solid; border-radius: var(--radius); padding: 12px 14px; font-size: var(--fs-base); }
.alert-success { background: var(--success-soft); border-color: var(--success-border); color: #065f46; }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: #92400e; }
.alert-danger  { background: var(--danger-soft);  border-color: var(--danger-border);  color: #991b1b; }
.alert-info    { background: var(--info-soft);    border-color: var(--info-border);    color: var(--info); }

/* ============================================================================
   NAVEGACIÓN / TABS
   ============================================================================ */
.ds-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.ds-tab {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--muted);
  padding: 10px 16px;
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ds-tab:hover { color: var(--ink); }
.ds-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ============================================================================
   UTILIDADES DE CONTRASTE  (parche para herencia dark→light)
   Garantiza que ningún texto quede igual a su fondo.
   ============================================================================ */
.text-ink { color: var(--ink) !important; }
.text-body { color: var(--body) !important; }
.text-muted { color: var(--muted) !important; }
.bg-surface { background: var(--surface) !important; }
.bg-subtle  { background: var(--bg-subtle) !important; }

/* Salvaguarda: texto blanco solo permitido sobre fondos de marca/semánticos */
.on-dark { color: #fff !important; }