/* ============================================================================
   IDENTIDAD DE MARCA — CORPORACIÓN SIEGFRIED
   Override sobre el tema Xintra con la paleta OFICIAL del manual de marca.
   Cargar SIEMPRE después de styles.css. 100% REVERSIBLE: quitar el <link>
   a este archivo en los _Layout*.cshtml (o revertir el commit) deja el portal
   exactamente como estaba.

   Paleta oficial (Pantone -> HEX):
     Rojo ladrillo  1807C  #A4343A   (color hero de identidad)
     Azul marino    2945C/CMYK #103878
     Celeste        312C   #00A0D0
     Teal           3268C  #00A499
     Negro                 #1A1A1A
   ============================================================================ */

:root {
  /* Paleta oficial disponible como utilidades para todo el portal */
  --sgf-red:      #A4343A;  --sgf-red-rgb:      164, 52, 58;
  --sgf-navy:     #103878;  --sgf-navy-rgb:      16, 56, 120;
  --sgf-blue:     #005898;  --sgf-blue-rgb:       0, 88, 152;
  --sgf-celeste:  #00A0D0;  --sgf-celeste-rgb:    0, 160, 208;
  --sgf-teal:     #00A499;  --sgf-teal-rgb:       0, 164, 153;
  --sgf-rose:     #C57480;
  --sgf-ink:      #1A1A1A;
  --sgf-gray:     #616160;

  /* Primario del portal -> AZUL MARINO Siegfried.
     (Se deja el rojo como acento de marca y para no chocar con el rojo de "danger").
     OJO: sin !important, para respetar el color que el usuario elija en el switcher. */
  --primary-rgb: 16, 56, 120;
}

/* El asistente MAIA lleva el ROJO hero de la marca (es la cara de la plataforma).
   !important para ganarle a la variable inline del propio widget, sin tocar su código. */
.sgfai { --sgfai-c: 164, 52, 58 !important; }

/* ============================================================================
   SWITCHER · Theme Colors con la paleta OFICIAL Siegfried.
   Pinta los círculos del panel (los valores que APLICA cada opción están en
   custom-switcher.js con los mismos RGB). Misma especificidad que styles.css
   pero cargado después → gana sin !important.
   ============================================================================ */

/* Theme Primary: 1 Azul marino · 2 Rojo ladrillo · 3 Celeste · 4 Teal · 5 Azul */
.theme-colors .switch-select .color-input.color-primary-1 { background-color: rgb(16, 56, 120); }
.theme-colors .switch-select .color-input.color-primary-2 { background-color: rgb(164, 52, 58); }
.theme-colors .switch-select .color-input.color-primary-3 { background-color: rgb(0, 160, 208); }
.theme-colors .switch-select .color-input.color-primary-4 { background-color: rgb(0, 164, 153); }
.theme-colors .switch-select .color-input.color-primary-5 { background-color: rgb(0, 88, 152); }

/* Theme Background (modo oscuro): 1 Navy noche · 2 Granate · 3 Petróleo · 4 Teal oscuro · 5 Tinta */
.theme-colors .switch-select .color-input.color-bg-1 { background-color: rgb(10, 30, 64); }
.theme-colors .switch-select .color-input.color-bg-2 { background-color: rgb(62, 22, 26); }
.theme-colors .switch-select .color-input.color-bg-3 { background-color: rgb(4, 62, 84); }
.theme-colors .switch-select .color-input.color-bg-4 { background-color: rgb(4, 66, 62); }
.theme-colors .switch-select .color-input.color-bg-5 { background-color: rgb(30, 33, 38); }

/* =============================================================================
   Choices.js sobre mapas Leaflet — el dropdown debe quedar POR ENCIMA del mapa.

   Leaflet apila alto: .leaflet-pane = 400, .leaflet-control = 800,
   .leaflet-top/.leaflet-bottom = 1000. El dropdown de Choices trae z-index: 1,
   así que en Geolocalización la lista de colaboradores se dibujaba DEBAJO del
   mapa y era imposible elegir a nadie.

   OJO CON LA ESPECIFICIDAD: choices.min.css se carga DESPUÉS de este archivo en
   _LayoutHome, así que un selector de igual peso (.choices__list--dropdown) lo
   perdería por orden de cascada. Por eso se usan selectores más específicos
   (.choices.is-open .choices__list--dropdown = 0,3,0) que ganan igual.

   Se eleva solo mientras está ABIERTO, para no tapar nada el resto del tiempo.
   ========================================================================== */
.choices { position: relative; }
.choices.is-open { z-index: 1100; }
.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded] { z-index: 1100; }

/* =============================================================================
   Choices.js dentro de modales — el dropdown no debe quedar RECORTADO.

   Distinto del problema de arriba: aca no es que quede debajo de algo, es que un
   ancestro con overflow (el .modal de Bootstrap lleva overflow-y:auto, una card
   con esquinas redondeadas, una tabla con scroll) le corta la lista y solo se ven
   dos o tres opciones.

   La posicion la fija SgfUI.setupChoices en JS (position:fixed contra la ventana,
   que ningun overflow puede recortar). Lo de aca es el respaldo: si el JS no llega
   a colocarlo, la lista igual queda por encima del modal y con su altura util.

   El max-height va en el <div> del dropdown y no en el .choices__list interno
   porque con position:fixed el div deja de heredar el alto del contenedor.
   ========================================================================== */
.choices.is-open .choices__list--dropdown {
    max-height: 320px;
    overflow: hidden;
    box-shadow: 0 8px 24px -8px rgba(27, 33, 31, .25);
}
.choices.is-open .choices__list--dropdown .choices__list {
    max-height: 280px;
    overflow-y: auto;
}