/* ============================================================
   DESIGN SYSTEM — RAM ENERGY CRM
   Clean / Light Professional (Notion / Stripe inspired)
   ============================================================ */

/* Google Fonts — Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Colores primarios (por defecto: azul corporativo) ── */
  --color-primary:        #2563EB;
  --color-primary-hover:  #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-primary-soft:   #EFF6FF;
  --color-primary-border: #BFDBFE;

  /* ── Semánticos ── */
  --color-success:        #059669;
  --color-success-hover:  #047857;
  --color-success-soft:   #F0FDF4;
  --color-success-border: #A7F3D0;

  --color-danger:         #DC2626;
  --color-danger-hover:   #B91C1C;
  --color-danger-soft:    #FEF2F2;
  --color-danger-border:  #FECACA;

  --color-warning:        #D97706;
  --color-warning-hover:  #B45309;
  --color-warning-soft:   #FFFBEB;
  --color-warning-border: #FDE68A;

  --color-info:           #0891B2;
  --color-info-soft:      #ECFEFF;
  --color-info-border:    #A5F3FC;

  /* ── Neutros ── */
  --color-bg:             #FFFFFF;
  --color-bg-subtle:      #F9FAFB;
  --color-bg-muted:       #F3F4F6;
  --color-bg-strong:      #E5E7EB;

  --color-border:         #E5E7EB;
  --color-border-strong:  #D1D5DB;
  --color-border-subtle:  #F3F4F6;

  --color-text:           #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted:     #9CA3AF;
  --color-text-disabled:  #D1D5DB;
  --color-text-inverse:   #FFFFFF;

  /* ── Tipografía ── */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:     0.6875rem;  /* 11px */
  --text-sm:     0.8125rem;  /* 13px */
  --text-base:   0.9375rem;  /* 15px */
  --text-md:     1rem;       /* 16px */
  --text-lg:     1.125rem;   /* 18px */
  --text-xl:     1.25rem;    /* 20px */
  --text-2xl:    1.5rem;     /* 24px */
  --text-3xl:    1.875rem;   /* 30px */
  --text-4xl:    2.25rem;    /* 36px */

  --font-light:   300;
  --font-normal:  400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* ── Espaciado ── */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1:   0.25rem;   /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2:   0.5rem;    /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */

  /* ── Sombras ── */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px var(--color-primary-soft);

  /* ── Radios de borde ── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-3xl:  16px;
  --radius-full: 9999px;

  /* ── Transiciones ── */
  --transition-fast:   all 0.1s ease;
  --transition-base:   all 0.15s ease;
  --transition-medium: all 0.2s ease;
  --transition-slow:   all 0.3s ease;

  /* ── Z-index ── */
  --z-base:    1;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* ── Layout ── */
  --sidebar-width:           256px;
  --sidebar-collapsed-width: 64px;
  --topbar-height:           60px;
  --content-max-width:       1400px;

  /* ── Aliases backwards-compat (templates heredados) ── */
  --primary-color:   var(--color-primary);
  --secondary-color: var(--color-success);
  --accent-color:    var(--color-warning);
  --success-color:   var(--color-success);
  --warning-color:   var(--color-warning);
  --danger-color:    var(--color-danger);
  --text-dark:       var(--color-text);
  --text-muted:      var(--color-text-muted);
  --bg-light:        var(--color-bg-subtle);
  --border-light:    var(--color-border);
  --text-light:      var(--color-text-inverse);
}

/* ── Overrides por rol ── */
body.role-asesor {
  --color-primary:        #059669;
  --color-primary-hover:  #047857;
  --color-primary-active: #065F46;
  --color-primary-soft:   #F0FDF4;
  --color-primary-border: #A7F3D0;
  --shadow-focus: 0 0 0 3px #F0FDF4;
}

body.role-admin {
  --color-primary:        #DC2626;
  --color-primary-hover:  #B91C1C;
  --color-primary-active: #991B1B;
  --color-primary-soft:   #FEF2F2;
  --color-primary-border: #FECACA;
  --shadow-focus: 0 0 0 3px #FEF2F2;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-text);
  background-color: var(--color-bg-subtle);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar personalizado ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ============================================================
   COMPONENTES BASE COMPARTIDOS
   ============================================================ */

/* ── Badges / Pills de estado ── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.badge-primary   { background: var(--color-primary-soft);  color: var(--color-primary);  border: 1px solid var(--color-primary-border); }
.badge-success   { background: var(--color-success-soft);  color: var(--color-success);  border: 1px solid var(--color-success-border); }
.badge-danger    { background: var(--color-danger-soft);   color: var(--color-danger);   border: 1px solid var(--color-danger-border); }
.badge-warning   { background: var(--color-warning-soft);  color: var(--color-warning);  border: 1px solid var(--color-warning-border); }
.badge-info      { background: var(--color-info-soft);     color: var(--color-info);     border: 1px solid var(--color-info-border); }
.badge-neutral   { background: var(--color-bg-muted);      color: var(--color-text-secondary); border: 1px solid var(--color-border); }

/* ── Botones base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-base);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}
.btn-primary:active {
  background: var(--color-primary-active);
}

.btn-secondary {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-secondary:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  text-decoration: none;
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline-primary:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
  text-decoration: none;
}

.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}
.btn-danger:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.btn-outline-danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.btn-outline-danger:hover {
  background: var(--color-danger-soft);
  text-decoration: none;
}

.btn-sm {
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
}

.btn-icon {
  padding: var(--space-1-5);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
}

.btn-icon.btn-sm {
  width: 28px;
  height: 28px;
  padding: var(--space-1);
  font-size: var(--text-xs);
}

/* ── Cards ── */
.card-clean {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xs);
}

.card-clean-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.card-clean-body {
  padding: var(--space-6);
}

.card-clean-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* ── Page header ── */
.page-header-clean {
  margin-bottom: var(--space-6);
}

.page-header-clean h1,
.page-header-clean .page-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-1) 0;
}

.page-header-clean .page-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Formularios ── */
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-1-5);
  display: block;
}

.form-control,
.form-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  line-height: var(--leading-normal);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-control:hover,
.form-select:hover {
  border-color: var(--color-border-strong);
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-control:disabled,
.form-select:disabled {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.form-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.invalid-feedback {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
  display: block;
}

/* ── Alerts ── */
.alert-clean {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  border: 1px solid transparent;
}

.alert-clean-success {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.alert-clean-danger {
  background: var(--color-danger-soft);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.alert-clean-warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.alert-clean-info {
  background: var(--color-info-soft);
  border-color: var(--color-info-border);
  color: var(--color-info);
}

/* ── Divisores ── */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: var(--space-6) 0;
}

/* ── Spinners ── */
.spinner-clean {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Utilidades de texto ── */
.text-primary-color  { color: var(--color-primary) !important; }
.text-muted-color    { color: var(--color-text-muted) !important; }
.text-secondary-color{ color: var(--color-text-secondary) !important; }
.text-success-color  { color: var(--color-success) !important; }
.text-danger-color   { color: var(--color-danger) !important; }
.text-warning-color  { color: var(--color-warning) !important; }

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--color-text-secondary);
}

.empty-state-icon {
  font-size: 2.5rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.empty-state h5 {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1-5);
}

.empty-state p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}