/* ==========================================================
   SIGAE — COLOR INSTITUCIONAL SECUNDARIO OPCIONAL

   Cargar DESPUÉS de:
     sidebar-theme.css
     app-theme.css
     app-dark-surfaces.css

   Principal:
     data-sidebar-color="green"

   Secundario opcional:
     data-brand-secondary="blue"

   Papel del secundario en el sidebar:
     data-sidebar-brand="primary"
     data-sidebar-brand="background"
     data-sidebar-brand="accents"
     data-sidebar-brand="both"

   No modifica dimensiones ni comportamiento del layout.
   ========================================================== */

/*

# 1. SIDEBAR OSCURO FIJO + VERDE, SIN SECUNDARIO
# El contenido puede cambiar de modo; el sidebar siempre queda oscuro.
data-sidebar-mode="dark"
data-sidebar-sync="off"
data-sidebar-color="green"
data-brand-secondary="off"
data-sidebar-brand="primary"

# 2. SIDEBAR CLARO FIJO + VERDE, SIN SECUNDARIO
# El sidebar siempre queda claro, incluso con contenido oscuro.
data-sidebar-mode="light"
data-sidebar-sync="off"
data-sidebar-color="green"
data-brand-secondary="off"
data-sidebar-brand="primary"

# 3. SIDEBAR AUTOMÁTICO + VERDE, SIN SECUNDARIO
# Sigue al sistema: claro con claro, oscuro con oscuro.
# data-sidebar-mode es solo el valor inicial.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="green"
data-brand-secondary="off"
data-sidebar-brand="primary"

# 4. OSCURO FIJO + FONDO GRIS + SELECCIONES VERDES
# Sidebar grafito; botones principales y selección verdes.
data-sidebar-mode="dark"
data-sidebar-sync="off"
data-sidebar-color="green"
data-brand-secondary="gray"
data-sidebar-brand="background"

# 5. AUTOMÁTICO + FONDO GRIS + SELECCIONES VERDES
# Fondo blanco humo en claro y grafito en oscuro.
# Botones principales y selección del sidebar verdes.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="green"
data-brand-secondary="gray"
data-sidebar-brand="background"

# 6. AUTOMÁTICO + SIDEBAR GRIS EN FONDO Y ACENTOS
# Sidebar y selección grises; botones principales verdes.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="green"
data-brand-secondary="gray"
data-sidebar-brand="both"

# 7. OSCURO FIJO + FONDO AZUL + SELECCIONES VERDES
# Fondo oscuro matizado de azul; acciones principales verdes.
data-sidebar-mode="dark"
data-sidebar-sync="off"
data-sidebar-color="green"
data-brand-secondary="blue"
data-sidebar-brand="background"

# 8. AUTOMÁTICO + FONDO AZUL + SELECCIONES VERDES
# La superficie azul se adapta al modo claro u oscuro.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="green"
data-brand-secondary="blue"
data-sidebar-brand="background"

# 9. AUTOMÁTICO + SIDEBAR AZUL EN FONDO Y ACENTOS
# Navegación azul; botones principales del contenido verdes.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="green"
data-brand-secondary="blue"
data-sidebar-brand="both"

# 10. AUTOMÁTICO + ACENTOS AZULES, SIN CAMBIAR EL FONDO HABITUAL
# Selección, hover y foco del sidebar azules.
# Botones principales verdes.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="green"
data-brand-secondary="blue"
data-sidebar-brand="accents"

# 11. AUTOMÁTICO + VERDE DOMINANTE + AZUL SOLO EN COMPONENTES OPTATIVOS
# Sidebar verde; azul donde uses clases *-brand-secondary.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="green"
data-brand-secondary="blue"
data-sidebar-brand="primary"

# 12. AUTOMÁTICO + AZUL PRINCIPAL + FONDO GRIS
# Botones y selección azules; fondo del sidebar neutro.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="blue"
data-brand-secondary="gray"
data-sidebar-brand="background"

# 13. AUTOMÁTICO + ROSADO PRINCIPAL + FONDO GRIS
# Botones y selección rosados; sidebar blanco humo o grafito.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="pink"
data-brand-secondary="gray"
data-sidebar-brand="background"

# 14. AUTOMÁTICO + GRIS PRINCIPAL + SIDEBAR AZUL
# Botones principales grafito; fondo y selección del sidebar azules.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="gray"
data-brand-secondary="blue"
data-sidebar-brand="both"

# 15. AUTOMÁTICO + SISTEMA MONOCROMÁTICO GRIS
# Sidebar y botones grises; conserva los colores semánticos.
data-sidebar-mode="light"
data-sidebar-sync="system"
data-sidebar-color="gray"
data-brand-secondary="gray"
data-sidebar-brand="both"


*/

/* ==========================================================
   1. VARIABLES
   Sin secundario, las clases optativas usan el principal.
   No reemplazamos --bs-secondary ni .btn-secondary.
   ========================================================== */

:root {
  --brand-secondary-rgb: var(--sb-theme-rgb);
  --brand-secondary-solid: var(--sb-theme-start);
  --brand-secondary-deep: var(--sb-theme-end);
  --brand-secondary-light-ink: var(--sb-theme-ink-light);
  --brand-secondary-dark-ink: var(--sb-theme-ink-dark);
  --brand-secondary-on: #ffffff;

  --brand-secondary-ink: var(--brand-secondary-light-ink);

  --brand-secondary-hover: color-mix(
    in srgb, var(--brand-secondary-solid) 86%, #000000
  );

  --brand-secondary-soft: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) 12%,
    var(--app-tint-base, #ffffff)
  );

  --brand-secondary-soft-hover: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) 19%,
    var(--app-tint-base, #ffffff)
  );

  --brand-secondary-soft-active: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) 26%,
    var(--app-tint-base, #ffffff)
  );

  --brand-secondary-border: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) 42%,
    var(--app-tint-base, #ffffff)
  );

  --brand-secondary-ring: rgba(
    var(--brand-secondary-rgb), 0.28
  );

  --brand-secondary-disabled-opacity: 0.5;

  /*
    Intensidad del matiz del fondo del sidebar.
    No es un fondo azul/rojo puro: conserva la legibilidad.
  */
  --brand-sidebar-dark-tint: 18%;
  --brand-sidebar-light-tint: 7%;
}

html.dark-style {
  --brand-secondary-ink: var(--brand-secondary-dark-ink);
}

/* ==========================================================
   2. PALETAS SECUNDARIAS
   Independientes de data-sidebar-color.
   ========================================================== */

html[data-brand-secondary="green"] {
  --brand-secondary-rgb: 16, 185, 129;
  --brand-secondary-solid: #047857;
  --brand-secondary-deep: #065f46;
  --brand-secondary-light-ink: #047857;
  --brand-secondary-dark-ink: #6ee7b7;
}

html[data-brand-secondary="blue"] {
  --brand-secondary-rgb: 59, 130, 246;
  --brand-secondary-solid: #2563eb;
  --brand-secondary-deep: #1d4ed8;
  --brand-secondary-light-ink: #1d4ed8;
  --brand-secondary-dark-ink: #93c5fd;
}

html[data-brand-secondary="red"] {
  --brand-secondary-rgb: 239, 68, 68;
  --brand-secondary-solid: #dc2626;
  --brand-secondary-deep: #b91c1c;
  --brand-secondary-light-ink: #b91c1c;
  --brand-secondary-dark-ink: #fca5a5;
}

html[data-brand-secondary="orange"] {
  --brand-secondary-rgb: 249, 115, 22;
  --brand-secondary-solid: #c2410c;
  --brand-secondary-deep: #9a3412;
  --brand-secondary-light-ink: #c2410c;
  --brand-secondary-dark-ink: #fdba74;
}

html[data-brand-secondary="purple"] {
  --brand-secondary-rgb: 139, 92, 246;
  --brand-secondary-solid: #7c3aed;
  --brand-secondary-deep: #6d28d9;
  --brand-secondary-light-ink: #6d28d9;
  --brand-secondary-dark-ink: #c4b5fd;
}

html[data-brand-secondary="pink"] {
  --brand-secondary-rgb: 236, 72, 153;
  --brand-secondary-solid: #be185d;
  --brand-secondary-deep: #9d174d;
  --brand-secondary-light-ink: #be185d;
  --brand-secondary-dark-ink: #f9a8d4;
}

html[data-brand-secondary="fuchsia"] {
  --brand-secondary-rgb: 217, 70, 239;
  --brand-secondary-solid: #a21caf;
  --brand-secondary-deep: #86198f;
  --brand-secondary-light-ink: #a21caf;
  --brand-secondary-dark-ink: #f0abfc;
}

html[data-brand-secondary="indigo"] {
  --brand-secondary-rgb: 99, 102, 241;
  --brand-secondary-solid: #4f46e5;
  --brand-secondary-deep: #4338ca;
  --brand-secondary-light-ink: #4338ca;
  --brand-secondary-dark-ink: #a5b4fc;
}

html[data-brand-secondary="teal"] {
  --brand-secondary-rgb: 20, 184, 166;
  --brand-secondary-solid: #0f766e;
  --brand-secondary-deep: #115e59;
  --brand-secondary-light-ink: #0f766e;
  --brand-secondary-dark-ink: #5eead4;
}

html[data-brand-secondary="cyan"] {
  --brand-secondary-rgb: 6, 182, 212;
  --brand-secondary-solid: #0e7490;
  --brand-secondary-deep: #155e75;
  --brand-secondary-light-ink: #0e7490;
  --brand-secondary-dark-ink: #67e8f9;
}

html[data-brand-secondary="amber"] {
  --brand-secondary-rgb: 245, 158, 11;
  --brand-secondary-solid: #b45309;
  --brand-secondary-deep: #92400e;
  --brand-secondary-light-ink: #92400e;
  --brand-secondary-dark-ink: #fcd34d;
}

html[data-brand-secondary="lime"] {
  --brand-secondary-rgb: 132, 204, 22;
  --brand-secondary-solid: #4d7c0f;
  --brand-secondary-deep: #3f6212;
  --brand-secondary-light-ink: #4d7c0f;
  --brand-secondary-dark-ink: #bef264;
}

/* ==========================================================
   3. SIDEBAR: FONDO SECUNDARIO
   Activo únicamente si hay secundario y el papel es
   background o both.

   Conserva las selecciones primarias en modo background.
   ========================================================== */

html[data-brand-secondary]:not(
  [data-brand-secondary=""],
  [data-brand-secondary="off"],
  [data-brand-secondary="none"]
):is(
  [data-sidebar-brand="background"],
  [data-sidebar-brand="both"]
) #layout-menu {
  --sb-surface-top: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) var(--brand-sidebar-dark-tint),
    #171c23
  );

  --sb-surface-bottom: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) var(--brand-sidebar-dark-tint),
    #10151b
  );

  /* Textos neutros: no conservan el matiz verde anterior */
  --sb-brand-color: #f3f6fa;
  --sb-label-color: #ced6e0;
  --sb-sub-label-color: #b3bfce;
  --sb-muted-color: #91a0b2;
  --sb-icon-color: #afbdcd;

  background: linear-gradient(
    180deg,
    var(--sb-surface-top),
    var(--sb-surface-bottom)
  ) !important;
}

html[data-sidebar-mode="light"][data-brand-secondary]:not(
  [data-brand-secondary=""],
  [data-brand-secondary="off"],
  [data-brand-secondary="none"]
):is(
  [data-sidebar-brand="background"],
  [data-sidebar-brand="both"]
) #layout-menu {
  --sb-surface-top: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) var(--brand-sidebar-light-tint),
    #ffffff
  );

  --sb-surface-bottom: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) var(--brand-sidebar-light-tint),
    #f6f8fb
  );

  --sb-brand-color: #1d2938;
  --sb-label-color: #425166;
  --sb-sub-label-color: #58677b;
  --sb-muted-color: #78879a;
  --sb-icon-color: #64758b;
}

/* La sombra superior usa el fondo real, no el RGB anterior */
html[data-brand-secondary]:not(
  [data-brand-secondary=""],
  [data-brand-secondary="off"],
  [data-brand-secondary="none"]
):is(
  [data-sidebar-brand="background"],
  [data-sidebar-brand="both"]
) #layout-menu .menu-inner-shadow {
  background: linear-gradient(
    to bottom,
    var(--sb-surface-top),
    transparent
  ) !important;
}

/* ==========================================================
   4. SIDEBAR: ACCENTOS SECUNDARIOS
   Sobrescritura LOCAL, nunca en html.

   El CSS existente reutiliza estos valores para:
   hover, pulsado, selección, foco, scroll, logo y compacto.
   ========================================================== */

html[data-brand-secondary]:not(
  [data-brand-secondary=""],
  [data-brand-secondary="off"],
  [data-brand-secondary="none"]
):is(
  [data-sidebar-brand="accents"],
  [data-sidebar-brand="both"]
) #layout-menu {
  --sb-theme-rgb: var(--brand-secondary-rgb);
  --sb-theme-start: var(--brand-secondary-solid);
  --sb-theme-end: var(--brand-secondary-deep);
  --sb-theme-on-active: var(--brand-secondary-on);

  --sb-theme-ink-light: var(--brand-secondary-light-ink);
  --sb-theme-ink-dark: var(--brand-secondary-dark-ink);

  /*
    Recalcular localmente: el modo del SIDEBAR puede ser
    diferente del modo del contenido.
  */
  --sb-theme-ink: var(--brand-secondary-dark-ink);
}

html[data-sidebar-mode="light"][data-brand-secondary]:not(
  [data-brand-secondary=""],
  [data-brand-secondary="off"],
  [data-brand-secondary="none"]
):is(
  [data-sidebar-brand="accents"],
  [data-sidebar-brand="both"]
) #layout-menu {
  --sb-theme-ink: var(--brand-secondary-light-ink);
}

/* ==========================================================
   5. UTILIDADES OPTATIVAS
   No modifican primary, success, danger, warning o info.
   ========================================================== */

.text-brand-secondary {
  color: var(--brand-secondary-ink) !important;
}

.bg-brand-secondary {
  color: var(--brand-secondary-on) !important;
  background-color: var(--brand-secondary-solid) !important;
}

.bg-label-brand-secondary {
  color: var(--brand-secondary-ink) !important;
  background-color: var(--brand-secondary-soft) !important;
}

.border-brand-secondary {
  border-color: var(--brand-secondary-border) !important;
}

.fill-brand-secondary {
  fill: var(--brand-secondary-ink) !important;
}

.link-brand-secondary {
  color: var(--brand-secondary-ink) !important;
}

.link-brand-secondary:hover {
  color: var(--brand-secondary-ink) !important;
  text-decoration: underline;
}

.link-brand-secondary:focus-visible {
  outline: 2px solid var(--brand-secondary-ink);
  outline-offset: 3px;
}

.link-brand-secondary:active {
  opacity: 0.8;
}

.link-brand-secondary:is(.disabled, [aria-disabled="true"]) {
  opacity: var(--brand-secondary-disabled-opacity);
  cursor: not-allowed;
}

/* ==========================================================
   6. BOTÓN SECUNDARIO SÓLIDO
   Usar: class="btn btn-brand-secondary"
   ========================================================== */

.btn-brand-secondary {
  --bs-btn-color: var(--brand-secondary-on);
  --bs-btn-bg: var(--brand-secondary-solid);
  --bs-btn-border-color: var(--brand-secondary-solid);

  --bs-btn-hover-color: var(--brand-secondary-on);
  --bs-btn-hover-bg: var(--brand-secondary-hover);
  --bs-btn-hover-border-color: var(--brand-secondary-hover);

  --bs-btn-active-color: var(--brand-secondary-on);
  --bs-btn-active-bg: var(--brand-secondary-deep);
  --bs-btn-active-border-color: var(--brand-secondary-deep);

  --bs-btn-disabled-color: var(--brand-secondary-on);
  --bs-btn-disabled-bg: var(--brand-secondary-solid);
  --bs-btn-disabled-border-color: var(--brand-secondary-solid);
  --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);

  color: var(--brand-secondary-on) !important;
  background: var(--brand-secondary-solid) !important;
  border-color: var(--brand-secondary-solid) !important;
}

.btn-brand-secondary:hover {
  background: var(--brand-secondary-hover) !important;
  border-color: var(--brand-secondary-hover) !important;
}

.btn-brand-secondary:is(:active, .active, .show),
.btn-check:checked + .btn-brand-secondary {
  background: var(--brand-secondary-deep) !important;
  border-color: var(--brand-secondary-deep) !important;
}

/* ==========================================================
   7. BOTONES OUTLINE Y SUAVE
   ========================================================== */

.btn-outline-brand-secondary,
.btn-label-brand-secondary {
  --bs-btn-color: var(--brand-secondary-ink);
  --bs-btn-hover-color: var(--brand-secondary-ink);
  --bs-btn-active-color: var(--brand-secondary-ink);
  --bs-btn-disabled-color: var(--brand-secondary-ink);
  --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);

  color: var(--brand-secondary-ink) !important;
  border-color: var(--brand-secondary-border) !important;
}

.btn-outline-brand-secondary {
  background: transparent !important;
}

.btn-label-brand-secondary {
  background: var(--brand-secondary-soft) !important;
  border-color: transparent !important;
}

.btn-outline-brand-secondary:hover,
.btn-label-brand-secondary:hover {
  background: var(--brand-secondary-soft-hover) !important;
}

.btn-outline-brand-secondary:is(:active, .active, .show),
.btn-label-brand-secondary:is(:active, .active, .show),
.btn-check:checked + .btn-outline-brand-secondary,
.btn-check:checked + .btn-label-brand-secondary {
  background: var(--brand-secondary-soft-active) !important;
  border-color: var(--brand-secondary-border) !important;
}

/* ==========================================================
   8. FOCO Y DISABLED
   Disabled tiene prioridad sobre hover y active.
   ========================================================== */

.btn:is(
  .btn-brand-secondary,
  .btn-outline-brand-secondary,
  .btn-label-brand-secondary
):focus-visible,
.btn-check:focus-visible + .btn:is(
  .btn-brand-secondary,
  .btn-outline-brand-secondary,
  .btn-label-brand-secondary
) {
  outline: 2px solid var(--brand-secondary-ink) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--brand-secondary-ring) !important;
}

.btn:is(
  .btn-brand-secondary,
  .btn-outline-brand-secondary,
  .btn-label-brand-secondary
):is(:disabled, .disabled, [aria-disabled="true"]),
.btn-check:disabled + .btn:is(
  .btn-brand-secondary,
  .btn-outline-brand-secondary,
  .btn-label-brand-secondary
) {
  opacity: var(--brand-secondary-disabled-opacity) !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

.btn-brand-secondary:is(:disabled, .disabled, [aria-disabled="true"]),
.btn-check:disabled + .btn-brand-secondary {
  background: var(--brand-secondary-solid) !important;
  border-color: var(--brand-secondary-solid) !important;
}

.btn-outline-brand-secondary:is(:disabled, .disabled, [aria-disabled="true"]),
.btn-check:disabled + .btn-outline-brand-secondary {
  background: transparent !important;
  border-color: var(--brand-secondary-border) !important;
}

.btn-label-brand-secondary:is(:disabled, .disabled, [aria-disabled="true"]),
.btn-check:disabled + .btn-label-brand-secondary {
  background: var(--brand-secondary-soft) !important;
  border-color: transparent !important;
}

/* ==========================================================
   SIGAE — GRIS GRAFITO
   Añadir al FINAL de brand-secondary.css.

   Principal:
     data-sidebar-color="gray"

   Secundario:
     data-brand-secondary="gray"

   Funciona con los estados y derivados ya existentes.
   ========================================================== */

/* ==========================================================
   1. GRIS COMO COLOR PRINCIPAL
   Botones, selecciones, enlaces y efectos de la aplicación.
   ========================================================== */

html[data-sidebar-color="gray"] {
  --sb-theme-rgb: 161, 161, 170;
  --sb-theme-start: #52525b;
  --sb-theme-end: #3f3f46;
  --sb-theme-ink-light: #52525b;
  --sb-theme-ink-dark: #d4d4d8;
  --sb-theme-on-active: #ffffff;
}

/* ==========================================================
   2. GRIS COMO COLOR SECUNDARIO
   Reutiliza hover, active, focus, disabled y variantes suaves
   definidos en brand-secondary.css.
   ========================================================== */

html[data-brand-secondary="gray"] {
  --brand-secondary-rgb: 161, 161, 170;
  --brand-secondary-solid: #52525b;
  --brand-secondary-deep: #3f3f46;
  --brand-secondary-light-ink: #52525b;
  --brand-secondary-dark-ink: #d4d4d8;
  --brand-secondary-on: #ffffff;
}

/* ==========================================================
   3. FONDO GRIS DEL SIDEBAR
   Solo cuando gray es secundario y el papel incluye fondo.
   Conserva selecciones primarias en modo background.
   ========================================================== */

html[data-brand-secondary="gray"]:is(
  [data-sidebar-brand="background"],
  [data-sidebar-brand="both"]
) #layout-menu {
  --sb-surface-top: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) var(--brand-sidebar-dark-tint),
    #18181b
  );

  --sb-surface-bottom: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) var(--brand-sidebar-dark-tint),
    #101012
  );
}

/* Gris claro: blanco humo, sin matiz verde o azul */
html[data-sidebar-mode="light"][data-brand-secondary="gray"]:is(
  [data-sidebar-brand="background"],
  [data-sidebar-brand="both"]
) #layout-menu {
  --sb-surface-top: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) var(--brand-sidebar-light-tint),
    #ffffff
  );

  --sb-surface-bottom: color-mix(
    in srgb,
    rgb(var(--brand-secondary-rgb)) var(--brand-sidebar-light-tint),
    #f7f7f8
  );
}