/* ==========================================================================
   INTHEGRA · SaaS Backoffice — capa visual moderna sobre APEX 26.1   (v3.12)
   --------------------------------------------------------------------------
   Instalación:
     Static Application Files → css/inthegra-modern.css
     User Interface Attributes → CSS → File URLs:
       #APP_FILES#css/inthegra-modern#MIN#.css
   Estrategia (validada contra app_ui/Core, Theme-Standard, theme_42/Core 26.1
   y el theme style "iris-inthegra"):
     · Todo lo que UT y Core exponen como token (--ut-*, --a-*) se setea en
       :root. Este archivo carga después del theme style, así que gana sin
       !important y los modificadores de UT (Text Content, Stacked, No Border,
       No UI, Remove Header, Simple, Link…) siguen funcionando, porque cada uno
       redefine sus propios tokens.
     · Pisadas directas solo donde no hay token (filete del header, borde
       izquierdo del ítem activo del menú, paneles de tabs, anillos de foco).
   ========================================================================== */

/* ==========================================================================
   0. Tipografía oficial: Poppins (Manual de marca INTHEGRA)
   --------------------------------------------------------------------------
   Self-hosted junto a este CSS (sin Google Fonts: sin request a terceros y
   sin depender de su disponibilidad). Licencia SIL OFL 1.1 (fonts/OFL-Poppins.txt).
   Estructura esperada en Static Files (workspace o app):
     css/inthegra-modern.css
     fonts/poppins-latin-400-normal.woff2   Regular  → cuerpo
     fonts/poppins-latin-500-normal.woff2   Medium   → títulos y subtítulos (manual)
     fonts/poppins-latin-600-normal.woff2   SemiBold → énfasis de UI (cabeceras de
                                                       grilla, tab activa, botón principal)
   ExtraBold queda reservada al logotipo (imagen), no se carga.
   Subset "latin": cubre español completo (á é í ó ú ñ ü ¿ ¡ € °), ~8 KB c/u.
   ========================================================================== */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
  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;
}

@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2");
  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;
}

@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
  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;
}

/* Fallback con métricas ajustadas a Poppins: mientras la fuente no cargó
   (primera visita), el texto se pinta en Arial escalada para ocupar el mismo
   espacio, así el layout no "salta" al llegar Poppins.
   Valores calculados sobre los archivos reales: ancho medio de minúsculas
   Poppins 0.550 em vs Arial 0.482 em; ascent 1050 / descent 350 / gap 100. */
@font-face {
  ascent-override: 91.9%;
  descent-override: 30.63%;
  font-family: "Poppins Fallback";
  line-gap-override: 8.75%;
  size-adjust: 114.26%;
  src: local("Arial"), local("ArialMT");
}


/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* ---- Tokens propios (única fuente de verdad del rediseño) ---- */
  --inth-font: "Poppins", "Poppins Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --inth-bg:            #fafafa;
  --inth-surface:       #ffffff;
  --inth-surface-muted: #fafafa;
  --inth-surface-hover: #f4f4f5;
  --inth-border:        #eaeaea;
  --inth-border-strong: #e4e4e7;
  --inth-border-hover:  #d4d4d8;
  --inth-row-border:    #f1f1f2;

  --inth-text:          #18181b;
  --inth-text-head:     #3f3f46;
  --inth-text-muted:    #71717a;
  --inth-text-subtle:   #a1a1aa;

  /* ---- Acento de marca: DINÁMICO por vertical ----
     Theme Roller compila el "Destacado" de cada app en --ut-palette-primary
     (Backoffice #ff6a00, Seguridad #0f2043). Este archivo ya NO lo pisa:
     lo lee y deriva variantes. Cambiás el Destacado y se adapta todo.
     Fallback #ea580c solo si una app no define el token. */
  --inth-brand:          var(--ut-palette-primary, #ea580c);
  --inth-accent:         var(--inth-brand);   /* sobre fondos claros */
  --inth-accent-on-dark: var(--inth-brand);   /* sobre header y menú oscuros */
  --inth-accent-glow:    var(--inth-brand);   /* punto medio del filete del header */
  --inth-accent-soft:    color-mix(in srgb, var(--inth-accent) 8%, #ffffff);
  --inth-ring:           color-mix(in srgb, var(--inth-accent) 24%, transparent);

  --inth-primary:       #18181b;
  --inth-primary-hover: #27272a;

  /* Links: color FIJO, no derivado del Destacado. Es una affordance funcional,
     no marca: el naranja del acento (L .62) da ~3.5:1 sobre blanco y no pasa
     WCAG AA (4.5:1) en texto de 13-14px, además de leerse como advertencia.
     #2563eb da ~5.2:1 y se reconoce como link en cualquier vertical. */
  --inth-link:          #2563eb;
  --inth-link-hover:    #1d4ed8;

  /* Botones semánticos. Valores originales del theme style entre paréntesis,
     por si preferís volver a ellos. */
  --inth-danger:        #dc2626;   /* (#B3311F) */
  --inth-danger-hover:  #b91c1c;
  --inth-warning:       #d97706;   /* (#8F520A) */
  --inth-warning-hover: #b45309;
  --inth-success:       #16a34a;   /* (#436B1D) */
  --inth-success-hover: #15803d;
  --inth-info:          #0e7490;   /* t-Button--primary (#227E9E) */
  --inth-info-hover:    #155e75;

  /* Chrome (header + menú lateral). Sin soporte de OKLCH relativo queda en
     grafito neutro; con soporte se tiñe con el matiz del Destacado (ver @supports al final de §1). */
  --inth-chrome-tint:     .03;       /* 0 = grafito neutro · .03 sutil · .06 marcado */
  --inth-nav-bg:          #18181b;
  --inth-nav-border:      rgba(255, 255, 255, .06);
  /* Texto del menú: claro, no gris medio. Con #a1a1aa el contraste daba
     6.9:1 (pasa WCAG AA en un monitor), pero en capacitaciones por pantalla
     compartida o proyector el submenú a 12px se leía "transparente" y el
     gris medio sobre oscuro se percibe como deshabilitado. Con #d4d4d8 da
     12:1; la jerarquía la marca el ítem activo (blanco + barra), no un gris
     más apagado en el resto. */
  --inth-nav-text:        #d4d4d8;
  --inth-nav-icon:        #a1a1aa;
  --inth-nav-text-active: #fafafa;
  --inth-nav-hover:       rgba(255, 255, 255, .04);
  --inth-nav-active:      rgba(255, 255, 255, .07);

  /* Jerarquía de radios: contenedor > control > ítem */
  --inth-radius-lg: 12px;
  --inth-radius:    8px;
  --inth-radius-sm: 6px;

  --inth-shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
  --inth-shadow:    0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .03);
  --inth-shadow-lg: 0 16px 32px -12px rgba(0, 0, 0, .14), 0 4px 8px -4px rgba(0, 0, 0, .06);
  --inth-shadow-hot:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 1px 2px rgba(0, 0, 0, .18),
    0 2px 6px -2px rgba(0, 0, 0, .20);
  --inth-shadow-hot-hover:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 2px 4px rgba(0, 0, 0, .18),
    0 6px 14px -4px rgba(0, 0, 0, .25);

  --inth-ease: cubic-bezier(.2, .8, .2, 1);

  /* Densidad de grillas: altura = line-height + padding-y * 2 */
  --inth-cell-py: 10px;
  --inth-cell-px: 14px;
  --inth-cell-lh: 20px;

  /* ---- Base APEX (app_ui/Core) ---- */
  --a-base-font-family:          var(--inth-font);
  --a-base-font-weight-semibold: 600;
  --a-base-link-text-color:            var(--inth-link);
  --a-base-link-hover-text-color:      var(--inth-link-hover);
  --a-base-link-active-text-color:     var(--inth-link-hover);
  --a-base-link-hover-text-decoration: underline;

  --a-palette-primary:          var(--inth-primary);
  --a-palette-primary-contrast: #ffffff;
  --a-palette-primary-shade:    var(--inth-surface-hover);

  /* ---- Universal Theme: página y componentes genéricos ---- */
  --ut-body-background-color:        var(--inth-bg);
  --ut-body-text-color:              var(--inth-text);
  --ut-body-title-background-color:  var(--inth-bg);
  --ut-hero-region-title-text-color: var(--inth-text);
  --ut-link-text-color:              var(--inth-link);
  --ut-component-background-color:   var(--inth-surface);
  --ut-component-border-color:       var(--inth-border);
  --ut-component-border-radius:      var(--inth-radius);
  --ut-component-text-muted-color:   var(--inth-text-muted);

  /* ---- Universal Theme: regiones (tarjetas) ---- */
  --ut-region-background-color:        var(--inth-surface);
  --ut-region-border-color:            var(--inth-border);
  --ut-region-border-radius:           var(--inth-radius-lg);
  --ut-region-box-shadow:              var(--inth-shadow);
  --ut-region-header-background-color: transparent;
  --ut-region-header-border-color:     var(--inth-border);
  --ut-region-header-text-color:       var(--inth-text);
  --ut-region-header-font-size:        .9375rem;

  /* ---- Universal Theme: tabs (Tabs Container y Region Display Selector) ---- */
  --ut-tabs-border-color:                var(--inth-border);
  --ut-tabs-item-text-color:             var(--inth-text-muted);
  --ut-tabs-item-active-text-color:      var(--inth-text);
  --ut-tabs-item-active-highlight-color: var(--inth-accent);
  --ut-tabs-item-hover-background-color: transparent;
  --ut-tabs-item-font-weight:            500;
  --ut-tabs-item-active-font-weight:     600;

  /* ---- Universal Theme: menú lateral ---- */
  --ut-body-nav-background-color:        var(--inth-nav-bg);
  --ut-body-nav-border-color:            var(--inth-nav-border);
  --ut-treeview-toplevel-node-font-size: .875rem;

  /* ---- Botones (t-Button y a-Button consumen los mismos tokens) ---- */
  --a-button-border-radius:          var(--inth-radius);
  --a-button-font-weight:            500;
  --a-button-background-color:       var(--inth-surface);
  --a-button-text-color:             var(--inth-text);
  --a-button-border-color:           var(--inth-border-strong);
  --a-button-shadow:                 var(--inth-shadow-xs);
  --a-button-hover-background-color: var(--inth-surface-muted);
  --a-button-hover-text-color:       var(--inth-text);
  --a-button-hover-border-color:     var(--inth-border-hover);
  --a-button-hover-shadow:           var(--inth-shadow-xs);
  --a-button-focus-border-color:     var(--inth-border-hover);
  --a-button-focus-shadow:           0 0 0 3px var(--inth-ring);

  /* ---- Campos de formulario ---- */
  --a-field-input-background-color:   var(--inth-surface);
  --a-field-input-text-color:         var(--inth-text);
  --a-field-input-border-color:       var(--inth-border-strong);
  --a-field-input-border-radius:      var(--inth-radius);
  --a-field-input-shadow:             var(--inth-shadow-xs);
  --a-field-input-hover-border-color: var(--inth-border-hover);
  --a-field-input-focus-border-color: var(--inth-accent);
  --a-field-placeholder-text-color:   var(--inth-text-subtle);

  /* ---- Toolbar de IG / IRR y buscador ---- */
  --a-toolbar-background-color:                 var(--inth-surface);
  --a-toolbar-border-color:                     var(--inth-border);
  --a-toolbar-sep-border-color:                 var(--inth-border);
  --a-report-controls-input-border-color:       var(--inth-border-strong);
  --a-report-controls-input-border-radius:      var(--inth-radius);
  --a-report-controls-input-focus-border-color: var(--inth-accent);

  /* ---- Grid View (IG) e IRR ---- */
  --a-gv-font-size:                  13px;
  --a-gv-line-height:                var(--inth-cell-lh);
  --a-gv-text-color:                 var(--inth-text);
  --a-gv-background-color:           var(--inth-surface);
  --a-gv-border-color:               var(--inth-border);
  --a-gv-border-radius:              var(--inth-radius);
  --a-gv-cell-border-color:          var(--inth-row-border);
  --a-gv-cell-padding-x:             var(--inth-cell-px);
  --a-gv-cell-padding-y:             var(--inth-cell-py);
  --a-gv-cell-line-height:           var(--inth-cell-lh);
  --a-gv-cell-height:                calc(var(--inth-cell-lh) + var(--inth-cell-py) * 2);
  --a-gv-header-background-color:    var(--inth-surface-muted);
  --a-gv-header-cell-border-color:   var(--inth-border);
  --a-gv-header-text-color:          var(--inth-text-head);
  --a-gv-header-cell-font-size:      13px;
  --a-gv-header-cell-font-weight:    600;
  --a-gv-header-cell-padding-x:      var(--inth-cell-px);
  --a-gv-header-cell-padding-y:      var(--inth-cell-py);
  --a-gv-header-cell-line-height:    var(--inth-cell-lh);
  --a-gv-header-cell-height:         calc(var(--inth-cell-lh) + var(--inth-cell-py) * 2);
  --a-gv-row-hover-background-color: var(--inth-surface-muted);
  --a-gv-selected-background-color:  var(--inth-accent-soft);
  --a-gv-selected-text-color:        var(--inth-text);
  --a-gv-footer-background-color:    var(--inth-surface);
  --a-gv-footer-border-color:        var(--inth-border);
  --a-gv-footer-padding-x:           var(--inth-cell-px);
  --a-gv-footer-padding-y:           var(--inth-cell-py);
  --a-gv-nodata-message-text-color:  var(--inth-text-muted);
  --a-gv-pagination-button-border-radius: var(--inth-radius-sm);

  /* ---- Menús ---- */
  --a-menu-background-color:         var(--inth-surface);
  --a-menu-text-color:               var(--inth-text);
  --a-menu-accel-text-color:         var(--inth-text-muted);
  --a-menu-border-color:             var(--inth-border);
  --a-menu-border-radius:            10px;
  --a-menu-item-border-radius:       var(--inth-radius-sm);
  --a-menu-padding-x:                4px;
  --a-menu-padding-y:                4px;
  --a-menu-font-size:                13px;
  --a-menu-shadow:                   var(--inth-shadow-lg);
  --a-menu-focused-background-color: var(--inth-surface-hover);
  --a-menu-focused-text-color:       var(--inth-text);
  --a-menu-focused-accel-text-color: var(--inth-text-muted);

  /* ---- Tooltips ---- */
  --a-tooltip-background-color: rgba(24, 24, 27, .92);
  --a-tooltip-text-color:       #fafafa;
  --a-tooltip-backdrop-filter:  blur(8px);
}


/* Ajuste de luminosidad del acento según el fondo, con OKLCH relativo.
   Mantiene matiz y croma del Destacado y solo acota la luminosidad:
     · sobre claro:  0.45 <= L <= 0.62. Techo: un amarillo o celeste sigue
                     legible sobre blanco y el naranja #ff6a00 baja un punto.
                     Piso: un navy #0f2043 (L 0.25) es casi del mismo valor que
                     el texto #18181b; como acento (subrayado de tab, foco,
                     borde de input) se leía como una raya negra. A L 0.45 queda
                     un azul acero, reconocible como "el azul de Seguridad".
     · sobre oscuro: L >= 0.72 → un navy #0f2043 (L 0.25) se vuelve un azul
                     claro visible sobre el menú grafito, en vez de desaparecer.
     · glow:         +25° de matiz para el centro del filete (en naranja da
                     el ámbar que había antes; en navy, un violeta).
   Navegadores sin soporte se quedan con el Destacado tal cual. */
@supports (color: oklch(from red l c h)) {
  :root {
    --inth-accent:         oklch(from var(--inth-brand) clamp(.45, l, .62) c h);
    --inth-accent-on-dark: oklch(from var(--inth-brand) max(l, .72) c h);
    --inth-accent-glow:    oklch(from var(--inth-brand) max(l, .80) c calc(h + 25));

    /* Chrome teñido: misma luminosidad del grafito (L .21), matiz del
       Destacado y croma acotado por --inth-chrome-tint. Con navy da un
       azul noche; con naranja, un carbón cálido. El gris frío dejaba de
       pegar con Destacados saturados. */
    --inth-nav-bg:         oklch(from var(--inth-brand) .21 min(c, var(--inth-chrome-tint)) h);
  }
}


/* ==========================================================================
   2. Base
   ========================================================================== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
.ui-widget,
input,
select,
textarea,
button {
  font-family: var(--inth-font);
  /* Solo hay 400/500/600: evita que el navegador fabrique negritas falsas
     si algún componente pide 700/800 (cae al 600 real). */
  font-synthesis-weight: none;
}

/* Poppins es geométrica y ancha: tracking negativo mínimo en títulos grandes
   (con Inter era -.02em). Peso según el manual: títulos en Medium; el título
   de página va en SemiBold para mantener jerarquía. */
h1, h2, h3,
.t-HeroRegion-title,
.t-ContentBlock-headerText {
  letter-spacing: -.01em;
}

.t-HeroRegion-title,
.t-ContentBlock-headerText {
  font-weight: 600;
}

.t-Region-title,
.ui-dialog .ui-dialog-title {
  font-weight: 500;
}

::selection {
  background-color: var(--inth-ring);
}


/* ==========================================================================
   3. Cabecera superior — cristal antracita con filete naranja
   (sin token para el filete ni el blur: pisada directa)
   ========================================================================== */
.t-Header {
  background:
    linear-gradient(90deg, transparent 0%, var(--inth-accent-on-dark) 25%, var(--inth-accent-glow) 50%, var(--inth-accent-on-dark) 75%, transparent 100%) bottom / 100% 1px no-repeat,
    color-mix(in srgb, var(--inth-nav-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--inth-nav-border);
  color: var(--inth-nav-text-active);
}

.t-Header-branding {
  background: transparent;
}

.t-Header-logo,
.t-Header-logo-link {
  color: var(--inth-nav-text-active);
}

.t-Header .t-Button--header {
  color: #d4d4d8;
}

.t-Header .t-Button--header:hover,
.t-Header .t-Button--header:focus-visible {
  background-color: rgba(255, 255, 255, .08);
  color: #ffffff;
}

/* Variante B — header con el color del Destacado de cada vertical
   (el que hoy define "Cabecera: Pilar" en Theme Roller), con degradado sobrio.
   Reemplazá el bloque .t-Header de arriba por este:

.t-Header {
  background: linear-gradient(180deg,
    var(--ut-header-background-color) 0%,
    color-mix(in srgb, var(--ut-header-background-color) 88%, #000000) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06);
}
*/


/* ==========================================================================
   4. Menú lateral — TreeView (tokens app_ui) dentro de t-TreeNav (UT)
   ========================================================================== */
/* 0,2,0 para ganarle a los tokens que UT declara sobre .t-TreeNav */
.t-Body-nav .t-TreeNav {
  --a-treeview-node-text-color:                var(--inth-nav-text);
  --a-treeview-node-icon-color:                var(--inth-nav-icon);
  --a-treeview-node-font-weight:               500;
  --a-treeview-node-font-size:                 13px;   /* submenús: el theme los dejaba en 12px */
  --a-treeview-node-hover-background-color:    var(--inth-nav-hover);
  --a-treeview-node-selected-background-color: var(--inth-nav-active);
  --a-treeview-node-selected-text-color:       var(--inth-nav-text-active);
  --a-treeview-node-selected-icon-color:       var(--inth-accent-on-dark);
  --a-treeview-node-focused-background-color:  var(--inth-nav-active);
  --a-treeview-node-focused-text-color:        var(--inth-nav-text-active);
  --a-treeview-node-focused-shadow:            inset 0 0 0 1px rgba(255, 255, 255, .12);
  --a-treeview-toggle-text-color:              var(--inth-nav-icon);
  background-color: var(--inth-nav-bg);
}

.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel {
  border: 0;
  box-shadow: none;
}

.t-Body-nav .t-TreeNav .a-TreeView-row {
  transition: background-color .2s var(--inth-ease), box-shadow .2s var(--inth-ease);
}

.t-Body-nav .t-TreeNav .a-TreeView-content {
  transition: color .2s var(--inth-ease);
}

/* app_ui no tiene token de texto en hover */
.t-Body-nav .t-TreeNav .a-TreeView-content.is-hover {
  --a-treeview-node-icon-color: var(--inth-nav-text-active);
  color: var(--inth-nav-text-active);
}

/* --------------------------------------------------------------------------
   Ítem activo — criterio: UN solo lugar marcado, la página actual.
   El theme style ("Navegación: Oscuro" = .t-TreeNav--styleA) marca de más
   cuando la página está dentro de un submenú:
     · pinta fondo en todo el <ul> del grupo,
     · pone barra de 4px en TODAS las filas del grupo (línea continua),
     · agrega un recuadro de 1px a la fila .is-focused (también con mouse).
   Además .is-selected NO es "página actual": es el cursor del árbol y se
   mueve al expandir/colapsar un grupo con el mouse. La página actual la da
   .a-TreeView-content.is-current, que es estable; la marca se cuelga de ahí.
   Los selectores del theme llegan a especificidad 0,6,1: de ahí el largo.
   -------------------------------------------------------------------------- */

/* Página de primer nivel actual, o padre de la actual con el grupo CERRADO */
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current--top {
  background-color: var(--inth-nav-active);
  box-shadow: inset 3px 0 0 var(--inth-accent-on-dark);
}

.t-Body-nav .t-TreeNav .a-TreeView-content.is-current,
.t-Body-nav .t-TreeNav .a-TreeView-content.is-current--top {
  --a-treeview-node-icon-color: var(--inth-accent-on-dark);
  color: var(--inth-nav-text-active);
}

/* El cursor del árbol (.is-selected) no marca nada por sí solo */
.t-Body-nav .t-TreeNav .a-TreeView-node .a-TreeView-row.is-selected:not(.is-hover):not(.is-current--top) {
  background-color: transparent;
  box-shadow: none;
}

/* Grupos expandidos sin fondo propio: la sangría ya marca la jerarquía */
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel ul {
  background-color: transparent;
}

.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-collapsible > .a-TreeView-row:not(.is-current--top):not(.is-hover) {
  background-color: transparent;
}

/* Sin barra ni fondo en las filas del grupo actual (incluye el recuadro
   .is-focused del theme)… */
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current--top ~ ul .a-TreeView-row:not(.is-hover) {
  background-color: transparent;
  box-shadow: none;
}

/* …salvo en la página actual (misma especificidad 0,7,1, gana por orden) */
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel ul .a-TreeView-node:has(> .a-TreeView-content.is-current) > .a-TreeView-row {
  background-color: var(--inth-nav-active);
  box-shadow: inset 3px 0 0 var(--inth-accent-on-dark);
}

/* Padre de la página actual con el grupo ABIERTO: solo texto blanco.
   Con el grupo cerrado (.is-expandable) no aplica y la marca queda en el
   padre, que es lo único visible de esa rama. */
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-collapsible:has(ul .a-TreeView-content.is-current) > .a-TreeView-row.is-current--top {
  background-color: transparent;
  box-shadow: none;
}

.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-collapsible:has(ul .a-TreeView-content.is-current) > .a-TreeView-content.is-current--top {
  --a-treeview-node-icon-color: var(--inth-nav-text-active);
}


/* ==========================================================================
   5. Regiones
   ========================================================================== */
/* Regiones anidadas: sin sombra doble. Se setea como propiedad y no como token
   para que no se herede a nietos que sí deban tenerla. */
.t-Region .t-Region {
  box-shadow: none;
}

/* Cabeceras sólidas (Accent 1..15): Core las pinta con tokens a nivel
   header (0,2,0); acá 0,3,0. En Text Content el título conserva el color
   del acento, porque UT lo aplica como color directo y no como token. */
.t-Region[class*="t-Region--accent"] > .t-Region-header {
  --ut-region-header-background-color: transparent;
  --ut-region-header-text-color:       var(--inth-text);
}

.t-Region-title {
  letter-spacing: -.01em;
}


/* ==========================================================================
   6. Tabs Container
   ========================================================================== */
/* Cada panel de tab es una región "Remove Header" que envuelve al contenido:
   sin esto, queda tarjeta dentro de tarjeta. El panel se vuelve transparente
   y las regiones de adentro son las tarjetas.

   IMPORTANTE: los selectores son estructurales y NO usan .a-Tabs-panel.
   Esa clase la agrega el JS del Tabs Container después del primer paint
   (~200 ms más tarde en APIs). Si el CSS dependiera de ella, la página se
   pintaría primero con el estilo genérico y después "saltaría" al nuevo.
   El marcado que sale del servidor ya tiene esta estructura:
     .t-TabsRegion > .container > .row > .col > .t-Region  (un row por tab) */
.t-TabsRegion > .container > .row > .col > .t-Region {
  background-color: transparent;
  border-width: 0;
  box-shadow: none;
}

.t-TabsRegion > .container > .row > .col > .t-Region > .t-Region-bodyWrap > .t-Region-body {
  padding-inline: 0;
}

/* Las regiones dentro de un panel recuperan la sombra que §5 les quita */
.t-TabsRegion > .container > .row > .col > .t-Region .t-Region {
  box-shadow: var(--ut-region-box-shadow);
}

.t-TabsRegion > .container > .row > .col > .t-Region .t-Region .t-Region {
  box-shadow: none;
}

/* Antes de que corra el JS, el servidor manda los N paneles visibles y
   apilados: la página nace larga y después colapsa. Mientras no exista
   ningún .a-Tabs-panel (JS sin inicializar) se muestra solo el primero.
   Apenas el widget arranca, :has() deja de matchear y manda UT. */
.t-TabsRegion:not(:has(.a-Tabs-panel)) > .container > .row + .row {
  display: none;
}

/* La lista de tabs del servidor llega con .is-disabled y con el ÚLTIMO tab
   marcado como seleccionado: el subrayado aparecía en "Consumo" y saltaba a
   "Catálogo y Planes". Hasta que el JS saca .is-disabled, se pinta como
   activo el primero, que es el que termina quedando. */
.apex-rds.is-disabled > .apex-rds-selected {
  --ut-tabs-item-text-color:      var(--inth-text-muted);
  --ut-tabs-item-highlight-color: transparent;
  --ut-tabs-item-font-weight:     500;
}

.apex-rds.is-disabled > .apex-rds-first {
  --ut-tabs-item-text-color:      var(--inth-text);
  --ut-tabs-item-highlight-color: var(--inth-accent);
  --ut-tabs-item-font-weight:     600;
}


/* ==========================================================================
   7. Botones
   ========================================================================== */
/* Principal: el theme style lo define con tokens base (--a-button-*) también
   para las variantes Simple / Link / No UI. Acá se usan tokens de tipo, que
   tienen prioridad, excluyendo esas variantes para no romperlas. */
.t-Button--hot:not(.t-Button--simple):not(.t-Button--link):not(.t-Button--noUI),
.a-Button--hot:not(.t-Button--simple):not(.t-Button--link):not(.t-Button--noUI) {
  --a-button-type-background-color:  var(--inth-primary);
  --a-button-type-text-color:        #ffffff;
  --a-button-type-border-color:      var(--inth-primary);
  --a-button-type-shadow:            var(--inth-shadow-hot);
  --a-button-hover-background-color: var(--inth-primary-hover);
  --a-button-hover-text-color:       #ffffff;
  --a-button-hover-border-color:     var(--inth-primary-hover);
  --a-button-hover-shadow:           var(--inth-shadow-hot-hover);
  --a-button-focus-background-color: var(--inth-primary);
  --a-button-focus-text-color:       #ffffff;
  --a-button-focus-border-color:     var(--inth-primary);
  --a-button-font-weight:            600;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Semánticos: Danger / Warning / Success / Primary.
   El theme style los define con tokens base (--a-button-*). Como el Hot de
   arriba usa tokens de tipo, un botón Hot + Danger quedaba NEGRO. Este bloque
   va DESPUÉS del Hot y con la misma especificidad (0,4,0), así que gana.
   Cada variante solo define su color en --inth-btn / --inth-btn-hover;
   el look (sólido, outline) es uno solo para todas. */
.t-Button--danger,
.ui-button--danger {
  --inth-btn:       var(--inth-danger);
  --inth-btn-hover: var(--inth-danger-hover);
}

.t-Button--warning {
  --inth-btn:       var(--inth-warning);
  --inth-btn-hover: var(--inth-warning-hover);
}

.t-Button--success {
  --inth-btn:       var(--inth-success);
  --inth-btn-hover: var(--inth-success-hover);
}

.t-Button--primary {
  --inth-btn:       var(--inth-info);
  --inth-btn-hover: var(--inth-info-hover);
}

/* Sólido (normal o Hot) */
:is(.t-Button--danger, .ui-button--danger, .t-Button--warning, .t-Button--success, .t-Button--primary):not(.t-Button--simple):not(.t-Button--link):not(.t-Button--noUI) {
  --a-button-type-background-color:  var(--inth-btn);
  --a-button-type-text-color:        #ffffff;
  --a-button-type-border-color:      var(--inth-btn);
  --a-button-type-shadow:            var(--inth-shadow-hot);
  --a-button-hover-background-color: var(--inth-btn-hover);
  --a-button-hover-text-color:       #ffffff;
  --a-button-hover-border-color:     var(--inth-btn-hover);
  --a-button-hover-shadow:           var(--inth-shadow-hot-hover);
  --a-button-focus-background-color: var(--inth-btn);
  --a-button-focus-text-color:       #ffffff;
  --a-button-focus-border-color:     var(--inth-btn);
  --a-button-focus-shadow:           0 0 0 3px color-mix(in srgb, var(--inth-btn) 28%, transparent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Outline (Simple): texto y borde del color, se rellena en hover.
   El theme style solo define el texto en hover (#fff) y no el fondo, así que
   con el hover blanco global el texto quedaba invisible. */
:is(.t-Button--danger, .ui-button--danger, .t-Button--warning, .t-Button--success, .t-Button--primary).t-Button--simple {
  --a-button-type-background-color:  var(--inth-surface);
  --a-button-type-text-color:        var(--inth-btn);
  --a-button-type-border-color:      color-mix(in srgb, var(--inth-btn) 40%, var(--inth-surface));
  --a-button-type-shadow:            var(--inth-shadow-xs);
  --a-button-hover-background-color: var(--inth-btn);
  --a-button-hover-text-color:       #ffffff;
  --a-button-hover-border-color:     var(--inth-btn);
  --a-button-focus-border-color:     var(--inth-btn);
  --a-button-focus-shadow:           0 0 0 3px color-mix(in srgb, var(--inth-btn) 28%, transparent);
}

/* Link y No UI: solo texto, del mismo color (el theme usaba tonos apagados) */
:is(.t-Button--danger, .ui-button--danger, .t-Button--warning, .t-Button--success, .t-Button--primary).t-Button--link {
  --a-button-type-text-color: var(--inth-btn);
}

:is(.t-Button--danger, .ui-button--danger, .t-Button--warning, .t-Button--success, .t-Button--primary).t-Button--noUI {
  --a-button-type-text-color: var(--inth-btn);
  color: var(--inth-btn);
}

/* Toggle presionado (ej. "Editar" activo en el IG) */
.a-Toolbar .a-Button[aria-pressed="true"],
.a-Toolbar .a-Button.is-active {
  --a-button-type-background-color: var(--inth-surface-hover);
  --a-button-type-border-color:     var(--inth-border-hover);
  --a-button-type-shadow:           none;
}

/* Botones dentro de la grilla (≡ acciones de fila): sin caja, solo hover */
.a-GV {
  --a-button-background-color:       transparent;
  --a-button-border-color:           transparent;
  --a-button-shadow:                 none;
  --a-button-text-color:             var(--inth-text-muted);
  --a-button-hover-background-color: var(--inth-surface-hover);
  --a-button-hover-border-color:     transparent;
  --a-button-hover-text-color:       var(--inth-text);
}

.t-Button:active:not(:disabled),
.a-Button:active:not(:disabled) {
  transform: scale(.98);
}


/* ==========================================================================
   8. Campos de formulario
   ========================================================================== */
/* No hay token para la sombra de foco: el anillo va directo */
.t-Form-inputContainer :is(input, select, textarea):focus,
.a-Toolbar-inputText:focus-visible {
  box-shadow: 0 0 0 3px var(--inth-ring);
  outline: none;
}

/* Popup LOV: input + botón pegados, redondeo solo en los extremos */
.apex-item-group--popup-lov .apex-item-popup-lov {
  border-end-end-radius: 0;
  border-start-end-radius: 0;
}

.apex-item-group--popup-lov .a-Button--popupLOV {
  border-end-start-radius: 0;
  border-start-start-radius: 0;
}


/* ==========================================================================
   8b. Foco solo con teclado
   --------------------------------------------------------------------------
   theme_42/Core 26.1 pinta el foco con :focus (no :focus-visible):
     :focus           { outline: var(--ut-focus-outline, auto 1px …) }
     .t-Button:focus  { --a-button-state-*: var(--a-button-focus-*) }
   Con el mouse, el elemento queda "marcado" hasta clickear en otro lado
   (tarjetas del launcher, botones). Con :not(:focus-visible) se apaga solo
   el foco de mouse; con teclado (Tab) el anillo sigue apareciendo.
   Los inputs de texto no se ven afectados: el navegador los considera
   :focus-visible siempre, así que mantienen el anillo al clickearlos.
   ========================================================================== */
:focus:not(:focus-visible) {
  outline: none;
}

/* Devolver el botón a su estado normal: con 'initial' el token de estado
   queda inválido y Core cae al de tipo (Hot, Danger…) o al base. */
.t-Button:focus:not(:focus-visible) {
  --a-button-state-background-color: initial;
  --a-button-state-text-color:       initial;
  --a-button-state-border-color:     initial;
  --a-button-state-shadow:           initial;
}

/* …pero si el mouse sigue encima, que se vea el hover */
.t-Button:focus:not(:focus-visible):hover {
  --a-button-state-background-color: var(--a-button-hover-background-color);
  --a-button-state-text-color:       var(--a-button-hover-text-color);
  --a-button-state-border-color:     var(--a-button-hover-border-color);
  --a-button-state-shadow:           var(--a-button-hover-shadow);
}


/* ==========================================================================
   9. Interactive Grid
   ========================================================================== */
/* .a-IG no consume --a-gv-border-radius (sí lo hace .a-IRR) */
.a-IG {
  border-radius: var(--inth-radius);
}

.a-IG-header {
  border-radius: var(--inth-radius) var(--inth-radius) 0 0;
  padding: 10px 12px;
}

/* No hay token para el borde vertical: se oculta para leer por fila */
.a-GV .a-GV-cell,
.a-GV .a-GV-header {
  border-inline-end-color: transparent;
}

/* Mismo selector que Theme-Standard (0,3,0): gana por orden de carga */
.a-GV-table .a-GV-cell.is-focused,
.a-GV-table .a-GV-header.is-focused {
  box-shadow: inset 0 0 0 2px var(--inth-accent);
}

.a-GV-footer {
  border-radius: 0 0 var(--inth-radius) var(--inth-radius);
  color: var(--inth-text-muted);
}

.a-GV-status,
.a-GV-rownum {
  color: var(--inth-text-muted);
}


/* ==========================================================================
   10. Interactive Report
   ========================================================================== */
.a-IRR .a-IRR-table tr td {
  border-color: var(--inth-row-border);
  padding: var(--inth-cell-py) var(--inth-cell-px);
}

.a-IRR .a-IRR-headerLink,
.a-IRR .a-IRR-headerLabel {
  color: var(--inth-text-head);
}


/* ==========================================================================
   11. Diálogos modales (los drawers quedan pegados al borde, sin radio)
   ========================================================================== */
.ui-dialog:not([class*="t-Drawer"]) {
  border: 1px solid var(--inth-border);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow-lg);
  overflow: hidden;
}

.ui-dialog .ui-dialog-title {
  letter-spacing: -.01em;
}


/* ==========================================================================
   11b. Avatar de usuario en la barra de navegación
   --------------------------------------------------------------------------
   Contrato con PL/SQL (sin tocar templates):
     · Clase en el <li>, vía atributo 2 de la entrada "app-user":
         has-username avatar-&P_AVATAR_TIPO.   →  avatar-foto | avatar-iniciales
     · Dos variables sobre ese mismo <li>, en el <style> que imprime
       ICO_ASP_USUARIO.CSS_FOTO_PERFIL (región css-foto-perfil):
         .t-NavigationBar-item.has-username {
           --inth-avatar-url: url("…");      solo si hay foto
           --inth-avatar-initials: "CD";
         }
   La etiqueta de la entrada es el nombre completo: queda oculta a la vista
   pero es el nombre accesible del botón para lectores de pantalla.

   Comportamiento:
     · Solo avatar (sin nombre ni flecha), estilo Linear / Vercel.
     · Las iniciales siempre están dibujadas y la foto va ENCIMA en un ::after:
       si la foto no carga (PAR vencido, objeto borrado), quedan las iniciales.
     · Sin clase avatar-* (apps no migradas, o item vacío → "avatar-"),
       el menú de usuario se ve como siempre.
   ========================================================================== */
/* theme_42/Core pasa la etiqueta a minúsculas (pensado para el usuario
   técnico). Con el nombre completo como etiqueta, en las apps que todavía no
   tienen avatar se leería "claudio di giacomo". Mismo selector, gana por orden. */
.t-NavigationBar-item.has-username .t-Button-label {
  text-transform: none;
}

.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar {
  border-radius: 50%;
  gap: 0;
  padding: 3px;
}

/* Nombre oculto a la vista, accesible para lectores de pantalla */
.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button-label {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .icon-down-arrow {
  display: none;
}

/* Círculo base con iniciales */
.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar > .t-Icon {
  align-items: center;
  background: color-mix(in srgb, var(--inth-accent-on-dark) 30%, var(--inth-nav-bg));
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
  display: inline-flex;
  flex: none;
  font-size: 0;          /* anula el glifo fa-user */
  height: 28px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s var(--inth-ease);
  width: 28px;
}

/* font-apex.min.css fuerza la fuente de íconos con !important en
   .fa::before: es el único !important del archivo, porque no hay otra forma
   de ganarle a un !important. visibility: por si el span trae atributo style
   (theme_42/Core oculta el pseudo de los íconos con [style]). */
.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar > .t-Icon::before {
  color: var(--inth-nav-text-active);
  content: var(--inth-avatar-initials, "");
  font-family: var(--inth-font) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  visibility: visible;
}

/* Foto encima de las iniciales */
.t-NavigationBar-item.has-username.avatar-foto .t-Button--navBar > .t-Icon::after {
  background: var(--inth-avatar-url) center / cover no-repeat;
  border-radius: 50%;
  content: "";
  inset: 0;
  position: absolute;
}

/* Hover y foco con teclado: anillo alrededor del avatar, sin fondo de botón */
.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar:hover,
.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar:focus-visible {
  background-color: transparent;
}

.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar:hover > .t-Icon,
.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar[aria-expanded="true"] > .t-Icon {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .28);
}

.t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar:focus-visible > .t-Icon {
  box-shadow: 0 0 0 2px var(--inth-accent-on-dark);
}


/* ==========================================================================
   12. Scrollbars y movimiento reducido
   ========================================================================== */
.t-Body-content,
.a-GV-w-scroll {
  scrollbar-color: var(--inth-border-hover) transparent;
  scrollbar-width: thin;
}

.t-Body-nav {
  scrollbar-color: #3f3f46 transparent;
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --a-transition-override: none;
    --a-animation-override: none;
  }

  .t-Body-nav .t-TreeNav .a-TreeView-row,
  .t-Body-nav .t-TreeNav .a-TreeView-content {
    transition: none;
  }

  .t-Button:active,
  .a-Button:active {
    transform: none;
  }
}