/* =========================================================
   colors.css — Sistema de colores base reutilizable (2026)
   Compatible con Bootstrap 3/4 (override por clases estándar)
   ---------------------------------------------------------
   Uso recomendado:
   1) Cargar base.css (layout)
   2) Cargar colors.css (este archivo)
   3) Cargar theme-*.css (light / dark / gray)
   ========================================================= */

/* ---------- TOKENS DE COLOR (semánticos) ---------- */
:root {
  /* Brand / acciones principales */
  --primary-50:  #eff6ff;
  --primary-100: #dbeafe;
  --primary-300: #93c5fd;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;

  /* Estados */
  --success-500: #16a34a;
  --success-600: #15803d;

  --warning-500: #f97316;
  --warning-600: #ea580c;

  --danger-500:  #dc2626;
  --danger-600:  #b91c1c;

  --info-500:    #38bdf8;
  --info-600:    #0284c7;

  /* Neutrales */
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-600: #475569;
  --neutral-800: #1f2937;
  --neutral-900: #111827;
}

/* ---------- TEXTO ---------- */
.text-primary { color: var(--primary-600); }
.text-success { color: var(--success-600); }
.text-warning { color: var(--warning-600); }
.text-danger  { color: var(--danger-600); }
.text-info    { color: var(--info-600); }
.text-muted   { color: var(--neutral-600); }

/* ---------- BOTONES ---------- */
.btn-primary {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}

.btn-success {
  background-color: var(--success-500);
  border-color: var(--success-500);
}
.btn-success:hover { background-color: var(--success-600); }

.btn-warning {
  background-color: var(--warning-500);
  border-color: var(--warning-500);
  color: #ffffff;
}
.btn-warning:hover { background-color: var(--warning-600); }

.btn-danger {
  background-color: var(--danger-500);
  border-color: var(--danger-500);
}
.btn-danger:hover { background-color: var(--danger-600); }

.btn-info {
  background-color: var(--info-500);
  border-color: var(--info-500);
}
.btn-info:hover { background-color: var(--info-600); }

/* ---------- ALERTAS ---------- */
.alert-success {
  background-color: color-mix(in srgb, var(--success-500) 12%, white);
  border-color: var(--success-500);
  color: var(--success-600);
}

.alert-warning {
  background-color: color-mix(in srgb, var(--warning-500) 12%, white);
  border-color: var(--warning-500);
  color: var(--warning-600);
}

.alert-danger {
  background-color: color-mix(in srgb, var(--danger-500) 12%, white);
  border-color: var(--danger-500);
  color: var(--danger-600);
}

.alert-info {
  background-color: color-mix(in srgb, var(--info-500) 12%, white);
  border-color: var(--info-500);
  color: var(--info-600);
}

/* ---------- FORMULARIOS ---------- */
.form-control:focus {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-600) 20%, transparent);
}

.has-success .form-control { border-color: var(--success-500); }
.has-warning .form-control { border-color: var(--warning-500); }
.has-error   .form-control { border-color: var(--danger-500); }

/* ---------- TABLAS ---------- */
.table thead th {
  background-color: var(--neutral-100);
  color: var(--neutral-800);
  border-bottom: 2px solid var(--neutral-200);
}

.table tbody tr:hover {
  background-color: var(--neutral-50);
}

/* ---------- BADGES / LABELS ---------- */
.badge-primary { background-color: var(--primary-600); }
.badge-success { background-color: var(--success-500); }
.badge-warning { background-color: var(--warning-500); }
.badge-danger  { background-color: var(--danger-500); }
.badge-info    { background-color: var(--info-500); }

/* ---------- UTILIDADES ---------- */
.bg-primary { background-color: var(--primary-600) !important; }
.bg-success { background-color: var(--success-500) !important; }
.bg-warning { background-color: var(--warning-500) !important; }
.bg-danger  { background-color: var(--danger-500) !important; }
.bg-info    { background-color: var(--info-500) !important; }
.bg-neutral { background-color: var(--neutral-100) !important; }