/* ==========================================================================
   colors.css — Paletas y variables de diseño
   --------------------------------------------------------------------------
   - Contiene ÚNICAMENTE definiciones de variables CSS (:root).
   - No incluye reglas de estilo (clases/selectores); esas van en app.css.
   - Escalas uniformes 50→900 por color (≈ luminosidad gradual).
   - Paletas existentes: Grises, Verdes, Azules, Rojos
   - NUEVO: Amarillos, Naranjas
   ========================================================================== */

/**
 * @section Paleta Base
 * @desc Definiciones de color por familias cromáticas.
 *       Usar var(--dis-<color>-<step>) en app.css y vistas.
 */

 /**
 * @tips
 * - Para estados de advertencia suaves, usa var(--dis-yellow-100/200) como fondo
 *   y var(--dis-yellow-700) como texto/ícono.
 * - Para advertencias más fuertes, usa naranja: fondo var(--dis-orange-100/200),
 *   borde var(--dis-orange-400) y texto var(--dis-orange-700).
 * - Evita mezclar demasiados acentos; mantén el “brand” principal en verdes.
 */

:root{
  /* ===== Grises ===== */
  --dis-gray-50:#f7f7f8;
  --dis-gray-60:#f6f6f7;
  --dis-gray-70:#f5f5f7;
  --dis-gray-80:#f3f5f6;
  --dis-gray-90:#f2f4f6;
  --dis-gray-100:#f1f3f5;
  --dis-gray-200:#e9ecef;
  --dis-gray-300:#dee2e6;
  --dis-gray-400:#ced4da;
  --dis-gray-500:#adb5bd;
  --dis-gray-600:#868e96;
  --dis-gray-700:#495057;
  --dis-gray-800:#343a40;
  --dis-gray-900:#212529;

  /* ===== Verdes ===== */
  --dis-green-50:#f0fff7;
  --dis-green-60:#ecfff5;
  --dis-green-70:#e8fff3;
  --dis-green-80:#e3fff1;
  --dis-green-90:#dfffef;
  --dis-green-100:#dbffed;
  --dis-green-200:#bff7db;
  --dis-green-300:#9fecc7;
  --dis-green-400:#7fdeb1;
  --dis-green-500:#58c793;
  --dis-green-600:#3aa976;
  --dis-green-700:#2b865b;
  --dis-green-800:#1f6a47;
  --dis-green-900:#154a31;

  /* ===== Azules ===== */
  --dis-blue-50:#f1f6ff;
  --dis-blue-60:#eff5ff;
  --dis-blue-70:#edf4ff;
  --dis-blue-80:#eaf2ff;
  --dis-blue-90:#e8f1ff;
  --dis-blue-100:#e6f0ff;
  --dis-blue-200:#cfe0ff;
  --dis-blue-300:#b2ccff;
  --dis-blue-400:#94b6ff;
  --dis-blue-500:#6e98f9;
  --dis-blue-600:#4f7be3;
  --dis-blue-700:#365fbe;
  --dis-blue-800:#274a95;
  --dis-blue-900:#1a3366;

  /* ===== Rojos ===== */
  --dis-red-50:#fff5f5;
  --dis-red-60:#fff2f2;
  --dis-red-70:#ffefef;
  --dis-red-80:#ffebeb;
  --dis-red-90:#ffe8e8;
  --dis-red-100:#ffe5e5;
  --dis-red-200:#ffcaca;
  --dis-red-300:#ffadad;
  --dis-red-400:#ff8d8d;
  --dis-red-500:#ff6363;
  --dis-red-600:#e34747;
  --dis-red-700:#bf3535;
  --dis-red-800:#972929;
  --dis-red-900:#6a1b1b;

  /* ===== Amarillos =====
     Usos: avisos suaves, tooltip, highlights discretos. */
  --dis-yellow-50:#fffdf2;
  --dis-yellow-60:#fffbe8;
  --dis-yellow-70:#fff8de;
  --dis-yellow-80:#fff5d3;
  --dis-yellow-90:#fff2c9;
  --dis-yellow-100:#ffefbf;
  --dis-yellow-200:#ffe59e;
  --dis-yellow-300:#ffd86f;
  --dis-yellow-400:#ffc943;
  --dis-yellow-500:#fbbd23;   /* tono “brand” tibio */
  --dis-yellow-600:#e0a515;
  --dis-yellow-700:#b38212;
  --dis-yellow-800:#8a6410;
  --dis-yellow-900:#5c430b;

  /* ===== Naranjas =====
     Usos: advertencias, acentos más vivos que el amarillo. */
  --dis-orange-50:#fff8f2;
  --dis-orange-60:#fff1e6;
  --dis-orange-70:#ffe8d9;
  --dis-orange-80:#ffdfcc;
  --dis-orange-90:#ffd6bf;
  --dis-orange-100:#ffccaf;
  --dis-orange-200:#ffb386;
  --dis-orange-300:#ff985c;
  --dis-orange-400:#ff7f38;
  --dis-orange-500:#ff6a1a;   /* acento */
  --dis-orange-600:#e25612;
  --dis-orange-700:#b74310;
  --dis-orange-800:#8f350e;
  --dis-orange-900:#63240a;

  /* ===== Tokens de estado (derivados) ===== */
  --dis-success:        var(--dis-green-700);
  --dis-success-hover:  var(--dis-green-500);
  --dis-success-border: var(--dis-green-800);
  --dis-success-focus:  rgba(43,134,91,.45);

  /* Focus accesible + alturas cabeceras */
  --dis-focus:#6c757d;
  --dis-navbar-h: 3rem;
  --dis-bc-h:     1.75rem;
  --dis-card-header-min-h: 3rem;
  --dis-card-header-py:    .75rem;
  --dis-card-header-px:    1rem;
  --dis-card-header-actions-gap: .65rem;
  --dis-card-header-actions-pl:  .5rem;

  /* Tonos principales */
  --sql-blue:   #1f10ad;
  --sql-indigo: #a81359;
  --sql-purple: #6f42c1;
  --sql-pink:   #d63384;
  --sql-red:    #dc3545;
  --sql-orange: #fd7e14;
  --sql-yellow: #ffc107;
  --sql-green:  #198754;
  --sql-teal:   #20c997;
  --sql-cyan:   #0dcaf0;

  /* Escala de grises */
  --sql-gray-100: #f8f9fa;
  --sql-gray-200: #e9ecef;
  --sql-gray-300: #dee2e6;
  --sql-gray-400: #ced4da;
  --sql-gray-500: #adb5bd;
  --sql-gray-600: #6c757d;
  --sql-gray-700: #495057;
  --sql-gray-800: #343a40;
  --sql-gray-900: #212529;

  /* Scrollbar (Firefox) */
  scrollbar-color: rgb(30 30 30 / 70%) transparent;
}