/* ============================================================
   TEMA GLOBAL ML-MANAGER = LANDING (Task 50)
   Papel crema + tinta + amarillo ácido · Fraunces/Karla/Plex Mono
   Estrategia: remapear las variables --ml-* del panel y ajustar
   componentes clave. Se carga AL FINAL (gana la cascada).
   No toca JS ni estructura → cero riesgo funcional.
   ============================================================ */

:root {
  /* Papel y tinta */
  --ml-bg: #f1eee4;            /* paper */
  --ml-bg-soft: #e7e3d5;       /* paper-2 */
  --ml-card: #faf7ee;          /* papel claro para cards */
  --ml-text: #16150f;          /* ink */
  --ml-text-light: #625f52;    /* ink-2 */
  --ml-text-muted: #625f52;
  --ml-border: #16150f33;
  --ml-border-soft: #16150f1f;

  /* Superficies oscuras -> tinta */
  --ml-dark: #16150f;
  --ml-sidebar: #16150f;
  --ml-sidebar-hover: #2c2a20;

  /* Acción primaria -> tinta (hover amarillo ácido) */
  --ml-blue: #16150f;
  --ml-blue-light: #3a382c;
  --ml-blue-dark: #000000;

  /* Semáforo del landing */
  --ml-yellow: #ffe600;
  --ml-success: #0e8a5f;       /* mint */
  --ml-warning: #f5cf00;       /* acid-deep */
  --ml-danger: #e8442e;        /* alert */

  /* Landing = plano, sin sombras difusas */
  --shadow-sm: 0 0 0 rgba(0,0,0,0);
  --shadow-md: 0 0 0 rgba(0,0,0,0);
  --shadow-lg: 0 0 0 rgba(0,0,0,0);
  --shadow-xl: 0 0 0 rgba(0,0,0,0);
}

/* ===== Tipografías del landing ===== */
body, .form-control, select, textarea, button, .data-table, .badge {
  font-family: 'Karla', 'Segoe UI', sans-serif !important;
}

h1, h2, h3, .page-header h1, .stat-value, .modal-header h3,
.sidebar-header h2, .auth-card h1, .empty-state h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -0.02em;
}

/* Etiquetas y datos en mono (terminal del landing) */
.stat-label, .nav-section, .notification-count, .badge,
.card-header, .table-responsive th, .data-table th {
  font-family: 'IBM Plex Mono', monospace !important;
}

.card-header {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px !important;
}

/* ===== Botones: tinta con hover ácido ===== */
.btn, .btn-sm, .btn-lg {
  border-radius: 0 !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary {
  background: #16150f !important;
  color: #f1eee4 !important;
  border: 2px solid #16150f !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: #ffe600 !important;
  color: #16150f !important;
}
.btn-outline {
  background: transparent !important;
  color: #16150f !important;
  border: 2px solid #16150f !important;
}
.btn-outline:hover { background: #ffe600 !important; color: #16150f !important; }
.btn-danger, .btn-success { border-radius: 0 !important; }

/* ===== Cards y tablas: papel con borde tinta, radius 0 ===== */
.card, .stat-card, .modal, .form-control, select, textarea,
.data-table th, .data-table td, .alert, .badge {
  border-radius: 0 !important;
}
.card {
  border: 1px solid var(--ml-border) !important;
  box-shadow: none !important;
}
.stat-card { border: 1px solid var(--ml-border) !important; }
.stat-card:hover { border-color: #16150f !important; }
.data-table th {
  border-bottom: 2px solid #16150f !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px !important;
  color: #625f52 !important;
  background: transparent !important;
}

/* ===== Sidebar tinta con acento ácido ===== */
.sidebar {
  background: #16150f !important;
  border-right: 1px solid #16150f;
}
.sidebar-nav a { color: #f1eee4d9 !important; }
.sidebar-nav a:hover { background: #2c2a20 !important; color: #f1eee4 !important; }
.sidebar-nav a.active {
  background: rgba(255,230,0,0.10) !important;
  color: #ffe600 !important;
  box-shadow: inset 3px 0 0 #ffe600;
}
.nav-section { color: #f1eee473 !important; }
.sidebar-header h2 { color: #f1eee4 !important; }

/* ===== Login/registro: papel + card tinta ===== */
.auth-container {
  background: var(--ml-bg) !important;
  background-image: radial-gradient(#16150f12 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}
.auth-card {
  background: #faf7ee !important;
  border: 2px solid #16150f !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 #16150f22 !important;
}
.auth-card .logo { border-radius: 0 !important; }
.auth-card a, .auth-card #authToggle { color: #16150f !important; text-decoration: underline; }

/* ===== Modales y alertas ===== */
.modal { border: 2px solid #16150f !important; box-shadow: 10px 10px 0 #16150f22 !important; }
.modal-header { border-bottom: 2px solid #16150f !important; }
.alert-info { border-left: 4px solid #16150f !important; }
.alert-success { border-left: 4px solid #0e8a5f !important; }
.alert-warning { border-left: 4px solid #f5cf00 !important; }
.alert-danger { border-left: 4px solid #e8442e !important; }

/* ===== Enlaces y detalle ===== */
a { color: inherit; }
.page-header h1 { font-size: 26px !important; }
.empty-state .empty-icon { filter: grayscale(0.2); }

/* Badge de trial en el sidebar (ya usaba ácido) coherente */
#planTrialCount { background: #ffe600 !important; color: #16150f !important; border: 1px solid #16150f; }

/* ===== KPIs y filtros del super admin ===== */
.ad-kpis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.ad-kpi {
  border: 2px solid #16150f; background: #faf7ee; padding: 14px;
}
.ad-kpi-num {
  font-family: 'Fraunces', serif; font-size: 26px; line-height: 1; color: #16150f;
}
.ad-kpi-lab {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #625f52; margin-top: 6px;
}
.ad-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ad-input {
  border: 2px solid #16150f; background: #faf7ee; color: #16150f;
  padding: 8px 10px; font-family: 'Karla', sans-serif; font-size: 13px; border-radius: 0;
  min-width: 160px;
}
.ad-input:focus { outline: 2px solid #ffe600; outline-offset: 0; }