/* Consola de administración de Keycloak con la marca Wasi (familia N3 Poison).
 *
 * La consola usa PatternFly 5. Aquí se cambian sus variables para que apunten a los tokens de
 * la marca (--wasi-*, en wasi.css, copiados de marca_wasi con tools/tokens_wasi.py).
 * Ningún color va escrito a mano. Si PatternFly cambia de versión mayor (v5 -> v6), los nombres
 * de estas variables cambian y este archivo hay que rehacerlo.
 */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap");

:root,
:root.pf-v5-theme-dark {
  /* Tipografía: Roboto en toda la interfaz, JetBrains Mono para datos. */
  --pf-v5-global--FontFamily--text: var(--wasi-font-sans);
  --pf-v5-global--FontFamily--heading: var(--wasi-font-sans);
  --pf-v5-global--FontFamily--monospace: var(--wasi-font-mono);
  --pf-v5-global--FontFamily--redhatfont--text: var(--wasi-font-sans);
  --pf-v5-global--FontFamily--redhatfont--heading: var(--wasi-font-sans);
  --pf-v5-global--FontWeight--bold: 700;

  /* Color principal: acción principal y estado activo. */
  --pf-v5-global--primary-color--100: var(--wasi-primary);
  --pf-v5-global--primary-color--200: var(--wasi-primary-pressed);
  --pf-v5-global--primary-color--dark-100: var(--wasi-primary);
  --pf-v5-global--primary-color--light-100: var(--wasi-primary-soft);
  --pf-v5-global--link--Color: var(--wasi-accent-text);
  --pf-v5-global--link--Color--hover: var(--wasi-accent-text);
  --pf-v5-global--link--Color--dark: var(--wasi-accent-text);
  --pf-v5-global--link--Color--dark--hover: var(--wasi-accent-text);
  --pf-v5-global--active-color--100: var(--wasi-primary);
  --pf-v5-global--active-color--400: var(--wasi-primary);

  /* Fondos, texto y bordes. */
  --pf-v5-global--BackgroundColor--100: var(--wasi-surface);
  --pf-v5-global--BackgroundColor--200: var(--wasi-bg);
  --pf-v5-global--BackgroundColor--light-100: var(--wasi-surface);
  --pf-v5-global--BackgroundColor--light-200: var(--wasi-surface-2);
  --pf-v5-global--BackgroundColor--light-300: var(--wasi-surface-2);
  --pf-v5-global--Color--100: var(--wasi-text);
  --pf-v5-global--Color--200: var(--wasi-text-muted);
  --pf-v5-global--BorderColor--100: var(--wasi-border);
  --pf-v5-global--BorderColor--200: var(--wasi-border);
  --pf-v5-global--BorderColor--300: var(--wasi-border-strong);

  /* Estados: cada uno con su token, nunca con el color de marca. */
  --pf-v5-global--success-color--100: var(--wasi-success);
  --pf-v5-global--success-color--200: var(--wasi-success);
  --pf-v5-global--warning-color--100: var(--wasi-warning);
  --pf-v5-global--warning-color--200: var(--wasi-warning);
  --pf-v5-global--danger-color--100: var(--wasi-danger);
  --pf-v5-global--danger-color--200: var(--wasi-danger);
  --pf-v5-global--danger-color--300: var(--wasi-danger);
  --pf-v5-global--info-color--100: var(--wasi-info);
  --pf-v5-global--info-color--200: var(--wasi-info);

  /* Radios: 10-12 px en botones y campos, 16 px en tarjetas. */
  --pf-v5-global--BorderRadius--sm: 10px;
  --pf-v5-global--BorderRadius--lg: 16px;
}

/* Barra superior y menú lateral: superficie de la marca en lugar del negro de Red Hat. */
.pf-v5-c-masthead,
:root.pf-v5-theme-dark .pf-v5-c-masthead,
.pf-v5-c-masthead .pf-v5-c-masthead__main,
.pf-v5-c-masthead .pf-v5-c-masthead__content {
  background-color: var(--wasi-surface);
  --pf-v5-c-masthead--BackgroundColor: var(--wasi-surface);
  --pf-v5-c-masthead--item-border-color--base: var(--wasi-border);
  color: var(--wasi-text);
  border-bottom: 1px solid var(--wasi-border);
}
.pf-v5-c-masthead .pf-v5-c-toolbar {
  --pf-v5-c-toolbar--BackgroundColor: var(--wasi-surface);
  background-color: var(--wasi-surface);
}
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-button--m-plain--Color: var(--wasi-text);
  --pf-v5-c-menu-toggle--Color: var(--wasi-text);
  color: var(--wasi-text);
}
.pf-v5-c-page__sidebar,
:root.pf-v5-theme-dark .pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--wasi-surface);
  border-right: 1px solid var(--wasi-border);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav {
  --pf-v5-c-nav--BackgroundColor: var(--wasi-surface);
  --pf-v5-c-nav__link--Color: var(--wasi-text);
  --pf-v5-c-nav__link--hover--Color: var(--wasi-on-primary-soft);
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--wasi-primary-soft);
  --pf-v5-c-nav__link--m-current--Color: var(--wasi-on-primary-soft);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--wasi-primary-soft);
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--after--BorderColor: var(--wasi-primary);
  --pf-v5-c-nav__section-title--Color: var(--wasi-text-muted);
  --pf-v5-c-nav__section--before--BorderColor: var(--wasi-border);
  --pf-v5-c-nav__item--before--BorderColor: transparent;
  --pf-v5-c-nav__section--section--before--BorderColor: var(--wasi-border);
  --pf-v5-c-nav--m-light__section--section--before--BorderColor: var(--wasi-border);
  --pf-v5-c-nav--c-divider--BackgroundColor: var(--wasi-border);
}
.pf-v5-c-page__sidebar .pf-v5-c-divider,
.pf-v5-c-page__sidebar hr {
  --pf-v5-c-divider--after--BackgroundColor: var(--wasi-border);
  --pf-v5-c-divider--BackgroundColor: var(--wasi-border);
}

/* Etiquetas azules de PatternFly (por ejemplo "Realm actual"): tono suave de la marca. */
.pf-v5-c-label.pf-m-blue {
  --pf-v5-c-label--m-blue--BackgroundColor: var(--wasi-primary-soft);
  --pf-v5-c-label--m-blue__content--Color: var(--wasi-on-primary-soft);
  --pf-v5-c-label--m-blue__content--before--BorderColor: transparent;
}
.pf-v5-c-page__main-section.pf-m-light,
.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: var(--wasi-bg);
}

/* Botón principal y campos. */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--wasi-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--wasi-primary-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--wasi-primary-pressed);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--wasi-primary-hover);
  --pf-v5-c-button--m-primary--Color: var(--wasi-on-primary);
  font-weight: 500;
}
/* Campos de texto al estilo shadcn: borde fino en los cuatro lados, esquinas de 10 px, el mismo
 * fondo que la página y anillo de foco. PatternFly dibuja el borde con dos capas (::before y
 * ::after) encima del campo; se apagan y el borde va en el campo mismo. */
.pf-v5-c-form-control,
.pf-v5-c-text-input-group,
.pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-secondary) {
  background-color: var(--wasi-bg) !important;
  color: var(--wasi-text);
  border: 1px solid var(--wasi-border-strong);
  border-radius: 10px;
  --pf-v5-c-form-control--BackgroundColor: var(--wasi-bg);
  --pf-v5-c-form-control--Color: var(--wasi-text);
  --pf-v5-c-form-control--placeholder--Color: var(--wasi-text-muted);
  --pf-v5-c-text-input-group--BackgroundColor: var(--wasi-bg);
  --pf-v5-c-menu-toggle--BackgroundColor: var(--wasi-bg);
  --pf-v5-c-menu-toggle--Color: var(--wasi-text);
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after,
.pf-v5-c-text-input-group__text::before,
.pf-v5-c-text-input-group__text::after,
.pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-secondary)::before,
.pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-secondary)::after {
  display: none !important;
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > textarea,
.pf-v5-c-form-control > select,
.pf-v5-c-text-input-group input {
  background: transparent !important;
  color: var(--wasi-text);
  border-radius: 10px;
}
.pf-v5-c-form-control > input:focus-visible,
.pf-v5-c-form-control > textarea:focus-visible,
.pf-v5-c-form-control > select:focus-visible,
.pf-v5-c-text-input-group input:focus-visible {
  outline: none;
}
.pf-v5-c-form-control:focus-within,
.pf-v5-c-text-input-group:focus-within,
.pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-secondary):focus-visible {
  border-color: var(--wasi-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wasi-primary) 30%, transparent);
  outline: none;
}
.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control.pf-m-disabled {
  background-color: var(--wasi-surface-2) !important;
}
.pf-v5-c-form-control.pf-m-error {
  border-color: var(--wasi-danger);
}
/* Casillas: el color principal de la marca al marcarlas. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--wasi-primary);
}
:focus-visible {
  outline: 3px solid var(--wasi-focus);
  outline-offset: 2px;
}

/* Logo de Wasi: alto fijo en la barra superior. */
.pf-v5-c-masthead__brand img {
  height: 32px;
  width: auto;
}