/* ==========================================================================
   Aldecort · Tema de marca del CRM (azul)
   Capa de sustitución sobre los estilos base del panel. Se carga detrás de
   css/panel.css (solo la sigue css/crm.css) y redefine, con los mismos
   selectores, los tokens y las reglas que llevan el rojo de marca base en
   tokens.css y css/panel.css, que no se editan.
   Volver al rojo = quitar el <link> de este archivo en index.html.

   Escala de marca (matiz ~198°; el logo usa los tonos 500 y 900).
   Contraste con blanco (WCAG 2.x): 500 = 4,1:1 · 600 = 4,8:1 · 700 = 6,5:1.
     - Relleno con texto blanco: tono 600 (AA, al menos 4,5:1). El 500 no
       llega en texto pequeño: solo para lo que no es texto (anillo de foco,
       barras de progreso, iconos activos, acentos).
     - Hover del primario: 700 · pulsado: 800.
   No cambian el rojo de error (#EF4444) ni los colores de estado.

   1. Escala de marca --crm-brand-*
   2. Tokens y puente Bootstrap (tokens.css)
   3. Puente Syncfusion --color-sf-primary* (panel.css)
   4. Reglas con el rojo fijo (mismos selectores que el original)
   ========================================================================== */

/* ── 1. Escala de marca ─────────────────────────────────────────────────── */
:root {
  --crm-brand-50: #F0FAFF;   /* fondo suave: hover, arrastrar encima, fila seleccionada */
  --crm-brand-100: #DBF4FF;  /* fondo suave más marcado */
  --crm-brand-200: #B3E8FF;  /* bordes suaves */
  --crm-brand-300: #70D4FF;  /* apoyo en gráficos y estados */
  --crm-brand-400: #0AB6FF;  /* apoyo */
  --crm-brand-500: #0085BD;  /* logo · anillo de foco, barras de progreso, iconos activos, acentos */
  --crm-brand-600: #0079AD;  /* relleno con texto blanco: botón primario, círculo de «hoy» */
  --crm-brand-700: #00648F;  /* hover del primario · texto de enlace o acento sobre blanco */
  --crm-brand-800: #004F70;  /* pulsado */
  --crm-brand-900: #003D53;  /* logo · texto de marca y títulos destacados */
}

/* ── 2. Tokens y puente Bootstrap (tokens.css) ────────────────────────────
   --primary y --ring van en HSL "H S% L%" porque los tokens los consumen con
   hsl(var(--x)): de ellos salen --color-primary, --color-ring, --focus-ring y
   --bs-focus-ring-color. Los -rgb van en "R, G, B" como en Bootstrap. */
:root {
  --primary: 198.03 100% 33.92%;            /* #0079AD, tono 600 */
  --ring: 197.78 100% 37.06%;               /* #0085BD, tono 500: anillo de foco */

  --bs-primary: var(--crm-brand-600);
  --bs-primary-rgb: 0, 121, 173;            /* tono 600 */
  --bs-link-hover-color: var(--crm-brand-700);
  --bs-link-hover-color-rgb: 0, 100, 143;   /* tono 700: texto de enlace sobre blanco */
}

/* ── 3. Puente Syncfusion → marca (panel.css) ─────────────────────────────
   Mismo reparto que el tema tailwind3: base 600, hover y foco 700, pulsado 800.
   Se quedan como estaban (no son rojo): los -text*, en blanco, y -lighter,
   en gris piedra neutro. */
:root {
  --color-sf-primary: var(--crm-brand-600);
  --color-sf-primary-light: var(--crm-brand-500);         /* spinners, bordes y desactivados: no es texto */
  --color-sf-primary-dark: var(--crm-brand-700);
  --color-sf-primary-darker: var(--crm-brand-800);
  --color-sf-primary-outline: var(--crm-brand-600);       /* texto del primario outline o flat sobre blanco */
  --color-sf-primary-bg-color: var(--crm-brand-600);
  --color-sf-primary-border-color: var(--crm-brand-600);
  --color-sf-primary-bg-color-hover: var(--crm-brand-700);
  --color-sf-primary-border-color-hover: var(--crm-brand-700);
  --color-sf-primary-bg-color-pressed: var(--crm-brand-800);
  --color-sf-primary-border-color-pressed: var(--crm-brand-800);
  --color-sf-primary-bg-color-focus: var(--crm-brand-700);
  --color-sf-primary-border-color-focus: var(--crm-brand-700);
  --color-sf-primary-bg-color-disabled: var(--crm-brand-600);
  --color-sf-primary-border-color-disabled: var(--crm-brand-600);
}

/* ── 4. Reglas con el rojo fijo (mismos selectores que el original) ─────── */

/* De tokens.css */
.btn-primary {
  --bs-btn-bg: var(--crm-brand-600); --bs-btn-border-color: var(--crm-brand-600);
  --bs-btn-hover-bg: var(--crm-brand-700); --bs-btn-hover-border-color: var(--crm-brand-700);
  --bs-btn-active-bg: var(--crm-brand-800); --bs-btn-active-border-color: var(--crm-brand-800);
  --bs-btn-disabled-bg: var(--crm-brand-600); --bs-btn-disabled-border-color: var(--crm-brand-600);
}
.form-check-input:checked { background-color: var(--crm-brand-600); border-color: var(--crm-brand-600); }
.badge.bg-primary, .badge-default { background-color: var(--crm-brand-600) !important; }

/* De css/panel.css */
.e-btn.e-primary:hover, .e-btn.e-flat.e-primary:hover { background: var(--crm-brand-700); border-color: var(--crm-brand-700); }
.e-btn.e-primary:active, .e-btn.e-flat.e-primary:active { background: var(--crm-brand-800); border-color: var(--crm-brand-800); }
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: var(--crm-brand-600); border-color: var(--crm-brand-600); }
/* Repetida de panel.css: en las grids el check va en navy. El selector .e-css de la regla
   anterior empata con esta en especificidad (0,4,0) y, al cargarse esta hoja la última, la pisaría. */
.e-grid .e-checkbox-wrapper .e-frame.e-check { background-color: var(--color-foreground); border-color: var(--color-foreground); }
.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active { background-color: var(--crm-brand-600); border-color: var(--crm-brand-600); }
.e-grid .e-toolbar .e-toolbar-item.ag-tb-primary .e-tbar-btn:hover { background: var(--crm-brand-700); border-color: var(--crm-brand-700); }