/* ==========================================================================
   nubens — Admin console (Keycloak 26.x, parent=keycloak.v2, React SPA)
   Branding via tokens PatternFly v5 + selectores estructurales del SPA.
   Patrón paralelo a account.v2.css.
   ========================================================================== */

:root {
  --nubens-primary: #273454;
  --nubens-primary-600: #1e294a;
  --nubens-primary-700: #161e3a;
  --nubens-accent: #2356a3;
  --nubens-accent-hover: #1c4582;
  --nubens-light-blue: #66c3ed;
  --nubens-text: #1f2540;
  --nubens-text-muted: #6c7592;
  --nubens-bg-soft: #f4f6fb;
  --nubens-card-bg: #ffffff;
  --nubens-border: #d8def0;
  --nubens-danger: #c0392b;
  --nubens-success: #1e8e5a;
  --nubens-warning: #c47f00;
  --nubens-radius: 8px;
  --nubens-radius-input: 4px;
  --nubens-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Tokens PatternFly v5 globales que el SPA respeta */
  --pf-v5-global--primary-color--100: var(--nubens-accent);
  --pf-v5-global--primary-color--200: var(--nubens-primary);
  --pf-v5-global--link--Color: var(--nubens-accent);
  --pf-v5-global--link--Color--hover: var(--nubens-primary);
  --pf-v5-global--link--Color--visited: var(--nubens-accent);
  --pf-v5-global--BorderRadius--sm: var(--nubens-radius-input);
  --pf-v5-global--BorderRadius--lg: var(--nubens-radius);
  --pf-v5-global--FontFamily--sans-serif: var(--nubens-font);
  --pf-v5-global--FontFamily--text: var(--nubens-font);
  --pf-v5-global--FontFamily--heading: var(--nubens-font);
}

/* --------------------------------------------------------------------------
   1. Tipografía global
   -------------------------------------------------------------------------- */
html, body, #app,
.pf-v5-c-page,
.pf-v5-c-page *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.pf-v5-svg):not(svg):not(svg *) {
  font-family: var(--nubens-font) !important;
}

/* --------------------------------------------------------------------------
   2. Masthead (cabecera superior)
   -------------------------------------------------------------------------- */
.pf-v5-c-masthead,
header.pf-v5-c-masthead {
  background: linear-gradient(90deg, var(--nubens-primary) 0%, var(--nubens-primary) 55%, var(--nubens-accent) 100%) !important;
  border-bottom: 2px solid var(--nubens-light-blue);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 25, 60, 0.20);
}

.pf-v5-c-masthead .pf-v5-c-masthead__brand,
.pf-v5-c-masthead__brand {
  padding: 0 1rem;
}

.pf-v5-c-masthead img,
.pf-v5-c-masthead__brand img,
.pf-v5-c-masthead__main img {
  content: url('../img/logo.svg');
  max-height: 36px;
  width: auto;
  filter: brightness(1.1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content {
  background: transparent !important;
  color: #ffffff !important;
}

.pf-v5-c-masthead button,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead [data-ouia-component-type] {
  color: #ffffff !important;
}

.pf-v5-c-masthead button:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}

.pf-v5-c-masthead .pf-v5-c-avatar {
  border: 2px solid rgba(255, 255, 255, 0.20);
}

/* Selector de realm en la masthead admin (si lo coloca ahí el SPA) */
.pf-v5-c-masthead .pf-v5-c-context-selector__toggle,
.pf-v5-c-masthead .pf-v5-c-select__toggle {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--nubens-radius-input) !important;
}

/* --------------------------------------------------------------------------
   3. Sidebar
   -------------------------------------------------------------------------- */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar.pf-m-dark,
.pf-v5-c-page__sidebar.pf-m-light,
.pf-v5-c-page__sidebar.keycloak__page_nav__nav {
  /* PatternFly v5 resuelve el bg via custom property; sobreescribimos la propia
     custom property para anular cualquier asset chunk lazy-loaded después. */
  --pf-v5-c-page__sidebar--BackgroundColor: var(--nubens-primary-700);
  --pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--nubens-primary-700);
  background-color: var(--nubens-primary-700) !important;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.pf-v5-c-page__sidebar-body {
  background: var(--nubens-primary-700) !important;
  padding-top: 0.75rem;
}

.pf-v5-c-nav,
.pf-v5-c-nav__list {
  background: transparent !important;
}

.pf-v5-c-nav__link {
  /* PF v5 resuelve color y bg via custom properties; sobreescribimos las del
     propio componente para ganar a los chunks lazy-loaded del SPA. */
  --pf-v5-c-nav__link--Color: rgba(255, 255, 255, 0.82);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--Color: #ffffff;
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(255, 255, 255, 0.06);
  --pf-v5-c-nav__link--focus--Color: #ffffff;
  --pf-v5-c-nav__link--focus--BackgroundColor: rgba(255, 255, 255, 0.06);
  --pf-v5-c-nav__link--active--Color: #ffffff;
  --pf-v5-c-nav__link--active--BackgroundColor: rgba(255, 255, 255, 0.06);
  --pf-v5-c-nav__link--m-current--Color: #ffffff;
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(102, 195, 237, 0.10);
  padding: 0.6rem 1.25rem !important;
  font-size: 0.9rem !important;
  border-left: 3px solid transparent !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"] {
  border-left-color: var(--nubens-light-blue) !important;
  font-weight: 500 !important;
}

/* Submenús */
.pf-v5-c-nav__item.pf-m-expandable .pf-v5-c-nav__subnav {
  background: rgba(0, 0, 0, 0.18) !important;
}

.pf-v5-c-nav__item.pf-m-expandable .pf-v5-c-nav__link {
  padding-left: 2.25rem !important;
  font-size: 0.85rem !important;
}

/* Sección "Manage" / "Configure" (cabeceras de grupo en el nav) */
.pf-v5-c-nav__section-title,
.pf-v5-c-nav__group-title {
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: uppercase;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.25rem !important;
}

/* --------------------------------------------------------------------------
   4. Página principal y secciones
   -------------------------------------------------------------------------- */
.pf-v5-c-page {
  background: var(--nubens-bg-soft) !important;
}

.pf-v5-c-page__main {
  background: var(--nubens-bg-soft) !important;
}

.pf-v5-c-page__main-section {
  background: var(--nubens-bg-soft) !important;
  padding: 1.5rem 2rem !important;
}

.pf-v5-c-page__main-section.pf-m-light {
  background: var(--nubens-card-bg) !important;
}

/* Headings */
.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-content h3 {
  color: var(--nubens-primary) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.pf-v5-c-content p,
.pf-v5-c-page__main-section p {
  color: var(--nubens-text-muted);
}

/* --------------------------------------------------------------------------
   5. Tarjetas / paneles
   -------------------------------------------------------------------------- */
.pf-v5-c-card,
.pf-v5-c-panel {
  --pf-v5-c-card--BackgroundColor: var(--nubens-card-bg);
  --pf-v5-c-card--BorderRadius: var(--nubens-radius);
  --pf-v5-c-card--BoxShadow: 0 1px 3px rgba(15, 25, 60, 0.04);
  background: var(--nubens-card-bg) !important;
  border-radius: var(--nubens-radius) !important;
  border: 1px solid var(--nubens-border) !important;
  box-shadow: 0 1px 3px rgba(15, 25, 60, 0.04) !important;
}

.pf-v5-c-card__title,
.pf-v5-c-card__header-main {
  color: var(--nubens-primary) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   6. Tabs
   -------------------------------------------------------------------------- */
.pf-v5-c-tabs__list {
  border-bottom: 1px solid var(--nubens-border) !important;
}

.pf-v5-c-tabs__link {
  color: var(--nubens-text-muted) !important;
  font-weight: 500 !important;
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link,
.pf-v5-c-tabs__link[aria-selected="true"] {
  color: var(--nubens-primary) !important;
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after,
.pf-v5-c-tabs__link[aria-selected="true"]::after {
  border-color: var(--nubens-accent) !important;
  border-bottom: 3px solid var(--nubens-accent) !important;
}

/* --------------------------------------------------------------------------
   7. Tablas
   -------------------------------------------------------------------------- */
.pf-v5-c-table,
.pf-v5-c-data-list {
  background: var(--nubens-card-bg) !important;
  border-radius: var(--nubens-radius) !important;
}

.pf-v5-c-table {
  --pf-v5-c-table--BackgroundColor: var(--nubens-card-bg);
  --pf-v5-c-table--BorderColor: var(--nubens-border);
  --pf-v5-c-table--cell--Color: var(--nubens-text);
  --pf-v5-c-table--m-compact--cell--PaddingTop: 0.75rem;
}

.pf-v5-c-table thead th,
.pf-v5-c-data-list__item-row {
  color: var(--nubens-text) !important;
  font-weight: 600 !important;
  background: var(--nubens-bg-soft) !important;
  border-bottom: 1px solid var(--nubens-border) !important;
}

.pf-v5-c-table tbody tr {
  border-bottom: 1px solid var(--nubens-border);
}

.pf-v5-c-table tbody tr:hover {
  background: rgba(35, 86, 163, 0.04) !important;
}

.pf-v5-c-data-list__item {
  background: var(--nubens-card-bg) !important;
  border-color: var(--nubens-border) !important;
}

/* --------------------------------------------------------------------------
   8. Toolbar (filtros encima de tablas)
   -------------------------------------------------------------------------- */
.pf-v5-c-toolbar,
.pf-v5-c-toolbar__content {
  background: var(--nubens-card-bg) !important;
}

.pf-v5-c-toolbar__group {
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   9. Botones
   -------------------------------------------------------------------------- */
.pf-v5-c-button {
  border-radius: var(--nubens-radius-input) !important;
  font-weight: 500 !important;
}

.pf-v5-c-button.pf-m-primary {
  background-color: var(--nubens-primary) !important;
  border-color: var(--nubens-primary) !important;
  color: #ffffff !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--nubens-accent) !important;
  border-color: var(--nubens-accent) !important;
}

.pf-v5-c-button.pf-m-secondary {
  border-color: var(--nubens-border) !important;
  color: var(--nubens-primary) !important;
  background: transparent !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background: rgba(35, 86, 163, 0.06) !important;
  border-color: var(--nubens-accent) !important;
  color: var(--nubens-accent) !important;
}

.pf-v5-c-button.pf-m-link {
  color: var(--nubens-accent) !important;
}

.pf-v5-c-button.pf-m-link:hover {
  color: var(--nubens-primary) !important;
}

.pf-v5-c-button.pf-m-danger {
  background-color: var(--nubens-danger) !important;
  border-color: var(--nubens-danger) !important;
}

/* --------------------------------------------------------------------------
   10. Inputs / Forms
   -------------------------------------------------------------------------- */
.pf-v5-c-form-control,
.pf-v5-c-text-input-group__text-input {
  border-radius: var(--nubens-radius-input) !important;
  border: 1px solid var(--nubens-border) !important;
  background: var(--nubens-card-bg) !important;
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-text-input-group__text-input:focus {
  border-color: var(--nubens-accent) !important;
  box-shadow: 0 0 0 3px rgba(35, 86, 163, 0.12) !important;
}

.pf-v5-c-form__label {
  color: var(--nubens-text) !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   11. Switches / Checkboxes / Radio
   -------------------------------------------------------------------------- */
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  background-color: var(--nubens-accent) !important;
}

.pf-v5-c-check__input:checked,
.pf-v5-c-radio__input:checked {
  accent-color: var(--nubens-accent);
}

/* --------------------------------------------------------------------------
   12. Enlaces dentro del contenido
   -------------------------------------------------------------------------- */
.pf-v5-c-page__main a,
.pf-v5-c-page__main-section a {
  color: var(--nubens-accent) !important;
  text-decoration: none;
}

.pf-v5-c-page__main a:hover,
.pf-v5-c-page__main-section a:hover {
  color: var(--nubens-primary) !important;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   13. Dropdowns / menús
   -------------------------------------------------------------------------- */
.pf-v5-c-dropdown__menu,
.pf-v5-c-menu {
  border-radius: var(--nubens-radius) !important;
  border: 1px solid var(--nubens-border) !important;
  box-shadow: 0 8px 24px rgba(15, 25, 60, 0.18);
}

.pf-v5-c-dropdown__menu-item,
.pf-v5-c-menu__item,
.pf-v5-c-menu__list-item,
.pf-v5-c-menu__item-text,
.pf-v5-c-menu__list,
button.pf-v5-c-menu__item,
a.pf-v5-c-menu__item {
  color: var(--nubens-text) !important;
}

/* Menús desplegables que se renderizan DENTRO del masthead (ej. user toggle):
   evitar que la regla `.pf-v5-c-masthead button { color: #fff }` pise el
   color oscuro de los items sobre fondo blanco. */
html body .pf-v5-c-masthead .pf-v5-c-menu,
html body .pf-v5-c-masthead .pf-v5-c-menu *,
html body .pf-v5-c-masthead .pf-v5-c-dropdown__menu,
html body .pf-v5-c-masthead .pf-v5-c-dropdown__menu * {
  color: var(--nubens-text) !important;
}

.pf-v5-c-dropdown__menu-item:hover,
.pf-v5-c-menu__item:hover,
html body .pf-v5-c-masthead .pf-v5-c-menu__item:hover,
html body .pf-v5-c-masthead .pf-v5-c-dropdown__menu-item:hover {
  background: var(--nubens-bg-soft) !important;
  color: var(--nubens-primary) !important;
}

/* --------------------------------------------------------------------------
   14. Modales
   -------------------------------------------------------------------------- */
.pf-v5-c-modal-box {
  border-radius: var(--nubens-radius) !important;
  border: 1px solid var(--nubens-border);
  box-shadow: 0 16px 40px rgba(15, 25, 60, 0.25);
}

.pf-v5-c-modal-box__header,
.pf-v5-c-modal-box__title {
  color: var(--nubens-primary) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   15. Alertas / Toasts
   -------------------------------------------------------------------------- */
.pf-v5-c-alert {
  border-radius: var(--nubens-radius) !important;
}

.pf-v5-c-alert.pf-m-success {
  --pf-v5-c-alert--BorderLeftColor: var(--nubens-success);
}
.pf-v5-c-alert.pf-m-danger {
  --pf-v5-c-alert--BorderLeftColor: var(--nubens-danger);
}
.pf-v5-c-alert.pf-m-warning {
  --pf-v5-c-alert--BorderLeftColor: var(--nubens-warning);
}
.pf-v5-c-alert.pf-m-info {
  --pf-v5-c-alert--BorderLeftColor: var(--nubens-accent);
}

/* --------------------------------------------------------------------------
   16. Badges / Labels / Estados
   -------------------------------------------------------------------------- */
.pf-v5-c-label,
.pf-v5-c-badge {
  border-radius: 999px !important;
  font-weight: 500 !important;
}

/* PF v5 resuelve el color del texto del label vía custom property
   `--pf-v5-c-label__content--Color`. Sobreescribimos esa custom property
   junto a la background del propio label para garantizar contraste. */
.pf-v5-c-label.pf-m-blue {
  --pf-v5-c-label--BackgroundColor: var(--nubens-accent);
  --pf-v5-c-label__content--Color: #ffffff;
  background-color: var(--nubens-accent) !important;
  color: #ffffff !important;
  border-color: var(--nubens-accent) !important;
}

.pf-v5-c-label.pf-m-green {
  --pf-v5-c-label--BackgroundColor: var(--nubens-success);
  --pf-v5-c-label__content--Color: #ffffff;
  background-color: var(--nubens-success) !important;
  color: #ffffff !important;
  border-color: var(--nubens-success) !important;
}

.pf-v5-c-label.pf-m-red {
  --pf-v5-c-label--BackgroundColor: var(--nubens-danger);
  --pf-v5-c-label__content--Color: #ffffff;
  background-color: var(--nubens-danger) !important;
  color: #ffffff !important;
  border-color: var(--nubens-danger) !important;
}

/* Para el resto de modificadores que pinten labels con fondo de color,
   forzar texto blanco por consistencia visual. */
.pf-v5-c-label.pf-m-orange,
.pf-v5-c-label.pf-m-purple,
.pf-v5-c-label.pf-m-cyan,
.pf-v5-c-label.pf-m-gold {
  --pf-v5-c-label__content--Color: #ffffff;
  color: #ffffff !important;
}

/* El span interior del label hereda el color del padre — el bundle PF v5
   le pone su propio color (azul oscuro p/ pf-m-blue, etc.), sobreescribir
   con especificidad alta para ganar al `.pf-v5-c-label.pf-m-blue .pf-v5-c-label__text` del bundle. */
html body .pf-v5-c-label .pf-v5-c-label__text,
html body .pf-v5-c-label.pf-m-blue .pf-v5-c-label__text,
html body .pf-v5-c-label.pf-m-green .pf-v5-c-label__text,
html body .pf-v5-c-label.pf-m-red .pf-v5-c-label__text,
html body .pf-v5-c-label.pf-m-orange .pf-v5-c-label__text,
html body .pf-v5-c-label.pf-m-purple .pf-v5-c-label__text,
html body .pf-v5-c-label.pf-m-cyan .pf-v5-c-label__text,
html body .pf-v5-c-label.pf-m-gold .pf-v5-c-label__text {
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   17. Empty state
   -------------------------------------------------------------------------- */
.pf-v5-c-empty-state__title,
.pf-v5-c-empty-state .pf-v5-c-title {
  color: var(--nubens-primary) !important;
}

.pf-v5-c-empty-state__icon {
  color: var(--nubens-accent) !important;
}

/* --------------------------------------------------------------------------
   18. Breadcrumb
   -------------------------------------------------------------------------- */
.pf-v5-c-breadcrumb__item,
.pf-v5-c-breadcrumb__link {
  color: var(--nubens-text-muted) !important;
}

.pf-v5-c-breadcrumb__link:hover {
  color: var(--nubens-accent) !important;
}

/* ==========================================================================
   19. OVERRIDES REFORZADOS — selectores con especificidad máxima
   --------------------------------------------------------------------------
   Este bloque convive con la inyección via index.ftl (el <link> al final del
   <body>). Si el SPA carga chunks lazy que reescriben tokens del componente
   (especialmente en modo oscuro con `:where(.pf-v5-theme-dark)`), garantizamos
   ganar usando selectores que combinan body + clase + estado.
   ========================================================================== */

/* Item activo del nav lateral */
html body .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) > .pf-v5-c-nav__link,
html body .pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
html body .pf-v5-c-page__sidebar .pf-v5-c-nav__link[aria-current="page"] {
  background-color: rgba(102, 195, 237, 0.10) !important;
  color: #ffffff !important;
  border-left: 3px solid var(--nubens-light-blue) !important;
  font-weight: 500 !important;
}

/* Item NO activo del nav (color base + hover) */
html body .pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  color: rgba(255, 255, 255, 0.82) !important;
  border-left: 3px solid transparent;
}

html body .pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

/* Cards con radius corporativo */
html body .pf-v5-c-card {
  border-radius: var(--nubens-radius) !important;
  border: 1px solid var(--nubens-border) !important;
  box-shadow: 0 1px 3px rgba(15, 25, 60, 0.04) !important;
}

/* Cabecera de tabla con bg suave + texto Nubens */
html body .pf-v5-c-table > thead > tr > th,
html body .pf-v5-c-table thead .pf-v5-c-table__th {
  background-color: var(--nubens-bg-soft) !important;
  color: var(--nubens-text) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--nubens-border) !important;
}

/* Hover de filas con tinte accent muy sutil */
html body .pf-v5-c-table > tbody > tr:hover {
  background-color: rgba(35, 86, 163, 0.04) !important;
}

/* Tab seleccionado con underline accent */
html body .pf-v5-c-tabs__item.pf-m-current > .pf-v5-c-tabs__link,
html body .pf-v5-c-tabs__link[aria-selected="true"] {
  color: var(--nubens-primary) !important;
}

html body .pf-v5-c-tabs__item.pf-m-current > .pf-v5-c-tabs__link::after,
html body .pf-v5-c-tabs__link[aria-selected="true"]::after {
  border-bottom-color: var(--nubens-accent) !important;
}

/* Page main section con fondo suave */
html body .pf-v5-c-page__main-section:not(.pf-m-light) {
  background-color: var(--nubens-bg-soft) !important;
}

/* Botón primario coherente con login (primary navy, hover accent) */
html body .pf-v5-c-button.pf-m-primary {
  background-color: var(--nubens-primary) !important;
  border-color: var(--nubens-primary) !important;
  color: #ffffff !important;
}

html body .pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--nubens-accent) !important;
  border-color: var(--nubens-accent) !important;
}