/* keycloak-account.css · generado por grommunio/branding/generar.py (marca 1.1) desde tokens.css, fuentes/fuentes.json y css/keycloak-account.css: no se edita, se regenera.
   Modos (SELECTORES): alba :root; noche html.pf-v5-theme-dark. */

@font-face {
  font-family: "Archivo";
  src: url("/brand/fuentes/archivo.woff2?v=98d8b108") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("/brand/fuentes/figtree.woff2?v=9ab58306") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("/brand/fuentes/figtree-italica.woff2?v=0afc16dc") format("woff2");
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* crudos, forma y tipografía (tokens.css :root) */
:root {
  --ch-azul-chaska: #1b1e31;
  --ch-azul-profundo: #121421;
  --ch-quyllur-claro: #e7d8c1;
  --ch-verde-qumir: #74c1a7;
  --ch-killmu-chak: #f8794f;
  --ch-inti: #ffd59e;
  --ch-chaska-0: #05060c;
  --ch-chaska-1: #0b0d17;
  --ch-chaska-2: var(--ch-azul-profundo);
  --ch-chaska-3: var(--ch-azul-chaska);
  --ch-chaska-4: #262a43;
  --ch-chaska-5: #363b5a;
  --ch-chaska-6: #4c5276;
  --ch-quyllur-0: #fffaf2;
  --ch-quyllur-1: #f4ecdf;
  --ch-quyllur-2: var(--ch-quyllur-claro);
  --ch-quyllur-3: #cbbba2;
  --ch-quyllur-4: #9d9080;
  --ch-quyllur-5: #6b6459;
  --ch-qumir-1: #b9e3d4;
  --ch-qumir-2: var(--ch-verde-qumir);
  --ch-qumir-3: #4f9b83;
  --ch-qumir-4: #2f6b5a;
  --ch-qumir-5: #183c33;
  --ch-killmu-1: #ffc4ab;
  --ch-killmu-2: var(--ch-killmu-chak);
  --ch-killmu-3: #d65a31;
  --ch-killmu-4: #b4471f;
  --ch-killmu-5: #5c2312;
  --ch-tinta-clara: var(--ch-quyllur-claro);
  --ch-tinta-oscura: var(--ch-azul-chaska);
  --ch-radio-chico: 8px;
  --ch-radio: 14px;
  --ch-radio-pildora: 999px;
  --ch-borde-ancho: 1px;
  --ch-fuente-sistema: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --ch-fuente-titulos: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --ch-fuente-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --ch-fuente-mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  --ch-titulos-ancho: 75%;
  --ch-rotulo-ancho: 125%;
  --ch-rotulo-espaciado: 0.08em;
}

/* juego alba (tokens.css .ch-alba) */
:root {
  --ch-fondo: var(--ch-quyllur-1);
  --ch-fondo-hondo: var(--ch-quyllur-2);
  --ch-superficie: var(--ch-quyllur-0);
  --ch-campo: var(--ch-quyllur-0);
  --ch-campo-hover: var(--ch-quyllur-2);
  --ch-texto: var(--ch-azul-chaska);
  --ch-texto-tenue: var(--ch-chaska-6);
  --ch-borde: var(--ch-quyllur-5);
  --ch-accion: var(--ch-qumir-4);
  --ch-sobre-accion: var(--ch-quyllur-1);
  --ch-accion-hover: var(--ch-qumir-5);
  --ch-accion-tinta: var(--ch-qumir-4);
  --ch-accion-honda: var(--ch-qumir-5);
  --ch-foco: var(--ch-qumir-4);
  --ch-acento: var(--ch-killmu-4);
  --ch-error: var(--ch-killmu-4);
  --ch-error-fondo: var(--ch-quyllur-0);
  --ch-error-borde: var(--ch-killmu-3);
  --ch-enlace: var(--ch-qumir-4);
  --ch-seleccion: var(--ch-qumir-1);
  --ch-brillo: var(--ch-killmu-1);
}

/* juego noche (tokens.css .ch-noche) */
html.pf-v5-theme-dark {
  --ch-fondo: var(--ch-azul-chaska);
  --ch-fondo-hondo: var(--ch-azul-profundo);
  --ch-superficie: var(--ch-chaska-4);
  --ch-campo: var(--ch-chaska-5);
  --ch-campo-hover: var(--ch-chaska-6);
  --ch-texto: var(--ch-quyllur-claro);
  --ch-texto-tenue: var(--ch-quyllur-3);
  --ch-borde: var(--ch-quyllur-4);
  --ch-accion: var(--ch-verde-qumir);
  --ch-sobre-accion: var(--ch-azul-profundo);
  --ch-accion-hover: var(--ch-qumir-1);
  --ch-accion-tinta: var(--ch-qumir-3);
  --ch-accion-honda: var(--ch-qumir-4);
  --ch-foco: var(--ch-verde-qumir);
  --ch-acento: var(--ch-killmu-chak);
  --ch-error: var(--ch-killmu-1);
  --ch-error-fondo: var(--ch-killmu-5);
  --ch-error-borde: var(--ch-killmu-4);
  --ch-enlace: var(--ch-verde-qumir);
  --ch-seleccion: var(--ch-qumir-5);
  --ch-brillo: var(--ch-inti);
}

/* ---- hoja fuente: css/keycloak-account.css ---- */
/* Hoja fuente de la account console v3 de Keycloak (26.7.4, parent=keycloak.v3, PatternFly 5), marca 1.1. generar.py
   la envuelve en salida/brand/css/keycloak-account.css con el @font-face, los crudos y los juegos alba (:root) y noche
   (html.pf-v5-theme-dark, kcDarkModeClass; tabla SELECTORES). `:ch-modos` lo reemplaza generar.py por todos los
   selectores de modo, para que las variables de PatternFly se resuelvan donde cambia el modo y ganen a las de
   :where(.pf-v5-theme-dark), que no suman especificidad. El rol marca la copia a
   themes/chaska/account/resources/css/chaska-account.css (`styles=` de account/theme.properties; index.ftl la lista
   después de las hojas de la app, L106-117). Alba en claro, noche en oscuro (D-2), según el sistema: la cuenta no
   tiene interruptor propio.

   De dónde salen los nombres (main-*.css de keycloak.v3/account en org.keycloak.keycloak-account-ui-26.7.4.jar):
   - PatternFly 5 declara las variables de componente EN el componente (.pf-v5-c-button{--pf-v5-c-button--m-primary--
     BackgroundColor:…}), así que desde :root solo se mueven las globales; las de componente van en una regla sobre el
     componente, más abajo, con la misma especificidad que las de PatternFly y cargadas después;
   - varios componentes vuelven a declarar las globales a partir de las familias «light-*» y «dark-*»
     (.pf-v5-c-data-list{--pf-v5-global--BackgroundColor--100:var(--pf-v5-global--BackgroundColor--light-100)},
     .pf-v5-c-masthead{…Color--light-100…BackgroundColor--dark-100}): por eso se mapean también esas familias;
   - la familia «dark-*» es la de las superficies oscuras dentro del tema claro (la barra de arriba, los tooltips):
     en alba la pinta la noche de la casa con los crudos, en noche el juego noche. Es el único lugar con crudos.
   Solo var(--ch-*): nada de hex. */

:root,
html.pf-v5-theme-dark {
  /* tipografía: Figtree en el texto, Archivo en los títulos (las *--vf son las que usa PF con fuentes variables) */
  --pf-v5-global--FontFamily--text: var(--ch-fuente-texto);
  --pf-v5-global--FontFamily--text--vf: var(--ch-fuente-texto);
  --pf-v5-global--FontFamily--heading: var(--ch-fuente-titulos);
  --pf-v5-global--FontFamily--heading--vf: var(--ch-fuente-titulos);

  /* superficies: la página es el fondo; secciones, tarjetas, barra lateral y campos, la superficie */
  --pf-v5-global--BackgroundColor--100: var(--ch-superficie);
  --pf-v5-global--BackgroundColor--150: var(--ch-fondo);
  --pf-v5-global--BackgroundColor--200: var(--ch-fondo);
  --pf-v5-global--BackgroundColor--300: var(--ch-campo-hover);
  --pf-v5-global--BackgroundColor--400: var(--ch-campo);
  --pf-v5-global--BackgroundColor--light-100: var(--ch-superficie);
  --pf-v5-global--BackgroundColor--light-200: var(--ch-fondo);
  --pf-v5-global--BackgroundColor--light-300: var(--ch-fondo);

  /* texto */
  --pf-v5-global--Color--100: var(--ch-texto);
  --pf-v5-global--Color--200: var(--ch-texto-tenue);
  --pf-v5-global--Color--dark-100: var(--ch-texto);
  --pf-v5-global--Color--dark-200: var(--ch-texto-tenue);

  /* bordes: los divisores suaves; los de los campos con --ch-borde (≥ 3:1 contra la superficie, plan §2.4) */
  --pf-v5-global--BorderColor--100: var(--ch-campo-hover);
  --pf-v5-global--BorderColor--200: var(--ch-borde);
  --pf-v5-global--BorderColor--300: var(--ch-campo-hover);
  --pf-v5-global--BorderColor--400: var(--ch-borde);
  --pf-v5-global--BorderColor--dark-100: var(--ch-campo-hover);

  /* acción, enlaces, foco y el indicador de la página actual del menú */
  --pf-v5-global--primary-color--100: var(--ch-accion);
  --pf-v5-global--primary-color--200: var(--ch-accion-hover);
  --pf-v5-global--primary-color--300: var(--ch-accion);
  --pf-v5-global--primary-color--400: var(--ch-sobre-accion);
  --pf-v5-global--primary-color--dark-100: var(--ch-accion);
  --pf-v5-global--active-color--100: var(--ch-accion);
  --pf-v5-global--link--Color: var(--ch-enlace);
  --pf-v5-global--link--Color--hover: var(--ch-accion-hover);
  --pf-v5-global--link--Color--visited: var(--ch-enlace);
  --pf-v5-global--link--Color--dark: var(--ch-enlace);
  --pf-v5-global--link--Color--dark--hover: var(--ch-accion-hover);

  /* error (textos de ayuda, campos con error, avisos) */
  --pf-v5-global--danger-color--100: var(--ch-error);

  /* forma */
  --pf-v5-global--BorderRadius--sm: var(--ch-radio-chico);
  --pf-v5-global--BorderRadius--lg: var(--ch-radio);
}

/* ---- la familia «dark-*»: la barra de arriba (masthead), los tooltips, los menús oscuros --------------------- */
:root {
  --pf-v5-global--BackgroundColor--dark-100: var(--ch-azul-chaska);
  --pf-v5-global--BackgroundColor--dark-200: var(--ch-azul-profundo);
  --pf-v5-global--BackgroundColor--dark-300: var(--ch-azul-chaska);
  --pf-v5-global--BackgroundColor--dark-400: var(--ch-chaska-4);
  --pf-v5-global--Color--light-100: var(--ch-tinta-clara);
  --pf-v5-global--Color--light-200: var(--ch-quyllur-3);
  --pf-v5-global--BorderColor--light-100: var(--ch-chaska-6);
  --pf-v5-global--primary-color--light-100: var(--ch-verde-qumir);
  --pf-v5-global--active-color--400: var(--ch-verde-qumir);
  --pf-v5-global--link--Color--light: var(--ch-verde-qumir);
  --pf-v5-global--link--Color--light--hover: var(--ch-qumir-1);
  --kc-ch-peligro-hover: var(--ch-killmu-5);
}

html.pf-v5-theme-dark {
  --pf-v5-global--BackgroundColor--dark-100: var(--ch-fondo-hondo);
  --pf-v5-global--BackgroundColor--dark-200: var(--ch-fondo-hondo);
  --pf-v5-global--BackgroundColor--dark-300: var(--ch-fondo);
  --pf-v5-global--BackgroundColor--dark-400: var(--ch-superficie);
  --pf-v5-global--Color--light-100: var(--ch-texto);
  --pf-v5-global--Color--light-200: var(--ch-texto-tenue);
  --pf-v5-global--BorderColor--light-100: var(--ch-campo-hover);
  --pf-v5-global--primary-color--light-100: var(--ch-accion);
  --pf-v5-global--active-color--400: var(--ch-accion);
  --pf-v5-global--link--Color--light: var(--ch-enlace);
  --pf-v5-global--link--Color--light--hover: var(--ch-accion-hover);
  --kc-ch-peligro-hover: var(--ch-killmu-1);
}

/* ---- componentes: lo que PatternFly declara sobre el propio elemento ------------------------------------------ */

/* la barra de arriba: noche en los dos modos (en oscuro PF la pinta palette--black-1000); el logo es crema */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
}

/* botón primario: el texto lo pone PF en Color--light-100 (blanco), que sobre el verde de la noche da 1,5:1;
   acá va --ch-sobre-accion (8,65:1 en noche, 5,31:1 en alba). Botón de peligro: coral con la tinta de la acción. */
.pf-v5-c-button {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ch-accion);
  --pf-v5-c-button--m-primary--Color: var(--ch-sobre-accion);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ch-accion-hover);
  --pf-v5-c-button--m-primary--hover--Color: var(--ch-sobre-accion);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ch-accion-hover);
  --pf-v5-c-button--m-primary--focus--Color: var(--ch-sobre-accion);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ch-accion-hover);
  --pf-v5-c-button--m-primary--active--Color: var(--ch-sobre-accion);
  --pf-v5-c-button--m-danger--BackgroundColor: var(--ch-acento);
  --pf-v5-c-button--m-danger--Color: var(--ch-sobre-accion);
  --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--kc-ch-peligro-hover);
  --pf-v5-c-button--m-danger--hover--Color: var(--ch-sobre-accion);
  --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--kc-ch-peligro-hover);
  --pf-v5-c-button--m-danger--focus--Color: var(--ch-sobre-accion);
  --pf-v5-c-button--m-danger--active--BackgroundColor: var(--kc-ch-peligro-hover);
  --pf-v5-c-button--m-danger--active--Color: var(--ch-sobre-accion);
}

/* en oscuro PF vuelve a declarar el primario sobre la barra de arriba (:where(.pf-v5-theme-dark) .pf-v5-c-masthead
   .pf-v5-c-button, 0,2,0) y pinta su barra de herramientas de palette--black-1000: la barra es una sola */
.pf-v5-c-masthead .pf-v5-c-button {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ch-accion);
}

.pf-v5-c-masthead .pf-v5-c-toolbar {
  --pf-v5-c-toolbar--BackgroundColor: transparent;
}

/* campos de solo lectura (el usuario, que viene del padrón): PF los pinta con disabled-color (gris neutro) */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--ch-fondo);
}

/* lo que queda por debajo de la página (pantallas altas, rebote del scroll) */
html,
body {
  background-color: var(--ch-fondo);
}

/* títulos de página en Archivo angosta (emula roc-grotesk-condensed); los chicos quedan en el ancho normal */
.pf-v5-c-title.pf-m-2xl,
.pf-v5-c-title.pf-m-3xl,
.pf-v5-c-title.pf-m-4xl {
  font-stretch: var(--ch-titulos-ancho);
}

/* la pantalla de carga (estilo en línea de index.ftl L32-46, blanco o #1b1d21) */
.keycloak__loading-container {
  color: var(--ch-texto);
  background-color: var(--ch-fondo);
}

::selection {
  color: var(--ch-texto);
  background: var(--ch-seleccion);
}