/*
 * app.css — Trabajadores ISAPEG / Gobierno de la Gente 2024-2030
 *
 * Un solo tema; dos contextos de página:
 *
 *   :root + body .ui-*     → base compartida (tokens, botones, messages, growl, overlays)
 *   body.ctx-login         → solo fondo de pantalla de acceso
 *   .login-panel           → solo tarjeta del formulario (+ overrides puntuales dentro)
 *   .ctx-app               → densidad compacta + overrides PF del portal
 *
 * Login NO duplica el tema: usa la misma base. Sin .ctx-app no aplica la compactación.
 * Integración: BaseTemplate + tipografias/ + PrimeFlex + js/theme-messages.js.
 *   Login: bodyContext="ctx-login" + .login-panel
 *   App:   AppShellTemplate + .app-shell (§3.2) · bodyContext ctx-app
 *   Iconos: PrimeIcons (PF) + Material Symbols Outlined fallback (§2.1)
 *   Messages closable: app.css §6 + theme-messages.js (carga en BaseTemplate)
 *
 * Documentación: ../THEME.md · Metadatos: ../theme-manifest.json · Skill IA: ../agent/SKILL.md · Hooks: ../agent/hooks/
 */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
    --color-primary:         #004B87;
    --color-primary-light:   #69B3E7;
    --color-primary-pale:    #C8D8EB;
    --color-gray-dark:       #63666A;
    --color-gray:            #97999B;
    --color-gray-light:      #C8C9C7;
    --color-white:           #FFFFFF;
    --color-black:           #000000;

    --color-text:            var(--color-gray-dark);
    --color-text-secondary:  var(--color-gray);
    --color-text-inverse:    var(--color-white);
    --color-link:            var(--color-primary);
    --color-border:          var(--color-gray-light);

    --color-surface-login-panel:  var(--color-white);
    --color-surface-app:          var(--color-primary-pale);
    --color-surface-app-panel:    var(--color-white);
    --color-surface-app-sidebar:  var(--color-white);
    --color-surface-app-main:     var(--color-primary-pale);
    --color-surface-app-menu:     #E2ECF5;
    --color-surface-app-menu-open:#F5F9FC;
    --color-footer-bg:            var(--color-primary);
    --color-header-bg:            var(--color-primary);

    --gradient-primary: linear-gradient(135deg, #004B87 0%, #69B3E7 100%);

    --color-danger:  #B21D00;
    --color-success: #2E7D32;
    --color-warning: #E6A800;
    --color-info:    var(--color-primary-light);

    --color-secondary:       #64748B;
    --color-secondary-hover: #475569;
    --color-secondary-pale:    #CBD5E1;
    --color-success-hover:     #1B5E20;
    --color-success-pale:      #A5D6A7;
    --color-info-hover:        #0284C7;
    --color-info-pale:         #99D1F5;
    --color-warning-hover:     #C49200;
    --color-warning-pale:      #FFE082;
    --color-help:              #7E57C2;
    --color-help-hover:        #5E35B1;
    --color-help-pale:         #D1C4E9;
    --color-danger-hover:      #8B1600;
    --color-danger-pale:       #FFAB91;

    --font-display: "Vollkorn", Georgia, "Times New Roman", serif;
    --font-body:    "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.6875rem;

    --header-height:    90px;
    --sidebar-width:    255px;
    --app-header-logo-inset: 0.375rem;
    --app-header-logo-max-height: calc(var(--header-height) - (2 * var(--app-header-logo-inset)));
    --app-shell-header-offset: var(--header-height);
    --radius-sm:        4px;
    --radius-md:        8px;
    --shadow-card:      0 2px 8px rgba(0, 75, 135, 0.15);
    --shadow-login:     0 8px 24px rgba(0, 75, 135, 0.25);

    --pf-button-height: 34px;
    --pf-button-padding-y: 0.35rem;
    --pf-button-padding-x: 0.85rem;
    --color-primary-hover: #003566;
    --color-primary-active: #002847;
    --color-primary-disabled-bg: #6b93b3;
    --color-primary-disabled-border: #6b93b3;
    --color-primary-disabled-text: rgba(255, 255, 255, 0.92);

    /* Tokens PrimeFaces (theme saga-blue) */
    --primary-color: var(--color-primary);
    --primary-color-text: var(--color-text-inverse);
}

/* Densidad compacta — ctx-app / showcase (móvil: un poco más holgado) */
.ctx-app,
.showcase-page {
    --density-page-pad:        0.625rem;
    --density-section-pad:     0.75rem;
    --density-section-gap:     0.625rem;
    --density-nav-pad:         0.5rem 0.75rem;
    --density-nav-link-gap:    0.625rem;
    --density-stack-gap:       0.375rem;
    --density-control-gap:     0.375rem;
    --density-font-size:       0.875rem;
    --density-line-height:     1.3;
    --pf-control-height:       28px;
    --pf-button-height:        28px;
    --pf-button-padding-y:     0.2rem;
    --pf-button-padding-x:     0.55rem;
    --pf-input-padding-y:      0.2rem;
    --pf-input-padding-x:      0.45rem;
}

@media (max-width: 991.98px) {
    .ctx-app,
    .showcase-page {
        --density-page-pad:        0.75rem;
        --density-section-pad:     0.875rem;
        --density-section-gap:     0.75rem;
        --density-nav-pad:         0.625rem 0.75rem;
        --density-nav-link-gap:    0.75rem;
        --density-stack-gap:       0.5rem;
        --density-control-gap:     0.5rem;
        --density-font-size:       0.9375rem;
        --density-line-height:     1.4;
        --pf-control-height:       34px;
        --pf-button-height:        34px;
        --pf-button-padding-y:     0.35rem;
        --pf-button-padding-x:     0.75rem;
        --pf-input-padding-y:      0.35rem;
        --pf-input-padding-x:      0.625rem;
    }
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */
html, body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    margin: 0;
    line-height: 1.5;
}

/*
 * Evita el "rebote" (rubber-band) del documento en iOS/móvil: al desplazar con
 * un diálogo abierto, el fondo y el diálogo fijo se movían. El scroll real del
 * portal vive en .app-content, no en el documento.
 */
body.ctx-app {
    overscroll-behavior: none;
}

body.ctx-app,
html:has(body.ctx-app) {
    overscroll-behavior-y: none;
    height: 100%;
    overflow: hidden;
}

.ui-widget,
.ui-widget .ui-widget {
    font-family: var(--font-body);
}

h1, h2, h3, .showcase-title {
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--color-primary);
}

a, .link-primary {
    color: var(--color-link);
    text-decoration: none;
    font-weight: 600;
}

a:hover, .link-primary:hover {
    text-decoration: underline;
}

/* §2.1 ICONOS — PrimeIcons (PF) + Material Symbols Outlined (fallback) */
.material-symbols-outlined {
    font-size: var(--icon-size-md);
}

.material-symbols-outlined.mi-sm,
body.ctx-app .app-sidebar .material-symbols-outlined {
    font-size: var(--icon-size-sm);
}

.material-symbols-outlined.mi-lg {
    font-size: var(--icon-size-lg);
}

/* Alineación en botones PF con icono Material (markup manual) */
.ui-button .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

body .ui-button.ui-button-text-icon-left .material-symbols-outlined,
body .ui-button.ui-button-text-icon-right .material-symbols-outlined {
    position: static;
    left: auto;
    top: auto;
    margin: 0;
    transform: none;
    flex-shrink: 0;
    text-indent: 0;
    overflow: visible;
}

body .ui-button.ui-button-icon-only .material-symbols-outlined {
    margin: 0;
    pointer-events: none;
}

/* Material dentro de .ui-button-text (p:commandButton escape="false") */
body .ui-button.ui-button-mi .ui-button-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 !important;
    width: auto;
}

body .ui-button.ui-button-mi.ui-button-icon-only .ui-button-text {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
}

/* p:commandLink con aspecto de botón + Material (hijos en el enlace) */
body a.ui-button.ui-button-mi-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    box-sizing: border-box;
    padding: var(--pf-button-padding-y) var(--pf-button-padding-x) !important;
    text-decoration: none;
    line-height: 1.2;
    min-height: var(--pf-button-height);
    width: auto;
    min-width: 0;
    max-width: none;
}

body a.ui-button.ui-button-mi-link .ui-button-text {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    text-align: left;
}

body a.ui-button.ui-button-mi-link.ui-button-icon-only {
    width: var(--pf-button-height);
    min-width: var(--pf-button-height);
    max-width: var(--pf-button-height);
    padding: 0 !important;
}

/* ── 3. CONTEXTOS: LOGIN vs APP ────────────────────────────────────────── */
body.ctx-login {
    background: var(--gradient-primary);
    min-height: 100vh;
}

body.ctx-app {
    background: var(--color-surface-app);
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    overflow: hidden;
    --app-menu-radius-panel: 10px;
    --app-menu-radius-item: 6px;
    --app-menu-font-size: 0.8125rem;
    --app-menu-icon-size: 0.8125rem;
    --icon-size-sm: 1rem;
    --icon-size-md: 1.125rem;
    --icon-size-lg: 1.5rem;
}

/* Anula padding legacy de Layout.css en ambiente con tema */
.ctx-app .ui-messages > div,
body.ctx-app .ui-messages > div {
    padding: 0 !important;
}

.login-hero {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    padding: 1.5rem;
}

.login-hero h1,
.login-hero h2 {
    color: var(--color-text-inverse);
}

.login-panel {
    background: var(--color-surface-login-panel);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-login);
    padding: 1.5rem;
}

.app-panel {
    background: var(--color-surface-app-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1rem;
}

body.ctx-app .app-empty-state {
    position: relative;
    flex: 1 1 auto;
    min-height: 18rem;
    width: 100%;
    box-sizing: border-box;
}

/* Logo institucional como marca de agua de fondo, centrado y atenuado */
body.ctx-app .app-empty-state::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--app-empty-logo);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: clamp(9rem, 24vw, 18rem);
    opacity: 0.28;
    pointer-events: none;
}

.app-shell-header {
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    padding: 0.75rem 1.25rem;
}

/* ── 3.1 LOGIN — overrides puntuales (hereda :root + body .ui-*) ─────── */
body.ctx-login .login-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
}

body.ctx-login .login-dev-nav {
    position: absolute;
    top: 0.625rem;
    right: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    font-size: var(--text-sm);
}

body.ctx-login .login-dev-nav a {
    color: var(--color-text-inverse);
    font-weight: 600;
    text-decoration: none;
}

body.ctx-login .login-dev-nav a:hover {
    text-decoration: underline;
}

body.ctx-login .login-hero {
    background: transparent;
    text-align: center;
    padding: 0 1rem 0.625rem;
    max-width: 28rem;
}

body.ctx-login .login-logo {
    max-width: 20rem;
    height: auto;
}

body.ctx-login .login-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 3.5vw, 1.875rem);
    font-weight: 700;
    color: var(--color-text-inverse);
    margin: 0 0 0.375rem;
}

body.ctx-login .login-hero-sub {
    margin: 0;
    font-size: clamp(1rem, 2.5vw, var(--text-lg));
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}

body.ctx-login .login-panel {
    width: 100%;
    max-width: 24rem;
    padding: 1rem 1.125rem;
}

body.ctx-login .login-panel-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.25rem;
    text-align: center;
}

body.ctx-login .login-panel-note {
    margin: 0 0 0.375rem;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.35;
}

body.ctx-login .login-panel-body {
    margin: 0.625rem 0 0;
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.45;
}

body.ctx-login .login-panel-alert {
    margin: 0.75rem 0 0;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.4;
}

body.ctx-login .login-panel-back--footer {
    margin-top: 1rem;
}

.login-panel .ui-messages {
    margin: 0 0 0.375rem !important;
}

.login-panel .ui-panelgrid .ui-panelgrid-cell,
.login-panel .ui-panelgrid [class*="col-"] {
    padding: 0 !important;
    border: none !important;
}

.login-panel .ui-panelgrid .ui-grid-row {
    border-top: none !important;
    margin: 0 !important;
}

.login-panel .ui-panelgrid .ui-g {
    margin: 0 !important;
}

/* Mismo ritmo vertical: label→input = input→siguiente label */
.login-panel .ui-outputlabel {
    display: block;
    margin: 0 0 0.25rem;
    line-height: 1.25;
}

.login-panel .ui-panelgrid .ui-panelgrid-cell:has(.ui-inputfield),
.login-panel .ui-panelgrid .ui-panelgrid-cell:has(.ui-password) {
    margin-bottom: 0.25rem;
}

.login-panel .login-actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0;
}

.login-panel .login-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

body.ctx-login .ui-growl {
    position: fixed !important;
    top: 1rem;
    right: 1rem;
    z-index: 9999 !important;
    width: auto;
    min-width: 18rem;
    max-width: 32rem;
    pointer-events: none;
}

.login-panel .ui-password {
    display: block;
    position: relative;
    width: 100%;
}

.login-panel .ui-inputfield,
.login-panel .ui-password > .ui-inputfield {
    width: 100%;
    height: var(--pf-button-height);
    min-height: var(--pf-button-height);
    max-height: var(--pf-button-height);
    margin: 0;
    padding: 0 var(--pf-input-padding-x, 0.625rem);
    line-height: calc(var(--pf-button-height) - 2px);
    box-sizing: border-box;
}

.login-panel .ui-password > .ui-inputfield {
    padding-right: calc(var(--pf-input-padding-x, 0.625rem) + 1.75rem);
}

.login-panel .ui-password .ui-password-icon {
    position: absolute;
    top: 50%;
    right: var(--pf-input-padding-x, 0.625rem);
    transform: translateY(-50%);
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.login-panel .ui-commandlink.link-primary {
    text-align: center;
}

body.ctx-login .login-footer {
    margin-top: 1rem;
    padding: 0 1rem;
    text-align: center;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
}

body.ctx-login .login-shell-form {
    justify-content: flex-start;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

body.ctx-login .login-panel-wide {
    max-width: 32rem;
    width: 100%;
}

body.ctx-login .login-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 0.375rem;
}

body.ctx-login .login-panel-header .login-panel-title {
    margin: 0;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
}

body.ctx-login .login-panel-back {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    line-height: 1.35;
    white-space: nowrap;
    padding-top: 0.125rem;
    margin-left: 0.25rem;
}

body.ctx-login .login-panel-back .ui-commandlink {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-link);
}

body.ctx-login .login-panel-back .ui-commandlink .pi {
    font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0;
}

body.ctx-login .login-panel-separator {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0.625rem 0;
}

body.ctx-login .login-panel .login-actions--end {
    margin-top: 0.375rem;
}

body.ctx-login .login-panel .login-actions--end .ui-button {
    width: 100%;
}

body.ctx-login .login-footer-legal {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-width: 32rem;
}

body.ctx-login .login-footer-legal a.link-primary,
body.ctx-login .login-footer-legal .ui-commandlink.link-primary {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color 0.15s ease;
}

body.ctx-login .login-footer-legal a.link-primary:hover,
body.ctx-login .login-footer-legal .ui-commandlink.link-primary:hover,
body.ctx-login .login-footer-legal a.link-primary:focus-visible,
body.ctx-login .login-footer-legal .ui-commandlink.link-primary:focus-visible {
    color: var(--color-primary-active);
    text-decoration: underline;
}

body.ctx-login .login-tooltip-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Tooltip clave de pago — flotante (legacy: bottom), legible, no inline en el panel */
body.ctx-login .login-panel .login-clave-pago-tip-text,
body.ctx-login .login-panel .login-clave-pago-tip-img {
    display: none !important;
}

body.ctx-login .ui-tooltip.login-clave-pago-tip .ui-tooltip-text {
    max-width: min(30rem, calc(100vw - 2rem));
    padding: 0.625rem 0.75rem;
    font-size: var(--text-sm);
    line-height: 1.4;
    overflow: visible;
    box-sizing: border-box;
}

body.ctx-login .ui-tooltip.login-clave-pago-tip .login-clave-pago-tip-text {
    display: block;
    margin: 0 0 0.5rem;
}

body.ctx-login .ui-tooltip.login-clave-pago-tip .login-clave-pago-tip-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

body.ctx-login .loading-dialog.ui-dialog {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

body.ctx-login .loading-dialog .ui-dialog-content {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.ctx-login .loading-dialog .img80 {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    display: block;
    width: 5rem;
    height: auto;
}

/* vista: home/CodigoActivacion.xhtml — diálogo activación de cuenta (login) */
body.ctx-login .ui-dialog:not(.loading-dialog) {
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100dvh - 1.5rem) !important;
    width: min(32rem, calc(100vw - 1.5rem)) !important;
}

body.ctx-login .ui-dialog:not(.loading-dialog) > .ui-dialog-content {
    max-height: calc(100dvh - 3.75rem);
    padding: 0.75rem 1rem !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

body.ctx-login .login-activacion-dialog {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.ctx-login .login-activacion-lead {
    font-size: var(--text-base);
    line-height: 1.35;
}

body.ctx-login .login-activacion-code.ui-inputfield {
    width: 100%;
    max-width: 12rem;
    font-size: 1.375rem !important;
    text-align: center;
    letter-spacing: 0.12em;
}

body.ctx-login .login-activacion-dialog .login-panel-alert {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    text-align: left;
    font-weight: 600;
    font-size: var(--text-xs);
    line-height: 1.45;
}

body.ctx-login .login-activacion-dialog .login-actions {
    display: flex;
    justify-content: center;
    margin-top: 0;
}

@media (max-width: 991.98px) {
    body.ctx-login {
        --pf-button-height: 44px;
        --pf-button-padding-y: 0.5rem;
        --pf-button-padding-x: 0.875rem;
        --pf-input-padding-x: 0.75rem;
    }

    body.ctx-login .login-shell {
        justify-content: flex-start;
        padding: 0.875rem 0.75rem 1rem;
        min-height: 100dvh;
    }

    body.ctx-login .login-hero {
        padding: 0.25rem 0.5rem 0.625rem;
        max-width: none;
        width: 100%;
    }

    body.ctx-login .login-logo {
        max-width: 20rem;
    }

    body.ctx-login .login-panel {
        padding: 1.125rem 1rem 1.25rem;
        max-width: none;
    }

    body.ctx-login .login-footer {
        margin-top: 0.875rem;
        padding: 0 0.5rem 0.75rem;
        max-width: 22rem;
    }

    body.ctx-login .ui-growl {
        top: 0.75rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    body.ctx-login .ui-growl .ui-growl-item-container {
        width: 100%;
        box-sizing: border-box;
    }

    body.ctx-login .login-panel .login-actions .ui-button {
        width: 100%;
    }

    body.ctx-login .ui-dialog:not(.loading-dialog) {
        width: calc(100vw - 1.5rem) !important;
    }

    body.ctx-login .login-activacion-code.ui-inputfield {
        max-width: none;
    }
}

/* ── 3.2 APP SHELL — portal autenticado (HomePage / AppShellTemplate) ──── */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    max-height: 100dvh;
    box-sizing: border-box;
}

/*
 * En la vista productiva el shell envuelve header/body/footer en un único
 * <form> (globalForm). Ese form es el hijo flex de .app-shell, por lo que debe
 * crecer y volverse columna para que .app-shell-body empuje el footer al fondo.
 */
.app-shell > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
}

body.ctx-app .app-shell-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1100;
    min-height: var(--header-height);
    box-sizing: border-box;
    padding: 0;
}

.app-shell-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.app-sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    background: var(--color-surface-app-sidebar);
    border-right: 1px solid var(--color-border);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0.4375rem 0.5rem;
    scrollbar-width: thin;
}

body.ctx-app .app-sidebar .ui-panelmenu,
body.ctx-app .app-sidebar .ui-panelmenu.app-sidebar-menu {
    width: 100% !important;
    border: none;
    background: transparent;
    font-size: var(--app-menu-font-size) !important;
}

body.ctx-app .app-sidebar-menu,
body.ctx-app .app-sidebar .app-sidebar-menu {
    width: 100%;
}

body.ctx-app .app-sidebar form {
    margin: 0;
}

/* §3.2.3 Sidebar — p:panelMenu en app-sidebar */
body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-panel {
    margin-bottom: 0.3125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--app-menu-radius-panel);
    overflow: hidden;
    background: var(--color-surface-app-menu);
    box-shadow: var(--shadow-card);
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-panel:last-child {
    margin-bottom: 0;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-header {
    background: var(--color-surface-app-menu);
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--app-menu-font-size) !important;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem !important;
    margin: 0;
    box-sizing: border-box;
    line-height: 1.25;
    transition: background 0.15s ease, border-color 0.15s ease;
}

body.ctx-app .app-sidebar .ui-panelmenu h3.ui-panelmenu-header {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem !important;
    box-sizing: border-box;
    font-size: var(--app-menu-font-size) !important;
    line-height: 1.25;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-header a,
body.ctx-app .app-sidebar .ui-panelmenu h3.ui-panelmenu-header > a {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0 !important;
    position: relative;
    line-height: 1.25;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    font-size: inherit;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-header > .ui-panelmenu-icon,
body.ctx-app .app-sidebar .ui-panelmenu h3.ui-panelmenu-header > .ui-panelmenu-icon,
body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-header > .ui-icon,
body.ctx-app .app-sidebar .ui-panelmenu h3.ui-panelmenu-header > .ui-icon {
    position: static !important;
    float: none;
    margin: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    line-height: 1;
    font-size: var(--app-menu-icon-size);
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-header .ui-icon,
body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-header .ui-panelmenu-icon,
body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-header .ui-menuitem-icon,
body.ctx-app .app-sidebar .ui-panelmenu h3.ui-panelmenu-header .ui-icon,
body.ctx-app .app-sidebar .ui-panelmenu h3.ui-panelmenu-header .ui-panelmenu-icon,
body.ctx-app .app-sidebar .ui-panelmenu h3.ui-panelmenu-header .ui-menuitem-icon {
    position: static !important;
    float: none;
    margin: 0;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    line-height: 1;
    font-size: var(--app-menu-icon-size);
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-header .ui-menuitem-text,
body.ctx-app .app-sidebar .ui-panelmenu h3.ui-panelmenu-header .ui-menuitem-text {
    flex: 1 1 auto;
    min-width: 0;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-header.ui-state-active {
    background: var(--color-surface-app-menu);
    border-bottom-color: var(--color-border);
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-content {
    background: var(--color-surface-app-menu-open);
    border-top: none;
    padding: 0.125rem 0.3125rem;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    column-gap: 0.375rem;
    align-items: start;
    background: transparent;
    color: var(--color-text);
    padding: 0.3rem 0.5rem 0.3rem 0.875rem !important;
    margin: 0 0.125rem;
    border-radius: var(--app-menu-radius-item);
    font-size: var(--app-menu-font-size) !important;
    line-height: 1.3;
    white-space: normal;
    float: none;
    width: auto;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-content .ui-menuitem-link {
    padding: 0.3rem 0.5rem 0.3rem 0.875rem !important;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link > .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    /* PrimeIcons: --app-menu-icon-size (0.8125rem); Symbols tienen más margen en el em → 1rem alinea peso visual */
    font-size: 1rem;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    color: inherit;
    position: static !important;
    float: none;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    transition: color 0.15s ease;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link .ui-menuitem-icon,
body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link > .ui-icon {
    color: inherit;
    position: static !important;
    float: none;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    margin: 0;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    font-size: var(--app-menu-icon-size);
    transition: color 0.15s ease;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link .ui-menuitem-text {
    float: none;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    align-self: start;
    color: inherit;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-menu-parent .ui-menuitem-link-hasicon,
body.ctx-app .app-sidebar .ui-panelmenu .ui-menu-parent > .ui-menuitem-link {
    padding-left: 0.875rem !important;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link:hover,
body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link.ui-state-hover,
body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link.ui-state-focus {
    background: rgba(105, 179, 231, 0.28);
    color: var(--color-primary);
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 1px;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link.ui-state-active {
    background: rgba(0, 75, 135, 0.1);
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.app-shell-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--color-surface-app-main);
}

.app-toolbar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    background: var(--color-surface-app-panel);
    border-bottom: 1px solid var(--color-border);
}

.app-toolbar-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.app-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: var(--color-text-inverse);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 75, 135, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.app-sidebar-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 75, 135, 0.34);
}

.app-sidebar-toggle:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

.app-sidebar-toggle .pi {
    font-size: 0.875rem;
    line-height: 1;
}

.app-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--density-page-pad);
    box-sizing: border-box;
    background: var(--color-surface-app-main);
}

/*
 * Host + panel: min-height 100% llena el viewport con contenido corto (p. ej. estado
 * vacío). Las vistas incluidas (p:panel, wizard, etc.) no deben encogerse dentro del
 * panel flex — eso recortaba el contenido sin scroll.
 */
body.ctx-app .app-content-host {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

body.ctx-app .app-content-host > .app-panel {
    flex: 1 1 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

body.ctx-app .app-content-host > .app-panel > * {
    flex: 0 0 auto;
}

body.ctx-app .app-content-host > .app-panel > .app-empty-state {
    flex: 1 1 auto;
}

/* vista: home/EmptyContent.xhtml — placeholder en dynamicDialog (login, sin ctx-app) */
.ui-dialog .app-empty-state {
    position: relative;
    min-height: 12rem;
    width: 100%;
    box-sizing: border-box;
}

.ui-dialog .app-empty-state::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--app-empty-logo);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: clamp(6rem, 20vw, 14rem);
    opacity: 0.28;
    pointer-events: none;
}

/* vista: home/FormCambiaPassword.xhtml — cambio obligatorio en diálogo login */
.ui-dialog .app-cambia-password-form {
    max-width: 28rem;
    margin: 0 auto;
}

.ui-dialog .app-cambia-password-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    line-height: 1.3;
}

.ui-dialog .app-cambia-password-fields {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: var(--color-surface-app-panel, #fff);
}

.ui-dialog .app-cambia-password-hint {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-danger);
    text-align: center;
}

.ui-dialog .app-cambia-password-form .ui-messages {
    width: 100%;
    max-width: none;
    margin: 0;
}

.ui-dialog-content:has(.app-cambia-password-form) {
    padding-bottom: 0.625rem;
}

/* vista: renov/MuestraNuevaContrasena.xhtml — visualización de contraseña renovada */
body.ctx-login .app-renov-contrasena-value {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    word-break: break-all;
    color: var(--color-danger);
    text-align: center;
    margin: 0.75rem 0;
}

body.ctx-login .app-renov-contrasena-deadline {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-danger);
    text-align: center;
    margin: 0.5rem 0 0;
}

/* §3.2.4 Vistas hijas — título de página (h2, alineado a la izquierda) */
body.ctx-app .app-view-title {
    text-align: left;
    margin: 0 0 1rem;
    line-height: 1.25;
}

/* vista: trabajadores/formatos/CulturaEtica.xhtml — banner y enlaces PDF */
body.ctx-app .app-cultura-etica {
    max-width: 48rem;
}

body.ctx-app .app-cultura-etica-banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

body.ctx-app .app-cultura-etica-link.ui-commandlink {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4;
}

body.ctx-app .app-cultura-etica-link .pi {
    flex: 0 0 auto;
    margin-top: 0.125rem;
}

/* vista: encuestas/climaLaboral + finanzasEncuesta — ancho del wizard y contenido de encuesta */
body.ctx-app .app-clima-wizard {
    max-width: 62.5rem;
    width: 100%;
    margin: 0 auto;
}

body.ctx-app .app-clima-pregunta {
    margin-bottom: 1.5625rem;
}

body.ctx-app .app-clima-pregunta-label {
    display: block;
    font-weight: 600;
}

body.ctx-app .app-clima-pregunta .ui-selectoneradio {
    display: block;
    margin-top: 0.5rem;
}

body.ctx-app .app-clima-finish {
    max-width: 50rem;
    width: 100%;
}

body.ctx-app .app-clima-status {
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
}

body.ctx-app .app-clima-status-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
}

body.ctx-app .app-clima-status-line {
    font-size: var(--text-lg);
    line-height: 1.35;
}

/* vista: encuestas/finanzasEncuesta/FinanzasEncuesta.xhtml — diversidad y bienestar */
body.ctx-app .app-finanzas-seccion-title {
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.35;
}

body.ctx-app .app-finanzas-pregunta {
    margin-bottom: 1.5625rem;
    padding: 0.9375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

body.ctx-app .app-finanzas-pregunta-label {
    display: block;
    font-weight: 600;
    line-height: 1.4;
}

body.ctx-app .app-finanzas-pregunta-hint {
    margin-top: 0.3125rem;
    color: var(--color-primary);
    font-size: var(--text-sm);
    line-height: 1.4;
}

body.ctx-app .app-finanzas-pregunta-options .ui-selectoneradio,
body.ctx-app .app-finanzas-lengua-block .ui-selectoneradio {
    display: block;
    margin-top: 0.5rem;
}

body.ctx-app .app-finanzas-lengua-block {
    margin-top: 0.5rem;
}

body.ctx-app .app-finanzas-lengua-panel {
    margin-top: 0.625rem;
    padding: 0.9375rem;
    background: var(--color-surface-app-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

body.ctx-app .app-finanzas-lengua-input-row .app-finanzas-lengua-autocomplete,
body.ctx-app .app-finanzas-lengua-input-row .ui-autocomplete {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: none;
}

body.ctx-app .app-finanzas-lengua-input-row .ui-autocomplete-input {
    width: 100% !important;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    body.ctx-app .app-finanzas-lengua-input-row .app-finanzas-lengua-autocomplete,
    body.ctx-app .app-finanzas-lengua-input-row .ui-autocomplete {
        flex: 0 1 300px;
        max-width: 300px;
    }
}

body.ctx-app .app-finanzas-lengua-add-btn {
    white-space: nowrap;
}

body.ctx-app .app-finanzas-lengua-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.75rem;
    background: #e9ecef;
    border-radius: 1rem;
    font-size: var(--text-sm);
    line-height: 1.3;
}

body.ctx-app .app-finanzas-lengua-chip-remove.ui-commandlink {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
    line-height: 1;
}

body.ctx-app .app-finanzas-lengua-chip-remove.ui-commandlink:hover,
body.ctx-app .app-finanzas-lengua-chip-remove.ui-commandlink.ui-state-hover {
    color: var(--color-text);
}

body.ctx-app .app-finanzas-lengua-chip-remove .pi {
    font-size: 0.8rem;
}

/* vista: tramites/credencial/* — solicitud, detalle y diálogos de credencial */
body.ctx-app .app-cred-wizard {
    max-width: 40rem;
    width: 100%;
    margin: 0 auto;
}

body.ctx-app .app-cred-motivo-field .ui-selectonemenu {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 992px) {
    body.ctx-app .app-cred-motivo-field .ui-selectonemenu {
        max-width: 24rem;
    }
}

body.ctx-app .app-cred-kv {
    border-collapse: collapse;
    border-spacing: 0;
}

body.ctx-app .app-cred-kv th,
body.ctx-app .app-cred-kv td {
    border: 1px solid var(--color-border);
    padding: 0.4375rem 0.625rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.35;
}

body.ctx-app .app-cred-kv th {
    width: 35%;
    max-width: 12rem;
    font-weight: 600;
    background: var(--color-surface-app-panel);
}

body.ctx-app .app-cred-note-list {
    padding-left: 1.25rem;
    line-height: 1.4;
}

body.ctx-app .app-cred-step-nav {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

/* vista: perfil/uniformes/RegistroTallas.xhtml — registro de tallas de uniforme */
body.ctx-app .app-uniformes-talla-col .app-uniformes-talla-select.ui-selectonemenu,
body.ctx-app .app-uniformes-talla-col .ui-selectonemenu {
    width: 100%;
    max-width: 8rem;
}

@media (max-width: 991.98px) {
    body.ctx-app .app-uniformes-talla-col .app-uniformes-talla-select.ui-selectonemenu,
    body.ctx-app .app-uniformes-talla-col .ui-selectonemenu {
        max-width: none;
    }
}

/* vista: perfil/academico/* — datos académicos, documentos y diálogos */
body.ctx-app .app-only-desktop {
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

body.ctx-app .app-only-mobile {
    display: none;
}

body.ctx-app .app-only-mobile-block {
    display: none;
}

@media (max-width: 767.98px) {
    body.ctx-app .app-only-desktop {
        display: none !important;
    }

    body.ctx-app .app-only-mobile {
        display: inline-flex !important;
    }

    body.ctx-app .app-only-mobile-block {
        display: block !important;
    }
}

body.ctx-app .app-acad-section {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 1rem;
}

body.ctx-app .app-acad-section-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.25rem;
}

body.ctx-app .app-acad-section-sub {
    color: var(--color-text-muted, #6b7280);
    margin: 0 0 0.75rem;
}

body.ctx-app .app-acad-readonly {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-app-panel, #f8f9fa);
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.ctx-app .app-acad-dialog .ui-inputtext,
body.ctx-app .app-acad-dialog .ui-selectonemenu,
body.ctx-app .app-acad-dialog .ui-selectonemenu-label {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

body.ctx-app .app-acad-doc-dialog-wide .flex.flex-column {
    min-width: 0;
    max-width: 100%;
}

body.ctx-app .app-acad-doc-dialog-wide .ui-panel .ui-panel-content {
    overflow-x: hidden;
}

body.ctx-app .app-acad-confirm-body {
    text-align: left;
    margin-bottom: 1rem;
}

body.ctx-app .app-acad-doc-viewer {
    width: 100%;
    height: 62vh;
    max-height: 62vh;
    overflow: auto;
}

    body.ctx-app .app-acad-doc-viewer .ui-media,
body.ctx-app .app-acad-doc-viewer object,
body.ctx-app .app-acad-doc-viewer embed,
body.ctx-app .app-acad-doc-viewer iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

@media (max-width: 991.98px) {
    body.ctx-app .app-acad-doc-viewer {
        height: 40vh;
        max-height: 40vh;
    }

    body.ctx-app .ui-dialog-content:has(.app-acad-doc-grid) {
        max-height: calc(100vh - 140px) !important;
        overflow-y: auto !important;
    }

    body.ctx-app .app-acad-doc-grid .ui-panel .ui-panel-content {
        overflow: visible !important;
    }

    body.ctx-app .app-acad-dialog-actions-sticky {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 0.75rem;
        border-top: 1px solid var(--color-border);
        z-index: 2;
    }
}

@media (min-width: 992px) {
    body.ctx-app .ui-dialog:not(.loading-dialog):has(.app-acad-doc-dialog-wide) {
        width: min(calc(100vw - 2rem), 72rem) !important;
    }

    /*
     * Ver / editar documento: visor alto uniforme; el diálogo crece con el contenido
     * (sin hueco vacío abajo). Scroll del PDF dentro del iframe, no doble barra.
     */
    body.ctx-app .ui-dialog:not(.loading-dialog):has(.app-acad-doc-dialog-wide) > .ui-dialog-content {
        overflow: hidden !important;
    }

    body.ctx-app .app-acad-doc-dialog-wide > .ui-panel-content > .grid {
        align-items: stretch;
        flex-wrap: nowrap;
    }

    body.ctx-app .app-acad-doc-dialog-wide .grid > [class*="lg:col-4"] {
        max-height: min(68vh, calc(100dvh - 11rem));
        overflow-y: auto;
        min-width: 0;
    }

    body.ctx-app .app-acad-doc-dialog-wide .grid > [class*="lg:col-8"] {
        min-width: 0;
    }

    body.ctx-app .app-acad-doc-dialog-wide .app-acad-doc-viewer,
    body.ctx-app .app-acad-doc-dialog-wide .app-acad-doc-viewer.app-acad-doc-viewer--fill {
        height: min(68vh, calc(100dvh - 11rem)) !important;
        max-height: min(68vh, calc(100dvh - 11rem)) !important;
        min-height: 22rem;
        overflow: hidden !important;
        display: block;
    }

    body.ctx-app .app-acad-doc-dialog-wide .app-acad-doc-viewer .ui-media,
    body.ctx-app .app-acad-doc-dialog-wide .app-acad-doc-viewer object,
    body.ctx-app .app-acad-doc-dialog-wide .app-acad-doc-viewer embed,
    body.ctx-app .app-acad-doc-dialog-wide .app-acad-doc-viewer iframe {
        width: 100% !important;
        height: 100% !important;
    }
}

/* vista: perfil/dependiente/* — dependientes económicos y diálogos */
body.ctx-app .app-dep-upload-status {
    text-align: center;
    padding: 1rem 0.5rem;
}

body.ctx-app .app-dep-upload-status-icon {
    font-size: 3rem;
    line-height: 1;
}

body.ctx-app .app-dep-upload-status-icon--ok {
    color: var(--color-success, #4caf50);
}

body.ctx-app .app-dep-upload-status-icon--empty {
    color: var(--color-text-muted, #999);
}

body.ctx-app .app-dep-upload-status-title {
    margin: 1rem 0 0.5rem;
    font-size: var(--text-lg);
    font-weight: 600;
}

body.ctx-app .app-dep-upload-status-title--ok {
    color: var(--color-success, #4caf50);
}

body.ctx-app .app-dep-upload-status-title--empty {
    color: var(--color-text-muted, #999);
}

body.ctx-app .app-dep-upload-guide-title {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 1rem;
}

body.ctx-app .app-dep-upload-guide-title--ok {
    color: #2e7d32;
}

body.ctx-app .app-dep-upload-guide-title--warn {
    color: var(--color-danger, #c62828);
}

body.ctx-app .app-dep-upload-guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.ctx-app .app-dep-upload-guide-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

body.ctx-app .app-dep-upload-guide-list .pi-check-circle {
    color: var(--color-success, #4caf50);
    flex: 0 0 auto;
    margin-top: 0.125rem;
}

body.ctx-app .app-dep-upload-guide-list .pi-times {
    color: #f44336;
    flex: 0 0 auto;
    margin-top: 0.125rem;
}

body.ctx-app .app-dep-curp-link {
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-decoration: none;
}

body.ctx-app .app-dep-curp-link:hover {
    text-decoration: underline;
}

body.ctx-app .app-dep-col-center {
    text-align: center;
}

/* vista: cuentas/FotoYfirma.xhtml — información personal (foto, firma, INE) y diálogos relacionados */
body.ctx-app .app-profile-section {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem 1rem 1rem;
    max-width: 28rem;
}

body.ctx-app .app-profile-section--photo {
    max-width: 32rem;
}

body.ctx-app .app-profile-section--signature {
    max-width: 24rem;
}

body.ctx-app .app-profile-section--blood {
    max-width: 32rem;
}

body.ctx-app .app-profile-section--ine {
    max-width: 44rem;
}

body.ctx-app .app-profile-section-title {
    margin: 0 0 0.75rem;
    padding: 0.375rem 0.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    background-color: #f7f7f7;
    border-radius: 4px;
}

body.ctx-app .app-profile-section-title--inline {
    display: block;
    margin-bottom: 0;
    text-align: left;
}

body.ctx-app .app-profile-photo-preview {
    max-width: 200px;
    width: 100%;
    height: auto;
}

body.ctx-app .app-profile-signature-preview {
    max-width: 315px;
    width: 100%;
    height: auto;
}

body.ctx-app .app-profile-req-list {
    margin: 0;
    padding-left: 1.25rem;
}

body.ctx-app .app-profile-note {
    max-width: 22rem;
    line-height: 1.45;
}

body.ctx-app .app-profile-action-btn {
    min-width: 7.15rem;
}

body.ctx-app .app-profile-action-btn--wide {
    min-width: 11.5rem;
}

body.ctx-app .app-profile-ine-grid.ui-panelgrid .ui-panelgrid-cell {
    text-align: center;
}

body.ctx-app .app-profile-ine-image {
    border: 1px solid #dee2e6;
    max-width: 370px;
    max-height: 230px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

body.ctx-app .app-profile-cropper-host {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 0;
    min-width: 0;
    margin: 0 auto;
}

body.ctx-app .app-profile-cropper-host--left {
    justify-content: flex-start;
}

body.ctx-app .app-profile-cropper-host--center {
    justify-content: center;
}

body.ctx-app .app-profile-cropper-host .ui-imagecropper {
    flex: 0 0 auto;
    max-width: 100%;
}

body.ctx-app .app-profile-preview-host {
    min-width: 310px;
    min-height: 310px;
}

body.ctx-app .app-profile-photo310 {
    max-height: 310px;
    width: auto;
}

body.ctx-app .app-profile-signature-pad {
    max-width: 315px;
    height: 200px;
}

body.ctx-app .app-fy-hide-filename.ui-fileupload .ui-fileupload-filename {
    display: none !important;
}

body.ctx-app .app-profile-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
    padding-bottom: 0.25rem;
}

body.ctx-app .app-profile-dialog-actions > .ui-button {
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    body.ctx-app .app-profile-cropper-host {
        height: auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 0;
    }

    body.ctx-app .ui-dialog-content:has(.app-profile-cropper-host) {
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
    }

    body.ctx-app .app-profile-dialog-actions {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }

    .ctx-app .ui-imagecropper {
        min-width: 0;
        min-height: 0;
        max-width: 100%;
    }
}

/* vista: cuentas/CambioContrasenia.xhtml, cuentas/CambioEmail.xhtml — configuración de cuenta */
body.ctx-app .app-cuenta-form {
    max-width: 32rem;
}

body.ctx-app .app-cuenta-code-input {
    font-size: 1.35rem !important;
    text-align: center;
    letter-spacing: 0.12em;
    max-width: 12rem;
}

/* Patrón portable: bandeja de notificaciones (app-notif-*) — ver THEME.md § Bandeja de notificaciones */
body.ctx-app .app-notif-trays {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

body.ctx-app a.app-notif-tray-link {
    text-decoration: none;
    color: inherit;
}

body.ctx-app .app-notif-tray {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-md);
    padding: 0.625rem 1rem;
    margin: 0;
    line-height: 1.25;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.ctx-app .app-notif-tray--active {
    background-color: var(--color-primary-pale, #bee9fa);
    color: var(--color-primary-dark, #002847);
    font-weight: 700;
}

body.ctx-app .app-notif-tray--inactive {
    background-color: var(--surface-200, #dee2e6);
    color: var(--text-color-secondary, #495057);
}

body.ctx-app .app-notif-table .ui-datatable-data > tr > td {
    vertical-align: middle;
}

body.ctx-app .app-notif-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    --app-notif-row-icon-size: 1.25rem;
    --app-notif-row-mi-size: 1.375rem;
}

body.ctx-app .app-notif-row-actions > .ui-button.ui-button-icon-only {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

body.ctx-app .app-notif-row-actions > .ui-button.ui-button-mi.ui-button-icon-only .ui-button-text {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

body.ctx-app .app-notif-row-actions > .ui-button.ui-button-icon-only .ui-icon,
body.ctx-app .app-notif-row-actions > .ui-button.ui-button-icon-only .ui-button-icon,
body.ctx-app .app-notif-row-actions > .ui-button.ui-button-icon-only .pi {
    font-size: var(--app-notif-row-icon-size) !important;
    line-height: 1;
    width: var(--app-notif-row-icon-size);
    height: var(--app-notif-row-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.ctx-app .app-notif-row-actions > .ui-button.ui-button-mi.ui-button-icon-only .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-size: var(--app-notif-row-mi-size) !important;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-notif-row-icon-size);
    height: var(--app-notif-row-icon-size);
    line-height: 1;
    flex-shrink: 0;
    overflow: visible;
}

/* Multiselección visible en móvil (reflow oculta thead; ui-column-p-* puede ocultar la columna) */
body.ctx-app .app-notif-table td.ui-selection-column,
body.ctx-app .app-notif-table th.ui-selection-column {
    display: table-cell !important;
}

@media (max-width: 640px) {
    body.ctx-app .app-notif-table.ui-datatable-reflow thead {
        display: table-header-group !important;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow thead th:not(.ui-selection-column) {
        display: none !important;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow thead th.ui-selection-column {
        display: block !important;
        width: 100% !important;
        text-align: left;
        padding: 0.375rem 0.5rem;
        border-bottom: 1px solid var(--color-border);
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow thead th.ui-selection-column .ui-column-title {
        display: block !important;
        margin: 0 0 0.25rem !important;
        padding: 0 !important;
        color: var(--color-primary);
        font-weight: 600;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow thead th.ui-selection-column .ui-column-title::before {
        content: "Seleccionar todo";
        font-size: var(--density-font-size);
        line-height: 1.25;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title {
        flex: 0 0 28%;
        max-width: 32%;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow .ui-datatable-data td.ui-selection-column {
        display: flex !important;
        align-items: flex-start;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        gap: 0.35rem;
        padding: 0.375rem 0.5rem !important;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow .ui-datatable-data td.ui-selection-column .ui-column-title {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--color-primary);
        font-weight: 600;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow .ui-datatable-data td.ui-selection-column .ui-column-title ~ * {
        flex: 1 1 0;
        min-width: 0;
        display: block;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:has(.app-notif-row-actions) {
        align-items: center !important;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title ~ .app-notif-row-actions {
        display: inline-flex !important;
        flex: 0 1 auto;
        min-width: 0;
        align-items: center;
        justify-content: flex-start;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .app-notif-row-actions {
        justify-content: flex-start;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow .app-notif-row-actions > .ui-button.ui-button-icon-only .ui-icon,
    body.ctx-app .app-notif-table.ui-datatable-reflow .app-notif-row-actions > .ui-button.ui-button-icon-only .ui-button-icon,
    body.ctx-app .app-notif-table.ui-datatable-reflow .app-notif-row-actions > .ui-button.ui-button-icon-only .pi {
        font-size: var(--app-notif-row-icon-size) !important;
    }

    body.ctx-app .app-notif-table.ui-datatable-reflow .app-notif-row-actions > .ui-button.ui-button-mi.ui-button-icon-only .material-symbols-outlined {
        font-size: var(--app-notif-row-mi-size) !important;
    }
}

/* Legacy opcional: Material drafts en p:menuitem móvil (ver manifest legacyMenuReadIcon) */
body .ui-menu .ui-menuitem-icon.app-notif-menu-icon-drafts {
    font-family: "Material Symbols Outlined";
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
}

body .ui-menu .ui-menuitem-icon.app-notif-menu-icon-drafts::before {
    content: "drafts";
    font-family: inherit;
}

body.ctx-app .app-notif-message-body {
    line-height: 1.5;
    word-break: break-word;
}

body.ctx-app .app-notif-detail-meta {
    max-width: none;
}

@media (max-width: 767.98px) {
    body.ctx-app .app-notif-detail-meta {
        padding: 0.5rem 0.75rem 0.625rem;
    }

    body.ctx-app .app-notif-detail-grid {
        row-gap: 0;
        margin: 0;
    }

    body.ctx-app .app-notif-detail-grid > [class*="col-"] {
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
        line-height: 1.25;
    }

    body.ctx-app .app-notif-detail-label {
        padding-bottom: 0;
        padding-top: 0.375rem;
    }

    body.ctx-app .app-notif-detail-label:first-child {
        padding-top: 0;
    }

    body.ctx-app .app-notif-detail-value {
        padding-top: 0;
        padding-bottom: 0.375rem;
        line-height: 1.3;
    }

    body.ctx-app .app-notif-detail-value:last-child {
        padding-bottom: 0;
    }
}

.app-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--app-shell-header-offset);
    margin: 0;
    padding: 0;
    border: none;
    background: rgba(0, 40, 71, 0.45);
    z-index: 1040;
    cursor: pointer;
}

.app-footer {
    flex-shrink: 0;
    padding: 0.25rem 1rem;
    text-align: center;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.9);
    background: var(--gradient-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    line-height: 1.2;
}

body.ctx-app .app-footer-legal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
}

body.ctx-app .app-footer-legal > span {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

body.ctx-app .app-footer-legal > span::after {
    content: "·";
    margin-left: 0.375rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
}

body.ctx-app .app-footer-legal a.link-primary {
    color: var(--color-white);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

body.ctx-app .app-footer-legal a.link-primary:hover,
body.ctx-app .app-footer-legal a.link-primary:focus-visible {
    color: var(--color-primary-pale);
}

body.ctx-app .loading-dialog.ui-dialog {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

body.ctx-app .loading-dialog .ui-dialog-content {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.ctx-app .loading-dialog .img80 {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    display: block;
    width: 5rem;
    height: auto;
}

/* §3.2.1 Header — marca, acciones, logo */
.app-shell-header-inner,
.app-header-mock {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    min-height: var(--header-height);
    box-sizing: border-box;
    padding-right: 1.25rem;
}

.app-header-mock-logo,
body.ctx-app .app-shell-header .imgLogoHeader {
    display: block;
    max-height: var(--app-header-logo-max-height);
    width: auto;
    height: auto;
    margin: var(--app-header-logo-inset) 0 var(--app-header-logo-inset) var(--app-header-logo-inset);
}

/*
 * Logo del header: dos slots (--wide | --narrow), uno visible a la vez.
 * El switch es display:none en el SLOT (no solo en el img).
 */
.app-shell-header-logo-slot {
    flex: 0 0 auto;
    flex-shrink: 0;
    align-self: center;
    display: block;
    width: max-content;
    max-width: none;
    height: var(--app-header-logo-max-height);
    overflow: visible;
    margin: var(--app-header-logo-inset) 0 var(--app-header-logo-inset) var(--app-header-logo-inset);
    line-height: 0;
}

.app-shell-header-logo-slot--narrow {
    display: none;
}

.app-shell-header-logo-slot .app-shell-header-logo,
.app-shell-header-logo-slot img {
    display: block;
    max-height: var(--app-header-logo-max-height);
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0;
    border: 0;
    vertical-align: top;
}

/*
 * Switch de logo por ancho: horizontal en pantallas normales, vertical en
 * angostas (libera espacio horizontal para iconos/tarjeta).
 */

.app-header-mock-brand {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    color: var(--color-text-inverse);
    font-size: var(--text-sm);
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}

.app-header-mock-brand strong {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.app-header-brand {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    color: var(--color-text-inverse);
    font-size: var(--text-sm);
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 1rem;
}

.app-header-brand strong {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    white-space: nowrap;
}

.app-header-brand-tagline {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header-actions {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    flex: 0 1 auto;
    margin-left: auto;
    min-width: 0;
}

@media (min-width: 992px) {
    .app-header-actions {
        flex-wrap: nowrap;
        align-items: center;
        flex-shrink: 0;
    }

    .app-header-notifications {
        align-items: center;
        padding-bottom: 0;
    }
}

.app-header-notifications {
    display: inline-flex;
    align-items: flex-end;
    padding-bottom: 0.375rem;
}

.app-header-notifications-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3125rem;
    text-decoration: none;
    color: var(--color-text-inverse);
}

.app-header-notifications-link img {
    display: block;
    width: 1.25rem;
    height: auto;
}

/* Icono a tamaño nativo (sin reescalar) — evita pérdida de nitidez en imágenes pequeñas */
.app-header-notifications-link img.app-header-notif-img--native {
    width: auto;
    height: auto;
}

.app-header-notifications-count {
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    color: var(--color-white);
}

/* §3.2.2 Tarjeta usuario — card, medallón, label RFC/nombre (contrato: AppHeaderUser.xhtml) */
.app-header-user-card {
    flex: 0 0 auto;
    max-width: min(100%, 22rem);
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: linear-gradient(165deg, var(--color-white) 0%, var(--color-surface-app-menu-open) 52%, #E8F1FA 100%);
    box-shadow:
        0 3px 14px rgba(0, 36, 68, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.app-header-user-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    pointer-events: none;
}

.app-header-user-card .app-header-user {
    padding-left: 0;
}

.app-header-user {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Avatar tipo medallón — anillo degradado + marco blanco + sombra sobre header oscuro */
.app-header-user-avatar {
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--color-primary-light) 0%, rgba(255, 255, 255, 0.92) 48%, var(--color-primary-light) 100%);
    box-shadow:
        0 2px 10px rgba(0, 36, 68, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    box-sizing: border-box;
}

.app-header-user-avatar-frame {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-white);
    box-sizing: border-box;
    background: var(--color-white);
}

.app-header-user-photo-img,
body.ctx-app .app-header-user-photo img,
body.ctx-app .app-header-user-avatar-frame img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
}

.app-header-user-meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.375rem;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.125rem;
}

.app-header-user-card .app-header-user-label,
.app-header-user-card .app-header-user-id {
    color: var(--color-primary);
}

.app-header-user-label,
.app-header-user-id {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1.3;
    text-transform: none;
}

/* RFC / clave corta — una línea, sin alterar capitalización (valor del backend) */
.app-header-user-label--code,
.app-header-user-id {
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Nombre completo — multilínea, sin recorte ni transformación CSS */
.app-header-user-label--name {
    letter-spacing: normal;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
    overflow: visible;
}

.app-header-user-logout {
    line-height: 1.2;
    margin-top: 0.125rem;
    padding-top: 0.375rem;
    border-top: 1px solid rgba(0, 75, 135, 0.12);
}

.app-header-user-logout-link,
body.ctx-app .app-header-user-logout a.ui-commandlink,
body.ctx-app .app-header-user-logout a.app-header-user-logout-link {
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    border: 0;
    background: transparent;
    padding: 0;
    transition: color 0.15s ease;
}

/* Sin tarjeta — texto claro sobre header oscuro (uso futuro) */
body.ctx-app .app-header-user-logout-link,
body.ctx-app .app-header-user-logout a.ui-commandlink,
body.ctx-app .app-header-user-logout a.app-header-user-logout-link {
    color: rgba(255, 255, 255, 0.92);
}

body.ctx-app .app-header-user-logout-link:hover,
body.ctx-app .app-header-user-logout a.ui-commandlink:hover,
body.ctx-app .app-header-user-logout a.app-header-user-logout-link:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* Dentro de tarjeta — contraste sobre fondo claro */
body.ctx-app .app-header-user-card .app-header-user-logout-link,
body.ctx-app .app-header-user-card .app-header-user-logout a.ui-commandlink,
body.ctx-app .app-header-user-card .app-header-user-logout a.app-header-user-logout-link {
    color: var(--color-primary);
}

body.ctx-app .app-header-user-card .app-header-user-logout-link:hover,
body.ctx-app .app-header-user-card .app-header-user-logout a.ui-commandlink:hover,
body.ctx-app .app-header-user-card .app-header-user-logout a.app-header-user-logout-link:hover {
    color: var(--color-info-hover);
    text-decoration: underline;
}

.app-header-mock-user {
    flex: 0 0 auto;
    margin-left: auto;
}

.app-header-mock-rfc {
    display: inline-block;
    max-width: 100%;
    padding: 0.375rem 0.75rem;
    background: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    box-sizing: border-box;
}

.app-sidebar-demo {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    gap: 0.25rem;
}

.app-sidebar-demo-title {
    margin: 0.625rem 0 0.25rem;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.app-sidebar-demo-title:first-child {
    margin-top: 0;
}

.app-sidebar-demo a {
    display: block;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.app-sidebar-demo a:hover {
    background: rgba(0, 75, 135, 0.08);
    color: var(--color-primary);
}

@media (min-width: 992px) {
    .app-toolbar {
        display: none;
    }
}

@media (max-width: 991.98px) {
    /*
     * iOS Safari: 100dvh puede ser mayor que el área visible con la barra inferior
     * del navegador; 100svh encaja header + contenido + footer sin desplazar el doc.
     */
    html:has(body.ctx-app),
    body.ctx-app {
        height: 100svh;
        max-height: 100svh;
        min-height: 100svh;
    }

    body.ctx-app .app-shell {
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }

    body.ctx-app .app-shell > form {
        height: 100%;
        max-height: 100%;
    }

    body.ctx-app .app-footer {
        padding-bottom: max(0.375rem, env(safe-area-inset-bottom, 0px));
    }

    .app-shell-body {
        display: flex;
        flex-direction: column;
    }

    body.ctx-app .app-shell-header {
        display: flex;
        align-items: center;
        height: var(--header-height);
        max-height: var(--header-height);
        overflow: hidden;
    }

    .app-shell-header-inner,
    .app-header-mock {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        gap: 0.5rem;
        padding-right: 0.625rem;
        align-items: center;
    }

    .app-header-actions {
        align-self: center;
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    /* Barra compacta: logo vertical + solo "SICAPIS" (sin tagline) */
    .app-shell-header-logo-slot--wide {
        display: none;
    }

    .app-shell-header-logo-slot--narrow {
        display: block;
    }

    .app-header-brand {
        flex: 0 1 auto;
        min-width: 0;
        margin-left: 0.5rem;
    }

    .app-header-notifications {
        align-items: center;
        padding-bottom: 0;
    }

    .app-shell-header-logo-slot {
        flex-shrink: 0;
        align-self: center;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: var(--app-header-logo-inset);
        margin-right: 0;
    }

    .app-header-mock-logo,
    body.ctx-app .app-shell-header .imgLogoHeader {
        margin-top: 0;
        margin-bottom: 0;
    }

    .app-header-mock-brand strong {
        font-size: var(--text-base);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-header-brand strong {
        font-size: var(--text-base);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-header-user-card {
        max-width: min(100%, 18rem);
        padding: 0.3125rem 0.5rem;
        align-self: center;
    }

    .app-header-user-card .app-header-user {
        padding-left: 0;
        align-items: flex-start;
    }

    .app-header-user-card .app-header-user-meta {
        padding-top: 0;
    }

    .app-header-user {
        gap: 0.5rem;
    }

    .app-header-user-avatar {
        width: 3.25rem;
        height: 3.25rem;
        padding: 1.5px;
    }

    .app-header-user-avatar-frame {
        border-width: 1.5px;
    }

    .app-header-user-label,
    .app-header-user-id,
    .app-header-user-label--code,
    .app-header-user-label--name {
        font-size: var(--text-xs);
        max-width: 100%;
    }

    .app-header-notifications-link img {
        width: 1.25rem;
    }

    .app-header-mock-rfc {
        max-width: 7.5rem;
        padding: 0.25rem 0.5rem;
        font-size: var(--text-xs);
    }

    .app-sidebar {
        position: fixed;
        top: var(--app-shell-header-offset);
        left: 0;
        bottom: 0;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: var(--shadow-card);
    }

    .app-shell.app-sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .app-shell.app-sidebar-open .app-sidebar-backdrop {
        display: block;
    }

    .app-shell-main {
        width: 100%;
    }

    .app-header-mock-brand span {
        display: none;
    }

    .app-header-brand-tagline {
        display: none;
    }
}

/* Pantallas angostas: logo con la misma altura máxima que la tarjeta de usuario */
@media (max-width: 992px) {
    :root {
        --app-header-logo-max-height: 3.875rem;
    }

    .app-header-actions {
        flex: 0 1 auto;
        min-width: 0;
        gap: 0.375rem;
    }

    .app-header-user-card {
        min-width: 0;
    }
}

/* Móvil muy angosto: ocultar «SICAPIS» y dejar logo vertical + iconos + tarjeta */
@media (max-width: 464.98px) {
    .app-header-brand {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar {
        transition: none;
    }

    .app-sidebar-toggle,
    .app-sidebar-toggle:hover {
        transition: none;
        transform: none;
    }
}

/* ── 4. SHOWCASE / DEV ─────────────────────────────────────────────────── */
.showcase-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--density-page-pad);
    font-size: var(--density-font-size);
    line-height: var(--density-line-height);
}

.showcase-page .showcase-title {
    font-size: clamp(1.25rem, 2.5vw, var(--text-xl));
    font-weight: 700;
    margin: 0 0 0.375rem;
}

.showcase-nav {
    background: var(--color-surface-app-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--density-nav-pad);
    margin-bottom: var(--density-section-gap);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--density-nav-link-gap);
}

.showcase-nav a {
    margin-right: 0;
}

.showcase-section {
    background: var(--color-surface-app-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--density-section-pad);
    margin-bottom: var(--density-section-gap);
}

.showcase-section h2 {
    font-size: var(--text-base);
    margin-top: 0;
    margin-bottom: 0.375rem;
    border-bottom: 2px solid var(--color-primary-light);
    padding-bottom: 0.375rem;
}

.showcase-section h3 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--density-font-size);
    color: var(--color-primary-light);
    margin: 0.5rem 0 0.25rem;
}

.showcase-note {
    font-size: calc(var(--density-font-size) * 0.925);
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
}

/* TextEditor — altura mínima visible en showcase */
.ctx-app .ui-texteditor .ql-editor,
.ctx-app .ui-texteditor .ql-container {
    min-height: 160px;
}

.ctx-app .ui-texteditor .ui-texteditor {
    display: block;
    width: 100%;
    max-width: 720px;
}

/* Signature / ImageCropper — altura visible en showcase */
.ctx-app .kbw-signature,
.ctx-app .ui-inputfield.kbw-signature {
    display: inline-block !important;
    width: 400px !important;
    max-width: 100%;
    height: 200px !important;
    min-height: 200px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    padding: 0 !important;
    box-sizing: border-box;
}

.ctx-app .kbw-signature canvas {
    display: block;
    width: 400px !important;
    max-width: 100%;
    height: 200px !important;
}

.ctx-app .ui-imagecropper {
    min-width: 0;
    min-height: 0;
}

.showcase-section .ui-imagecropper {
    min-width: 320px;
    min-height: 320px;
    max-width: 520px;
}

.ctx-app .ui-imagecropper img,
.ctx-app .ui-imagecropper .ui-imagecropper {
    display: block;
    max-width: 100%;
}

.ctx-app .ui-media {
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* FileUpload — compacto bajo ctx-app */
.ctx-app .ui-fileupload .ui-fileupload-buttonbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--density-control-gap);
    padding: 0.375rem 0.5rem;
    background: var(--color-surface-app-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.ctx-app .ui-fileupload .ui-fileupload-content {
    display: block;
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-app-panel);
    min-height: auto;
}

.ctx-app .ui-fileupload .ui-fileupload-files {
    margin: 0;
}

.ctx-app .ui-fileupload .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row > div {
    padding: 0.125rem 0.35rem;
    vertical-align: middle;
    line-height: 1.2;
    font-size: var(--text-sm);
}

.ctx-app .ui-fileupload .ui-fileupload-row > .ui-fileupload-filename {
    display: table-cell !important;
    word-break: break-word;
    max-width: 12rem;
}

.ctx-app .ui-fileupload .ui-fileupload-content .ui-progressbar {
    width: 4.5rem !important;
    max-width: 4.5rem !important;
    min-width: 3rem !important;
    height: 0.375rem !important;
    margin: 0 !important;
    top: 0 !important;
}

.ctx-app .ui-fileupload .ui-fileupload-row .ui-fileupload-cancel {
    width: var(--pf-button-height);
    min-width: var(--pf-button-height);
    height: var(--pf-button-height);
    padding: 0;
}

.ctx-app .ui-fileupload.ui-fileupload {
    display: block;
    width: 100%;
    max-width: 36rem;
}

.ctx-app .ui-fileupload .ui-fileupload-files:empty::before {
    content: "Sin archivos seleccionados — use Examinar y luego Enviar";
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-upload,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-cancel {
    display: inline-flex !important;
}

/* FileUpload buttonbar — icono + texto centrados (anula grid de ui-button-text-icon-left) */
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-choose,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-upload,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-cancel {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: unset !important;
    gap: 0.375rem;
    min-height: var(--pf-button-height);
    height: var(--pf-button-height);
    padding: 0 var(--pf-button-padding-x) !important;
}

.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-choose .ui-icon,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-upload .ui-icon,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-cancel .ui-icon,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-choose .ui-button-icon-left,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-upload .ui-button-icon-left,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-cancel .ui-button-icon-left,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-choose .pi,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-upload .pi,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-cancel .pi {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
    flex: 0 0 auto;
    align-self: center;
    line-height: 1;
    text-indent: 0 !important;
    overflow: visible !important;
    background-position: center center !important;
}

.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-choose .ui-button-text,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-upload .ui-button-text,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-fileupload-cancel .ui-button-text {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    justify-self: auto;
    text-align: center;
    line-height: 1.2;
    padding: 0 !important;
    margin: 0;
}

/* PrimeFlex — márgenes más compactos dentro del ctx-app */
.ctx-app .gap-2 { gap: var(--density-control-gap) !important; }
.ctx-app .gap-3 { gap: calc(var(--density-control-gap) * 1.25) !important; }
.ctx-app .mt-2 { margin-top: 0.375rem !important; }
.ctx-app .mt-3 { margin-top: 0.5rem !important; }
.ctx-app .mb-2 { margin-bottom: 0.375rem !important; }
.ctx-app .mb-3 { margin-bottom: 0.5rem !important; }
.ctx-app .my-3 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Tipografía compacta — anula font-size rem del theme PF (scoped al showcase) */
.ctx-app .ui-widget,
.ctx-app .ui-widget .ui-widget,
.ctx-app .ui-widget input,
.ctx-app .ui-widget select,
.ctx-app .ui-widget textarea,
.ctx-app .ui-widget button,
.ctx-app .ui-outputlabel,
.ctx-app .ui-panelgrid .ui-panelgrid-cell,
.ctx-app .ui-selectonemenu-label,
.ctx-app .ui-selectonelistbox .ui-selectlistbox-item,
.ctx-app .ui-selectoneradio label,
.ctx-app .ui-chkbox-label,
.ctx-app .ui-button .ui-button-text,
.ctx-app .ui-datatable table,
.ctx-app .ui-panelmenu:not(.app-sidebar-menu) .ui-menuitem-link,
.ctx-app .ui-panelmenu:not(.app-sidebar-menu) .ui-panelmenu-header,
.ctx-app .ui-wizard .ui-wizard-step-title,
.ctx-app .ui-wizard-content {
    font-size: var(--density-font-size);
}

/* Controles PrimeFaces — densidad compacta (scoped al showcase) */
.ctx-app .ui-inputfield,
.ctx-app .ui-password input,
.ctx-app .ui-inputtextarea,
.ctx-app .ui-autocomplete-input {
    padding: var(--pf-input-padding-y) var(--pf-input-padding-x);
    font-size: var(--density-font-size);
    min-height: var(--pf-control-height);
    box-sizing: border-box;
}

.ctx-app .ui-selectonemenu,
.ctx-app .ui-selectonemenu .ui-selectonemenu-label {
    min-height: var(--pf-control-height);
    box-sizing: border-box;
}

.ctx-app .ui-selectonemenu .ui-selectonemenu-label {
    padding: var(--pf-input-padding-y) var(--pf-input-padding-x);
    line-height: calc(var(--pf-control-height) - (var(--pf-input-padding-y) * 2));
}

.ctx-app .ui-inputtextarea {
    line-height: var(--density-line-height);
}

.ctx-app .ui-panel .ui-panel-titlebar,
.ctx-app .ui-panel .ui-panel-content {
    padding: 0.5rem 0.75rem;
}

.ctx-app .ui-fieldset {
    padding: 0 !important;
    margin: 0;
}

.ctx-app .ui-fieldset .ui-fieldset-legend {
    padding: 0.375rem 0.625rem !important;
    line-height: 1.3;
    font-size: var(--density-font-size);
}

.ctx-app .ui-fieldset-toggleable .ui-fieldset-legend {
    padding: 0.375rem 0.625rem 0.375rem 0.375rem !important;
}

.ctx-app .ui-fieldset .ui-fieldset-content {
    padding: 0.375rem 0.5rem !important;
    line-height: var(--density-line-height);
    font-size: var(--density-font-size);
}

.ctx-app .ui-fieldset .ui-fieldset-content > p:first-child {
    margin-top: 0;
}

.ctx-app .ui-fieldset .ui-fieldset-content > p:last-child {
    margin-bottom: 0;
}

.ctx-app .ui-panelgrid .ui-panelgrid-cell {
    padding: 0.25rem 0.375rem;
}

.ctx-app .ui-outputlabel {
    margin-bottom: 0.125rem;
}

.ctx-app .ui-datatable thead th,
.ctx-app .ui-datatable tbody td,
.ctx-app .ui-datatable tfoot td,
.ctx-app .ui-datatable .ui-datatable-data > tr > td,
.ctx-app .ui-datatable .ui-datatable-data > tr > th {
    padding: 0.125rem 0.35rem !important;
    line-height: 1.2;
    vertical-align: middle;
}

.ctx-app .ui-datatable .ui-datatable-data > tr {
    height: auto;
}

.ctx-app .ui-datatable .ui-datatable-data > tr > td .ui-outputlabel,
.ctx-app .ui-datatable .ui-datatable-data > tr > td span {
    line-height: 1.2;
}

.ctx-app .ui-datatable .ui-paginator {
    padding: 0.15rem 0;
}

.ctx-app .ui-staticmessage,
.ctx-app .ui-message {
    padding: 0.375rem 0.625rem;
    margin: 0.25rem 0;
}

.ctx-app .ui-selectoneradio td,
.ctx-app .ui-selectmanycheckbox td {
    padding: 0.125rem 0.5rem 0.125rem 0;
    vertical-align: middle;
}

.ctx-app .ui-toolbar {
    padding: 0.375rem 0.5rem;
}

/* TabView (PF15: ui-tabs) y Accordion — densidad compacta */
.ctx-app .ui-tabs {
    padding: 0 !important;
}

.ctx-app .ui-tabs.ui-tabs-top > .ui-tabs-nav,
.ctx-app .ui-tabs.ui-tabs-bottom > .ui-tabs-nav {
    padding: 0 !important;
    margin: 0 !important;
}

.ctx-app .ui-tabs .ui-tabs-nav li.ui-tabs-header {
    margin: 0 0.125rem 0 0;
    padding: 0 !important;
}

.ctx-app .ui-tabs .ui-tabs-nav li.ui-tabs-header a {
    padding: 0.35rem 0.7rem !important;
    line-height: 1.3;
    font-size: var(--density-font-size);
    min-height: 0;
}

.ctx-app .ui-tabs .ui-tabs-panel {
    padding: 0.375rem 0.5rem !important;
    line-height: var(--density-line-height);
    font-size: var(--density-font-size);
}

.ctx-app .ui-tabs .ui-tabs-panel > p:last-child,
.ctx-app .ui-accordion .ui-accordion-content > p:last-child {
    margin-bottom: 0;
}

.ctx-app .ui-tabs .ui-tabs-panel > p:first-child,
.ctx-app .ui-accordion .ui-accordion-content > p:first-child {
    margin-top: 0;
}

.ctx-app .ui-accordion .ui-accordion-header {
    padding: 0.375rem 0.5rem 0.375rem 1.75rem !important;
    line-height: 1.3;
    font-size: var(--density-font-size);
}

.ctx-app .ui-accordion .ui-accordion-content {
    padding: 0.375rem 0.5rem !important;
    line-height: var(--density-line-height);
    font-size: var(--density-font-size);
}

.ctx-app .ui-accordion {
    margin-top: 0.375rem;
}

/* Compatibilidad PF legacy (ui-tabview) — solo encabezados */
.ctx-app .ui-tabview .ui-tabview-nav li .ui-tabview-nav-link {
    padding: 0.35rem 0.7rem !important;
    line-height: 1.3;
}

.ctx-app .ui-tabview .ui-tabview-panel {
    padding: 0.375rem 0.5rem;
}

.ctx-app .ui-breadcrumb {
    padding: 0.375rem 0.625rem;
}

.ctx-app .ui-steps .ui-steps-item .ui-menuitem-link {
    padding: 0.375rem 0.625rem;
}

/* PanelMenu y Wizard — pestañas compactas en grid (PF: .ui-wizard-step-title); portal ctx-app */
.ctx-app .ui-panelmenu:not(.app-sidebar-menu) .ui-panelmenu-header,
.ctx-app .ui-panelmenu:not(.app-sidebar-menu) .ui-menuitem-link {
    padding: 0.3rem 0.5rem;
}

.ctx-app .ui-panelmenu:not(.app-sidebar-menu) .ui-panelmenu-content .ui-menuitem-link {
    padding: 0.25rem 0.5rem 0.25rem 1.125rem;
}

/*
 * body.ctx-app = shell productivo (clase en <body>).
 * body .ctx-app = showcase dev (div.ctx-app). El espacio en body .ctx-app exige ancestro intermedio.
 */
body.ctx-app .ui-wizard .ui-wizard-step-titles,
body .ctx-app .ui-wizard .ui-wizard-step-titles {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-wrap: unset !important;
    gap: 0;
    margin: 0 0 0.125rem;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

body.ctx-app .ui-wizard .ui-wizard-step-titles.ui-helper-clearfix::before,
body.ctx-app .ui-wizard .ui-wizard-step-titles.ui-helper-clearfix::after,
body .ctx-app .ui-wizard .ui-wizard-step-titles.ui-helper-clearfix::before,
body .ctx-app .ui-wizard .ui-wizard-step-titles.ui-helper-clearfix::after {
    display: none !important;
    content: none !important;
}

body.ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title,
body .ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title {
    float: none !important;
    display: block;
    box-sizing: border-box;
    background: var(--color-white);
    font-size: 0.6875rem !important;
    font-weight: 600;
    line-height: 1.05;
    padding: 0.15rem 0.3rem !important;
    margin: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--color-border) !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center;
    min-height: 0;
    min-width: 0;
}

@media (min-width: 992px) {
    body.ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title,
    body .ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title {
        font-size: 0.75rem !important;
        line-height: 1.1;
        padding: 0.28rem 0.45rem !important;
    }

    body.ctx-app .ui-wizard .ui-wizard-step-titles,
    body .ctx-app .ui-wizard .ui-wizard-step-titles {
        margin-bottom: 0.1875rem;
    }
}

body.ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title > a,
body .ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title > a {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-decoration: none;
}

body.ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title:nth-child(3n),
body .ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title:nth-child(3n) {
    border-right: 0 !important;
}

body.ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title:last-child,
body .ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title:last-child {
    border-bottom: 0 !important;
}

body.ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title + .ui-wizard-step-title,
body .ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title + .ui-wizard-step-title {
    margin-left: 0 !important;
}

body.ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title.ui-state-highlight,
body.ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title.ui-state-hover,
body .ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title.ui-state-highlight,
body .ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title.ui-state-hover {
    background: var(--color-primary-pale) !important;
    border-radius: 0 !important;
    color: var(--color-primary);
}

body.ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title.ui-helper-hidden,
body .ctx-app .ui-wizard .ui-wizard-step-titles > .ui-wizard-step-title.ui-helper-hidden {
    display: none !important;
}

body.ctx-app .ui-wizard .ui-wizard-content,
body .ctx-app .ui-wizard .ui-wizard-content {
    margin: 0.0625rem 0 !important;
    padding: 0.125rem 0 !important;
}

.ctx-app .ui-wizard-content p {
    margin: 0.25rem 0;
}

body.ctx-app .ui-wizard .ui-wizard-navbar,
body .ctx-app .ui-wizard .ui-wizard-navbar {
    padding: 0.125rem 0 0;
    margin-top: 0.125rem;
}

/* AutoComplete, Spinner, Slider — showcase §6 */
.ctx-app .ui-autocomplete {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    width: 100%;
    vertical-align: top;
}

.ctx-app .ui-autocomplete .ui-autocomplete-input.ui-autocomplete-dd-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: var(--pf-control-height) !important;
    min-height: var(--pf-control-height) !important;
    max-height: var(--pf-control-height) !important;
    padding: var(--pf-input-padding-y) var(--pf-input-padding-x) !important;
    line-height: 1.2;
    box-sizing: border-box;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    margin: 0;
}

body .ctx-app .ui-autocomplete .ui-autocomplete-dropdown.ui-button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 2.4em !important;
    width: 2.4em !important;
    min-width: 2.4em !important;
    max-width: 2.4em !important;
    height: var(--pf-control-height) !important;
    min-height: var(--pf-control-height) !important;
    max-height: var(--pf-control-height) !important;
    margin: 0 0 0 -1px !important;
    padding: 0 !important;
    border-left-width: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    align-self: auto;
    box-sizing: border-box;
}

.ctx-app .ui-spinner {
    width: 100%;
}

.ctx-app .ui-spinner .ui-spinner-input {
    padding: var(--pf-input-padding-y) var(--pf-input-padding-x);
    padding-right: 2.25rem;
    text-align: left;
    font-size: var(--density-font-size);
    min-height: var(--pf-control-height);
    box-sizing: border-box;
    width: 100%;
}

.ctx-app .flex.align-items-center {
    gap: 0.5rem;
    width: 100%;
}

.ctx-app .flex.align-items-center .ui-slider,
.ctx-app .flex.align-items-center .ui-slider-horizontal {
    flex: 1 1 auto;
    display: block;
    width: auto;
    min-width: 8rem;
    height: 0.5rem;
    margin: 0.25rem 0;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.ctx-app .flex.align-items-center .ui-slider-horizontal .ui-slider-range {
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
}

.ctx-app .flex.align-items-center .ui-slider-horizontal .ui-slider-handle {
    width: 1rem;
    height: 1rem;
    top: 50%;
    margin-left: -0.5rem;
    transform: translateY(-50%);
    background: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: 50%;
    cursor: grab;
}

/* Rating y ToggleSwitch — color primario institucional */
.ctx-app .ui-rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.ctx-app .ui-rating .ui-rating-star,
.ctx-app .ui-rating .ui-rating-cancel {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    text-indent: 0 !important;
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.ctx-app .ui-rating .ui-rating-star a,
.ctx-app .ui-rating .ui-rating-cancel a {
    background: none !important;
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem;
    min-height: 1rem;
    text-indent: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.ctx-app .ui-rating .ui-rating-star a::before,
.ctx-app .ui-rating .ui-rating-cancel a::before {
    font-family: 'primeicons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
}

.ctx-app .ui-rating .ui-rating-star a::before {
    content: "\e937";
    color: var(--color-gray-light);
}

.ctx-app .ui-rating .ui-rating-star-on a::before {
    content: "\e936";
    color: var(--color-primary);
}

.ctx-app .ui-rating .ui-rating-star-hover a::before {
    color: var(--color-primary-light);
}

.ctx-app .ui-rating .ui-rating-cancel a::before {
    content: "\e90c";
    color: var(--color-danger);
}

body .ctx-app .ui-toggleswitch {
    --ts-w: 2.75em;
    --ts-h: 1.5em;
    --ts-gap: 0.125em;
    --ts-knob: 1.25em;
    position: relative;
    display: inline-block;
    width: var(--ts-w) !important;
    height: var(--ts-h) !important;
    min-width: var(--ts-w);
    max-width: var(--ts-w);
    vertical-align: middle;
}

body .ctx-app .ui-toggleswitch .ui-toggleswitch-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--color-gray-light);
    border-radius: var(--ts-h);
    overflow: hidden;
    transition: background 0.3s ease;
}

body .ctx-app .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background: var(--color-primary) !important;
}

body .ctx-app .ui-toggleswitch .ui-toggleswitch-handler,
body .ctx-app .ui-toggleswitch .ui-toggleswitch-slider .ui-toggleswitch-handler {
    position: absolute !important;
    width: var(--ts-knob) !important;
    height: var(--ts-knob) !important;
    top: 50% !important;
    bottom: auto !important;
    left: var(--ts-gap) !important;
    right: auto !important;
    margin: 0 !important;
    transform: translate3d(0, -50%, 0) !important;
    -webkit-transform: translate3d(0, -50%, 0) !important;
    background: var(--color-white) !important;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 1;
    display: block !important;
    transition: left 0.3s ease, right 0.3s ease, transform 0.3s ease !important;
}

body .ctx-app .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-handler,
body .ctx-app .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider .ui-toggleswitch-handler,
body .ctx-app .ui-toggleswitch-checked .ui-toggleswitch-handler {
    left: auto !important;
    right: var(--ts-gap) !important;
    transform: translate3d(0, -50%, 0) !important;
    -webkit-transform: translate3d(0, -50%, 0) !important;
}

/* ColorPicker (Coloris / PF15) — swatch izquierdo, sin romper el popup nativo */
.ctx-app .clr-field {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    color: transparent;
}

.ctx-app .clr-field input.ui-colorpicker,
.ctx-app .clr-field .ui-inputfield.ui-colorpicker {
    width: 100% !important;
    min-height: var(--pf-control-height);
    padding: var(--pf-input-padding-y) var(--pf-input-padding-x);
    padding-left: calc(1.75rem + var(--pf-input-padding-x));
    box-sizing: border-box;
    font-size: var(--density-font-size);
    color: var(--color-text);
}

.ctx-app .clr-field button {
    position: absolute;
    width: 1.375rem;
    height: 1.375rem;
    min-width: 1.375rem;
    max-width: 1.375rem;
    left: 0.35rem;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    text-indent: -1000px;
    white-space: nowrap;
    pointer-events: auto;
}

.ctx-app .clr-field button::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: currentColor;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.35);
    font-family: inherit;
    font-size: inherit;
    text-shadow: none;
    pointer-events: none;
}

body .clr-picker:not(.clr-open):not([data-inline="true"]) {
    display: none !important;
}

body .clr-picker.clr-open .clr-gradient {
    background-image: linear-gradient(rgba(0, 0, 0, 0), #000),
                      linear-gradient(90deg, #fff, currentColor) !important;
}

body .clr-picker.clr-open .clr-hue {
    background-image: linear-gradient(to right, red 0, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, red 100%) !important;
}

/* PickList / OrderList — layout compacto con espaciado uniforme */
body .ctx-app .ui-picklist.ui-picklist {
    --picklist-btn-gap: 0.25rem;
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    gap: var(--picklist-btn-gap);
    table-layout: auto;
}

body .ctx-app .ui-picklist.ui-picklist > div {
    display: block !important;
    float: none !important;
    flex: 0 0 auto;
    vertical-align: top;
}

body .ctx-app .ui-picklist .ui-picklist-list-wrapper {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none;
}

body .ctx-app .ui-picklist .ui-picklist-list-wrapper[style*="width"] {
    flex: 0 0 auto;
}

body .ctx-app .ui-picklist.ui-picklist[style*="--picklist-col-width"] .ui-picklist-list-wrapper {
    flex: 0 0 var(--picklist-col-width);
    width: var(--picklist-col-width) !important;
    max-width: var(--picklist-col-width);
}

body .ctx-app .ui-picklist .ui-picklist-list {
    width: 100% !important;
    box-sizing: border-box;
}

body .ctx-app .ui-picklist .ui-picklist-caption,
body .ctx-app .ui-orderlist .ui-orderlist-caption {
    padding: 0.3rem 0.5rem !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    font-size: var(--density-font-size);
    font-weight: 600;
    text-align: center;
}

body .ctx-app .ui-picklist .ui-picklist-list,
body .ctx-app .ui-orderlist .ui-orderlist-list {
    padding: 2px;
    margin: 0;
}

body .ctx-app .ui-picklist .ui-picklist-item,
body .ctx-app .ui-picklist .ui-picklist-list > li,
body .ctx-app .ui-orderlist .ui-orderlist-item,
body .ctx-app .ui-orderlist .ui-orderlist-list > li,
body .ctx-app .ui-selectonelistbox.ui-selectonelistbox .ui-selectlistbox-item,
body .ctx-app .ui-selectmanymenu .ui-selectlistbox-item {
    padding: 0.2rem 0.45rem !important;
    line-height: 1.3;
    margin: 1px 2px !important;
}

body .ctx-app .ui-selectmanymenu .ui-selectlistbox-list {
    padding: 2px;
    margin: 0;
}

/* SelectManyCheckbox — alinear label con checkbox */
body .ctx-app .ui-selectmanycheckbox.ui-grid-responsive > .ui-g > [class*="ui-g-"],
body .ctx-app .ui-selectmanycheckbox.ui-grid-responsive .ui-grid-row > div {
    padding: 0.125rem 0.5rem 0.125rem 0 !important;
}

body .ctx-app .ui-selectmanycheckbox.ui-grid-responsive > .ui-g > [class*="ui-g-"] > div,
body .ctx-app .ui-selectmanycheckbox.ui-grid-responsive > div > div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem;
}

body .ctx-app .ui-selectmanycheckbox label,
body .ctx-app .ui-selectmanycheckbox .ui-chkbox-label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
}

body .ctx-app .ui-selectmanycheckbox .ui-chkbox {
    flex-shrink: 0;
    vertical-align: middle;
}

body .ctx-app .ui-selectmanycheckbox td > div {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body .ctx-app .ui-picklist.ui-picklist-responsive .ui-picklist-list-wrapper,
body .ctx-app .ui-picklist.ui-picklist-responsive .ui-picklist-list-wrapper:nth-child(1),
body .ctx-app .ui-picklist.ui-picklist-responsive .ui-picklist-list-wrapper:nth-last-child(2) {
    width: auto !important;
}

body .ctx-app .ui-picklist .ui-picklist-buttons {
    align-self: center;
    flex: 0 0 auto;
    width: auto !important;
    min-width: var(--pf-button-height);
    max-width: none;
    height: auto !important;
    padding: 0 !important;
    white-space: nowrap;
    vertical-align: middle;
}

body .ctx-app .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
    width: auto !important;
}

body .ctx-app .ui-picklist .ui-picklist-buttons-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
}

body .ctx-app .ui-picklist .ui-picklist-buttons-cell .ui-button {
    margin: 0 !important;
}

body .ctx-app .ui-orderlist.ui-orderlist {
    display: block;
    width: 100%;
}

body .ctx-app .ui-orderlist.ui-orderlist > .ui-g {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

body .ctx-app .ui-orderlist .ui-orderlist-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    padding: 0;
    white-space: nowrap;
}

body .ctx-app .ui-orderlist .ui-orderlist-controls .ui-button {
    margin: 0 !important;
}

body .ctx-app .ui-orderlist .ui-orderlist-controls + div {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none;
}

body .ctx-app .ui-orderlist .ui-orderlist-list {
    width: 100%;
    max-width: 16rem;
    height: 10rem;
    box-sizing: border-box;
}

body .ctx-app .ui-picklist .ui-button,
body .ctx-app .ui-orderlist .ui-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--pf-button-height) !important;
    min-width: var(--pf-button-height) !important;
    max-width: var(--pf-button-height) !important;
    height: var(--pf-button-height) !important;
    min-height: var(--pf-button-height) !important;
    max-height: var(--pf-button-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    grid-template-columns: none;
}

body .ctx-app .ui-picklist .ui-button.ui-button-icon-only,
body .ctx-app .ui-orderlist .ui-button.ui-button-icon-only,
body .ctx-app .ui-picklist .ui-button.ui-button-text-icon-left,
body .ctx-app .ui-orderlist .ui-button.ui-button-text-icon-left {
    display: inline-flex !important;
    width: var(--pf-button-height) !important;
    min-width: var(--pf-button-height) !important;
    max-width: var(--pf-button-height) !important;
}

body .ctx-app .ui-picklist .ui-button.ui-button-text-icon-left .ui-button-text,
body .ctx-app .ui-orderlist .ui-button.ui-button-text-icon-left .ui-button-text,
body .ctx-app .ui-picklist .ui-button .ui-button-text,
body .ctx-app .ui-orderlist .ui-button .ui-button-text {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* Ordenamiento: hasta arriba, sube uno, baja uno, hasta abajo */
body .ctx-app .ui-picklist .ui-picklist-button-move-top,
body .ctx-app .ui-orderlist .ui-orderlist-button-move-top {
    order: 1;
}

body .ctx-app .ui-picklist .ui-picklist-button-move-up,
body .ctx-app .ui-orderlist .ui-orderlist-button-move-up {
    order: 2;
}

body .ctx-app .ui-picklist .ui-picklist-button-move-down,
body .ctx-app .ui-orderlist .ui-orderlist-button-move-down {
    order: 3;
}

body .ctx-app .ui-picklist .ui-picklist-button-move-bottom,
body .ctx-app .ui-orderlist .ui-orderlist-button-move-bottom {
    order: 4;
}

body .ctx-app .ui-picklist .ui-button .ui-icon,
body .ctx-app .ui-orderlist .ui-button .ui-icon,
body .ctx-app .ui-picklist .ui-button .ui-button-icon,
body .ctx-app .ui-orderlist .ui-button .ui-button-icon {
    position: static;
    margin: 0 auto;
}

@media (max-width: 640px) {
    body .ctx-app .ui-picklist.ui-picklist {
        display: block !important;
        flex-direction: column;
    }

    body .ctx-app .ui-picklist.ui-picklist > div {
        display: block !important;
        flex: none;
        width: 100% !important;
    }

    body .ctx-app .ui-picklist .ui-picklist-list-wrapper {
        flex: none;
        width: 100% !important;
    }

    body .ctx-app .ui-picklist .ui-picklist-buttons {
        height: auto;
        padding: 0.35rem 0;
        text-align: center;
    }

    body .ctx-app .ui-picklist .ui-picklist-buttons-cell {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    body .ctx-app .ui-picklist .ui-button {
        display: inline-flex !important;
        width: var(--pf-button-height) !important;
        min-width: var(--pf-button-height) !important;
        max-width: var(--pf-button-height) !important;
        margin: 0 0.15rem 0.3em !important;
    }

    body .ctx-app .ui-orderlist.ui-orderlist > .ui-g {
        flex-direction: column;
    }

    body .ctx-app .ui-orderlist .ui-orderlist-controls,
    body .ctx-app .ui-orderlist .ui-orderlist-controls + div {
        width: 100% !important;
    }

    body .ctx-app .ui-orderlist .ui-orderlist-controls {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.35rem;
    }

    body .ctx-app .ui-orderlist .ui-button {
        display: inline-flex !important;
        width: var(--pf-button-height) !important;
        min-width: var(--pf-button-height) !important;
        max-width: var(--pf-button-height) !important;
        margin: 0 0.15rem 0.3em !important;
    }
}

/* Listbox — altura fija con scroll interno */
body .ctx-app .ui-selectonelistbox.ui-selectonelistbox {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    max-width: 16rem;
    height: 9rem;
    overflow: hidden;
    padding: 2px;
}

body .ctx-app .ui-selectonelistbox.ui-selectonelistbox .ui-selectlistbox-listcontainer {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* Paginador DataTable — círculos más pequeños en showcase */
.ctx-app .ui-paginator .ui-paginator-page,
.ctx-app .ui-paginator .ui-paginator-current {
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
    min-height: 1.625rem;
    font-size: var(--density-font-size);
}

/* Menú desplegable MenuButton (overlay en body) */
body .ui-menu .ui-menu-list {
    padding: 0.125rem 0;
}

body .ui-menu .ui-menu-list .ui-menuitem {
    margin: 0;
}

body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
    padding: 0.15rem 0.5rem !important;
    line-height: 1.2;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
}

body .ui-menu .ui-menuitem-icon {
    position: static;
    margin: 0;
    flex-shrink: 0;
}

body .ui-menu .ui-menuitem-text {
    line-height: 1.2;
}

@media (max-width: 991.98px) {
    body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
        font-size: 0.9375rem;
        padding: 0.25rem 0.55rem !important;
    }
}

/* Panel desplegable SelectOneMenu (overlay en body) */
body .ui-selectonemenu-panel .ui-selectonemenu-list,
body .ui-selectonemenu-panel .ui-selectonemenu-items {
    padding: 0.125rem 0 !important;
}

body .ui-selectonemenu-panel .ui-selectonemenu-list-item,
body .ui-selectonemenu-panel .ui-selectonemenu-item {
    margin: 0 !important;
    padding: 0.15rem 0.5rem !important;
    line-height: 1.2;
    font-size: 0.875rem;
}

@media (max-width: 991.98px) {
    body .ui-selectonemenu-panel .ui-selectonemenu-list-item,
    body .ui-selectonemenu-panel .ui-selectonemenu-item {
        font-size: 0.9375rem;
        padding: 0.25rem 0.55rem !important;
    }
}

/* Panel desplegable SelectCheckboxMenu (overlay en body) */
body .ui-selectcheckboxmenu-panel {
    --scm-chk-inset: calc(2px + 0.45rem);
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header {
    display: flex !important;
    align-items: center !important;
    padding: 0.2rem 0.45rem 0.2rem var(--scm-chk-inset) !important;
    margin-bottom: 0 !important;
    min-height: 0;
    box-sizing: border-box;
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-chkbox {
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container {
    float: none !important;
    margin-left: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-close {
    float: none !important;
    margin-left: auto !important;
    flex: 0 0 auto;
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items-wrapper {
    padding: 2px 0 !important;
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item {
    margin: 1px 2px !important;
    padding: 0.2rem 0.45rem !important;
    line-height: 1.3;
    font-size: 0.875rem;
    min-height: 0;
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item .ui-chkbox {
    left: 0.45rem !important;
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%);
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item label {
    padding-left: 2em;
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item {
        font-size: 0.9375rem;
    }
}

/* Panel desplegable AutoComplete (overlay en body) */
body .ui-autocomplete-panel .ui-autocomplete-items,
body .ui-autocomplete-panel .ui-autocomplete-list {
    padding: 0.125rem 0 !important;
}

body .ui-autocomplete-panel .ui-autocomplete-item,
body .ui-autocomplete-panel .ui-autocomplete-list-item {
    margin: 0 !important;
    padding: 0.15rem 0.5rem !important;
    line-height: 1.2;
    font-size: 0.875rem;
}

body .ui-autocomplete-panel .ui-autocomplete-empty-message {
    margin: 0 !important;
    padding: 0.15rem 0.5rem !important;
    line-height: 1.2;
    font-size: 0.875rem;
}

@media (max-width: 991.98px) {
    body .ui-autocomplete-panel .ui-autocomplete-item,
    body .ui-autocomplete-panel .ui-autocomplete-list-item,
    body .ui-autocomplete-panel .ui-autocomplete-empty-message {
        font-size: 0.9375rem;
        padding: 0.25rem 0.55rem !important;
    }
}

/* §4.7 Datepicker compacto — homologar p:datePicker con p:calendar (overlay en body) */
body .p-datepicker-panel,
body .p-datepicker-panelui-datepicker,
body .p-datepicker-panelui-widget,
body .p-datepicker-panelui-widget-content,
body .ui-datepicker:not(.p-datepicker-panel) {
    --dp-day-size: 2rem;
    --dp-day-hit: calc(var(--dp-day-size) - 4px);
    --dp-panel-pad-x: 0.625rem;
    --dp-panel-pad-y: 0.35rem;
    --dp-control-height: 28px;
    --dp-table-width: calc(var(--dp-day-size) * 7);
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: var(--dp-panel-pad-y) var(--dp-panel-pad-x) !important;
    font-size: 0.875rem;
    box-sizing: border-box;
    overflow: visible !important;
}

body .p-datepicker-panel > .ui-datepicker {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
}

body .p-datepicker-panel .ui-datepicker-header,
body .p-datepicker-panel > .ui-datepicker-header,
body .ui-datepicker:not(.p-datepicker-panel) .ui-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-width: var(--dp-table-width);
    padding: 0.5rem 1.75rem !important;
    min-height: 2.35rem;
    box-sizing: border-box;
    overflow: visible;
}

body .p-datepicker-panel .ui-datepicker-title,
body .ui-datepicker .ui-datepicker-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin: 0 !important;
    line-height: 1.3;
    float: none;
    max-width: calc(100% - 2.5rem);
}

body .p-datepicker-panel .ui-datepicker-prev,
body .p-datepicker-panel .ui-datepicker-next,
body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next {
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%);
    width: 1.35rem;
    height: 1.35rem;
}

body .p-datepicker-panel select.ui-datepicker-year,
body .p-datepicker-panel input.ui-datepicker-year,
body .ui-datepicker select.ui-datepicker-year,
body .ui-datepicker input.ui-datepicker-year {
    width: 4.25rem !important;
    min-width: 4.25rem;
    max-width: 4.25rem;
    height: var(--dp-control-height);
    margin: 0;
    padding: 0 1.35rem 0 0.35rem;
    font-size: inherit;
    box-sizing: border-box;
    border-radius: 4px;
    appearance: auto;
    -webkit-appearance: menulist;
    background-color: var(--color-white, #fff);
    line-height: 1.2;
}

body .p-datepicker-panel select.ui-datepicker-month,
body .ui-datepicker select.ui-datepicker-month {
    width: 5.75rem !important;
    min-width: 5.75rem;
    max-width: 5.75rem;
    height: var(--dp-control-height);
    margin: 0;
    padding: 0 1.35rem 0 0.35rem;
    font-size: inherit;
    box-sizing: border-box;
    border-radius: 4px;
    appearance: auto;
    -webkit-appearance: menulist;
    background-color: var(--color-white, #fff);
    line-height: 1.2;
}

body .p-datepicker-panel .ui-datepicker table,
body .p-datepicker-panel table,
body .ui-datepicker:not(.p-datepicker-panel) table {
    width: var(--dp-table-width) !important;
    min-width: var(--dp-table-width);
    max-width: none;
    margin: 0 auto 0.25em !important;
    font-size: inherit;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

body .p-datepicker-panel .ui-datepicker th,
body .p-datepicker-panel th,
body .ui-datepicker:not(.p-datepicker-panel) th {
    width: var(--dp-day-size);
    padding: 0.25rem 0 !important;
    font-size: inherit;
    text-align: center;
    box-sizing: border-box;
}

body .p-datepicker-panel .ui-datepicker table td,
body .p-datepicker-panel table td,
body .ui-datepicker:not(.p-datepicker-panel) table td {
    width: var(--dp-day-size) !important;
    min-width: var(--dp-day-size);
    max-width: var(--dp-day-size);
    height: var(--dp-day-size) !important;
    padding: 0 !important;
    vertical-align: middle !important;
    text-align: center !important;
    box-sizing: border-box;
    overflow: visible;
}

body .p-datepicker-panel .ui-datepicker table td a,
body .p-datepicker-panel .ui-datepicker table td span,
body .p-datepicker-panel table td a,
body .p-datepicker-panel table td span,
body .ui-datepicker:not(.p-datepicker-panel) table td a,
body .ui-datepicker:not(.p-datepicker-panel) table td span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--dp-day-hit) !important;
    height: var(--dp-day-hit) !important;
    min-width: var(--dp-day-hit) !important;
    min-height: var(--dp-day-hit) !important;
    max-width: var(--dp-day-hit) !important;
    max-height: var(--dp-day-hit) !important;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 auto !important;
    line-height: 1 !important;
    text-align: center !important;
    box-sizing: border-box;
    border-radius: 50% !important;
}

body .p-datepicker-panel .ui-datepicker table td a.ui-state-active,
body .p-datepicker-panel .ui-datepicker table td span.ui-state-active,
body .p-datepicker-panel table td a.ui-state-active,
body .p-datepicker-panel table td span.ui-state-active,
body .ui-datepicker:not(.p-datepicker-panel) table td a.ui-state-active,
body .ui-datepicker:not(.p-datepicker-panel) table td span.ui-state-active {
    width: var(--dp-day-hit) !important;
    height: var(--dp-day-hit) !important;
    min-width: var(--dp-day-hit) !important;
    min-height: var(--dp-day-hit) !important;
    max-width: var(--dp-day-hit) !important;
    max-height: var(--dp-day-hit) !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    border-radius: 50% !important;
}

body .p-datepicker-panel .ui-timepicker div select,
body .p-datepicker-panel .ui-timepicker div input,
body .ui-datepicker .ui-timepicker div select,
body .ui-datepicker .ui-timepicker div input {
    font-size: 0.8rem !important;
    height: 22px !important;
    padding: 0 2px !important;
    margin: 0 !important;
}

body .p-datepicker-panel .ui-timepicker dt,
body .ui-datepicker .ui-timepicker dt {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 2px 0 !important;
}

@media (max-width: 991.98px) {
    body .p-datepicker-panel,
    body .p-datepicker-panelui-datepicker,
    body .ui-datepicker:not(.p-datepicker-panel) {
        --dp-day-size: 2.125rem;
        --dp-day-hit: calc(var(--dp-day-size) - 4px);
        --dp-control-height: 34px;
        font-size: 0.9375rem;
    }

    body .p-datepicker-panel select.ui-datepicker-month,
    body .ui-datepicker select.ui-datepicker-month {
        width: 6.25rem !important;
        min-width: 6.25rem;
        max-width: 6.25rem;
    }
}

@media (max-width: 991.98px) {
    .showcase-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.125rem 0;
    }
}

/* Paleta visual */
.palette-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--density-stack-gap, 0.375rem);
}

.palette-swatch {
    width: 84px;
    text-align: center;
    font-size: var(--text-xs);
}

.palette-swatch .swatch {
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 0.125rem;
}

@media (max-width: 991.98px) {
    .ctx-app .palette-swatch {
        width: 72px;
    }

    .ctx-app .palette-swatch .swatch {
        height: 40px;
    }
}

.swatch-primary       { background: var(--color-primary); }
.swatch-primary-light { background: var(--color-primary-light); }
.swatch-primary-pale  { background: var(--color-primary-pale); }
.swatch-gray-dark     { background: var(--color-gray-dark); }
.swatch-gray          { background: var(--color-gray); }
.swatch-gray-light    { background: var(--color-gray-light); }

.gradient-demo {
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--gradient-primary);
    margin: 0.375rem 0;
}

.type-sample-display {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--text-xl);
    color: var(--color-primary);
}

.type-sample-subtitle {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-primary-light);
}

.type-sample-body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-dark);
}

.sem-danger  { color: var(--color-danger); }
.sem-success { color: var(--color-success); }
.sem-warning { color: var(--color-warning); }
.sem-info    { color: var(--color-info); }

/* ── 5. UTILIDADES ─────────────────────────────────────────────────────── */
.card {
    background: var(--color-surface-app-panel);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    box-shadow: var(--shadow-card);
}

.btn-responsive.ui-button .ui-button-text {
    /* reservado — estilos responsive de botones */
}

/* ── 4.1 Botones (primario institucional #004B87) ─────────────────────── */

/* Layout base */
body .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--pf-button-height);
    min-height: var(--pf-button-height);
    max-height: var(--pf-button-height);
    box-sizing: border-box;
    padding: var(--pf-button-padding-y) var(--pf-button-padding-x);
    position: relative;
    min-width: 0;
    width: auto;
}

body .ui-button .ui-button-text {
    padding: 0;
    margin: 0;
    line-height: 1.2;
    text-indent: 0;
}

/* Icono + texto: grid centra el label entre el ícono y el padding derecho */
body .ui-button.ui-button-text-icon-left:not(.ui-button-icon-only) {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.375rem;
}

body .ui-button.ui-button-text-icon-right:not(.ui-button-icon-only) {
    display: inline-grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.375rem;
}

body .ui-button.ui-button-text-icon-left:not(.ui-button-icon-only) .ui-button-text,
body .ui-button.ui-button-text-icon-right:not(.ui-button-icon-only) .ui-button-text {
    text-align: center;
    justify-self: center;
    width: 100%;
    padding: 0 !important;
}

body .ui-button.ui-button-text-icon-left .ui-icon,
body .ui-button.ui-button-text-icon-left .ui-button-icon,
body .ui-button.ui-button-text-icon-left .ui-button-icon-left,
body .ui-button.ui-button-text-icon-right .ui-icon,
body .ui-button.ui-button-text-icon-right .ui-button-icon,
body .ui-button.ui-button-text-icon-right .ui-button-icon-right {
    position: static;
    left: auto;
    top: auto;
    margin: 0;
    transform: none;
    flex-shrink: 0;
    text-indent: 0;
    overflow: visible;
}

/* Solo texto — ancho según contenido (evita padding/min-width del theme) */
body .ui-button.ui-button-text-only,
body .ui-button.ui-button-text-only.ui-state-disabled {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 0 !important;
    width: auto;
    max-width: none;
    padding: var(--pf-button-padding-y) var(--pf-button-padding-x) !important;
}

body .ui-button.ui-button-text-only .ui-button-text,
body .ui-button.ui-button-text-only.ui-state-disabled .ui-button-text {
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
}

/* Solo ícono — excluir botones auxiliares embebidos en otros componentes */
body .ui-button.ui-button-icon-only:not(.ui-autocomplete-dropdown):not(.ui-spinner-button):not(.ui-datepicker-trigger):not(.ui-picklist-button-move-top):not(.ui-picklist-button-move-up):not(.ui-picklist-button-move-down):not(.ui-picklist-button-move-bottom):not(.ui-picklist-button-add):not(.ui-picklist-button-add-all):not(.ui-picklist-button-remove):not(.ui-picklist-button-remove-all):not(.ui-orderlist-button-move-top):not(.ui-orderlist-button-move-up):not(.ui-orderlist-button-move-down):not(.ui-orderlist-button-move-bottom) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--pf-button-height);
    min-width: var(--pf-button-height);
    max-width: var(--pf-button-height);
    padding: 0;
    gap: 0;
}

body .ui-button.ui-button-icon-only:not(.ui-button-mi):not(.ui-autocomplete-dropdown):not(.ui-spinner-button):not(.ui-datepicker-trigger):not(.ui-picklist-button-move-top):not(.ui-picklist-button-move-up):not(.ui-picklist-button-move-down):not(.ui-picklist-button-move-bottom):not(.ui-picklist-button-add):not(.ui-picklist-button-add-all):not(.ui-picklist-button-remove):not(.ui-picklist-button-remove-all):not(.ui-orderlist-button-move-top):not(.ui-orderlist-button-move-up):not(.ui-orderlist-button-move-down):not(.ui-orderlist-button-move-bottom) .ui-button-text {
    display: none !important;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

body .ui-button.ui-button-icon-only:not(.ui-autocomplete-dropdown):not(.ui-spinner-button):not(.ui-datepicker-trigger):not(.ui-picklist-button-move-top):not(.ui-picklist-button-move-up):not(.ui-picklist-button-move-down):not(.ui-picklist-button-move-bottom):not(.ui-picklist-button-add):not(.ui-picklist-button-add-all):not(.ui-picklist-button-remove):not(.ui-picklist-button-remove-all):not(.ui-orderlist-button-move-top):not(.ui-orderlist-button-move-up):not(.ui-orderlist-button-move-down):not(.ui-orderlist-button-move-bottom) .ui-icon,
body .ui-button.ui-button-icon-only:not(.ui-autocomplete-dropdown):not(.ui-spinner-button):not(.ui-datepicker-trigger):not(.ui-picklist-button-move-top):not(.ui-picklist-button-move-up):not(.ui-picklist-button-move-down):not(.ui-picklist-button-move-bottom):not(.ui-picklist-button-add):not(.ui-picklist-button-add-all):not(.ui-picklist-button-remove):not(.ui-picklist-button-remove-all):not(.ui-orderlist-button-move-top):not(.ui-orderlist-button-move-up):not(.ui-orderlist-button-move-down):not(.ui-orderlist-button-move-bottom) .ui-button-icon,
body .ui-button.ui-button-icon-only:not(.ui-autocomplete-dropdown):not(.ui-spinner-button):not(.ui-datepicker-trigger):not(.ui-picklist-button-move-top):not(.ui-picklist-button-move-up):not(.ui-picklist-button-move-down):not(.ui-picklist-button-move-bottom):not(.ui-picklist-button-add):not(.ui-picklist-button-add-all):not(.ui-picklist-button-remove):not(.ui-picklist-button-remove-all):not(.ui-orderlist-button-move-top):not(.ui-orderlist-button-move-up):not(.ui-orderlist-button-move-down):not(.ui-orderlist-button-move-bottom) .ui-button-icon-left {
    position: static;
    left: auto;
    top: auto;
    margin: 0;
    transform: none;
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    text-indent: 0;
    overflow: visible;
    visibility: visible;
}

/* Botones auxiliares embebidos — respetar layout nativo PF (autocomplete, spinner, calendar) */
body .ui-autocomplete .ui-autocomplete-dropdown.ui-button,
body .ui-datepicker-trigger.ui-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    min-width: 2.4em;
    max-width: 2.4em;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 0;
}

body .ui-autocomplete .ui-autocomplete-dropdown.ui-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.4em !important;
    min-width: 2.4em !important;
    max-width: 2.4em !important;
    height: auto !important;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    flex: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    overflow: visible;
}

body .ui-autocomplete .ui-autocomplete-dropdown.ui-button .ui-button-text {
    display: none !important;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

body .ui-autocomplete .ui-autocomplete-dropdown.ui-button .ui-icon,
body .ui-autocomplete .ui-autocomplete-dropdown.ui-button .ui-button-icon,
body .ui-autocomplete .ui-autocomplete-dropdown.ui-button .ui-button-icon-left {
    display: none !important;
}

body .ui-autocomplete .ui-autocomplete-dropdown.ui-button::before {
    font-family: 'primeicons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    content: "\e902";
    color: var(--color-text-inverse);
    font-size: 0.875rem;
}

body .ui-spinner {
    position: relative;
    display: inline-block;
}

body .ui-spinner .ui-spinner-button.ui-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    height: 50%;
    min-height: 0;
    max-height: none;
    padding: 0;
}

body .ui-spinner .ui-spinner-button.ui-button.ui-spinner-up {
    top: 0;
}

body .ui-spinner .ui-spinner-button.ui-button.ui-spinner-down {
    top: auto;
    bottom: 0;
}

body .ui-spinner .ui-spinner-button.ui-button .ui-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}

body .ui-fluid .ui-spinner .ui-spinner-input {
    padding-right: 2.25rem;
}

/* Rounded — clase del showcase PF (pill / círculo en icon-only) */
body .ui-button.rounded-button {
    border-radius: 2rem;
}

body .ui-button.rounded-button.ui-button-icon-only {
    border-radius: 50%;
}

/* Showcase: icon-only con title — PF puede renderizar ui-button-text-icon-left */
body .ui-button.rounded-button.ui-button-text-icon-left .ui-button-text {
    display: none !important;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

body .ui-button.rounded-button.ui-button-text-icon-left {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--pf-button-height);
    min-width: var(--pf-button-height);
    max-width: var(--pf-button-height);
    padding: 0;
    gap: 0;
}

/* Habilitado — primario sólido (no pisa flat/plain ni severities del theme) */
body .ui-button.ui-state-default:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-state-disabled),
body .ui-menubutton > .ui-button.ui-state-default:not(.ui-state-disabled),
body .ui-splitbutton > .ui-button.ui-state-default:not(.ui-state-disabled):first-child,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose.ui-state-default:not(.ui-state-disabled) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

body .ui-button.ui-state-default:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-state-disabled):hover,
body .ui-button.ui-state-default:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-state-disabled).ui-state-hover,
body .ui-menubutton > .ui-button.ui-state-default:not(.ui-state-disabled):hover,
body .ui-menubutton > .ui-button.ui-state-default:not(.ui-state-disabled).ui-state-hover,
body .ui-splitbutton > .ui-button.ui-state-default:not(.ui-state-disabled):first-child:hover,
body .ui-splitbutton > .ui-button.ui-state-default:not(.ui-state-disabled):first-child.ui-state-hover,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose.ui-state-default:not(.ui-state-disabled):hover,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

body .ui-button.ui-state-default:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-state-disabled):active,
body .ui-button.ui-state-default:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-state-disabled).ui-state-active,
body .ui-menubutton > .ui-button.ui-state-default:not(.ui-state-disabled):active,
body .ui-menubutton > .ui-button.ui-state-default:not(.ui-state-disabled).ui-state-active {
    background: var(--color-primary-active);
    border-color: var(--color-primary-active);
    color: var(--color-text-inverse);
}

/* Deshabilitado — misma familia #004B87, tono apagado (no azul claro del theme) */
body .ui-button.ui-state-default.ui-state-disabled:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info),
body .ui-menubutton > .ui-button.ui-state-default.ui-state-disabled,
body .ui-splitbutton > .ui-button.ui-state-default.ui-state-disabled:first-child,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose.ui-state-default.ui-state-disabled {
    opacity: 1;
    height: var(--pf-button-height);
    min-height: var(--pf-button-height);
    max-height: var(--pf-button-height);
    min-width: 0;
    width: auto;
    padding: var(--pf-button-padding-y) var(--pf-button-padding-x);
    box-sizing: border-box;
    background: var(--color-primary-disabled-bg);
    border-color: var(--color-primary-disabled-border);
    color: var(--color-primary-disabled-text);
    cursor: default;
    box-shadow: none;
}

body .ui-button.ui-state-default.ui-state-disabled:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info) .ui-button-text,
body .ui-menubutton > .ui-button.ui-state-default.ui-state-disabled .ui-button-text {
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
    min-width: 0;
}

/* Outlined primario — severities outlined conservan colores del theme */
body .ui-button.ui-button-outlined.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info) {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

body .ui-button.ui-button-outlined.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):hover,
body .ui-button.ui-button-outlined.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info).ui-state-hover {
    background: var(--color-primary-pale);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

body .ui-button.ui-button-outlined.ui-state-default.ui-state-disabled:not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info) {
    opacity: 1;
    background: transparent;
    color: var(--color-primary-disabled-bg);
    border-color: var(--color-primary-disabled-bg);
    cursor: default;
}

/* Flat / raised-text primario — #004B87 (theme saga usa azul claro) */
body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain),
body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain) .ui-button-text {
    color: var(--color-primary);
}

body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain):hover,
body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain).ui-state-hover {
    color: var(--color-primary-hover);
    background: var(--color-primary-pale);
    border-color: transparent;
}

/* Flat / raised-text — sin contorno en ningún estado */
body .ui-button.ui-button-flat:not(.ui-button-outlined).ui-state-default:not(.ui-state-disabled),
body .ui-button.ui-button-flat:not(.ui-button-outlined).ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-flat:not(.ui-button-outlined).ui-state-default:not(.ui-state-disabled).ui-state-hover,
body .ui-button.ui-button-flat:not(.ui-button-outlined).ui-state-default:not(.ui-state-disabled):active,
body .ui-button.ui-button-flat:not(.ui-button-outlined).ui-state-default:not(.ui-state-disabled).ui-state-active {
    border-color: transparent;
}

body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain):active,
body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain).ui-state-active {
    color: var(--color-primary-active);
}

body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain) .ui-icon,
body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain) .pi {
    color: var(--color-primary);
}

body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain):hover .ui-icon,
body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain).ui-state-hover .ui-icon,
body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain):hover .pi,
body .ui-button.ui-button-flat.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-button-plain).ui-state-hover .pi {
    color: var(--color-primary-hover);
}

/* Flat / raised-text / outlined — severities (hover al nivel del primary) */
body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled),
body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled) .ui-button-text,
body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled) {
    color: var(--color-secondary);
}

body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled) {
    border-color: var(--color-secondary);
    background: transparent;
}

body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-secondary-hover);
    background: var(--color-secondary-pale);
}

body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-secondary-hover);
    background: var(--color-secondary-pale);
    border-color: var(--color-secondary);
}

body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled),
body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled) .ui-button-text,
body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled) {
    color: var(--color-success);
}

body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled) {
    border-color: var(--color-success);
    background: transparent;
}

body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-success-hover);
    background: var(--color-success-pale);
}

body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-success-hover);
    background: var(--color-success-pale);
    border-color: var(--color-success);
}

body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled),
body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled) .ui-button-text,
body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled) {
    color: var(--color-info-hover);
}

body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled) {
    border-color: var(--color-info-hover);
    background: transparent;
}

body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-info-hover);
    background: var(--color-info-pale);
}

body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-info-hover);
    background: var(--color-info-pale);
    border-color: var(--color-info-hover);
}

body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled),
body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled) .ui-button-text,
body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled) {
    color: var(--color-warning-hover);
}

body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled) {
    border-color: var(--color-warning-hover);
    background: transparent;
}

body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-warning-hover);
    background: var(--color-warning-pale);
}

body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-warning-hover);
    background: var(--color-warning-pale);
    border-color: var(--color-warning-hover);
}

body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled),
body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled) .ui-button-text,
body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled) {
    color: var(--color-help);
}

body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled) {
    border-color: var(--color-help);
    background: transparent;
}

body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-help-hover);
    background: var(--color-help-pale);
}

body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-help-hover);
    background: var(--color-help-pale);
    border-color: var(--color-help);
}

body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled),
body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled) .ui-button-text,
body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled) {
    color: var(--color-danger);
}

body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled) {
    border-color: var(--color-danger);
    background: transparent;
}

body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-danger-hover);
    background: var(--color-danger-pale);
}

body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled):hover,
body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled).ui-state-hover {
    color: var(--color-danger-hover);
    background: var(--color-danger-pale);
    border-color: var(--color-danger);
}

body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled) .pi,
body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled) .pi {
    color: var(--color-secondary);
}

body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled) .pi,
body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled) .pi {
    color: var(--color-success);
}

body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled) .pi,
body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled) .pi {
    color: var(--color-info-hover);
}

body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled) .pi,
body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled) .pi {
    color: var(--color-warning-hover);
}

body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled) .pi,
body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled) .pi {
    color: var(--color-help);
}

body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled) .pi,
body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled) .pi {
    color: var(--color-danger);
}

body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-flat.ui-button-secondary.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi,
body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-outlined.ui-button-secondary.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi {
    color: var(--color-secondary-hover);
}

body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-flat.ui-button-success.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi,
body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-outlined.ui-button-success.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi {
    color: var(--color-success-hover);
}

body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-flat.ui-button-info.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi,
body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-outlined.ui-button-info.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi {
    color: var(--color-info-hover);
}

body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-flat.ui-button-warning.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi,
body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-outlined.ui-button-warning.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi {
    color: var(--color-warning-hover);
}

body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-flat.ui-button-help.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi,
body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-outlined.ui-button-help.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi {
    color: var(--color-help-hover);
}

body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-flat.ui-button-danger.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi,
body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled):hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled).ui-state-hover .ui-icon,
body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled):hover .pi,
body .ui-button.ui-button-outlined.ui-button-danger.ui-state-default:not(.ui-state-disabled).ui-state-hover .pi {
    color: var(--color-danger-hover);
}

body .ui-button.ui-state-default:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-state-disabled) .ui-icon,
body .ui-button.ui-state-default:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info):not(.ui-state-disabled) .pi,
body .ui-menubutton > .ui-button.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-menubutton > .ui-button.ui-state-default:not(.ui-state-disabled) .pi,
body .ui-autocomplete .ui-autocomplete-dropdown.ui-button .ui-icon,
body .ui-autocomplete .ui-autocomplete-dropdown.ui-button .pi,
body .ui-spinner .ui-spinner-button.ui-button .ui-icon,
body .ui-spinner .ui-spinner-button.ui-button .pi,
.ctx-app .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose.ui-state-default:not(.ui-state-disabled) .ui-icon,
body .ui-inplace .ui-inplace-save.ui-button .ui-icon,
body .ui-inplace .ui-inplace-save.ui-button .pi,
body .ui-inplace .ui-inplace-cancel.ui-button .ui-icon,
body .ui-inplace .ui-inplace-cancel.ui-button .pi {
    color: var(--color-text-inverse);
}

body .ui-inplace .ui-inplace-save.ui-button .ui-icon,
body .ui-inplace .ui-inplace-save.ui-button .pi,
body .ui-inplace .ui-inplace-cancel.ui-button .ui-icon,
body .ui-inplace .ui-inplace-cancel.ui-button .pi {
    display: inline-block !important;
    visibility: visible !important;
    position: static;
    text-indent: 0;
    overflow: visible;
}

body .ui-button.ui-state-default.ui-state-disabled:not(.ui-button-outlined):not(.ui-button-flat):not(.ui-button-plain):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info) .ui-icon,
body .ui-menubutton > .ui-button.ui-state-default.ui-state-disabled .ui-icon {
    color: var(--color-primary-disabled-text);
}

body .ui-button.ui-button-outlined.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info) .ui-icon,
body .ui-button.ui-button-outlined.ui-state-default:not(.ui-state-disabled):not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info) .pi {
    color: var(--color-primary);
}

body .ui-button.ui-button-outlined.ui-state-default.ui-state-disabled:not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info) .ui-icon,
body .ui-button.ui-button-outlined.ui-state-default.ui-state-disabled:not(.ui-button-secondary):not(.ui-button-success):not(.ui-button-danger):not(.ui-button-warning):not(.ui-button-help):not(.ui-button-info) .pi {
    color: var(--color-primary-disabled-bg);
}

/* Command link — mismo azul primario que botones (excepto ítems del panelMenu sidebar) */
body .ui-commandlink:not(.ui-menuitem-link),
body a.ui-commandlink.ui-link:not(.ui-menuitem-link) {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    background: transparent;
    border: none;
    padding: 0;
    line-height: inherit;
}

body .ui-commandlink:not(.ui-menuitem-link):hover,
body .ui-commandlink:not(.ui-menuitem-link).ui-state-hover,
body a.ui-commandlink.ui-link:not(.ui-menuitem-link):hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

body .ui-commandlink:not(.ui-menuitem-link):focus,
body .ui-commandlink:not(.ui-menuitem-link).ui-state-focus,
body a.ui-commandlink.ui-link:not(.ui-menuitem-link):focus {
    color: var(--color-primary);
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* panelMenu sidebar — commandLink custom: layout only; color vía .ui-menuitem-link arriba */
body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link.ui-commandlink {
    font-weight: 400;
    text-decoration: none;
    border: none;
    padding: 0.3rem 0.5rem 0.3rem 0.875rem !important;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-panelmenu-content .ui-menuitem-link.ui-commandlink {
    padding: 0.3rem 0.5rem 0.3rem 0.875rem !important;
}

body.ctx-app .app-sidebar .ui-panelmenu .ui-menuitem-link.ui-commandlink .ui-menuitem-text {
    color: inherit;
    font-weight: inherit;
}

/* ── 4.2 Checkbox y radiobutton ───────────────────────────────────────── */
body .ui-chkbox .ui-chkbox-box.ui-state-active,
body .ui-chkbox .ui-chkbox-box.ui-state-active.ui-state-focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

body .ui-chkbox .ui-chkbox-box.ui-state-active .ui-chkbox-icon,
body .ui-chkbox .ui-chkbox-box.ui-state-active.ui-state-focus .ui-chkbox-icon {
    color: var(--color-text-inverse);
}

body .ui-chkbox .ui-chkbox-box.ui-state-focus,
body .ui-radiobutton .ui-radiobutton-box.ui-state-focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 75, 135, 0.25);
}

body .ui-chkbox .ui-chkbox-box.ui-state-hover:not(.ui-state-disabled),
body .ui-radiobutton .ui-radiobutton-box.ui-state-hover:not(.ui-state-disabled) {
    border-color: var(--color-primary);
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active,
body .ui-radiobutton .ui-radiobutton-box.ui-state-active.ui-state-focus {
    border-color: var(--color-primary);
    background: var(--color-white);
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon,
body .ui-radiobutton .ui-radiobutton-box.ui-state-active.ui-state-focus .ui-radiobutton-icon {
    background: var(--color-primary);
}

body .ui-chkbox .ui-chkbox-box.ui-state-disabled.ui-state-active {
    background: var(--color-primary-disabled-bg);
    border-color: var(--color-primary-disabled-border);
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-disabled.ui-state-active {
    border-color: var(--color-primary-disabled-border);
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-disabled.ui-state-active .ui-radiobutton-icon {
    background: var(--color-primary-disabled-bg);
}

/* ── 4.3 Schedule (FullCalendar — botones de control y layout) ─────────── */
body.ctx-app .app-schedule-host {
    min-height: 360px;
    width: 100%;
}

body.ctx-app .app-legend-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

body.ctx-app .ui-tooltip.app-schedule-event-tip {
    width: auto !important;
    max-width: 13rem;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: normal;
}

body.ctx-app .ui-tooltip.app-schedule-event-tip strong {
    font-weight: 600;
}

body.ctx-app .app-schedule-host .fc {
    min-height: 360px;
    max-width: 100%;
}

body.ctx-app .app-schedule-host .fc-view-harness {
    min-height: 300px;
}

@media (max-width: 991.98px) {
    body.ctx-app .app-schedule-host .fc {
        min-height: 320px;
    }

    body.ctx-app .app-schedule-host .fc-view-harness {
        min-height: 260px;
    }
}

body.ctx-app .app-schedule-host .fc-scroller-harness-liquid,
body.ctx-app .app-schedule-host .fc-scroller-liquid-absolute {
    position: relative;
    height: auto !important;
}

body.ctx-app .app-schedule-host .fc-scroller {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

body.ctx-app .app-schedule-host .fc-scrollgrid,
body.ctx-app .app-schedule-host .fc-scrollgrid table {
    width: 100% !important;
}

/* Botones toolbar — !important para ganar a schedule.css y theme PF */
body .fc .fc-button.fc-button-primary,
body .fc .fc-button-group > .fc-button.fc-button-primary,
body .fc .fc-prev-button,
body .fc .fc-next-button,
body .fc .fc-today-button,
body .fc .fc-dayGridMonth-button,
body .fc .fc-timeGridWeek-button,
body .fc .fc-timeGridDay-button {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    opacity: 1 !important;
}

body .fc .fc-button.fc-button-primary:hover,
body .fc .fc-button-group > .fc-button.fc-button-primary:hover,
body .fc .fc-prev-button:hover,
body .fc .fc-next-button:hover,
body .fc .fc-today-button:hover,
body .fc .fc-dayGridMonth-button:hover,
body .fc .fc-timeGridWeek-button:hover,
body .fc .fc-timeGridDay-button:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-text-inverse) !important;
}

body .fc .fc-button.fc-button-primary:not(:disabled):active,
body .fc .fc-button.fc-button-primary:not(:disabled).fc-button-active,
body .fc .fc-button-group > .fc-button.fc-button-primary.fc-button-active,
body .fc .fc-dayGridMonth-button.fc-button-active,
body .fc .fc-timeGridWeek-button.fc-button-active,
body .fc .fc-timeGridDay-button.fc-button-active {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-text-inverse) !important;
}

body .fc .fc-button.fc-button-primary:disabled,
body .fc .fc-today-button:disabled {
    background: var(--color-primary-disabled-bg) !important;
    border-color: var(--color-primary-disabled-border) !important;
    color: var(--color-primary-disabled-text) !important;
    opacity: 1 !important;
}

body .fc .fc-button.fc-button-primary:focus,
body .fc .fc-button-group > .fc-button.fc-button-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 75, 135, 0.35) !important;
}

body .fc .fc-toolbar-title {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.05rem, 1.2vw + 0.85rem, 1.75rem);
    line-height: 1.2;
    white-space: nowrap;
    margin: 0;
}

body.ctx-app .app-schedule-host .fc-col-header-cell {
    text-align: center !important;
    vertical-align: middle;
}

body.ctx-app .app-schedule-host .fc-col-header-cell-cushion {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2px 0;
    text-align: center;
    text-decoration: none;
}

@media (max-width: 767.98px) {
    body.ctx-app .app-schedule-host .fc-header-toolbar {
        margin-bottom: 1rem !important;
    }

    body.ctx-app .app-schedule-host .fc-toolbar-title {
        font-size: 1.125rem;
    }

    body.ctx-app .app-schedule-host .fc-header-toolbar .fc-button {
        padding: 0.35em 0.5em;
        font-size: 0.8125rem;
    }

    body.ctx-app .app-schedule-host .fc-header-toolbar .fc-button .fc-icon {
        font-size: 1.1em;
    }

    body.ctx-app .app-schedule-host .fc-col-header-cell-cushion {
        font-size: 0.75rem;
    }
}

@media (max-width: 479.98px) {
    body.ctx-app .app-schedule-host .fc-toolbar-title {
        font-size: 0.9375rem;
    }

    body.ctx-app .app-schedule-host .fc-header-toolbar .fc-button {
        padding: 0.3em 0.35em;
    }
}

body .fc .fc-col-header-cell-cushion,
body .fc .fc-daygrid-day-number {
    color: var(--color-text);
}

body .fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(200, 216, 235, 0.45);
}

body .fc .fc-event,
body .fc .fc-v-event {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
}

body .fc .fc-event .fc-event-main {
    color: var(--color-text-inverse);
}

/* Etiquetas dayGrid — salto de línea y fuente fluida (720p, sidebar, móvil) */
body.ctx-app .app-schedule-host .fc-daygrid-event {
    white-space: normal !important;
    height: auto !important;
}

body.ctx-app .app-schedule-host .fc-daygrid-event .fc-event-main {
    white-space: normal !important;
}

body.ctx-app .app-schedule-host .fc-daygrid-event .fc-event-title,
body.ctx-app .app-schedule-host .fc-daygrid-event .fc-event-time,
body.ctx-app .app-schedule-host .fc-h-event .fc-event-title,
body.ctx-app .app-schedule-host .fc-h-event .fc-event-time {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(0.575rem, 0.48rem + 0.35vw, 0.8125rem);
    line-height: 1.15;
    word-break: break-word;
}

body.ctx-app .app-schedule-host .fc-h-event .fc-event-title-container {
    min-width: 0;
    flex-shrink: 1;
}

body.ctx-app .app-schedule-host .fc-daygrid-block-event .fc-event-time,
body.ctx-app .app-schedule-host .fc-daygrid-block-event .fc-event-title {
    padding: 1px 2px;
}

/* ── 6. PRIMEFACES (núcleo inicial — ampliar según necesidad del portal) ─ */

/* Password — contenido e icono toggle centrados verticalmente */
body .ui-password {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body .ui-password > .ui-inputfield {
    width: 100%;
    height: var(--pf-button-height);
    min-height: var(--pf-button-height);
    max-height: var(--pf-button-height);
    margin: 0;
    padding: 0 calc(var(--pf-input-padding-x, 0.625rem) + 1.75rem) 0 var(--pf-input-padding-x, 0.625rem);
    line-height: calc(var(--pf-button-height) - 2px);
    box-sizing: border-box;
}

body .ui-password .ui-password-icon {
    position: absolute;
    top: 50%;
    right: var(--pf-input-padding-x, 0.625rem);
    transform: translateY(-50%);
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

/*
 * Diálogos (portable) — por encima del header sticky (z-index 1100) para que
 * la máscara y el título no queden tapados; y con alto acotado al viewport +
 * scroll interno en el contenido, de modo que en móvil queden centrados y, si
 * el contenido excede la pantalla, se pueda desplazar (título y pie fijos).
 */
body.ctx-app .ui-dialog-mask {
    z-index: 1150 !important;
}

body.ctx-app .ui-dialog {
    z-index: 1151 !important;
}

body.ctx-app .ui-dialog:not(.loading-dialog) {
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100dvh - 1.5rem) !important;
}

@media (max-width: 991.98px) {
    body.ctx-app .ui-dialog:not(.loading-dialog) {
        width: calc(100vw - 1.5rem) !important;
    }
}

/* Titlebar compacta — tipografía UI (no display/h2), padding reducido */
body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem !important;
    min-height: 0;
    line-height: 1.25;
    background: var(--color-primary-pale);
    color: var(--color-primary);
    border: none;
    border-bottom: 1px solid var(--color-border);
}

body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-titlebar .ui-dialog-title {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
}

body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-titlebar .ui-dialog-titlebar-icon,
body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-titlebar .ui-dialog-titlebar-close,
body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-titlebar .ui-dialog-actions {
    float: none;
    flex: 0 0 auto;
    position: relative;
    top: auto;
    margin: 0 !important;
}

body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-titlebar .ui-dialog-titlebar-icon,
body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-titlebar .ui-dialog-titlebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0 !important;
    border-radius: var(--radius-sm);
}

body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-titlebar .ui-dialog-titlebar-icon .ui-icon,
body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
    margin: 0 !important;
    font-size: 0.875rem;
}

/*
 * El contenido scrollea por sí mismo (NO usar display:flex !important en
 * .ui-dialog: ganaría sobre el display:none inline que PrimeFaces aplica al
 * ocultar y el diálogo no se cerraría). overscroll-behavior:contain evita que
 * el scroll se encadene a la página de fondo.
 */
body.ctx-app .ui-dialog:not(.loading-dialog) > .ui-dialog-content {
    max-height: calc(100dvh - 3.75rem);
    padding: 0.625rem 0.75rem !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Overlays de inputs en diálogos — por encima de máscara/diálogo (1150/1151) */
body.ctx-app .ui-selectonemenu-panel,
body.ctx-app .ui-selectcheckboxmenu-panel,
body.ctx-app .ui-autocomplete-panel,
body.ctx-app .ui-datepicker {
    z-index: 1200 !important;
}

/* Growl — mismo lenguaje visual que p:staticMessage / ui-messages */
body .ctx-app .ui-growl {
    position: fixed !important;
    top: 1rem;
    right: 1rem;
    z-index: 9999 !important;
    width: auto;
    min-width: 18rem;
    max-width: 32rem;
    pointer-events: none;
}

body .ctx-app form .ui-growl {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100%;
    max-width: none;
    pointer-events: auto;
}

/* Growl global del app shell (body.ctx-app): fijo bajo el header, esquina superior derecha */
body.ctx-app .ui-growl {
    position: fixed !important;
    top: calc(var(--app-shell-header-offset) + 4.5rem) !important;
    right: 1.25rem !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 9999 !important;
    width: 22rem;
    min-width: 18rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

body.ctx-app .ui-growl .ui-growl-item-container {
    pointer-events: auto;
}

body .ui-growl .ui-growl-item-container {
    margin: 0 0 0.5rem;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    display: block !important;
    border-radius: var(--radius-sm);
    box-shadow: none;
    overflow: hidden;
}

body .ui-growl .ui-growl-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1.75rem 0.375rem 0.625rem;
    position: relative;
}

body .ui-growl .ui-growl-image {
    flex: 0 0 auto;
    float: none;
    align-self: center;
    width: 32px;
    height: 32px;
    margin: 0;
    transform: translateY(-5px) scale(0.8);
    transform-origin: center;
}

body .ui-growl .ui-growl-title:empty {
    display: none;
}

body .ui-growl .ui-growl-message {
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    line-height: 1.35;
    font-size: var(--text-sm);
}

body .ui-growl .ui-growl-title {
    display: inline;
    font-weight: 700;
    margin: 0;
}

body .ui-growl .ui-growl-message p {
    display: inline;
    margin: 0;
    font-weight: 400;
}

body .ui-growl .ui-growl-title:not(:empty) + p::before {
    content: " ";
}

body .ui-growl .ui-growl-icon-close {
    position: absolute;
    top: 0.2rem;
    right: 0.25rem;
    opacity: 0.55;
    cursor: pointer;
}

body .ui-growl .ui-growl-icon-close:hover {
    opacity: 1;
}

body .ui-growl .ui-growl-item-container.ui-growl-info {
    background: #e8f4fc;
    border: 1px solid var(--color-info);
    border-left: 4px solid var(--color-info);
}

body .ui-growl .ui-growl-item-container.ui-growl-info .ui-growl-title,
body .ui-growl .ui-growl-item-container.ui-growl-info .ui-growl-message,
body .ui-growl .ui-growl-item-container.ui-growl-info .ui-growl-message p {
    color: var(--color-primary);
}

body .ui-growl .ui-growl-item-container.ui-growl-warn {
    background: #fff8e6;
    border: 1px solid var(--color-warning);
    border-left: 4px solid var(--color-warning);
}

body .ui-growl .ui-growl-item-container.ui-growl-warn .ui-growl-title,
body .ui-growl .ui-growl-item-container.ui-growl-warn .ui-growl-message,
body .ui-growl .ui-growl-item-container.ui-growl-warn .ui-growl-message p {
    color: #8a6600;
}

body .ui-growl .ui-growl-item-container.ui-growl-error,
body .ui-growl .ui-growl-item-container.ui-growl-fatal {
    background: #fdecea;
    border: 1px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
}

body .ui-growl .ui-growl-item-container.ui-growl-error .ui-growl-title,
body .ui-growl .ui-growl-item-container.ui-growl-error .ui-growl-message,
body .ui-growl .ui-growl-item-container.ui-growl-error .ui-growl-message p,
body .ui-growl .ui-growl-item-container.ui-growl-fatal .ui-growl-title,
body .ui-growl .ui-growl-item-container.ui-growl-fatal .ui-growl-message,
body .ui-growl .ui-growl-item-container.ui-growl-fatal .ui-growl-message p {
    color: var(--color-danger);
}

/* StaticMessage / Messages — resumen en negrita, detalle en la misma línea */
body .ui-staticmessage {
    padding: 0.375rem 0.625rem;
    margin: 0.25rem 0;
    border-radius: var(--radius-sm);
}

body .ui-messages.ui-widget {
    padding: 0;
    margin: 0.25rem 0;
    border: 0;
    background: transparent;
}

/* Anular PF legacy: float, margin-top:-4px en iconos, ul margin 25px, .ui-icon margin-top:-.25em */
body .ui-messages ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

body .ui-messages > div {
    padding: 0.375rem 0.625rem !important;
}

/* PF renderiza: close → icon → ul; grid coloca icon | texto | close */
body .ui-messages .ui-messages-error,
body .ui-messages .ui-messages-warn,
body .ui-messages .ui-messages-info,
body .ui-messages .ui-messages-fatal,
body .ui-messages .ui-messages-success {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 0.5rem;
    overflow: hidden;
    padding: 0.375rem 0.625rem !important;
    margin: 0 !important;
    border-radius: var(--radius-sm);
    line-height: 1.35;
    font-size: var(--text-sm);
    max-height: 20rem;
    transition: opacity 0.2s ease, max-height 0.22s ease, margin 0.22s ease,
                padding 0.22s ease, border-width 0.22s ease;
}

body .ui-messages .ui-messages-error.ui-messages-dismissing,
body .ui-messages .ui-messages-warn.ui-messages-dismissing,
body .ui-messages .ui-messages-info.ui-messages-dismissing,
body .ui-messages .ui-messages-fatal.ui-messages-dismissing,
body .ui-messages .ui-messages-success.ui-messages-dismissing {
    opacity: 0;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    pointer-events: none;
}

/* PF closable: ocultar tras dismiss (theme-messages.js) o slideUp legacy */
body .ui-messages .ui-messages-error.ui-helper-hidden,
body .ui-messages .ui-messages-warn.ui-helper-hidden,
body .ui-messages .ui-messages-info.ui-helper-hidden,
body .ui-messages .ui-messages-fatal.ui-helper-hidden,
body .ui-messages .ui-messages-success.ui-helper-hidden,
body .ui-messages .ui-messages-error[style*="display: none"],
body .ui-messages .ui-messages-warn[style*="display: none"],
body .ui-messages .ui-messages-info[style*="display: none"],
body .ui-messages .ui-messages-fatal[style*="display: none"],
body .ui-messages .ui-messages-success[style*="display: none"],
body .ui-messages .ui-messages-error[style*="display:none"],
body .ui-messages .ui-messages-warn[style*="display:none"],
body .ui-messages .ui-messages-info[style*="display:none"],
body .ui-messages .ui-messages-fatal[style*="display:none"],
body .ui-messages .ui-messages-success[style*="display:none"] {
    display: none !important;
}

body .ui-messages .ui-messages-error > a.ui-messages-close,
body .ui-messages .ui-messages-warn > a.ui-messages-close,
body .ui-messages .ui-messages-info > a.ui-messages-close,
body .ui-messages .ui-messages-fatal > a.ui-messages-close,
body .ui-messages .ui-messages-success > a.ui-messages-close {
    grid-column: 3;
    grid-row: 1;
    float: none !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0 !important;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    align-self: center;
    justify-self: center;
    cursor: pointer;
    pointer-events: auto;
    flex-shrink: 0;
    border-radius: 50%;
    color: inherit;
    opacity: 0.88;
}

body .ui-messages .ui-messages-error > a.ui-messages-close:hover,
body .ui-messages .ui-messages-warn > a.ui-messages-close:hover,
body .ui-messages .ui-messages-info > a.ui-messages-close:hover,
body .ui-messages .ui-messages-fatal > a.ui-messages-close:hover,
body .ui-messages .ui-messages-success > a.ui-messages-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

body .ui-messages .ui-messages-error-icon,
body .ui-messages .ui-messages-warn-icon,
body .ui-messages .ui-messages-info-icon,
body .ui-messages .ui-messages-fatal-icon,
body .ui-messages .ui-messages-success-icon {
    grid-column: 1;
    grid-row: 1;
    flex: none;
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.125rem !important;
    height: 1.125rem !important;
    min-width: 1.125rem;
    margin: 0 !important;
    margin-top: 0 !important;
    align-self: center;
    background-position: center center;
    background-size: 1.125rem 1.125rem;
}

body .ui-messages .ui-messages-error > ul,
body .ui-messages .ui-messages-warn > ul,
body .ui-messages .ui-messages-info > ul,
body .ui-messages .ui-messages-fatal > ul,
body .ui-messages .ui-messages-success > ul {
    grid-column: 2;
    grid-row: 1;
    flex: none;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    min-width: 0;
    align-self: center;
}

body .ui-messages .ui-messages-error li,
body .ui-messages .ui-messages-warn li,
body .ui-messages .ui-messages-info li,
body .ui-messages .ui-messages-fatal li {
    margin: 0;
    padding: 0;
}

body .ui-messages .ui-messages-error-summary,
body .ui-messages .ui-messages-warn-summary,
body .ui-messages .ui-messages-info-summary,
body .ui-messages .ui-messages-fatal-summary {
    font-weight: 700;
    display: inline;
    margin: 0 !important;
    padding: 0;
}

body .ui-messages .ui-messages-error-detail,
body .ui-messages .ui-messages-warn-detail,
body .ui-messages .ui-messages-info-detail,
body .ui-messages .ui-messages-fatal-detail {
    font-weight: 400;
    display: inline;
    margin: 0 0 0 0.25rem !important;
    padding: 0;
}

body .ui-messages .ui-messages-error {
    background: #fdecea;
    border: 1px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
    color: var(--color-danger);
}

body .ui-messages .ui-messages-warn {
    background: #fff8e6;
    border: 1px solid var(--color-warning);
    border-left: 4px solid var(--color-warning);
    color: #8a6600;
}

body .ui-messages .ui-messages-info {
    background: #e8f4fc;
    border: 1px solid var(--color-info);
    border-left: 4px solid var(--color-info);
    color: var(--color-primary);
}

body .ui-messages .ui-messages-fatal {
    background: #fdecea;
    border: 1px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
    color: var(--color-danger);
}

/* Reset global .ui-icon offset dentro de p:messages */
body .ui-messages .ui-icon {
    margin-top: 0 !important;
    margin-left: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    vertical-align: middle;
}

body .ui-messages a.ui-messages-close .ui-icon,
body .ui-messages a.ui-messages-close .ui-icon-closethick,
body .ui-messages a.ui-messages-close .ui-icon-close {
    text-indent: 0 !important;
    overflow: visible !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    line-height: 1.125rem !important;
    font-size: 0.875rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
}

body .ui-messages a.ui-messages-close .ui-icon-closethick::before,
body .ui-messages a.ui-messages-close .ui-icon-close::before {
    font-family: "primeicons" !important;
    content: "\e90b";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

body .ui-messages .ui-messages-info-icon {
    background: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    color: inherit;
}

body .ui-messages .ui-messages-info-icon::before {
    font-family: "primeicons" !important;
    content: "\e924";
    font-size: 1.125rem;
    line-height: 1;
}

body .ui-messages .ui-messages-error-icon,
body .ui-messages .ui-messages-fatal-icon {
    background: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    color: inherit;
}

body .ui-messages .ui-messages-error-icon::before,
body .ui-messages .ui-messages-fatal-icon::before {
    font-family: "primeicons" !important;
    content: "\e90c";
    font-size: 1.125rem;
    line-height: 1;
}

body .ui-messages .ui-messages-warn-icon {
    background: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    color: inherit;
}

body .ui-messages .ui-messages-warn-icon::before {
    font-family: "primeicons" !important;
    content: "\e922";
    font-size: 1.125rem;
    line-height: 1;
}

body .ui-messages .ui-messages-success-icon {
    background: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    color: inherit;
}

body .ui-messages .ui-messages-success-icon::before {
    font-family: "primeicons" !important;
    content: "\e90a";
    font-size: 1.125rem;
    line-height: 1;
}

body .ui-staticmessage .ui-message-summary,
body .ui-messages .ui-messages-info-summary,
body .ui-messages .ui-messages-warn-summary,
body .ui-messages .ui-messages-error-summary,
body .ui-messages .ui-messages-fatal-summary {
    font-weight: 700;
}

body .ui-staticmessage .ui-message-detail {
    font-weight: 400;
}

body .ui-staticmessage.ui-message-info {
    border-left: 4px solid var(--color-info);
}

body .ui-staticmessage.ui-message-warn {
    border-left: 4px solid var(--color-warning);
}

body .ui-staticmessage.ui-message-error {
    border-left: 4px solid var(--color-danger);
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.ctx-app .ui-tooltip-target {
    display: inline-block;
}

body .ui-tooltip {
    z-index: 1200 !important;
}

body .ctx-app .ui-datatable thead th {
    background: var(--color-primary-pale);
    color: var(--color-primary);
    padding: 0.125rem 0.35rem !important;
    line-height: 1.2;
}

/* DataTable — ancho completo en vistas hijas */
body.ctx-app .ui-datatable.w-full,
body.ctx-app .ui-datatable.w-full .ui-datatable-tablewrapper {
    width: 100%;
}

body.ctx-app .ui-datatable.w-full table {
    table-layout: fixed;
    width: 100%;
}

/* Encabezado tabla (modo horizontal): abreviatura; reflow usa headerText completo */
body.ctx-app .ui-datatable thead th .ui-column-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ctx-app .ui-datatable thead th .app-dt-col-hdr-compact {
    display: inline-block;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

body.ctx-app .ui-datatable.ui-datatable-sm thead th,
body.ctx-app .ui-datatable.ui-datatable-sm tbody td {
    font-size: var(--density-font-size);
}

/* DataTable reflow (≤640px) — tarjetas apiladas; flex label|valor para saltos de línea alineados */
@media (max-width: 640px) {
    body.ctx-app .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    body.ctx-app .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content:last-child {
        border-bottom: 0;
    }

    body.ctx-app .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] {
        display: flex !important;
        align-items: flex-start;
        float: none !important;
        clear: both !important;
        gap: 0.35rem;
        padding: 0.375rem 0.5rem !important;
    }

    body.ctx-app .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title {
        flex: 0 0 38%;
        max-width: 42%;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--color-primary);
        font-weight: 600;
    }

    body.ctx-app .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title ~ * {
        flex: 1 1 0;
        min-width: 0;
        display: block;
        overflow-wrap: break-word;
    }

    body.ctx-app .ui-datatable-reflow .ui-reflow-label,
    body.ctx-app .ui-datatable-reflow .ui-reflow-dropdown {
        margin-bottom: 0.5rem;
    }
}

/* Paginador — círculo perfecto en página activa */
body .ui-paginator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

body .ui-paginator .ui-paginator-page,
body .ui-paginator .ui-paginator-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    margin: 0 0.125rem;
    line-height: 1;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
}

body .ui-paginator .ui-paginator-page.ui-state-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

body .ui-paginator .ui-paginator-first,
body .ui-paginator .ui-paginator-prev,
body .ui-paginator .ui-paginator-next,
body .ui-paginator .ui-paginator-last {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    box-sizing: border-box;
}

body .ui-panel .ui-panel-titlebar {
    background: var(--color-primary-pale);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 900;
}