/*
* neurya-brand.css
* Identidad visual de Neurya sobre el theme Vuexy (Bootstrap 5.3).
*
* Estrategia: core.css deriva ~200 reglas de var(--bs-primary) con color-mix,
* asi que basta redefinir los tokens raiz para re-tematizar botones, badges,
* labels, menu activo, paginacion, form-checks, etc. sin tocar core.css.
*
* Paleta oficial (Pantone Solid Coated — neurya.com):
*   Azul Oscuro   #215382  (7693 C)  → primario
*   Azul Medio    #4b78ba  (7455 C)  → links / acento / primario en dark
*   Azul Profundo #13182a  (2965 C)  → headings / texto enfasis
*   Gris Azulado  #adacbb  (Cool Gray 6 C)
*   Gris Claro    #e2e1e7  (Cool Gray 1 C)
*   Azul Hielo    #cfeaff  (656 C)   → highlights / info
*
* Tipografia (neurya.com): Sora (headings) + Inter (cuerpo).
* NOTA: el fondo del Hub NO se cambia (decision de producto) — solo color y tipografia.
*/

/* =========================================================================
   1. Tokens de color — tema claro
   ========================================================================= */
:root,
[data-bs-theme="light"] {
  --bs-primary: #215382;
  --bs-primary-rgb: 33, 83, 130;
  --bs-primary-bg-subtle: #e9f1f8;
  --bs-primary-border-subtle: #b9cfe2;
  --bs-primary-text-emphasis: #163a5c;

  /* Info alineado al Azul Hielo / Azul Medio de marca */
  --bs-info: #4b78ba;
  --bs-info-rgb: 75, 120, 186;
  --bs-info-bg-subtle: #edf3fb;
  --bs-info-border-subtle: #c5d6ee;
  --bs-info-text-emphasis: #34537f;

  /* Links: Azul Medio, hover al primario (igual que neurya.com) */
  --bs-link-color: #4b78ba;
  --bs-link-color-rgb: 75, 120, 186;
  --bs-link-hover-color: #215382;
  --bs-link-hover-color-rgb: 33, 83, 130;

  /* Headings con el Azul Profundo de marca */
  --bs-heading-color: #13182a;

  /* Tokens propios para casos puntuales */
  --neurya-ice: #cfeaff;
  --neurya-deep: #13182a;
  --neurya-gray: #adacbb;
  --neurya-gray-light: #e2e1e7;
}

/* =========================================================================
   2. Tokens de color — tema oscuro (primario mas claro para contraste AA)
   ========================================================================= */
[data-bs-theme="dark"] {
  --bs-primary: #4b78ba;
  --bs-primary-rgb: 75, 120, 186;
  --bs-primary-bg-subtle: #1d2c42;
  --bs-primary-border-subtle: #2f4a6e;
  --bs-primary-text-emphasis: #9cc2f0;

  --bs-info: #6c9fe0;
  --bs-info-rgb: 108, 159, 224;
  --bs-info-bg-subtle: #1c2940;
  --bs-info-border-subtle: #2e4666;
  --bs-info-text-emphasis: #a9c9ef;

  /* Texto/links claros en dark — el default Vuexy dark usa la version CLARA
     del primario (#aba4f6); el equivalente en azul de marca es #8fb3e6+.
     Sin esto, los azules #215382/#4b78ba se pierden contra el fondo oscuro. */
  --bs-link-color: #8fb3e6;
  --bs-link-color-rgb: 143, 179, 230;
  --bs-link-hover-color: #aecdf2;
  --bs-link-hover-color-rgb: 174, 205, 242;

  /* :root fija --bs-heading-color #13182a (correcto en claro); en dark hay
     que devolverlo a un tono claro o los titulos desaparecen. */
  --bs-heading-color: #d3dce9;
}

/* Bootstrap genera .text-primary/.text-info con rgba(var(--bs-*-rgb)) y
   !important; en dark esos azules de marca quedan muy apagados como TEXTO
   (botones/badges con fondo si funcionan). Aclarar solo el uso tipografico. */
[data-bs-theme="dark"] .text-primary {
  color: #8fb3e6 !important;
}
[data-bs-theme="dark"] .text-info {
  color: #a9c9ef !important;
}

/* =========================================================================
   3. Tipografia — Sora para headings, Inter para cuerpo
   ========================================================================= */
:root {
  --bs-font-sans-serif: "Inter", "Public Sans", -apple-system, blinkmacsystemfont,
    "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  --neurya-font-heading: "Sora", "Inter", "Public Sans", -apple-system,
    blinkmacsystemfont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.card-title,
.app-brand-text,
.modal-title {
  font-family: var(--neurya-font-heading);
  letter-spacing: -0.01em;
}

/* Numeros de KPI / stat cards: Sora les da el caracter de la web */
.card-body h2.mb-0,
.card-body h3.mb-0,
.card-body h4.mb-0 {
  font-family: var(--neurya-font-heading);
}

/* =========================================================================
   4. Ajustes de componentes (minimos y quirurgicos)
   ========================================================================= */

/* Sidebar: item activo con el azul de marca ya lo resuelve var(--bs-primary).
   Refinamos el texto del brand para que use Sora con el peso de la web. */
.app-brand-text {
  font-weight: 700;
}

/* Focus ring de inputs alineado a marca (Bootstrap usa primary derivado,
   pero el theme fija un boxshadow propio en algunos vendors) */
.form-control:focus,
.form-select:focus {
  border-color: #4b78ba;
}

/* Badges/avatares con fondo info-suave usan el Azul Hielo real de marca */
.bg-label-info {
  background-color: color-mix(in sRGB, var(--neurya-ice) 55%, var(--bs-paper-bg)) !important;
  color: #34537f !important;
}
[data-bs-theme="dark"] .bg-label-info {
  background-color: var(--bs-info-bg-subtle) !important;
  color: var(--bs-info-text-emphasis) !important;
}

/* Timeline / indicadores que usan el morado Vuexy por defecto quedan
   cubiertos por var(--bs-primary); no anadir overrides por componente aqui.
   Si un modulo necesita un color fuera de tokens, NO hardcodear hex:
   usar var(--bs-primary) / var(--neurya-*) (ver docs/ui/REGLAS_UI_MODULOS.md). */