/*
 * Tema "cecre": recoloreo de marca (CeCRE / Consejo Económico y Social de Río Cuarto)
 * sobre la base de Bootstrap 5.3 + Bootswatch Flatly.
 *
 * Origen de los colores (2026-08-19): valores oficiales del brand kit de Canva
 * (epresfirebaseapp/docs/Branding CEyS.pdf), confirmados a mano por Favio — el
 * PDF exportado tenía los círculos de la paleta desalineados de su hex impreso
 * (solo el celeste coincidía), así que estos son los que Favio verificó en Canva,
 * no los que salen leyendo el PDF.
 *   primary   #184D9C  azul institucional (antes flatly #2c3e50; casi igual al
 *                       valor por muestreo de píxel que se usaba antes, #184D9B)
 *   secondary #8FC8F1  celeste (antes #4DA4CF, un azul medio por muestreo de píxel)
 *   success   #2EB056  verde de marca (antes #61B495, verde salvia por muestreo de
 *                       píxel del isotipo — resultó no ser un color de marca real)
 * info/warning/danger sumados 2026-08-19 (pedido aparte de Favio, no vienen del
 * brand kit de Canva): info #33CCBC, warning #CCBC33, danger #CC3343.
 *
 * Contraste de texto sobre cada color sólido (botones, badges .text-bg-*):
 * celeste, info y warning son todos demasiado claros para texto blanco
 * (~1.8-2:1, falla WCAG AA que pide 4.5:1) — usan texto oscuro (el "Negro"
 * #0c0d0d del brand kit para info/warning; azul primario para secondary,
 * mismo criterio que .btn-warning/.btn-light en Bootstrap). danger sí pasa
 * con texto blanco (~5:1). **success también fallaba** (~2.8:1, se pasó por
 * alto en la primera pasada) - corregido 2026-08-19 (ver más abajo) a texto
 * "Negro" igual que info/warning.
 *
 * Colores de rol como TEXTO suelto (headings, outline buttons) son un
 * problema aparte de colores de rol como FONDO: info/warning siguen sin
 * alcanzar ni oscurecidos al límite del umbral (quedan en flatly ahí, ver
 * outline-info/outline-warning más abajo). primary y danger ya pasan 4.5:1
 * en su tono original, sin oscurecer nada. secondary y success sí se pueden
 * arreglar oscureciendo.
 *
 * Oscurecimiento MÍNIMO y unificado en todos los roles (2026-08-19, corregido
 * el mismo día: la primera pasada de success usaba shade-color(60%) genérico,
 * se pasaba de oscuro y "perdía la esencia" del verde). Método: escalar RGB
 * por un factor k<1 (mantiene el hue exacto, no toca H/S, es puramente más
 * oscuro) buscado por bisección hasta el mínimo oscurecimiento que todavía
 * cruza cada umbral WCAG - no una fórmula fija. Dos niveles por rol, texto
 * grande necesita menos oscurecimiento que texto normal:
 *   rol        base     texto normal (4.5:1)      texto grande (3:1)
 *   primary   #184D9C   sin oscurecer (~8.1:1)     sin oscurecer
 *   secondary #8FC8F1   --text-emphasis #587A94    --text-emphasis-lg #6E99B9
 *   success   #2EB056   --text-emphasis #238742    --text-emphasis-lg #2CAA53
 *   info      #33CCBC   --text-emphasis #21847A    --text-emphasis-lg #29A598
 *   warning   #CCBC33   --text-emphasis #827820    --text-emphasis-lg #A39629
 *   danger    #CC3343   sin oscurecer (~5.1:1)     sin oscurecer
 * "texto grande" = ExtraBold ≥18.66px o regular ≥24px (h2/h3 con nuestra
 * tipografía califican, h4-h6 no). info/warning -text-emphasis/-lg quedan
 * definidos por consistencia con el resto de la paleta pero sin uso todavía
 * (ningún heading/outline-button usa esos dos colores como texto hoy).
 *
 * Solo afecta a document.documentElement[data-theme-brand="cecre"] — conviven con
 * el toggle claro/oscuro existente (data-bs-theme), ver public/js/theme.js.
 *
 * Escala de grises (2026-08-19): 5 pasos con leve matiz azul (semilla en el
 * hue del primary #184d9b, croma casi nula) en vez de grises neutros
 * genéricos - "basados en colores del logo". Tokens propios
 * (`--cecre-gray-*`), no pisan `--bs-gray-*` de Bootstrap (que afecta un
 * montón de componentes fuera de este theme). Son una escala fija (no tienen
 * variante dark) - para fondos/franjas que se adaptan solos a claro/oscuro
 * (ej. la tabla de frecuencias del dashboard) usar `color-mix()` con
 * `--bs-body-color` en vez de estos tokens, que asumen fondo claro.
 */

:root[data-theme-brand="cecre"] {
  --bs-primary: #184d9c;
  --bs-primary-rgb: 24, 77, 156;
  --bs-primary-text-emphasis: var(--bs-primary);
  --bs-primary-bg-subtle: #d1dbeb;
  --bs-primary-border-subtle: #a3b8d7;

  --bs-secondary: #8fc8f1;
  --bs-secondary-rgb: 143, 200, 241;
  --bs-secondary-text-emphasis: #587a94;
  --bs-secondary-text-emphasis-lg: #6e99b9;
  --bs-secondary-bg-subtle: #e9f4fc;
  --bs-secondary-border-subtle: #d2e9f9;

  --bs-success: #2eb056;
  --bs-success-rgb: 46, 176, 86;
  --bs-success-text-emphasis: #238742;
  --bs-success-text-emphasis-lg: #2caa53;
  --bs-success-bg-subtle: #d5efdd;
  --bs-success-border-subtle: #abdfbb;

  --bs-info: #33ccbc;
  --bs-info-rgb: 51, 204, 188;
  --bs-info-text-emphasis: #21847a;
  --bs-info-text-emphasis-lg: #29a598;
  --bs-info-bg-subtle: #d6f5f2;
  --bs-info-border-subtle: #adebe4;

  --bs-warning: #ccbc33;
  --bs-warning-rgb: 204, 188, 51;
  --bs-warning-text-emphasis: #827820;
  --bs-warning-text-emphasis-lg: #a39629;
  --bs-warning-bg-subtle: #f5f2d6;
  --bs-warning-border-subtle: #ebe4ad;

  --bs-danger: #cc3343;
  --bs-danger-rgb: 204, 51, 67;
  --bs-danger-text-emphasis: var(--bs-danger);
  --bs-danger-bg-subtle: #f5d6d9;
  --bs-danger-border-subtle: #ebadb4;

  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: #133e7c;
  --bs-link-hover-color-rgb: 19, 62, 124;

  --cecre-gray-white: #ffffff;
  --cecre-gray-100: #f3f5f9;
  --cecre-gray-200: #dadee5;
  --cecre-gray-500: #9ea5b0;
  --cecre-gray-800: #474e58;
}

:root[data-theme-brand="cecre"][data-bs-theme="dark"] {
  --bs-primary-text-emphasis: #7494c3;
  --bs-primary-bg-subtle: #050f1f;
  --bs-primary-border-subtle: #0e2e5d;

  --bs-secondary-text-emphasis: #bcdef7;
  --bs-secondary-bg-subtle: #1d2830;
  --bs-secondary-border-subtle: #567891;

  --bs-success-text-emphasis: #82d09a;
  --bs-success-bg-subtle: #092311;
  --bs-success-border-subtle: #1c6a34;

  --bs-info-text-emphasis: #85e0d7;
  --bs-info-bg-subtle: #0a2926;
  --bs-info-border-subtle: #1f7a71;

  --bs-warning-text-emphasis: #e0d785;
  --bs-warning-bg-subtle: #29260a;
  --bs-warning-border-subtle: #7a711f;

  --bs-danger-text-emphasis: #e0858e;
  --bs-danger-bg-subtle: #290a0d;
  --bs-danger-border-subtle: #7a1f28;

  --bs-link-color: #7494c3;
  --bs-link-color-rgb: 116, 148, 195;
  --bs-link-hover-color: #94b3d6;
  --bs-link-hover-color-rgb: 148, 179, 214;
}

/* Tipografía de marca: Open Sans para cuerpo, Open Sans ExtraBold (800) para
   títulos - ambas cargadas en index.html. flatly trae Lato por defecto. */
:root[data-theme-brand="cecre"] {
  --bs-body-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme-brand="cecre"] h1,
:root[data-theme-brand="cecre"] h2,
:root[data-theme-brand="cecre"] h3,
:root[data-theme-brand="cecre"] h4,
:root[data-theme-brand="cecre"] h5,
:root[data-theme-brand="cecre"] h6,
:root[data-theme-brand="cecre"] .navbar-brand {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
}

/* Color de texto por rol (2026-08-19, pedido explícito de Favio, no un tema
   neutro): en claro, cuerpo y h1 van en azul primario, h2-h6 en verde de
   marca (versión oscurecida --bs-success-text-emphasis, no el --bs-success
   crudo - Favio confirmó 2026-08-19 que quiere el verde oscurecido para
   legibilidad de texto, el mismo verde de marca pero en su variante >7:1);
   en oscuro se invierte a fondo azul sólido con todo el texto en blanco,
   headings incluidos - no hay jerarquía de color por nivel en oscuro, se
   aplana a blanco. */
:root[data-theme-brand="cecre"] {
  --bs-body-color: var(--bs-primary);
}

:root[data-theme-brand="cecre"] h1 {
  color: var(--bs-primary);
}

/* h2/h3 (grandes + ExtraBold) solo necesitan pasar 3:1 - usan el verde menos
   oscurecido de los dos (-lg). h4-h6 ya no califican como "texto grande" en
   WCAG, necesitan el 4.5:1 completo. */
:root[data-theme-brand="cecre"] h2,
:root[data-theme-brand="cecre"] h3 {
  color: var(--bs-success-text-emphasis-lg);
}

:root[data-theme-brand="cecre"] h4,
:root[data-theme-brand="cecre"] h5,
:root[data-theme-brand="cecre"] h6 {
  color: var(--bs-success-text-emphasis);
}

/* Fondo oscuro 2026-08-19: NO es --bs-primary (probado y descartado el mismo
   día - Favio tiene retinopatía pigmentaria/fotofobia, un azul saturado a
   pantalla completa "quema los ojos"; el objetivo del modo oscuro acá es
   descanso visual real, no una variante de marca). #020D24 es una mezcla muy
   oscurecida de negro + primario - mucho más oscuro que --bs-primary
   (L≈0.003 vs 0.079), y por eso YA se distingue solo de .btn-primary/navbar
   sin necesitar los parches de borde/sombra que se habían agregado cuando el
   fondo SÍ era --bs-primary (retirados, ver abajo). */
:root[data-theme-brand="cecre"][data-bs-theme="dark"] {
  --bs-body-bg: #020d24;
  --bs-body-color: #fff;
}

:root[data-theme-brand="cecre"][data-bs-theme="dark"] h1,
:root[data-theme-brand="cecre"][data-bs-theme="dark"] h2,
:root[data-theme-brand="cecre"][data-bs-theme="dark"] h3,
:root[data-theme-brand="cecre"][data-bs-theme="dark"] h4,
:root[data-theme-brand="cecre"][data-bs-theme="dark"] h5,
:root[data-theme-brand="cecre"][data-bs-theme="dark"] h6 {
  color: #fff;
}

/* Botones y formularios: Bootstrap fija estos colores como literales por variante
   (no heredan de --bs-primary etc.), así que hay que pisarlos explícitamente. */
:root[data-theme-brand="cecre"] .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #184d9c;
  --bs-btn-border-color: #184d9c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #144185;
  --bs-btn-hover-border-color: #133e7d;
  --bs-btn-focus-shadow-rgb: 24, 77, 156;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #133e7d;
  --bs-btn-active-border-color: #123a75;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #184d9c;
  --bs-btn-disabled-border-color: #184d9c;
}

/* Celeste es demasiado claro para texto blanco encima (~1.8:1, falla WCAG) —
   texto azul primario sobre celeste, mismo criterio que .btn-warning/.btn-light
   en Bootstrap (~4.5:1, en el límite). */
:root[data-theme-brand="cecre"] .btn-secondary {
  --bs-btn-color: #184d9c;
  --bs-btn-bg: #8fc8f1;
  --bs-btn-border-color: #8fc8f1;
  --bs-btn-hover-color: #184d9c;
  --bs-btn-hover-bg: #7aaacd;
  --bs-btn-hover-border-color: #72a0c1;
  --bs-btn-focus-shadow-rgb: 143, 200, 241;
  --bs-btn-active-color: #184d9c;
  --bs-btn-active-bg: #72a0c1;
  --bs-btn-active-border-color: #6b96b5;
  --bs-btn-disabled-color: #184d9c;
  --bs-btn-disabled-bg: #8fc8f1;
  --bs-btn-disabled-border-color: #8fc8f1;
}

/* Success también es demasiado claro para texto blanco (~2.8:1, se pasó por
   alto en la primera pasada - se corrige acá el mismo día). Texto "Negro",
   mismo criterio que info/warning. */
:root[data-theme-brand="cecre"] .btn-success {
  --bs-btn-color: #0c0d0d;
  --bs-btn-bg: #2eb056;
  --bs-btn-border-color: #2eb056;
  --bs-btn-hover-color: #0c0d0d;
  --bs-btn-hover-bg: #279649;
  --bs-btn-hover-border-color: #258d45;
  --bs-btn-focus-shadow-rgb: 46, 176, 86;
  --bs-btn-active-color: #0c0d0d;
  --bs-btn-active-bg: #258d45;
  --bs-btn-active-border-color: #238441;
  --bs-btn-disabled-color: #0c0d0d;
  --bs-btn-disabled-bg: #2eb056;
  --bs-btn-disabled-border-color: #2eb056;
}

/* Info/warning claros para texto blanco (~2:1, falla WCAG) - texto "Negro"
   de marca (#0c0d0d), mismo criterio que btn-secondary. */
:root[data-theme-brand="cecre"] .btn-info {
  --bs-btn-color: #0c0d0d;
  --bs-btn-bg: #33ccbc;
  --bs-btn-border-color: #33ccbc;
  --bs-btn-hover-color: #0c0d0d;
  --bs-btn-hover-bg: #2bada0;
  --bs-btn-hover-border-color: #29a396;
  --bs-btn-focus-shadow-rgb: 51, 204, 188;
  --bs-btn-active-color: #0c0d0d;
  --bs-btn-active-bg: #29a396;
  --bs-btn-active-border-color: #26998d;
  --bs-btn-disabled-color: #0c0d0d;
  --bs-btn-disabled-bg: #33ccbc;
  --bs-btn-disabled-border-color: #33ccbc;
}

:root[data-theme-brand="cecre"] .btn-warning {
  --bs-btn-color: #0c0d0d;
  --bs-btn-bg: #ccbc33;
  --bs-btn-border-color: #ccbc33;
  --bs-btn-hover-color: #0c0d0d;
  --bs-btn-hover-bg: #ada02b;
  --bs-btn-hover-border-color: #a39629;
  --bs-btn-focus-shadow-rgb: 204, 188, 51;
  --bs-btn-active-color: #0c0d0d;
  --bs-btn-active-bg: #a39629;
  --bs-btn-active-border-color: #998d26;
  --bs-btn-disabled-color: #0c0d0d;
  --bs-btn-disabled-bg: #ccbc33;
  --bs-btn-disabled-border-color: #ccbc33;
}

:root[data-theme-brand="cecre"] .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #cc3343;
  --bs-btn-border-color: #cc3343;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ad2b39;
  --bs-btn-hover-border-color: #a32936;
  --bs-btn-focus-shadow-rgb: 204, 51, 67;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a32936;
  --bs-btn-active-border-color: #992632;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #cc3343;
  --bs-btn-disabled-border-color: #cc3343;
}

:root[data-theme-brand="cecre"] .btn-outline-primary {
  --bs-btn-color: #184d9c;
  --bs-btn-border-color: #184d9c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #184d9c;
  --bs-btn-hover-border-color: #184d9c;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #184d9c;
  --bs-btn-active-border-color: #184d9c;
  --bs-btn-focus-shadow-rgb: 24, 77, 156;
  --bs-btn-disabled-color: #184d9c;
  --bs-btn-disabled-border-color: #184d9c;
}

/* outline-info/outline-warning no se pisan: como texto/borde sobre blanco son
   ilegibles incluso oscurecidos lo suficiente para no perder identidad de
   marca (a diferencia de secondary/success, que sí tienen su -text-emphasis
   utilizable, ver abajo). Quedan en el valor de flatly, funcionan como
   variantes neutras/terciarias. */

/* Texto/borde en el --text-emphasis oscurecido de secondary (#587a94, ~4.5:1)
   en vez de dejarlo caer en el gris de flatly - al hover revela el celeste de
   marca de fondo con texto azul primario, mismo idioma que btn-secondary. */
:root[data-theme-brand="cecre"] .btn-outline-secondary {
  --bs-btn-color: #587a94;
  --bs-btn-border-color: #587a94;
  --bs-btn-hover-color: #184d9c;
  --bs-btn-hover-bg: #8fc8f1;
  --bs-btn-hover-border-color: #8fc8f1;
  --bs-btn-active-color: #184d9c;
  --bs-btn-active-bg: #72a0c1;
  --bs-btn-active-border-color: #72a0c1;
  --bs-btn-focus-shadow-rgb: 143, 200, 241;
  --bs-btn-disabled-color: #587a94;
  --bs-btn-disabled-border-color: #587a94;
}

/* Texto/borde en el --text-emphasis oscurecido de success (#238742, ~4.55:1,
   texto normal - no el -lg) en vez del --bs-success crudo (~2.8:1, ilegible)
   - al hover/active sigue revelando el verde de marca de fondo, con texto
   oscuro ("Negro") en vez de blanco por el mismo problema de contraste que
   btn-success. */
:root[data-theme-brand="cecre"] .btn-outline-success {
  --bs-btn-color: #238742;
  --bs-btn-border-color: #2eb056;
  --bs-btn-hover-color: #0c0d0d;
  --bs-btn-hover-bg: #2eb056;
  --bs-btn-hover-border-color: #2eb056;
  --bs-btn-active-color: #0c0d0d;
  --bs-btn-active-bg: #258d45;
  --bs-btn-active-border-color: #258d45;
  --bs-btn-focus-shadow-rgb: 46, 176, 86;
  --bs-btn-disabled-color: #238742;
  --bs-btn-disabled-border-color: #2eb056;
}

:root[data-theme-brand="cecre"] .btn-outline-danger {
  --bs-btn-color: #cc3343;
  --bs-btn-border-color: #cc3343;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #cc3343;
  --bs-btn-hover-border-color: #cc3343;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #cc3343;
  --bs-btn-active-border-color: #cc3343;
  --bs-btn-focus-shadow-rgb: 204, 51, 67;
  --bs-btn-disabled-color: #cc3343;
  --bs-btn-disabled-border-color: #cc3343;
}

:root[data-theme-brand="cecre"] .form-control:focus,
:root[data-theme-brand="cecre"] .form-select:focus {
  border-color: #184d9c;
  box-shadow: 0 0 0 0.25rem rgba(24, 77, 156, 0.25);
}

:root[data-theme-brand="cecre"] .form-check-input:checked {
  background-color: #184d9c;
  border-color: #184d9c;
}

:root[data-theme-brand="cecre"] .form-check-input:focus {
  border-color: #184d9c;
  box-shadow: 0 0 0 0.25rem rgba(24, 77, 156, 0.25);
}

/* Bootstrap fija el texto de .text-bg-* en el CSS compilado (no es reactivo a
   --bs-*-rgb), calculado para el color ORIGINAL de flatly - con nuestros
   celeste/info/warning/success (todos claros como fondo) ese texto blanco
   fijo falla contraste igual que en los botones. .text-bg-secondary ya estaba
   en uso real (badges de blog.js/credenciales.js/preguntas.js/variantes.js) y
   quedó ilegible hasta este fix. text-bg-danger no se toca: ahí el texto
   blanco que trae Bootstrap ya pasa contraste con nuestro rojo. */
:root[data-theme-brand="cecre"] .text-bg-secondary {
  color: #184d9c !important;
}

:root[data-theme-brand="cecre"] .text-bg-info,
:root[data-theme-brand="cecre"] .text-bg-warning,
:root[data-theme-brand="cecre"] .text-bg-success {
  color: #0c0d0d !important;
}

/* El navbar de la app fuerza data-bs-theme="dark" sobre bg-primary (ver navbar.js);
   flatly usa su verde de éxito como acento de hover/activo ahí — reemplazamos por
   el verde de marca (tinte claro para que se lea sobre el navbar oscuro). */
:root[data-theme-brand="cecre"] .navbar[data-bs-theme="dark"] {
  --bs-navbar-hover-color: #82d09a;
  --bs-navbar-active-color: #82d09a;
  --bs-navbar-brand-hover-color: #82d09a;
}