/*
 * Diseño PCR — base de SGI
 * Fase 1.5
 *
 * Propósito:
 * - Mantener los tokens de diseño PCR de la capa visual actual.
 * - Proporcionar conjuntos explícitos de tokens para Claro/Oscuro.
 * - Proporcionar primitivas estructurales con espacio de nombres y activación explícita.
 *
 * Seguridad:
 * - Este archivo no sobrescribe los selectores heredados .app/.app-header/.app-aside/.page.
 * - Permanece inactivo hasta que los componentes adopten las clases .pcr-*.
 */

:root {
    --pcr-black: #1A1A1A;
    --pcr-ochre: #CE7D1E;
    --pcr-platinum: #E4E4E4;
    --pcr-bone: #E5DAC8;
    --pcr-jelly-bean-blue: #497F87;
    --pcr-columbia-blue: #C1E4DD;
    --pcr-chocolate-cosmos: #5E0925;
    --pcr-desert-sand: #ECB7A2;

    --pcr-font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pcr-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --pcr-header-height: 4rem;
    --pcr-sidebar-width: 16.5rem;
    --pcr-content-max-width: 1440px;
    --pcr-radius-sm: .375rem;
    --pcr-radius-md: .625rem;
    --pcr-radius-lg: .875rem;
    --pcr-border-width: 1px;
    --pcr-focus-width: 3px;
    --pcr-transition-fast: 150ms ease;
    --pcr-transition-base: 220ms ease;
    --pcr-shadow-sm: 0 1px 2px rgba(26, 26, 26, .06);
    --pcr-shadow-md: 0 8px 24px rgba(26, 26, 26, .10);
}

html[data-pcr-theme="light"],
html[data-pcr-theme="default"] {
    --pcr-bg: #F7F7F6;
    --pcr-surface: #FFFFFF;
    --pcr-surface-raised: #FFFFFF;
    --pcr-surface-muted: #F0F0EF;
    --pcr-text: #1A1A1A;
    --pcr-text-muted: #5F6368;
    --pcr-border: #D8D8D6;
    --pcr-border-strong: #BEBEBA;
    --pcr-primary: var(--pcr-black);
    --pcr-accent: var(--pcr-ochre);
    --pcr-accent-soft: #F5E8D8;
    --pcr-info: var(--pcr-jelly-bean-blue);
    --pcr-info-soft: #E5EFF0;
    --pcr-success: #2E7055;
    --pcr-success-soft: #E5F0EA;
    --pcr-warning: #8B611E;
    --pcr-warning-soft: #F7EEDC;
    --pcr-danger: var(--pcr-chocolate-cosmos);
    --pcr-danger-soft: #F1DEE5;
    --pcr-focus: var(--pcr-ochre);
    --pcr-on-primary: #FFFFFF;
    --pcr-on-accent: #1A1A1A;
}

html[data-pcr-theme="dark"] {
    --pcr-bg: #111111;
    --pcr-surface: #1A1A1A;
    --pcr-surface-raised: #242424;
    --pcr-surface-muted: #2B2B2B;
    --pcr-text: #F2F2F0;
    --pcr-text-muted: #B9B9B4;
    --pcr-border: #3B3B38;
    --pcr-border-strong: #555550;
    --pcr-primary: #F2F2F0;
    --pcr-accent: #E09A43;
    --pcr-accent-soft: #3B2B1A;
    --pcr-info: #74A6AD;
    --pcr-info-soft: #203033;
    --pcr-success: #74B497;
    --pcr-success-soft: #203128;
    --pcr-warning: #E0B66E;
    --pcr-warning-soft: #3A301F;
    --pcr-danger: #CF7697;
    --pcr-danger-soft: #39232C;
    --pcr-focus: #E09A43;
    --pcr-on-primary: #1A1A1A;
    --pcr-on-accent: #1A1A1A;
}

/* Tokens genéricos para componentes con activación explícita. */
.pcr-theme-scope {
    color: var(--pcr-text);
    background-color: var(--pcr-bg);
    font-family: var(--pcr-font-family);
}

.pcr-surface {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border: var(--pcr-border-width) solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-sm);
}

.pcr-surface-raised {
    background-color: var(--pcr-surface-raised);
    border: var(--pcr-border-width) solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
}

.pcr-text-muted {
    color: var(--pcr-text-muted) !important;
}

.pcr-divider {
    border: 0;
    border-top: var(--pcr-border-width) solid var(--pcr-border);
    opacity: 1;
}

.pcr-accent-bar {
    border-inline-start: 3px solid var(--pcr-accent);
}

.pcr-focus-ring:focus-visible {
    outline: var(--pcr-focus-width) solid color-mix(in srgb, var(--pcr-focus) 38%, transparent);
    outline-offset: 2px;
}

/* Primitivas de estructura con activación explícita para la capa futura de layout de SGI. */
.pcr-app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main";
    grid-template-columns: var(--pcr-sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--pcr-header-height) minmax(0, 1fr);
    color: var(--pcr-text);
    background: var(--pcr-bg);
}

.pcr-app-header {
    grid-area: header;
    min-height: var(--pcr-header-height);
    background: var(--pcr-primary);
    color: var(--pcr-on-primary);
}

.pcr-app-aside {
    grid-area: sidebar;
    min-width: 0;
    background: var(--pcr-surface);
    border-inline-end: var(--pcr-border-width) solid var(--pcr-border);
}

.pcr-app-main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    background: var(--pcr-bg);
}

.pcr-page {
    width: min(100%, var(--pcr-content-max-width));
    margin-inline: auto;
    padding: 1.5rem;
}

.pcr-section-title {
    margin: 0;
    color: var(--pcr-text);
    font-family: var(--pcr-font-family);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
}

.pcr-menu {
    background: var(--pcr-surface);
    color: var(--pcr-text);
}

.pcr-menu-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .625rem .875rem;
    color: var(--pcr-text);
    border-radius: var(--pcr-radius-sm);
    text-decoration: none;
    transition: background-color var(--pcr-transition-fast), color var(--pcr-transition-fast);
}

.pcr-menu-link:hover,
.pcr-menu-link:focus-visible {
    color: var(--pcr-text);
    background: var(--pcr-surface-muted);
    text-decoration: none;
}

.pcr-menu-link.is-active {
    color: var(--pcr-on-accent);
    background: var(--pcr-accent);
}

@media (max-width: 767.98px) {
    .pcr-app-shell {
        grid-template-areas:
            "header"
            "main";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--pcr-header-height) minmax(0, 1fr);
    }

    .pcr-app-aside {
        display: none;
    }

    .pcr-page {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcr-menu-link {
        transition: none;
    }
}

/* ========================================================================== */
/* Fase 1.6 — Migración visual global (activación mediante el tema PCR existente) */
/* ========================================================================== */

html {
    color-scheme: light;
}

html[data-pcr-theme="dark"] {
    color-scheme: dark;
}

body,
body.default-skin,
body.dark-skin {
    font-family: var(--pcr-font-family);
    color: var(--pcr-text);
    background-color: var(--pcr-bg);
}

.app {
    background-color: var(--pcr-bg);
    color: var(--pcr-text);
}

.app-main {
    background-color: var(--pcr-bg);
}

.page {
    color: var(--pcr-text);
    background-color: var(--pcr-bg);
}

.page-inner {
    color: var(--pcr-text);
}

.page-title-bar,
.page-section {
    color: var(--pcr-text);
}

.page-title {
    color: var(--pcr-text);
    font-family: var(--pcr-font-family);
    font-weight: 700;
    letter-spacing: -.015em;
}

/* Capa global de superficies. Se mantiene limitada a la aplicación para evitar
   afectar diálogos de terceros/plugins renderizados fuera del estructura de SGI. */
.app .card {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
    box-shadow: var(--pcr-shadow-sm);
}

.app .card-header,
.app .card-footer {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-raised);
    border-color: var(--pcr-border);
}

.app .card-header .nav-tabs {
    border-bottom-color: var(--pcr-border);
}

.app .card-header .nav-link {
    color: var(--pcr-text-muted);
}

.app .card-header .nav-link:hover,
.app .card-header .nav-link:focus-visible {
    color: var(--pcr-text);
}

.app .card-header .nav-link.active {
    color: var(--pcr-text);
    border-color: var(--pcr-border) var(--pcr-border) var(--pcr-surface-raised);
}

/* Encabezado */
.app-header,
.app-header.app-header-dark {
    background-color: var(--pcr-black);
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 2px 8px rgba(26, 26, 26, .12);
}

.top-bar,
.top-bar-brand,
.top-bar-list,
.top-bar-item {
    color: #FFFFFF;
}

.top-bar-brand {
    background-color: var(--pcr-black);
}

.top-bar-brand a {
    color: #FFFFFF;
}

.top-bar-brand a:hover,
.top-bar-brand a:focus-visible {
    color: #FFFFFF;
    text-decoration: none;
}

.top-bar-item .btn,
.top-bar-item .nav-link,
.top-bar-item .link-muted {
    color: #F5F5F3;
}

.top-bar-item .btn:hover,
.top-bar-item .btn:focus-visible,
.top-bar-item .nav-link:hover,
.top-bar-item .nav-link:focus-visible {
    color: #FFFFFF;
}

/* Barra lateral */
.app-aside,
.app-aside.app-aside-light,
.aside-content {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
}

.app-aside {
    border-inline-end: 1px solid var(--pcr-border);
}

.aside-header {
    background-color: var(--pcr-surface);
    color: var(--pcr-text);
    border-bottom: 1px solid var(--pcr-border);
    box-shadow: none;
}

.aside-footer {
    background-color: var(--pcr-surface);
    border-top-color: var(--pcr-border) !important;
}

.aside-footer .btn[data-toggle="skin"] {
    color: var(--pcr-text) !important;
    background-color: var(--pcr-surface-muted) !important;
    border: 1px solid var(--pcr-border) !important;
}

.aside-footer .btn[data-toggle="skin"]:hover,
.aside-footer .btn[data-toggle="skin"]:focus-visible {
    color: var(--pcr-on-accent) !important;
    background-color: var(--pcr-accent) !important;
    border-color: var(--pcr-accent) !important;
}

/* Menú apilado: conservar el comportamiento de theme.js y cambiar únicamente la presentación. */
.stacked-menu {
    background-color: transparent;
}

.stacked-menu .menu-header {
    color: var(--pcr-text-muted);
}

.stacked-menu .menu-link,
.stacked-menu .menu-subhead {
    color: var(--pcr-text-muted);
    border-radius: var(--pcr-radius-sm);
    margin-inline: .5rem;
    width: calc(100% - 1rem);
    transition: background-color var(--pcr-transition-fast), color var(--pcr-transition-fast);
}

.stacked-menu .menu-link > .menu-icon {
    color: var(--pcr-text-muted);
}

.stacked-menu .menu-link:hover,
.stacked-menu .menu-link:focus-visible,
.stacked-menu .menu-item.has-open:not(.has-active) > .menu-link {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
}

.stacked-menu .menu-link:hover > .menu-icon,
.stacked-menu .menu-link:focus-visible > .menu-icon {
    color: var(--pcr-accent);
}

.stacked-menu .menu-item.has-active > .menu-link {
    color: var(--pcr-on-accent);
    background-color: var(--pcr-accent);
    font-weight: 600;
}

.stacked-menu .menu-item.has-active > .menu-link > .menu-icon {
    color: var(--pcr-on-accent);
}

.stacked-menu .menu-item.has-child.has-open > .menu-link {
    color: var(--pcr-text);
}

/* Tablas de contenido utilizadas por los módulos de SGI */
.app .table {
    color: var(--pcr-text);
    --bs-table-color: var(--pcr-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--pcr-border);
}

.app .table > :not(caption) > * > * {
    border-bottom-color: var(--pcr-border);
}

.app .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--pcr-text);
    background-color: color-mix(in srgb, var(--pcr-surface-muted) 70%, transparent);
}

.app .table-hover > tbody > tr:hover > * {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
}

.app .table-dark,
.app .table-dark > :not(caption) > * > * {
    color: #FFFFFF;
    background-color: var(--pcr-black);
    border-color: var(--pcr-black);
}

/* Pie de página */
.app-footer {
    color: var(--pcr-text-muted);
    background-color: var(--pcr-surface);
    border-top: 1px solid var(--pcr-border);
}

.app-footer a,
.app-footer .text-muted {
    color: var(--pcr-text-muted) !important;
}

.app-footer a:hover,
.app-footer a:focus-visible {
    color: var(--pcr-accent) !important;
}

.app-footer .copyright {
    color: var(--pcr-text-muted);
}

/* Formularios / foco: solo visual; la estructura del componente permanece en Bootstrap 5. */
.app .form-control,
.app .form-select,
.app .input-group-text,
.app .custom-select {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
}

.app .form-control::placeholder {
    color: var(--pcr-text-muted);
    opacity: 1;
}

.app .form-control:focus,
.app .form-select:focus,
.app .btn:focus-visible,
.app a:focus-visible {
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width) color-mix(in srgb, var(--pcr-focus) 20%, transparent);
}

@media (max-width: 767.98px) {
    .stacked-menu .menu-link,
    .stacked-menu .menu-subhead {
        margin-inline: .375rem;
        width: calc(100% - .75rem);
    }
}

/* ========================================================================== */
/* Fase 1.7 — Adopción de componentes Bootstrap 5 / retiro visual heredado */
/* ========================================================================== */
/*
 * Esta sección es intencionalmente aditiva. No modifica theme.min.css ni
 * theme-dark.min.css. El tema heredado permanece cargado durante el staging para que
 * cualquier componente personalizado de SGI que aún no haya sido migrado conserve su comportamiento anterior.
 *
 * El objetivo es hacer que los componentes Bootstrap 5 de uso frecuente utilicen
 * tokens PCR, reduciendo así la dependencia del sistema de colores heredado de Bootstrap 4
 * y haciendo incremental el eventual retiro del tema heredado.
 */

:root,
html[data-pcr-theme="light"],
html[data-pcr-theme="default"] {
    --bs-body-font-family: var(--pcr-font-family);
    --bs-body-color: var(--pcr-text);
    --bs-body-bg: var(--pcr-bg);
    --bs-secondary-color: var(--pcr-text-muted);
    --bs-tertiary-color: var(--pcr-text-muted);
    --bs-border-color: var(--pcr-border);
    --bs-primary: var(--pcr-primary);
    --bs-primary-rgb: 26, 26, 26;
    --bs-secondary: var(--pcr-platinum);
    --bs-secondary-rgb: 228, 228, 228;
    --bs-success: var(--pcr-success);
    --bs-success-rgb: 46, 112, 85;
    --bs-info: var(--pcr-info);
    --bs-info-rgb: 73, 127, 135;
    --bs-warning: var(--pcr-ochre);
    --bs-warning-rgb: 206, 125, 30;
    --bs-danger: var(--pcr-danger);
    --bs-danger-rgb: 94, 9, 37;
    --bs-light: var(--pcr-surface-muted);
    --bs-light-rgb: 240, 240, 239;
    --bs-dark: var(--pcr-black);
    --bs-dark-rgb: 26, 26, 26;
    --bs-link-color: var(--pcr-jelly-bean-blue);
    --bs-link-color-rgb: 73, 127, 135;
    --bs-link-hover-color: var(--pcr-ochre);
    --bs-link-hover-color-rgb: 206, 125, 30;
    --bs-focus-ring-color: color-mix(in srgb, var(--pcr-focus) 25%, transparent);
}

html[data-pcr-theme="dark"] {
    --bs-body-color: var(--pcr-text);
    --bs-body-bg: var(--pcr-bg);
    --bs-secondary-color: var(--pcr-text-muted);
    --bs-tertiary-color: var(--pcr-text-muted);
    --bs-border-color: var(--pcr-border);
    --bs-primary: var(--pcr-primary);
    --bs-primary-rgb: 242, 242, 240;
    --bs-secondary: var(--pcr-surface-muted);
    --bs-secondary-rgb: 43, 43, 43;
    --bs-success: var(--pcr-success);
    --bs-success-rgb: 116, 180, 151;
    --bs-info: var(--pcr-info);
    --bs-info-rgb: 116, 166, 173;
    --bs-warning: var(--pcr-accent);
    --bs-warning-rgb: 224, 154, 67;
    --bs-danger: var(--pcr-danger);
    --bs-danger-rgb: 207, 118, 151;
    --bs-light: var(--pcr-surface-muted);
    --bs-light-rgb: 43, 43, 43;
    --bs-dark: var(--pcr-black);
    --bs-dark-rgb: 26, 26, 26;
    --bs-link-color: var(--pcr-info);
    --bs-link-color-rgb: 116, 166, 173;
    --bs-link-hover-color: var(--pcr-accent);
    --bs-link-hover-color-rgb: 224, 154, 67;
    --bs-focus-ring-color: color-mix(in srgb, var(--pcr-focus) 30%, transparent);
}

.app .btn {
    font-family: var(--pcr-font-family);
    font-weight: 600;
    border-radius: var(--pcr-radius-sm);
    transition: background-color var(--pcr-transition-fast), border-color var(--pcr-transition-fast), color var(--pcr-transition-fast), box-shadow var(--pcr-transition-fast);
}

.app .btn-primary {
    color: var(--pcr-on-primary);
    background-color: var(--pcr-black);
    border-color: var(--pcr-black);
}

.app .btn-primary:hover,
.app .btn-primary:focus-visible,
.app .btn-primary:active,
.app .btn-primary.active {
    color: #FFFFFF;
    background-color: #303030;
    border-color: #303030;
}

.app .btn-warning {
    color: #FFFFFF;
    background-color: var(--pcr-ochre);
    border-color: var(--pcr-ochre);
}

.app .btn-warning:hover,
.app .btn-warning:focus-visible,
.app .btn-warning:active,
.app .btn-warning.active {
    color: #FFFFFF;
    background-color: #B66D19;
    border-color: #B66D19;
}

.app .btn-success {
    color: #FFFFFF;
    background-color: var(--pcr-success);
    border-color: var(--pcr-success);
}

.app .btn-info {
    color: #FFFFFF;
    background-color: var(--pcr-info);
    border-color: var(--pcr-info);
}

.app .btn-danger {
    color: #FFFFFF;
    background-color: var(--pcr-danger);
    border-color: var(--pcr-danger);
}

.app .btn-secondary {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border-color: var(--pcr-border);
}

.app .btn-light {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
}

.app .btn-dark {
    color: #FFFFFF;
    background-color: var(--pcr-black);
    border-color: var(--pcr-black);
}

.app .btn-outline-primary {
    color: var(--pcr-primary);
    border-color: var(--pcr-primary);
}

.app .btn-outline-primary:hover,
.app .btn-outline-primary:focus-visible,
.app .btn-outline-primary:active {
    color: var(--pcr-on-primary);
    background-color: var(--pcr-primary);
    border-color: var(--pcr-primary);
}

.app .dropdown-menu {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
}

.app .dropdown-item {
    color: var(--pcr-text);
    border-radius: var(--pcr-radius-sm);
}

.app .dropdown-item:hover,
.app .dropdown-item:focus {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
}

.app .dropdown-item.active,
.app .dropdown-item:active {
    color: var(--pcr-on-accent);
    background-color: var(--pcr-accent);
}

.app .nav-tabs {
    border-bottom-color: var(--pcr-border);
}

.app .nav-tabs .nav-link {
    color: var(--pcr-text-muted);
    border-color: transparent;
    border-radius: var(--pcr-radius-sm) var(--pcr-radius-sm) 0 0;
}

.app .nav-tabs .nav-link:hover,
.app .nav-tabs .nav-link:focus-visible {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border-color: transparent;
}

.app .nav-tabs .nav-link.active,
.app .nav-tabs .nav-item.show .nav-link {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border) var(--pcr-border) var(--pcr-surface);
    font-weight: 600;
}

.app .modal-content {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
}

.app .modal-header,
.app .modal-footer {
    border-color: var(--pcr-border);
}

.app .modal-header {
    background-color: var(--pcr-surface-raised);
}

.app .alert {
    color: var(--pcr-text);
    border-radius: var(--pcr-radius-sm);
}

.app .alert-primary {
    --bs-alert-color: var(--pcr-text);
    --bs-alert-bg: var(--pcr-surface-muted);
    --bs-alert-border-color: var(--pcr-border);
}

.app .alert-warning {
    --bs-alert-color: #6B4C17;
    --bs-alert-bg: var(--pcr-warning-soft);
    --bs-alert-border-color: var(--pcr-ochre);
}

.app .alert-success {
    --bs-alert-color: #22583F;
    --bs-alert-bg: var(--pcr-success-soft);
    --bs-alert-border-color: var(--pcr-success);
}

.app .alert-danger {
    --bs-alert-color: #5E0925;
    --bs-alert-bg: var(--pcr-danger-soft);
    --bs-alert-border-color: var(--pcr-danger);
}

.app .alert-info {
    --bs-alert-color: #2E565C;
    --bs-alert-bg: var(--pcr-info-soft);
    --bs-alert-border-color: var(--pcr-info);
}

.app .badge {
    border-radius: 999px;
}

.app .badge.bg-primary {
    color: var(--pcr-on-primary);
    background-color: var(--pcr-black) !important;
}

.app .badge.bg-warning {
    color: #FFFFFF;
    background-color: var(--pcr-ochre) !important;
}

.app .badge.bg-info {
    color: #FFFFFF;
    background-color: var(--pcr-info) !important;
}

.app .badge.bg-danger {
    color: #FFFFFF;
    background-color: var(--pcr-danger) !important;
}

.app .pagination .page-link {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
}

.app .pagination .page-link:hover,
.app .pagination .page-link:focus-visible {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border-color: var(--pcr-border-strong);
}

.app .pagination .page-item.active .page-link {
    color: var(--pcr-on-primary);
    background-color: var(--pcr-black);
    border-color: var(--pcr-black);
}

.app .list-group-item {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
}

.app .input-group-text {
    background-color: var(--pcr-surface-muted);
}

.app .form-control:disabled,
.app .form-control[readonly],
.app .form-select:disabled {
    color: var(--pcr-text-muted);
    background-color: var(--pcr-surface-muted);
}

html[data-pcr-theme="dark"] .app .alert-warning {
    --bs-alert-color: #F2D7A4;
}

html[data-pcr-theme="dark"] .app .alert-success {
    --bs-alert-color: #B8DEC9;
}

html[data-pcr-theme="dark"] .app .alert-danger {
    --bs-alert-color: #F0C6D2;
}

html[data-pcr-theme="dark"] .app .alert-info {
    --bs-alert-color: #C1E4DD;
}

/* Retirar explícitamente del marcado de SGI las utilidades de espaciado de Bootstrap 4. */
.app .ml-0, .app .ml-1, .app .ml-2, .app .ml-3, .app .ml-4, .app .ml-5,
.app .mr-0, .app .mr-1, .app .mr-2, .app .mr-3, .app .mr-4, .app .mr-5,
.app .pl-0, .app .pl-1, .app .pl-2, .app .pl-3, .app .pl-4, .app .pl-5,
.app .pr-0, .app .pr-1, .app .pr-2, .app .pr-3, .app .pr-4, .app .pr-5 {
    /* no visual override: selector block documents that SGI Views no longer
       depend on these classes; heredado theme internals remain untouched. */
}
/* Fase 1.9 — Refinamiento cromático PCR: modal, controles y DataTables. */


/* ========================================================================== */
/* Fase 1.9 — Refinamiento cromático PCR                                     */
/* ========================================================================== */
/*
 * Objetivo:
 * - Hacer que los modos Claro/Oscuro utilicen de forma coherente la paleta PCR actual.
 * - Dar a los encabezados de modal, acciones y controles de formulario un tratamiento PCR específico.
 * - Separar la navegación de DataTables del cuerpo de la tabla.
 *
 * Seguridad:
 * - Solo aditivo. Los archivos de compatibilidad del tema heredado permanecen intactos.
 * - No se realizan cambios en la lógica de negocio.
 */

:root,
html[data-pcr-theme="light"],
html[data-pcr-theme="default"] {
    --pcr-info-strong: #3F747B;
    --pcr-info-soft-strong: #E8F1F2;
    --pcr-action-hover: #E0A04A;
    --pcr-action-soft: #F7ECDD;
    --pcr-modal-header: var(--pcr-black);
    --pcr-modal-header-text: #FFFFFF;
}

html[data-pcr-theme="dark"] {
    --pcr-info-strong: #3F747B;
    --pcr-info-soft-strong: #23383B;
    --pcr-action-hover: #E0A04A;
    --pcr-action-soft: #3A2B1C;
    --pcr-modal-header: var(--pcr-black);
    --pcr-modal-header-text: #FFFFFF;
}

/* Estructura del modal */
.app .modal .modal-content {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.app .modal .modal-header {
    background-color: var(--pcr-modal-header) !important;
    color: var(--pcr-modal-header-text) !important;
    border: 0 !important;
    border-bottom: 3px solid var(--pcr-ochre) !important;
    padding: .875rem 1rem;
}

.app .modal .modal-title {
    color: var(--pcr-modal-header-text) !important;
    font-family: var(--pcr-font-family);
    font-weight: 700;
    letter-spacing: -.01em;
}

.app .modal .modal-header .btn-close {
    width: 2rem;
    height: 2rem;
    margin: -.125rem -.125rem -.125rem auto;
    padding: .5rem;
    border-radius: 50%;
    background-color: transparent !important;
    background-size: .9rem;
    filter: invert(1) grayscale(100%) brightness(2);
    opacity: .88;
}

.app .modal .modal-header .btn-close:hover,
.app .modal .modal-header .btn-close:focus-visible {
    background-color: rgba(255, 255, 255, .12) !important;
    opacity: 1;
}

.app .modal .modal-body {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
}

.app .modal .modal-footer {
    gap: .5rem;
    background-color: var(--pcr-surface);
    border-top: 1px solid var(--pcr-border);
}

/* Encabezados internos de secciones del modal, como .bordillo */
.app .modal .bordillo {
    color: var(--pcr-info-strong);
    background-color: var(--pcr-info-soft-strong);
    border-color: var(--pcr-info-strong);
}

html[data-pcr-theme="dark"] .app .modal .bordillo {
    color: var(--pcr-columbia-blue);
    background-color: var(--pcr-info-soft-strong);
    border-color: var(--pcr-info);
}

/* Controles de formulario del modal */
.app .modal .form-label {
    color: var(--pcr-text);
}

.app .modal .form-control,
.app .modal .form-select,
.app .modal .input-group-text {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-raised);
    border-color: var(--pcr-border);
}

.app .modal .form-control::placeholder {
    color: var(--pcr-text-muted);
}

.app .modal .form-control:focus,
.app .modal .form-select:focus {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-raised);
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width) color-mix(in srgb, var(--pcr-focus) 22%, transparent);
}

.app .modal .form-control:disabled,
.app .modal .form-select:disabled {
    color: var(--pcr-text-muted);
    background-color: var(--pcr-surface-muted);
}

/* Botones de acción PCR en el pie del modal de SGI */
.app .modal .modal-footer #btn_cnc {
    color: #FFFFFF;
    background-color: var(--pcr-info-strong);
    border-color: var(--pcr-info-strong);
}

.app .modal .modal-footer #btn_cnc:hover,
.app .modal .modal-footer #btn_cnc:focus-visible,
.app .modal .modal-footer #btn_cnc:active {
    color: #FFFFFF;
    background-color: #315F65;
    border-color: #315F65;
}

.app .modal .modal-footer #btn_sbm {
    color: var(--pcr-on-accent);
    background-color: var(--pcr-ochre);
    border-color: var(--pcr-ochre);
}

.app .modal .modal-footer #btn_sbm:hover,
.app .modal .modal-footer #btn_sbm:focus-visible,
.app .modal .modal-footer #btn_sbm:active {
    color: var(--pcr-on-accent);
    background-color: var(--pcr-action-hover);
    border-color: var(--pcr-action-hover);
}

/* Los controles de archivo/acción dentro del modal siguen la misma jerarquía PCR. */
.app .modal .modal-body .btn-info {
    color: #FFFFFF;
    background-color: var(--pcr-info-strong);
    border-color: var(--pcr-info-strong);
}

.app .modal .modal-body .btn-info:hover,
.app .modal .modal-body .btn-info:focus-visible,
.app .modal .modal-body .btn-info:active {
    color: #FFFFFF;
    background-color: #315F65;
    border-color: #315F65;
}



/* Instancias de Select2 utilizadas por el formulario de informes de SGI */
.app .modal .select2-container--default .select2-selection--single {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-sm);
    min-height: 2.375rem;
}

.app .modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--pcr-text);
    line-height: 2.25rem;
    padding-inline: .75rem 2rem;
}

.app .modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--pcr-text-muted);
}

.app .modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    width: 2rem;
}

.app .modal .select2-container--default.select2-container--focus .select2-selection--single,
.app .modal .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width) color-mix(in srgb, var(--pcr-focus) 22%, transparent);
}

.app .modal .select2-dropdown {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-raised);
    border-color: var(--pcr-border);
}

.app .modal .select2-search--dropdown .select2-search__field {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
}

.app .modal .select2-container--default .select2-results__option {
    color: var(--pcr-text);
}

.app .modal .select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #FFFFFF;
    background-color: var(--pcr-info-strong);
}

.app .modal .select2-container--default .select2-results__option[aria-selected="true"] {
    color: var(--pcr-on-accent);
    background-color: var(--pcr-action-soft);
}

/* Contraste más moderado para el encabezado y las filas de la tabla. */
.app .dataTables_wrapper table.dataTable thead th,
.app .dataTables_wrapper table.dataTable thead td {
    color: #FFFFFF;
    background-color: var(--pcr-black);
    border-color: var(--pcr-black);
}

html[data-pcr-theme="dark"] .app .dataTables_wrapper table.dataTable thead th,
html[data-pcr-theme="dark"] .app .dataTables_wrapper table.dataTable thead td {
    color: #FFFFFF;
    background-color: var(--pcr-black);
}

/* DataTables: separación visual clara entre contenido y navegación. */
.app .dataTables_wrapper .dataTables_info,
.app .dataTables_wrapper .dataTables_paginate {
    margin-top: .875rem;
    padding-top: .75rem;
    border-top: 1px solid var(--pcr-border);
}

.app .dataTables_wrapper .dataTables_info {
    color: var(--pcr-text-muted);
    line-height: 2.25rem;
}

.app .dataTables_wrapper .dataTables_paginate {
    float: right;
}

.app .dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
    gap: .25rem;
}

.app .dataTables_wrapper .dataTables_paginate .page-link {
    min-width: 2.25rem;
    text-align: center;
    border-radius: var(--pcr-radius-sm) !important;
}

.app .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    color: var(--pcr-on-accent);
    background-color: var(--pcr-ochre);
    border-color: var(--pcr-ochre);
}

@media (max-width: 767.98px) {
    .app .dataTables_wrapper .dataTables_info,
    .app .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        text-align: center;
    }

    .app .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* -------------------------------------------------------------------------
 * Sistema PCR para Select2 — Fase 1.9.1
 * Propósito: hacer que los controles Select2 sean visualmente consistentes en los modos Claro/Oscuro.
 * Esto sobrescribe los degradados heredados de Select2/theme sin modificar el CSS heredado.
 * ------------------------------------------------------------------------- */
.app .modal .select2-container--default .select2-selection--single {
    background: var(--pcr-surface-raised) !important;
    color: var(--pcr-text) !important;
    border: 1px solid var(--pcr-border) !important;
    border-radius: var(--pcr-radius-sm) !important;
    min-height: 2.375rem;
    box-shadow: none !important;
}

.app .modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--pcr-text) !important;
    line-height: 2.25rem;
    padding-inline: .75rem 2.25rem;
}

.app .modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--pcr-text-muted) !important;
}

.app .modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    width: 2rem;
}

.app .modal .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--pcr-text-muted) !important;
}

.app .modal .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--pcr-accent) !important;
}

.app .modal .select2-container--default.select2-container--focus .select2-selection--single,
.app .modal .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pcr-focus) !important;
    box-shadow: 0 0 0 var(--pcr-focus-width) color-mix(in srgb, var(--pcr-focus) 22%, transparent) !important;
}

.app .modal .select2-dropdown {
    color: var(--pcr-text) !important;
    background: var(--pcr-surface-raised) !important;
    border: 1px solid var(--pcr-border) !important;
    box-shadow: var(--pcr-shadow-md) !important;
    border-radius: var(--pcr-radius-sm) !important;
    overflow: hidden;
}

.app .modal .select2-container--default .select2-search--dropdown {
    padding: .5rem;
    background: var(--pcr-surface-raised) !important;
}

.app .modal .select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--pcr-text) !important;
    background: var(--pcr-surface) !important;
    border: 1px solid var(--pcr-border) !important;
    border-radius: var(--pcr-radius-sm) !important;
    box-shadow: none !important;
}

.app .modal .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--pcr-focus) !important;
    box-shadow: 0 0 0 var(--pcr-focus-width) color-mix(in srgb, var(--pcr-focus) 18%, transparent) !important;
    outline: 0;
}

.app .modal .select2-container--default .select2-results__options {
    background: var(--pcr-surface-raised) !important;
}

.app .modal .select2-container--default .select2-results__option {
    color: var(--pcr-text) !important;
    background: transparent !important;
    padding: .5rem .75rem;
}

.app .modal .select2-container--default .select2-results__option[aria-selected="true"] {
    color: var(--pcr-on-accent) !important;
    background: var(--pcr-action-soft) !important;
}

.app .modal .select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #FFFFFF !important;
    background: var(--pcr-info-strong) !important;
}

.app .modal .select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    color: var(--pcr-on-accent) !important;
    background: var(--pcr-ochre) !important;
}

.app .modal .select2-container--default .select2-results__option[aria-disabled="true"] {
    color: var(--pcr-text-muted) !important;
    opacity: .7;
}

.app .modal .select2-container--default .select2-results__message {
    color: var(--pcr-text-muted) !important;
}

/* Select nativos que permanecen en formularios fuera de Select2. */
.app .form-select,
.app .modal .form-select,
.app .modal select.form-control {
    color: var(--pcr-text) !important;
    background-color: var(--pcr-surface-raised) !important;
    border-color: var(--pcr-border) !important;
}

html[data-pcr-theme="dark"] .app .form-select,
html[data-pcr-theme="dark"] .app .modal .form-select,
html[data-pcr-theme="dark"] .app .modal select.form-control {
    color: var(--pcr-text) !important;
}


/* ========================================================================== */
/* Fase 1.9.2 — Corrección rápida de contraste de alertas oscuras              */
/* ========================================================================== */
html[data-pcr-theme="dark"] .app .alert-info {
    color: #C1E4DD !important;
    background-color: #203033 !important;
    border-color: #74A6AD !important;
}

html[data-pcr-theme="dark"] .app .alert-info .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.8);
    opacity: .85;
}

html[data-pcr-theme="dark"] .app .alert-info .btn-close:hover,
html[data-pcr-theme="dark"] .app .alert-info .btn-close:focus {
    opacity: 1;
}

html[data-pcr-theme="light"] .app .alert-info,
html[data-pcr-theme="default"] .app .alert-info {
    color: #2E565C !important;
    background-color: #E5EFF0 !important;
    border-color: #497F87 !important;
}

/* ========================================================================== */
/* Fase 1.9.3 — Botón de acción flotante PCR                                  */
/* ========================================================================== */
.app .btn-floated {
    background-color: var(--pcr-ochre) !important;
    border-color: var(--pcr-ochre) !important;
    color: var(--pcr-on-accent) !important;
    box-shadow: 0 .35rem .75rem rgba(26, 26, 26, .18);
}

.app .btn-floated:hover,
.app .btn-floated:focus {
    background-color: color-mix(in srgb, var(--pcr-ochre) 88%, #1A1A1A) !important;
    border-color: color-mix(in srgb, var(--pcr-ochre) 88%, #1A1A1A) !important;
    color: var(--pcr-on-accent) !important;
}

.app .btn-floated:active {
    background-color: color-mix(in srgb, var(--pcr-ochre) 78%, #1A1A1A) !important;
    border-color: color-mix(in srgb, var(--pcr-ochre) 78%, #1A1A1A) !important;
}

html[data-pcr-theme="dark"] .app .btn-floated {
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .35);
}

/* ========================================================================== */
/* Fase 1.11 — Normalización de formularios y componentes PCR               */
/* ========================================================================== */
/*
 * Alcance:
 * - Normalizar los controles de formulario de Bootstrap 5 con tokens PCR.
 * - Proporcionar un contrato visual genérico para los controles .seleccionador / Select2.
 * - Mantener el marcado .custom-select heredado alineado visualmente con la presentación actual.
 * - Armonizar validación, grupos de entrada, campos de archivo/fecha y ayudas de formulario.
 *
 * Seguridad:
 * - Solo CSS.
 * - Sin cambios en lógica de negocio, Controladores, Modelos ni JavaScript.
 * - Sin dependencia de un ID de campo específico como #country_id.
 */

:root,
html[data-pcr-theme="light"],
html[data-pcr-theme="default"] {
    --pcr-control-bg: var(--pcr-surface);
    --pcr-control-bg-focus: var(--pcr-surface-raised);
    --pcr-control-border-hover: var(--pcr-border-strong);
    --pcr-control-height: 2.5rem;
    --pcr-control-radius: var(--pcr-radius-sm);
    --pcr-control-invalid: var(--pcr-danger);
    --pcr-control-valid: var(--pcr-success);
}

html[data-pcr-theme="dark"] {
    --pcr-control-bg: var(--pcr-surface-raised);
    --pcr-control-bg-focus: var(--pcr-surface-raised);
    --pcr-control-border-hover: var(--pcr-border-strong);
    --pcr-control-height: 2.5rem;
    --pcr-control-radius: var(--pcr-radius-sm);
    --pcr-control-invalid: var(--pcr-danger);
    --pcr-control-valid: var(--pcr-success);
}

/* Etiquetas y texto de apoyo */
.app .form-label {
    color: var(--pcr-text);
    font-family: var(--pcr-font-family);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: .4rem;
}

.app .form-text {
    color: var(--pcr-text-muted);
    line-height: 1.45;
}

/* Controles principales: conservar las clases de tamaño de Bootstrap mientras se proporciona al
 * control predeterminado una superficie, borde y modelo de interacción comunes de PCR. */
.app .form-control,
.app .form-select,
.app select.custom-select,
.app .input-group-text {
    color: var(--pcr-text);
    background-color: var(--pcr-control-bg);
    border-color: var(--pcr-border);
    border-radius: var(--pcr-control-radius);
    transition: border-color var(--pcr-transition-fast),
                box-shadow var(--pcr-transition-fast),
                background-color var(--pcr-transition-fast),
                color var(--pcr-transition-fast);
}

.app .form-control:not(.form-control-sm):not(.form-control-lg),
.app .form-select:not(.form-select-sm):not(.form-select-lg),
.app select.custom-select:not(.form-control-sm):not(.form-control-lg) {
    min-height: var(--pcr-control-height);
}

.app textarea.form-control {
    min-height: auto;
    line-height: 1.5;
}

.app .form-control:hover:not(:disabled):not([readonly]),
.app .form-select:hover:not(:disabled),
.app select.custom-select:hover:not(:disabled) {
    border-color: var(--pcr-control-border-hover);
}

.app .form-control:focus,
.app .form-select:focus,
.app select.custom-select:focus {
    color: var(--pcr-text);
    background-color: var(--pcr-control-bg-focus);
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width)
                color-mix(in srgb, var(--pcr-focus) 20%, transparent);
    outline: 0;
}

.app .form-control::placeholder {
    color: var(--pcr-text-muted);
    opacity: 1;
}

/* Los campos nativos de fecha/archivo siguen el mismo tema en ambos modos de color. */
html[data-pcr-theme="light"] .app input[type="date"],
html[data-pcr-theme="light"] .app input[type="file"],
html[data-pcr-theme="default"] .app input[type="date"],
html[data-pcr-theme="default"] .app input[type="file"] {
    color-scheme: light;
}

html[data-pcr-theme="dark"] .app input[type="date"],
html[data-pcr-theme="dark"] .app input[type="file"] {
    color-scheme: dark;
}

.app .form-control[type="file"] {
    padding: .375rem .75rem;
}

.app .form-control[type="file"]::file-selector-button {
    color: var(--pcr-on-accent);
    background-color: var(--pcr-ochre);
    border: 0;
    border-radius: var(--pcr-radius-sm);
    margin: -.375rem .75rem -.375rem -.75rem;
    padding: .45rem .8rem;
    font-family: var(--pcr-font-family);
    font-weight: 600;
    transition: background-color var(--pcr-transition-fast);
}

.app .form-control[type="file"]::file-selector-button:hover {
    background-color: var(--pcr-action-hover);
}

/* Los grupos de entrada deben percibirse como un solo control. */
.app .input-group > .form-control,
.app .input-group > .form-select,
.app .input-group > select.custom-select,
.app .input-group > .input-group-text {
    border-radius: 0;
}

.app .input-group > :first-child {
    border-top-left-radius: var(--pcr-control-radius);
    border-bottom-left-radius: var(--pcr-control-radius);
}

.app .input-group > :last-child {
    border-top-right-radius: var(--pcr-control-radius);
    border-bottom-right-radius: var(--pcr-control-radius);
}

.app .input-group-text {
    font-family: var(--pcr-font-family);
    font-weight: 500;
}

/* Validación: conservar las clases de estado de Bootstrap, pero reemplazar los colores heredados. */
.app .form-control.is-invalid,
.app .form-select.is-invalid,
.app select.custom-select.is-invalid,
.app .was-validated .form-control:invalid,
.app .was-validated .form-select:invalid,
.app .was-validated select.custom-select:invalid {
    border-color: var(--pcr-control-invalid);
}

.app .form-control.is-invalid:focus,
.app .form-select.is-invalid:focus,
.app select.custom-select.is-invalid:focus,
.app .was-validated .form-control:invalid:focus,
.app .was-validated .form-select:invalid:focus,
.app .was-validated select.custom-select:invalid:focus {
    border-color: var(--pcr-control-invalid);
    box-shadow: 0 0 0 var(--pcr-focus-width)
                color-mix(in srgb, var(--pcr-control-invalid) 20%, transparent);
}

.app .form-control.is-valid,
.app .form-select.is-valid,
.app select.custom-select.is-valid,
.app .was-validated .form-control:valid,
.app .was-validated .form-select:valid,
.app .was-validated select.custom-select:valid {
    border-color: var(--pcr-control-valid);
}

.app .form-control.is-valid:focus,
.app .form-select.is-valid:focus,
.app select.custom-select.is-valid:focus,
.app .was-validated .form-control:valid:focus,
.app .was-validated .form-select:valid:focus,
.app .was-validated select.custom-select:valid:focus {
    border-color: var(--pcr-control-valid);
    box-shadow: 0 0 0 var(--pcr-focus-width)
                color-mix(in srgb, var(--pcr-control-valid) 20%, transparent);
}

.app .invalid-feedback,
.app .valid-feedback,
.app .invalid-tooltip,
.app .valid-tooltip {
    font-family: var(--pcr-font-family);
}

.app .invalid-feedback,
.app .invalid-tooltip {
    color: var(--pcr-danger);
}

.app .valid-feedback,
.app .valid-tooltip {
    color: var(--pcr-success);
}

/* Los controles deshabilitados / de solo lectura siguen siendo legibles sin parecer activos. */
.app .form-control:disabled,
.app .form-control[readonly],
.app .form-select:disabled,
.app select.custom-select:disabled {
    color: var(--pcr-text-muted);
    background-color: var(--pcr-surface-muted);
    border-color: var(--pcr-border);
    opacity: 1;
}

/* Tratamiento genérico de checkbox/radio para el marcado form-check de Bootstrap. No
 * tocamos los selectores heredados de checkbox independientes de estilo.css. */
.app .form-check-label {
    color: var(--pcr-text);
    cursor: pointer;
}

.app .form-check-input {
    border-color: var(--pcr-border-strong);
}

.app .form-check-input:focus {
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width)
                color-mix(in srgb, var(--pcr-focus) 20%, transparent);
}

.app .form-check-input:checked {
    background-color: var(--pcr-ochre);
    border-color: var(--pcr-ochre);
}

html[data-pcr-theme="dark"] .app .form-check-input:not(:checked) {
    background-color: var(--pcr-surface);
}

/* ------------------------------------------------------------------------- */
/* Contrato global de Select2                                                 */
/* ------------------------------------------------------------------------- */
/*
 * Select2 se identifica mediante la clase semántica .seleccionador. Los estilos no están
 * vinculados deliberadamente a #country_id, #customer_id ni a ningún otro ID de campo.
 */

.app .select2-container--default {
    font-family: var(--pcr-font-family);
}

.app .select2-container--default .select2-selection--single {
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-control-radius);
    min-height: var(--pcr-control-height);
    box-shadow: none;
}

.app .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--pcr-text);
    line-height: 2.375rem;
    padding-inline: .75rem 2.25rem;
}

.app .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--pcr-text-muted);
}

.app .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    width: 2rem;
}

.app .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--pcr-text-muted);
}

.app .select2-container--default.select2-container--focus .select2-selection--single,
.app .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width)
                color-mix(in srgb, var(--pcr-focus) 22%, transparent);
}

.app .select2-container--default .select2-selection--multiple {
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-control-radius);
    min-height: var(--pcr-control-height);
}

.app .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--pcr-on-accent);
    background-color: var(--pcr-action-soft);
    border-color: var(--pcr-ochre);
    border-radius: 999px;
}

.app .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--pcr-text);
    font-family: var(--pcr-font-family);
}

.app .select2-dropdown {
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-control-radius);
    box-shadow: var(--pcr-shadow-md);
}

.app .select2-search--dropdown {
    padding: .5rem;
    background: var(--pcr-surface-raised);
}

.app .select2-search--dropdown .select2-search__field {
    color: var(--pcr-text);
    background: var(--pcr-surface);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-control-radius);
    min-height: 2.25rem;
}

.app .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width)
                color-mix(in srgb, var(--pcr-focus) 18%, transparent);
    outline: 0;
}

.app .select2-results__options {
    background: var(--pcr-surface-raised);
}

.app .select2-results__option {
    color: var(--pcr-text);
    background: transparent;
    padding: .5rem .75rem;
}

.app .select2-results__option[aria-selected="true"] {
    color: var(--pcr-on-accent);
    background: var(--pcr-action-soft);
}

.app .select2-results__option--highlighted[aria-selected] {
    color: #FFFFFF;
    background: var(--pcr-info-strong);
}

html[data-pcr-theme="dark"] .app .select2-results__option--highlighted[aria-selected] {
    color: #FFFFFF;
    background: var(--pcr-info);
}

.app .select2-container--default .select2-selection--single[aria-disabled="true"],
.app .select2-container--default.select2-container--disabled .select2-selection--single {
    color: var(--pcr-text-muted);
    background: var(--pcr-surface-muted);
    border-color: var(--pcr-border);
    opacity: 1;
}

/* Los controles de formulario compactos preservan el contrato de tamaños de Bootstrap 5. */
.app .form-control-sm,
.app .form-select-sm {
    border-radius: var(--pcr-radius-sm);
}

.app .form-control-lg,
.app .form-select-lg {
    border-radius: var(--pcr-radius-md);
}

/* Fin de la Fase 1.11. */

/* ========================================================================== */
/* Fase 1.12 — Tablas PCR y DataTables                                        */
/* ========================================================================== */
/*
 * Alcance:
 * - Normalizar la apariencia de DataTables en SGI con tokens PCR.
 * - Conservar la integración actual de DataTables 1.x / Bootstrap 5.
 * - Mejorar la jerarquía del encabezado, cuerpo, ordenamiento, controles y pie de tabla.
 * - Armonizar las integraciones Buttons, SearchBuilder, SearchPanes y DateTime.
 *
 * Seguridad:
 * - Solo CSS.
 * - Sin cambios en la inicialización/configuración de DataTables.
 * - Sin cambios en Controllers, Models ni lógica de negocio.
 * - Sin cambios de versión de librerías.
 */

/* -------------------------------------------------------------------------- */
/* Superficie de la tabla                                                      */
/* -------------------------------------------------------------------------- */
.app .dataTables_wrapper {
    color: var(--pcr-text);
    font-family: var(--pcr-font-family);
}

.app .dataTables_wrapper .table-responsive,
.app .dataTables_wrapper > .table-responsive {
    border-radius: var(--pcr-radius-md);
}

.app .dataTables_wrapper table.dataTable {
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-color: var(--pcr-border);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.app .dataTables_wrapper table.dataTable thead th,
.app .dataTables_wrapper table.dataTable thead td {
    position: relative;
    color: #FFFFFF;
    background-color: var(--pcr-black);
    border-top: 0;
    border-bottom: 1px solid var(--pcr-black);
    border-left-color: rgba(255, 255, 255, .08);
    border-right-color: rgba(255, 255, 255, .08);
    font-family: var(--pcr-font-family);
    font-weight: 700;
    letter-spacing: .01em;
    vertical-align: middle;
    white-space: nowrap;
}

.app .dataTables_wrapper table.dataTable thead th:first-child,
.app .dataTables_wrapper table.dataTable thead td:first-child {
    border-top-left-radius: var(--pcr-radius-md);
}

.app .dataTables_wrapper table.dataTable thead th:last-child,
.app .dataTables_wrapper table.dataTable thead td:last-child {
    border-top-right-radius: var(--pcr-radius-md);
}

.app .dataTables_wrapper table.dataTable tbody td,
.app .dataTables_wrapper table.dataTable tbody th {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border-top-color: var(--pcr-border);
    border-bottom-color: var(--pcr-border);
    vertical-align: middle;
}

.app .dataTables_wrapper table.dataTable tbody tr:last-child td,
.app .dataTables_wrapper table.dataTable tbody tr:last-child th {
    border-bottom-color: var(--pcr-border);
}

.app .dataTables_wrapper table.dataTable tbody tr.odd td,
.app .dataTables_wrapper table.dataTable tbody tr.even td,
.app .dataTables_wrapper table.dataTable.stripe tbody tr.odd td,
.app .dataTables_wrapper table.dataTable.display tbody tr.odd td {
    background-color: var(--pcr-surface);
}

.app .dataTables_wrapper table.dataTable tbody tr:hover td,
.app .dataTables_wrapper table.dataTable.hover tbody tr:hover td {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
}

.app .dataTables_wrapper table.dataTable tbody tr.selected td,
.app .dataTables_wrapper table.dataTable tbody tr.selected:hover td {
    color: var(--pcr-text);
    background-color: var(--pcr-action-soft);
}

html[data-pcr-theme="dark"] .app .dataTables_wrapper table.dataTable tbody tr.selected td,
html[data-pcr-theme="dark"] .app .dataTables_wrapper table.dataTable tbody tr.selected:hover td {
    color: var(--pcr-text);
    background-color: var(--pcr-action-soft);
}

/* Indicadores de ordenamiento: permitir que el navegador/extensión proporcione el icono,
 * mientras la columna ordenada recibe un énfasis PCR sutil. */
.app .dataTables_wrapper table.dataTable thead > tr > th.sorting,
.app .dataTables_wrapper table.dataTable thead > tr > th.sorting_asc,
.app .dataTables_wrapper table.dataTable thead > tr > th.sorting_desc,
.app .dataTables_wrapper table.dataTable thead > tr > td.sorting,
.app .dataTables_wrapper table.dataTable thead > tr > td.sorting_asc,
.app .dataTables_wrapper table.dataTable thead > tr > td.sorting_desc {
    color: #FFFFFF;
}

.app .dataTables_wrapper table.dataTable thead > tr > th.sorting_asc,
.app .dataTables_wrapper table.dataTable thead > tr > th.sorting_desc,
.app .dataTables_wrapper table.dataTable thead > tr > td.sorting_asc,
.app .dataTables_wrapper table.dataTable thead > tr > td.sorting_desc {
    box-shadow: inset 0 -3px 0 var(--pcr-ochre);
}

/* Estados vacíos y de procesamiento. */
.app .dataTables_wrapper table.dataTable tbody td.dataTables_empty {
    color: var(--pcr-text-muted);
    background-color: var(--pcr-surface);
    padding: 2rem 1rem;
    font-style: italic;
    text-align: center;
}

.app .dataTables_wrapper .dataTables_processing {
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
    font-family: var(--pcr-font-family);
    font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Controles de la tabla                                                      */
/* -------------------------------------------------------------------------- */
.app .dataTables_wrapper .dataTables_length,
.app .dataTables_wrapper .dataTables_filter,
.app .dataTables_wrapper .dataTables_info {
    color: var(--pcr-text-muted);
}

.app .dataTables_wrapper .dataTables_length label,
.app .dataTables_wrapper .dataTables_filter label {
    color: var(--pcr-text-muted);
    font-weight: 500;
    margin-bottom: 0;
}

.app .dataTables_wrapper .dataTables_length select,
.app .dataTables_wrapper .dataTables_filter input,
.app .dataTables_wrapper .dt-search input,
.app .dataTables_wrapper .dt-length select {
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-sm);
    min-height: 2.25rem;
    box-shadow: none;
    transition: border-color var(--pcr-transition-fast),
                box-shadow var(--pcr-transition-fast),
                background-color var(--pcr-transition-fast);
}

.app .dataTables_wrapper .dataTables_length select,
.app .dataTables_wrapper .dt-length select {
    min-width: 4.5rem;
    padding-inline: .6rem 1.8rem;
}

.app .dataTables_wrapper .dataTables_filter input,
.app .dataTables_wrapper .dt-search input {
    min-width: 12rem;
    padding: .375rem .75rem;
    margin-left: .5rem;
}

.app .dataTables_wrapper .dataTables_length select:focus,
.app .dataTables_wrapper .dataTables_filter input:focus,
.app .dataTables_wrapper .dt-search input:focus,
.app .dataTables_wrapper .dt-length select:focus {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-raised);
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width)
        color-mix(in srgb, var(--pcr-focus) 18%, transparent);
    outline: 0;
}

.app .dataTables_wrapper .dataTables_filter input::placeholder,
.app .dataTables_wrapper .dt-search input::placeholder {
    color: var(--pcr-text-muted);
    opacity: 1;
}

/* Espaciado compacto alrededor de los controles superiores sin cambiar el DOM de DataTables. */
.app .dataTables_wrapper > .row:first-child,
.app .dataTables_wrapper > .row.dt-layout-row:first-child {
    row-gap: .75rem;
    margin-bottom: .75rem;
}

/* Jerarquía del pie: un separador compartido en lugar de líneas independientes en información y
 * paginación. Esto sustituye el borde de nivel hijo de la Fase 1.9. */
.app .dataTables_wrapper > .row:last-child,
.app .dataTables_wrapper > .row.dt-layout-row:last-child {
    margin-top: .9rem;
    padding-top: .75rem;
    border-top: 1px solid var(--pcr-border);
    align-items: center;
}

.app .dataTables_wrapper .dataTables_info,
.app .dataTables_wrapper .dataTables_paginate {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* -------------------------------------------------------------------------- */
/* Paginación                                                                  */
/* -------------------------------------------------------------------------- */
.app .dataTables_wrapper .dataTables_paginate .pagination {
    gap: .25rem;
    margin: 0;
}

.app .dataTables_wrapper .dataTables_paginate .page-item .page-link {
    min-width: 2.35rem;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .65rem;
    color: var(--pcr-text);
    background-color: var(--pcr-surface);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-sm) !important;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

.app .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
.app .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:focus-visible {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border-color: var(--pcr-border-strong);
}

.app .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.app .dataTables_wrapper .dataTables_paginate .page-item.current .page-link {
    color: var(--pcr-on-accent);
    background-color: var(--pcr-ochre);
    border-color: var(--pcr-ochre);
}

.app .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: var(--pcr-text-muted);
    background-color: var(--pcr-surface-muted);
    border-color: var(--pcr-border);
    opacity: .7;
}

/* -------------------------------------------------------------------------- */
/* Extensión Buttons                                                           */
/* -------------------------------------------------------------------------- */
.app .dataTables_wrapper .dt-buttons,
.app .dataTables_wrapper #dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.app .dataTables_wrapper .dt-button,
.app .dataTables_wrapper .buttons-copy,
.app .dataTables_wrapper .buttons-csv,
.app .dataTables_wrapper .buttons-excel,
.app .dataTables_wrapper .buttons-pdf,
.app .dataTables_wrapper .buttons-print,
.app .dataTables_wrapper .buttons-colvis,
.app .dataTables_wrapper .buttons-collection {
    color: var(--pcr-text) !important;
    background: var(--pcr-surface) !important;
    border: 1px solid var(--pcr-border) !important;
    border-radius: var(--pcr-radius-sm) !important;
    box-shadow: none !important;
    font-family: var(--pcr-font-family);
    font-weight: 600;
    line-height: 1.4;
    transition: background-color var(--pcr-transition-fast),
                border-color var(--pcr-transition-fast),
                color var(--pcr-transition-fast);
}

.app .dataTables_wrapper .dt-button:hover,
.app .dataTables_wrapper .dt-button:focus-visible,
.app .dataTables_wrapper .buttons-copy:hover,
.app .dataTables_wrapper .buttons-csv:hover,
.app .dataTables_wrapper .buttons-excel:hover,
.app .dataTables_wrapper .buttons-pdf:hover,
.app .dataTables_wrapper .buttons-print:hover,
.app .dataTables_wrapper .buttons-colvis:hover,
.app .dataTables_wrapper .buttons-collection:hover {
    color: var(--pcr-text) !important;
    background: var(--pcr-surface-muted) !important;
    border-color: var(--pcr-border-strong) !important;
}

.app .dataTables_wrapper .dt-button:active,
.app .dataTables_wrapper .dt-button.active,
.app .dataTables_wrapper .dt-button-collection .dt-button.active {
    color: var(--pcr-on-accent) !important;
    background: var(--pcr-ochre) !important;
    border-color: var(--pcr-ochre) !important;
}

/* Los botones principales de exportación/acción pueden adoptar la jerarquía Ocre mediante la
 * clase contextual existente de Bootstrap, sin cambiar la configuración de JS. */
.app .dataTables_wrapper .dt-button.btn-warning,
.app .dataTables_wrapper .buttons-excel.btn-warning,
.app .dataTables_wrapper .buttons-pdf.btn-warning {
    color: var(--pcr-on-accent) !important;
    background: var(--pcr-ochre) !important;
    border-color: var(--pcr-ochre) !important;
}

/* Colecciones de botones / menús de visibilidad de columnas. */
.app .dt-button-collection {
    padding: .5rem;
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
}

.app .dt-button-collection .dt-button {
    display: block;
    width: 100%;
    margin: 0 0 .25rem 0;
    text-align: left;
}

.app .dt-button-collection .dt-button:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* SearchBuilder                                                             */
/* -------------------------------------------------------------------------- */
.app .dataTables_wrapper .dtsb-searchBuilder,
.app .dtsb-searchBuilder {
    margin: 0 0 .9rem 0;
    padding: .85rem;
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-sm);
}

.app .dtsb-searchBuilder .dtsb-title,
.app .dtsb-searchBuilder label {
    color: var(--pcr-text);
    font-family: var(--pcr-font-family);
    font-weight: 600;
}

.app .dtsb-searchBuilder select,
.app .dtsb-searchBuilder input,
.app .dtsb-searchBuilder .dtsb-button {
    color: var(--pcr-text);
    background: var(--pcr-surface);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-sm);
}

.app .dtsb-searchBuilder select:focus,
.app .dtsb-searchBuilder input:focus {
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width)
        color-mix(in srgb, var(--pcr-focus) 18%, transparent);
    outline: 0;
}

.app .dtsb-searchBuilder .dtsb-button:hover,
.app .dtsb-searchBuilder .dtsb-button:focus-visible {
    background: var(--pcr-surface-muted);
    border-color: var(--pcr-border-strong);
}

.app .dtsb-searchBuilder .dtsb-button.dtsb-clearAll,
.app .dtsb-searchBuilder .dtsb-button.dtsb-logic {
    color: var(--pcr-on-accent);
    background: var(--pcr-ochre);
    border-color: var(--pcr-ochre);
}

/* -------------------------------------------------------------------------- */
/* SearchPanes                                                               */
/* -------------------------------------------------------------------------- */
.app .dtsp-panes,
.app .dtsp-searchPanes,
.app .dtsp-searchPane {
    color: var(--pcr-text);
}

.app .dtsp-panes {
    margin-bottom: .9rem;
    padding: .75rem;
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
}

.app .dtsp-searchPane {
    background: transparent;
    border-color: var(--pcr-border);
}

.app .dtsp-searchPane .dtsp-title,
.app .dtsp-searchPane .dtsp-name,
.app .dtsp-searchPane label {
    color: var(--pcr-text);
    font-family: var(--pcr-font-family);
    font-weight: 600;
}

.app .dtsp-searchPane .dtsp-searchCont,
.app .dtsp-searchPane .dtsp-topRow {
    gap: .5rem;
}

.app .dtsp-searchPane input,
.app .dtsp-searchPane select {
    color: var(--pcr-text);
    background: var(--pcr-surface);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-sm);
}

.app .dtsp-searchPane input:focus,
.app .dtsp-searchPane select:focus {
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width)
        color-mix(in srgb, var(--pcr-focus) 18%, transparent);
    outline: 0;
}

.app .dtsp-searchPane table.dataTable tbody tr,
.app .dtsp-searchPane table.dataTable tbody td {
    background: transparent;
}

.app .dtsp-searchPane tr.selected td,
.app .dtsp-searchPane tr:hover td {
    background: var(--pcr-action-soft) !important;
}

.app .dtsp-searchPanes .dtsp-pill {
    color: var(--pcr-on-accent);
    background: var(--pcr-ochre);
    border-radius: 999px;
}

/* -------------------------------------------------------------------------- */
/* Extensión DateTime de DataTables                                            */
/* -------------------------------------------------------------------------- */
.app .dt-datetime {
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
    font-family: var(--pcr-font-family);
}

.app .dt-datetime input,
.app .dt-datetime select {
    color: var(--pcr-text);
    background: var(--pcr-surface);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-sm);
}

.app .dt-datetime input:focus,
.app .dt-datetime select:focus {
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width)
        color-mix(in srgb, var(--pcr-focus) 18%, transparent);
    outline: 0;
}

/* -------------------------------------------------------------------------- */
/* Alineación de utilidades / comportamiento en pantallas pequeñas            */
/* -------------------------------------------------------------------------- */
.app .dataTables_wrapper .table {
    margin-bottom: 0;
}

.app .dataTables_wrapper .dataTables_scrollHead,
.app .dataTables_wrapper .dataTables_scrollBody,
.app .dataTables_wrapper .dataTables_scrollFoot {
    border-color: var(--pcr-border);
}

.app .dataTables_wrapper .dataTables_scrollBody {
    scrollbar-color: var(--pcr-border-strong) var(--pcr-surface-muted);
}

@media (max-width: 767.98px) {
    .app .dataTables_wrapper .dataTables_length,
    .app .dataTables_wrapper .dataTables_filter,
    .app .dataTables_wrapper .dt-length,
    .app .dataTables_wrapper .dt-search {
        width: 100%;
        text-align: left;
    }

    .app .dataTables_wrapper .dataTables_filter input,
    .app .dataTables_wrapper .dt-search input {
        width: min(100%, 22rem);
        min-width: 0;
        margin-left: 0;
        margin-top: .35rem;
    }

    .app .dataTables_wrapper > .row:first-child,
    .app .dataTables_wrapper > .row.dt-layout-row:first-child {
        margin-bottom: .5rem;
    }

    .app .dataTables_wrapper .dataTables_info,
    .app .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        float: none;
        text-align: center;
    }

    .app .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Fin de la Fase 1.12. */

/* ========================================================================== */
/* Fase 1.13 — Retroalimentación, estados y carga PCR                         */
/* ========================================================================== */
/*
 * Objetivo:
 * - Normalizar los componentes de retroalimentación entre Claro/Oscuro.
 * - Dar a alertas, badges, progreso, estados de carga y overlays un tratamiento
 *   semántico PCR común.
 * - Mantener la implementación como aditiva: sin cambios en JavaScript ni en
 *   Controladores, Modelos o en los archivos del tema heredado.
 */

/* -------------------------------------------------------------------------- */
/* Alertas                                                                    */
/* -------------------------------------------------------------------------- */
.app .alert {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-sm);
}

.app .alert .alert-link {
    color: inherit;
    font-weight: 700;
}

.app .alert .btn-close {
    opacity: .72;
}

.app .alert .btn-close:hover,
.app .alert .btn-close:focus-visible {
    opacity: 1;
}

.app .alert-primary {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border-color: var(--pcr-border-strong);
}

.app .alert-secondary {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border-color: var(--pcr-border);
}

.app .alert-info {
    color: #2E565C !important;
    background-color: var(--pcr-info-soft) !important;
    border-color: var(--pcr-info) !important;
}

.app .alert-success {
    color: #22583F !important;
    background-color: var(--pcr-success-soft) !important;
    border-color: var(--pcr-success) !important;
}

.app .alert-warning {
    color: #6B4C17 !important;
    background-color: var(--pcr-warning-soft) !important;
    border-color: var(--pcr-ochre) !important;
}

.app .alert-danger {
    color: #5E0925 !important;
    background-color: var(--pcr-danger-soft) !important;
    border-color: var(--pcr-danger) !important;
}

html[data-pcr-theme="dark"] .app .alert-primary,
html[data-pcr-theme="dark"] .app .alert-secondary {
    color: var(--pcr-text) !important;
    background-color: var(--pcr-surface-muted) !important;
    border-color: var(--pcr-border-strong) !important;
}

html[data-pcr-theme="dark"] .app .alert-info {
    color: #C1E4DD !important;
    background-color: #203033 !important;
    border-color: #74A6AD !important;
}

html[data-pcr-theme="dark"] .app .alert-success {
    color: #B8DEC9 !important;
    background-color: #203128 !important;
    border-color: #74B497 !important;
}

html[data-pcr-theme="dark"] .app .alert-warning {
    color: #F2D7A4 !important;
    background-color: #3A301F !important;
    border-color: #E0B66E !important;
}

html[data-pcr-theme="dark"] .app .alert-danger {
    color: #F0C6D2 !important;
    background-color: #39232C !important;
    border-color: #CF7697 !important;
}

html[data-pcr-theme="dark"] .app .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.8);
}

/* -------------------------------------------------------------------------- */
/* Badges / indicadores de estado                                             */
/* -------------------------------------------------------------------------- */
.app .badge {
    min-width: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    border-radius: 999px;
    border: 1px solid transparent;
}

.app .badge.bg-primary,
.app .badge.text-bg-primary {
    color: var(--pcr-on-primary) !important;
    background-color: var(--pcr-black) !important;
    border-color: var(--pcr-black) !important;
}

.app .badge.bg-secondary,
.app .badge.text-bg-secondary {
    color: var(--pcr-text) !important;
    background-color: var(--pcr-surface-muted) !important;
    border-color: var(--pcr-border) !important;
}

.app .badge.bg-success,
.app .badge.text-bg-success {
    color: #FFFFFF !important;
    background-color: var(--pcr-success) !important;
    border-color: var(--pcr-success) !important;
}

.app .badge.bg-info,
.app .badge.text-bg-info {
    color: #FFFFFF !important;
    background-color: var(--pcr-info) !important;
    border-color: var(--pcr-info) !important;
}

.app .badge.bg-warning,
.app .badge.text-bg-warning {
    color: #FFFFFF !important;
    background-color: var(--pcr-ochre) !important;
    border-color: var(--pcr-ochre) !important;
}

.app .badge.bg-danger,
.app .badge.text-bg-danger {
    color: #FFFFFF !important;
    background-color: var(--pcr-danger) !important;
    border-color: var(--pcr-danger) !important;
}

.app .badge.bg-light,
.app .badge.text-bg-light {
    color: var(--pcr-text) !important;
    background-color: var(--pcr-surface) !important;
    border-color: var(--pcr-border) !important;
}

.app .badge.bg-dark,
.app .badge.text-bg-dark {
    color: #FFFFFF !important;
    background-color: var(--pcr-black) !important;
    border-color: var(--pcr-black) !important;
}

.app .pcr-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .625rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border: 1px solid var(--pcr-border);
    border-radius: 999px;
}

.app .pcr-status::before {
    content: "";
    width: .45rem;
    height: .45rem;
    flex: 0 0 .45rem;
    border-radius: 50%;
    background-color: currentColor;
}

.app .pcr-status-info {
    color: var(--pcr-info);
    background-color: var(--pcr-info-soft);
    border-color: color-mix(in srgb, var(--pcr-info) 45%, var(--pcr-border));
}

.app .pcr-status-success {
    color: var(--pcr-success);
    background-color: var(--pcr-success-soft);
    border-color: color-mix(in srgb, var(--pcr-success) 45%, var(--pcr-border));
}

.app .pcr-status-warning {
    color: var(--pcr-warning);
    background-color: var(--pcr-warning-soft);
    border-color: color-mix(in srgb, var(--pcr-warning) 45%, var(--pcr-border));
}

.app .pcr-status-danger {
    color: var(--pcr-danger);
    background-color: var(--pcr-danger-soft);
    border-color: color-mix(in srgb, var(--pcr-danger) 45%, var(--pcr-border));
}

.app .pcr-status-active {
    color: var(--pcr-ochre);
    background-color: var(--pcr-accent-soft);
    border-color: color-mix(in srgb, var(--pcr-ochre) 45%, var(--pcr-border));
}

/* -------------------------------------------------------------------------- */
/* Progreso                                                                   */
/* -------------------------------------------------------------------------- */
.app .progress {
    height: .55rem;
    overflow: hidden;
    background-color: var(--pcr-surface-muted);
    border: 1px solid var(--pcr-border);
    border-radius: 999px;
    box-shadow: none;
}

.app .progress-bar {
    background-color: var(--pcr-ochre);
    transition: width var(--pcr-transition-base);
}

.app .progress-bar.bg-primary {
    background-color: var(--pcr-black) !important;
}

.app .progress-bar.bg-success {
    background-color: var(--pcr-success) !important;
}

.app .progress-bar.bg-info {
    background-color: var(--pcr-info) !important;
}

.app .progress-bar.bg-warning {
    background-color: var(--pcr-ochre) !important;
}

.app .progress-bar.bg-danger {
    background-color: var(--pcr-danger) !important;
}

.app .progress-label {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
    color: var(--pcr-text-muted);
    font-size: .8125rem;
}

/* -------------------------------------------------------------------------- */
/* Carga / procesamiento                                                     */
/* -------------------------------------------------------------------------- */
.app .spinner-border,
.app .spinner-grow {
    color: var(--pcr-ochre);
}

.app .spinner-border.text-primary,
.app .spinner-grow.text-primary {
    color: var(--pcr-black) !important;
}

.app .spinner-border.text-success,
.app .spinner-grow.text-success {
    color: var(--pcr-success) !important;
}

.app .spinner-border.text-info,
.app .spinner-grow.text-info {
    color: var(--pcr-info) !important;
}

.app .spinner-border.text-warning,
.app .spinner-grow.text-warning {
    color: var(--pcr-ochre) !important;
}

.app .spinner-border.text-danger,
.app .spinner-grow.text-danger {
    color: var(--pcr-danger) !important;
}

.app .pcr-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--pcr-text);
    background-color: color-mix(in srgb, var(--pcr-surface) 86%, transparent);
    backdrop-filter: blur(2px);
    border-radius: inherit;
}

.app .pcr-loading {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--pcr-text-muted);
    font-size: .875rem;
    font-weight: 600;
}

.app .pcr-loading .spinner-border,
.app .pcr-loading .spinner-grow {
    flex: 0 0 auto;
}

.app .pcr-processing {
    position: relative;
    color: var(--pcr-text-muted);
}

.app .pcr-processing::after {
    content: "";
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin-left: .5rem;
    vertical-align: -.1em;
    border: 2px solid color-mix(in srgb, var(--pcr-border-strong) 70%, transparent);
    border-top-color: var(--pcr-ochre);
    border-radius: 50%;
    animation: pcr-spin .8s linear infinite;
}

@keyframes pcr-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app .pcr-processing::after {
        animation-duration: 0s;
    }
}

/* -------------------------------------------------------------------------- */
/* Mensaje emergentes / ventanas emergentes                                            */
/* -------------------------------------------------------------------------- */
.app .tooltip .tooltip-inner {
    max-width: 18rem;
    padding: .45rem .65rem;
    color: #FFFFFF;
    background-color: var(--pcr-black);
    border-radius: var(--pcr-radius-sm);
    box-shadow: var(--pcr-shadow-sm);
    font-family: var(--pcr-font-family);
    font-size: .75rem;
}

.app .popover {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
}

.app .popover-header {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border-bottom-color: var(--pcr-border);
    font-family: var(--pcr-font-family);
    font-weight: 600;
}

.app .popover-body {
    color: var(--pcr-text);
}

.app .popover .popover-arrow::after {
    border-top-color: var(--pcr-surface-raised);
}

.app .popover .popover-arrow::before {
    border-top-color: var(--pcr-border);
}

/* -------------------------------------------------------------------------- */
/* Toasts                                                                     */
/* -------------------------------------------------------------------------- */
.app .toast {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
}

.app .toast-header {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-muted);
    border-bottom-color: var(--pcr-border);
}

.app .toast-body {
    color: var(--pcr-text);
}

/* -------------------------------------------------------------------------- */
/* Estados vacíos / retroalimentación de marcador                            */
/* -------------------------------------------------------------------------- */
.app .pcr-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 9rem;
    padding: 1.5rem;
    color: var(--pcr-text-muted);
    text-align: center;
    border: 1px dashed var(--pcr-border-strong);
    border-radius: var(--pcr-radius-md);
    background-color: var(--pcr-surface-muted);
}

.app .pcr-empty-state-icon {
    color: var(--pcr-info);
    font-size: 1.5rem;
}

.app .pcr-empty-state-title {
    color: var(--pcr-text);
    font-weight: 600;
}

.app .pcr-empty-state-text {
    max-width: 36rem;
    margin: 0;
    font-size: .875rem;
}

/* El indicador de procesamiento y el estado vacío de DataTables comparten el mismo
   tratamiento semántico introducido en esta fase. */
.app .dataTables_wrapper .dataTables_processing,
.app .dataTables_wrapper .dt-processing {
    color: var(--pcr-text) !important;
    background: color-mix(in srgb, var(--pcr-surface-raised) 94%, transparent) !important;
    border: 1px solid var(--pcr-border) !important;
    border-radius: var(--pcr-radius-md) !important;
    box-shadow: var(--pcr-shadow-md);
    font-weight: 600;
}

.app .dataTables_wrapper table.dataTable tbody td.dataTables_empty {
    color: var(--pcr-text-muted) !important;
}

/* -------------------------------------------------------------------------- */
/* Fin de la Fase 1.13.                                                     */
/* -------------------------------------------------------------------------- */

/* ========================================================================== */
/* Fase 1.14 — Integraciones de plugins PCR: Gijgo + Flatpickr               */
/* ========================================================================== */
/*
 * Objetivo:
 * - Normalizar la interfaz de fecha/calendario generada por plugins con tokens PCR Claro/Oscuro.
 * - Mantener intactos la inicialización actual de los plugins y el marcado.
 * - Cubrir el selector de fecha Gijgo Bootstrap 5 utilizado actualmente por Informe.
 * - Preparar el estilo visual de Flatpickr cargado globalmente sin cambiar su uso desde JS.
 *
 * Notas:
 * - Los pickers de Gijgo se renderizan fuera de .app, por lo que sus selectores intencionalmente
 *   no están restringidos al espacio de nombres .app.
 * - Flatpickr actualmente se carga desde el estructura global; no se encontró un inicializador
 *   en el versión actual actual de View. Por ello, estas reglas son de preparación visual,
 *   no constituyen un cambio funcional.
 */

/* -------------------------------------------------------------------------- */
/* Gijgo — selector de fecha de Bootstrap 5                                          */
/* -------------------------------------------------------------------------- */
.gj-datepicker-bootstrap,
.gj-timepicker-bootstrap,
.gj-picker-bootstrap,
.gj-datepicker-bootstrap [role="wrapper"] {
    font-family: var(--pcr-font-family);
}

.gj-datepicker-bootstrap {
    max-width: 100%;
}

.gj-datepicker-bootstrap [role="input"],
.gj-timepicker-bootstrap [role="input"] {
    color: var(--pcr-text);
    background: var(--pcr-surface);
    border-color: var(--pcr-border);
    box-shadow: none;
}

.gj-datepicker-bootstrap [role="input"]:focus,
.gj-timepicker-bootstrap [role="input"]:focus {
    color: var(--pcr-text);
    background: var(--pcr-surface);
    border-color: var(--pcr-focus);
    box-shadow: 0 0 0 var(--pcr-focus-width)
        color-mix(in srgb, var(--pcr-focus) 18%, transparent);
    outline: 0;
}

.gj-datepicker-bootstrap [role="right-icon"] button,
.gj-timepicker-bootstrap [role="right-icon"] button {
    color: var(--pcr-text-muted);
    background: var(--pcr-surface);
    border-color: var(--pcr-border);
    transition: color var(--pcr-transition-fast),
        background-color var(--pcr-transition-fast),
        border-color var(--pcr-transition-fast);
}

.gj-datepicker-bootstrap [role="right-icon"] button:hover,
.gj-datepicker-bootstrap [role="right-icon"] button:focus,
.gj-timepicker-bootstrap [role="right-icon"] button:hover,
.gj-timepicker-bootstrap [role="right-icon"] button:focus {
    color: var(--pcr-on-accent);
    background: var(--pcr-accent);
    border-color: var(--pcr-accent);
    box-shadow: none;
    outline: 0;
}

.gj-datepicker-bootstrap [role="right-icon"] .gj-icon,
.gj-datepicker-bootstrap [role="right-icon"] .material-icons,
.gj-timepicker-bootstrap [role="right-icon"] .gj-icon,
.gj-timepicker-bootstrap [role="right-icon"] .material-icons {
    color: currentColor;
}

/* Ventana emergente del calendario. Gijgo la renderiza a nivel de body, por eso no lleva prefijo .app. */
.gj-picker-bootstrap {
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
    padding: .25rem;
}

.gj-picker-bootstrap.datepicker [role="header"] {
    background: var(--pcr-primary);
    color: var(--pcr-on-primary);
    border-radius: calc(var(--pcr-radius-md) - .2rem);
}

.gj-picker-bootstrap.datepicker [role="header"] [role="year"],
.gj-picker-bootstrap.datepicker [role="header"] [role="date"] {
    color: inherit;
    font-family: var(--pcr-font-family);
}

.gj-picker-bootstrap div[role="navigator"] {
    color: var(--pcr-text);
}

.gj-picker-bootstrap div[role="navigator"] .gj-icon,
.gj-picker-bootstrap div[role="navigator"] .material-icons {
    color: var(--pcr-text-muted);
    transition: color var(--pcr-transition-fast), background-color var(--pcr-transition-fast);
    border-radius: var(--pcr-radius-sm);
}

.gj-picker-bootstrap div[role="navigator"] .gj-icon:hover,
.gj-picker-bootstrap div[role="navigator"] .material-icons:hover {
    color: var(--pcr-on-accent);
    background: var(--pcr-accent);
}

.gj-picker-bootstrap table thead {
    color: var(--pcr-text-muted);
}

.gj-picker-bootstrap table tr td.gj-cursor-pointer div:hover,
.gj-picker-bootstrap table tr td.focused div {
    background: var(--pcr-action-soft);
    color: var(--pcr-text);
    border-radius: var(--pcr-radius-sm);
}

.gj-picker-bootstrap table tr td.today div {
    color: var(--pcr-accent);
    font-weight: 700;
}

.gj-picker-bootstrap table tr td.selected.gj-cursor-pointer div {
    color: var(--pcr-on-accent);
    background: var(--pcr-accent);
    border-color: var(--pcr-accent);
    border-radius: var(--pcr-radius-sm);
}

.gj-picker-bootstrap table tr td.disabled div,
.gj-picker-bootstrap table tr td.other-month div {
    color: var(--pcr-text-muted);
    opacity: .65;
}

.gj-picker-bootstrap.datepicker [role="footer"],
.gj-picker-bootstrap.datetimepicker [role="footer"],
.gj-picker-bootstrap.timepicker [role="footer"] {
    color: var(--pcr-text);
    background: var(--pcr-surface-muted);
    border-top: 1px solid var(--pcr-border);
}

.gj-picker-bootstrap [role="footer"] .btn,
.gj-picker-bootstrap [role="footer"] button {
    border-radius: var(--pcr-radius-sm);
    font-family: var(--pcr-font-family);
}

.gj-picker-bootstrap [role="footer"] .btn-primary,
.gj-picker-bootstrap [role="footer"] .btn-success,
.gj-picker-bootstrap [role="footer"] .btn-outline-secondary:hover,
.gj-picker-bootstrap [role="footer"] .btn-outline-secondary:focus {
    color: var(--pcr-on-accent);
    background: var(--pcr-accent);
    border-color: var(--pcr-accent);
    box-shadow: none;
}

/* Modos de hora / fecha y hora, mantenidos alineados con los mismos tokens de superficie. */
.gj-picker-bootstrap.timepicker [role="header"],
.gj-picker-bootstrap.datetimepicker [role="header"] {
    color: var(--pcr-text);
    background: var(--pcr-surface-muted);
}

.gj-picker-bootstrap [role="body"] [role="dial"] {
    color: var(--pcr-text);
    background: var(--pcr-surface-muted);
}

.gj-picker-bootstrap [role="body"] [role="hour"].selected,
.gj-picker-bootstrap [role="body"] [role="minute"].selected {
    color: var(--pcr-on-accent);
}

.gj-picker-bootstrap .arrow-begin,
.gj-picker-bootstrap [role="body"] [role="arrow"] {
    background: var(--pcr-accent);
}

.gj-picker-bootstrap .arrow-end {
    border-color: var(--pcr-accent);
}

/* -------------------------------------------------------------------------- */
/* Flatpickr — cargado globalmente; estilo visual PCR preparado para uso actual/futuro  */
/* -------------------------------------------------------------------------- */
.flatpickr-calendar {
    z-index: 1060;
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border: 1px solid var(--pcr-border);
    border-radius: var(--pcr-radius-md);
    box-shadow: var(--pcr-shadow-md);
    font-family: var(--pcr-font-family);
}

.flatpickr-months,
.flatpickr-month {
    color: var(--pcr-text);
    fill: var(--pcr-text);
    background: var(--pcr-surface-raised);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--pcr-text-muted);
    fill: var(--pcr-text-muted);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:focus,
.flatpickr-months .flatpickr-next-month:focus {
    color: var(--pcr-on-accent);
    fill: var(--pcr-on-accent);
    background: var(--pcr-accent);
    border-radius: var(--pcr-radius-sm);
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--pcr-text);
    background: transparent;
}

.flatpickr-weekdays {
    background: var(--pcr-surface-muted);
}

span.flatpickr-weekday {
    color: var(--pcr-text-muted);
    background: var(--pcr-surface-muted);
}

.flatpickr-day {
    color: var(--pcr-text);
    border-color: var(--pcr-border);
}

.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.inRange {
    color: var(--pcr-text);
    background: var(--pcr-action-soft);
    border-color: var(--pcr-action-soft);
}

.flatpickr-day.today {
    color: var(--pcr-accent);
    border-color: var(--pcr-accent);
    box-shadow: inset 0 0 0 1px var(--pcr-accent);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:focus,
.flatpickr-day.endRange:hover {
    color: var(--pcr-on-accent);
    background: var(--pcr-accent);
    border-color: var(--pcr-accent);
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay,
.flatpickr-day.notAllowed {
    color: var(--pcr-text-muted);
    opacity: .6;
}

.flatpickr-time {
    color: var(--pcr-text);
    background: var(--pcr-surface-raised);
    border-top-color: var(--pcr-border);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm,
.numInputWrapper {
    color: var(--pcr-text);
    background: var(--pcr-surface);
}

.flatpickr-time input:focus,
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.numInputWrapper:hover {
    color: var(--pcr-text);
    background: var(--pcr-action-soft);
}

.numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--pcr-text-muted);
}

.numInputWrapper span.arrowDown:after {
    border-top-color: var(--pcr-text-muted);
}

.flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--pcr-border);
}

.flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--pcr-surface-raised);
}

.flatpickr-calendar.arrowBottom:before {
    border-top-color: var(--pcr-border);
}

.flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--pcr-surface-raised);
}

/* El modo Oscuro sigue guiado por tokens; esta regla explícita documenta el comportamiento
 * de z-index/superficie sin duplicar todas las reglas de componentes del modo Claro. */
html[data-pcr-theme="dark"] .flatpickr-calendar,
html[data-pcr-theme="dark"] .gj-picker-bootstrap {
    color: var(--pcr-text);
}

/* Fin de la Fase 1.14. */

/* ========================================================================
 * Fase 1.15 — Gráficos y visualizaciones PCR
 * ======================================================================== */

/* Contenedor / canvas de Chart.js */
.pcr-chart,
.chartjs {
    position: relative;
    width: 100%;
    min-height: 250px;
}

.pcr-chart canvas,
.chartjs canvas {
    max-width: 100%;
}

/* Contenedores de gráficos utilizados por tarjetas tipo dashboard */
.pcr-chart-card {
    color: var(--pcr-text);
    background: var(--pcr-surface);
    border: var(--pcr-border-width) solid var(--pcr-border);
    border-radius: var(--pcr-radius-lg);
    box-shadow: var(--pcr-shadow-sm);
}

.pcr-chart-card .pcr-chart-card-header {
    color: var(--pcr-text);
    background: var(--pcr-surface-muted);
    border-bottom: var(--pcr-border-width) solid var(--pcr-border);
}

.pcr-chart-card .pcr-chart-card-title {
    color: var(--pcr-text);
    font-weight: 700;
}

.pcr-chart-card .pcr-chart-card-subtitle {
    color: var(--pcr-text-muted);
}

/* Mensaje emergente personalizado de Chart.js generado fuera del canvas */
.chartjs-custom-tooltip {
    color: var(--pcr-text) !important;
    background: var(--pcr-surface-raised) !important;
    border: var(--pcr-border-width) solid var(--pcr-border) !important;
    border-radius: var(--pcr-radius-sm) !important;
    box-shadow: var(--pcr-shadow-md);
}

.chartjs-custom-tooltip .chartjs-tooltip-key {
    border-radius: 2px;
}

/* Ayudas de texto de Chart.js */
.pcr-chart-legend,
.pcr-chart-caption,
.pcr-chart-note {
    color: var(--pcr-text-muted);
}

.pcr-chart-caption {
    font-size: .8125rem;
}

/* Estado visual genérico */
.pcr-chart-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: var(--pcr-text-muted);
    text-align: center;
    border: 1px dashed var(--pcr-border-strong);
    border-radius: var(--pcr-radius-md);
    background: var(--pcr-surface-muted);
}

/* Pantallas pequeñas: mantener utilizables las superficies de gráficos sin imponer una altura fija. */
@media (max-width: 767.98px) {
    .pcr-chart,
    .chartjs {
        min-height: 220px;
    }
}

/* Fin de la Fase 1.15. */

/* ========================================================================== */
/* Fase 1.17 — Estructura PCR adaptable y móvil                                     */
/* ========================================================================== */

/* Mantener cómodo el estructura PCR moderno en tablets y teléfonos sin
   cambiar el comportamiento heredado de StackedMenu ni la lógica de la aplicación. */

@media (max-width: 991.98px) {
    .app-main .page-inner {
        padding-inline: 1rem;
    }

    .page-title-bar {
        gap: .75rem;
        flex-wrap: wrap;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .top-bar-brand img {
        max-width: 132px;
        height: auto;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        margin-bottom: .75rem;
    }
}

@media (max-width: 767.98px) {
    .app-main .page-inner {
        padding: .875rem;
    }

    .page-title {
        font-size: 1.35rem;
        line-height: 1.25;
    }

    .page-title-bar .btn,
    .page-title-bar .btn-group {
        width: 100%;
    }

    .modal-dialog {
        margin: .5rem;
    }

    .modal-content {
        border-radius: var(--pcr-radius-md);
    }

    .modal-header,
    .modal-footer {
        padding: .75rem 1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .dataTables_wrapper .row > [class*="col-"] {
        width: 100%;
        margin-bottom: .5rem;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: center !important;
        justify-content: center !important;
    }

    .dataTables_wrapper .dataTables_paginate ul.pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    .dt-buttons,
    .dataTables_wrapper .dt-buttons {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
    }

    .dt-buttons .btn,
    .dataTables_wrapper .dt-buttons .btn {
        margin: 0 !important;
    }

    .select2-container,
    .select2-container .select2-selection--single {
        width: 100% !important;
    }

    .aside-footer .btn[data-toggle="skin"] {
        min-height: 2.5rem;
    }

    .btn-floated {
        right: 1rem;
        bottom: 1rem;
    }
}

@media (max-width: 575.98px) {
    .top-bar-brand img {
        max-width: 116px;
    }

    .top-bar-brand {
        min-width: 0;
    }

    .app-header .top-bar {
        min-height: 3.5rem;
    }

    .page-title {
        font-size: 1.2rem;
    }

    .app-footer {
        padding: .75rem 1rem;
        text-align: center;
    }

    .app-footer .list-inline-item {
        display: block;
        margin-right: 0;
        margin-bottom: .25rem;
    }

    .form-actions,
    .modal-footer,
    .card-footer {
        gap: .5rem;
    }

    .form-actions .btn,
    .modal-footer .btn,
    .card-footer .btn {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
        margin-top: .35rem;
    }

    .dataTables_wrapper .dataTables_length select {
        width: 100%;
        margin-top: .35rem;
    }

    .btn-floated {
        width: 3rem;
        height: 3rem;
        right: .75rem;
        bottom: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app .btn,
    .stacked-menu .menu-link,
    .pcr-menu-link {
        transition: none !important;
    }
}
/* ========================================================================== */
/* Fase 1.17.1 — Corrección rápida adaptable                                 */
/* Objetivo: corregir estructura móvil/tablet y asegurar scroll horizontal local.  */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Encabezado móvil: conservar el logo PCR sin duplicar el hamburguesa.         */
/* El tema heredado oculta .top-bar-brand por debajo de 768px. Solo mostramos su logo */
/* y lo colocamos junto al hamburguesa móvil existente, sin cambiar el marcado. */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .app-header .top-bar {
        position: relative;
    }

    .app-header .top-bar-brand {
        display: flex;
        position: absolute;
        top: 0;
        left: 2.85rem;
        z-index: 1032;
        width: 5.75rem;
        height: 3.5rem;
        padding: .35rem .25rem;
        margin: 0;
        background: transparent;
        align-items: center;
        justify-content: flex-start;
        pointer-events: none;
    }

    .app-header .top-bar-brand > .hamburger {
        display: none !important;
    }

    .app-header .top-bar-brand > a {
        display: block;
        width: 5.25rem;
        height: 100%;
        pointer-events: auto;
    }

    .app-header .top-bar-brand > a > img {
        display: block;
        width: auto;
        max-width: 100%;
        height: 2.7rem;
        object-fit: contain;
        object-position: left center;
    }

    /* Reservar espacio para que el control de búsqueda no quede debajo del logo. */
    .app-header .top-bar .top-bar-item-full {
        min-width: 0;
    }

    .app-header .top-bar .top-bar-item-full .top-bar-search {
        padding-left: 5.85rem;
    }
}

@media (max-width: 575.98px) {
    .app-header .top-bar-brand {
        left: 2.65rem;
        width: 5.1rem;
        padding-left: .15rem;
        padding-right: .15rem;
    }

    .app-header .top-bar-brand > a {
        width: 4.75rem;
    }

    .app-header .top-bar-brand > a > img {
        height: 2.45rem;
    }

    .app-header .top-bar .top-bar-item-full .top-bar-search {
        padding-left: 5.15rem;
    }
}

/* -------------------------------------------------------------------------- */
/* DataTables: contener las tablas anchas dentro de su propia área de desplazamiento en tablets */
/* y teléfonos. Esto evita que todo el documento sea más ancho que el */
/* área visible, preservando todas las columnas y todas las interacciones de DataTables. */
/* -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .app .dataTables_wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .app .dataTables_wrapper table.dataTable {
        min-width: 70rem;
        max-width: none;
    }

    .app .dataTables_wrapper > .row,
    .app .dataTables_wrapper > .row.dt-layout-row {
        min-width: 0;
    }
}

/* En anchos de teléfono la tabla permanece intencionalmente ancha, pero el área visible queda
   completamente contenido en la región de DataTables. */
@media (max-width: 575.98px) {
    .app .dataTables_wrapper table.dataTable {
        min-width: 68rem;
    }

    .app .dataTables_wrapper::-webkit-scrollbar {
        height: 8px;
    }

    .app .dataTables_wrapper::-webkit-scrollbar-thumb {
        background: var(--pcr-border-strong);
        border-radius: 999px;
    }

    .app .dataTables_wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Fin de la Fase 1.17.1. */

/* ========================================================================== */
/* Fase 1.17.2 — Desplazamiento adaptable de tablas + encabezado móvil compacto */
/* ========================================================================== */

/* El área visible horizontal pertenece a la TABLA, no al contenedor de DataTables.
   Por ello, la paginación, la información y los controles de acción permanecen fuera del desplazador. */
@media (max-width: 991.98px) {
    .app .dataTables_wrapper {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        overscroll-behavior-inline: auto;
    }

    .app .dataTables_wrapper .pcr-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--pcr-border-strong) transparent;
        overscroll-behavior-inline: contain;
        border-radius: var(--pcr-radius-md);
    }

    .app .dataTables_wrapper .pcr-table-scroll table.dataTable {
        min-width: 70rem;
        max-width: none;
        margin-bottom: 0;
    }

    .app .dataTables_wrapper .pcr-table-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .app .dataTables_wrapper .pcr-table-scroll::-webkit-scrollbar-thumb {
        background: var(--pcr-border-strong);
        border-radius: 999px;
    }

    .app .dataTables_wrapper .pcr-table-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
}

@media (max-width: 575.98px) {
    /* El cuadro de búsqueda global compite por el ancho muy limitado del encabezado móvil.
       La búsqueda de la aplicación sigue disponible desde su estructura de escritorio/tablet. */
    .app-header .top-bar .top-bar-item-full .top-bar-search,
    .app-header .top-bar .top-bar-item-full {
        display: none !important;
    }

    .app-header .top-bar-brand {
        width: 7.2rem;
        min-width: 7.2rem;
    }

    .app-header .top-bar-brand > a {
        width: 6.9rem;
    }

    .app-header .top-bar-brand > a > img {
        height: 2.85rem;
        max-width: 6.9rem;
    }
}

/* Fin de la Fase 1.17.2. */

/* ========================================================================== */
/* Fase 1.17.3 — Refinamiento adaptable del área visible de tablas              */
/* ========================================================================== */

/*
 * En anchos de tablet la tabla de DataTables debe permanecer más ancha que el área visible,
 * mientras que SOLO el área visible dedicado de la tabla se desplaza horizontalmente. DataTables
 * puede asignar un ancho en línea a la tabla, por lo que la regla adaptable utiliza deliberadamente
 * !important aquí para mantener el ancho intrínseco de la tabla mayor que el área visible
 * y restaurar el desplazamiento horizontal.
 */
@media (max-width: 1199.98px) {
    .app .dataTables_wrapper .pcr-table-scroll {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: auto;
        touch-action: pan-x;
    }

    .app .dataTables_wrapper .pcr-table-scroll > table.dataTable {
        width: 70rem !important;
        min-width: 70rem !important;
        max-width: none !important;
    }
}

/* En anchos de tablet/teléfono, la etiqueta del total de registros compite con el paginador.
   El paginador permanece completamente visible e interactivo en su propia fila. */
@media (max-width: 991.98px) {
    .app .dataTables_wrapper .dataTables_info {
        display: none !important;
    }

    .app .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: center !important;
        justify-content: center !important;
        float: none !important;
    }
}

/* En teléfonos, mantener la tabla cómodamente más ancha que el área visible para que el desplazamiento
   horizontal esté siempre disponible dentro de .pcr-table-scroll. */
@media (max-width: 575.98px) {
    .app .dataTables_wrapper .pcr-table-scroll > table.dataTable {
        width: 68rem !important;
        min-width: 68rem !important;
    }
}

/* Fin de la Fase 1.17.3. */
/* ========================================================================== */
/* Fase 1.20.3.1 — Corrección rápida de estabilidad visual de avatar          */
/*                                                                            */
/* Mantener la geometría del avatar independiente de la hoja de estilos del estilo visual Claro/Oscuro */
/* para que el cambio de tema nunca exponga la imagen de perfil en su tamaño                 */
/* intrínseco mientras se aplica el estilo visual de destino.                                        */
/* ========================================================================== */
.user-avatar {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0;
    vertical-align: middle;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
}

.user-avatar-md {
    width: 2.25rem;
    height: 2.25rem;
}

.user-avatar-sm {
    width: 1.5rem;
    height: 1.5rem;
}

.user-avatar-lg {
    width: 3rem;
    height: 3rem;
}

.user-avatar-xl {
    width: 5rem;
    height: 5rem;
}

.user-avatar-xxl {
    width: 8rem;
    height: 8rem;
}

.user-avatar img,
.user-avatar > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
}

/* Fin de la Fase 1.20.3.1. */

.logo { height: 48px; width: auto; object-fit: contain; }

/* -------------------------------------------------------------------------- */
/* Fase 1.23.1 — Refinamiento visual del acceso público                     */
/* -------------------------------------------------------------------------- */

/* El icono de la opción activa debe conservar el color de acento en ambos temas. */
.stacked-menu .menu-item.has-active > .menu-link > .menu-icon {
    color: var(--pcr-accent) !important;
}

/* Selector de gestión: compacto, limpio y alineado al extremo derecho. */
.sgi-gestion-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 4rem;
}

.sgi-gestion-control {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.sgi-gestion-label {
    margin: 0;
    color: var(--pcr-text-muted);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.sgi-gestion-select {
    width: 7rem;
    min-width: 7rem;
    height: 2.25rem;
    margin: 0;
    font-weight: 600;
}

/* Filtro País dentro del encabezado DataTables. */
.app .dataTables_wrapper table.dataTable thead th .sgi-pais-filter {
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
    height: 2rem;
    margin: 0 auto;
    padding: .2rem 1.45rem .2rem .45rem;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--pcr-radius-sm);
}

html[data-pcr-theme="dark"] .app .dataTables_wrapper table.dataTable thead th .sgi-pais-filter {
    color: var(--pcr-text);
    background-color: var(--pcr-surface-raised);
    border-color: var(--pcr-border);
}

@media (max-width: 767.98px) {
    .sgi-gestion-header {
        justify-content: stretch;
    }

    .sgi-gestion-control {
        width: 100%;
        justify-content: space-between;
    }

    .sgi-gestion-select {
        width: 8rem;
        min-width: 8rem;
    }
}


/* -------------------------------------------------------------------------- */
/* Fase 1.23.3 — Refinamiento visual público: contraste, hover y acceso      */
/* -------------------------------------------------------------------------- */

/* Acceso interno visible para visitantes: acento PCR al interactuar. */
.sgi-login-link {
    color: #FFFFFF !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: color var(--pcr-transition-fast), background-color var(--pcr-transition-fast), transform var(--pcr-transition-fast);
}

.sgi-login-link:hover,
.sgi-login-link:focus-visible {
    color: var(--pcr-accent) !important;
    background-color: color-mix(in srgb, var(--pcr-accent) 10%, transparent) !important;
    border-color: transparent !important;
    text-decoration: none !important;
}

.sgi-login-link:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcr-accent) 48%, transparent) !important;
    outline: none;
}

.sgi-login-link:active {
    color: var(--pcr-accent) !important;
    background-color: color-mix(in srgb, var(--pcr-accent) 16%, transparent) !important;
    transform: translateY(1px);
}

/* La superficie pública se mantiene limpia y consistente con ambos temas. */
.sgi-public-card {
    border-color: var(--pcr-border) !important;
    box-shadow: none;
}

.sgi-public-card .card-header {
    background-color: var(--pcr-surface) !important;
    border-bottom-color: var(--pcr-border) !important;
}

/* Hover discreto de filas: mejora la localización del registro sin alterar datos. */
.sgi-public-table > tbody > tr:hover > * {
    background-color: var(--pcr-accent-soft) !important;
    color: var(--pcr-text) !important;
}

.sgi-public-table > tbody > tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--pcr-accent);
}

/* Botón PDF: menos dominante en oscuro y con acento PCR al interactuar. */
.sgi-public-table .sgi-public-pdf {
    color: var(--pcr-text) !important;
    background-color: var(--pcr-surface) !important;
    border-color: var(--pcr-border) !important;
    transition: color var(--pcr-transition-fast), background-color var(--pcr-transition-fast), border-color var(--pcr-transition-fast), transform var(--pcr-transition-fast);
}

.sgi-public-table .sgi-public-pdf:hover,
.sgi-public-table .sgi-public-pdf:focus-visible {
    color: var(--pcr-on-primary) !important;
    background-color: var(--pcr-accent) !important;
    border-color: var(--pcr-accent) !important;
}

.sgi-public-table .sgi-public-pdf:active {
    color: var(--pcr-on-accent) !important;
    background-color: var(--pcr-accent) !important;
    border-color: var(--pcr-accent) !important;
    transform: translateY(1px);
}

/* Refinamiento del tema oscuro: separar superficie, filas y controles. */
html[data-pcr-theme="dark"] .sgi-public-card {
    background-color: #202020;
}

html[data-pcr-theme="dark"] .sgi-public-card .card-header {
    background-color: #242424 !important;
}

html[data-pcr-theme="dark"] .sgi-public-table > tbody > tr > * {
    background-color: #202020;
    color: var(--pcr-text);
    border-bottom-color: #373737;
}

html[data-pcr-theme="dark"] .sgi-public-table > tbody > tr:nth-of-type(odd) > * {
    background-color: #262626;
}

html[data-pcr-theme="dark"] .sgi-public-table > tbody > tr:hover > * {
    background-color: #302a25 !important;
}

html[data-pcr-theme="dark"] .sgi-public-card .dataTables_info,
html[data-pcr-theme="dark"] .sgi-public-card .dataTables_paginate,
html[data-pcr-theme="dark"] .sgi-public-card .dataTables_length {
    color: var(--pcr-text-muted) !important;
}

html[data-pcr-theme="dark"] .sgi-public-card .pagination .page-link {
    background-color: #242424;
    color: var(--pcr-text);
    border-color: #3A3A3A;
}

html[data-pcr-theme="dark"] .sgi-public-card .pagination .page-item.active .page-link {
    background-color: var(--pcr-accent);
    border-color: var(--pcr-accent);
    color: var(--pcr-on-accent);
}

html[data-pcr-theme="dark"] .sgi-public-card .pagination .page-item.disabled .page-link {
    background-color: #1D1D1D;
    color: #777;
    border-color: #303030;
}

@media (prefers-reduced-motion: reduce) {
    .sgi-login-link,
    .sgi-public-table .sgi-public-pdf {
        transition: none;
    }
}