/** Clasico: marcos grises, superficies blancas y controles sobrios.
 * Aislado por data-skin: cambiar de paleta restaura los estilos originales.
 */
.skin-card-clasico {
    --skin-card-primary: #525252;
    --skin-card-rgb: 82, 82, 82;
    --skin-card-gradient: linear-gradient(90deg, #ffffff, #f0f0f0 35%, #a6a6a6);
}

.skin-card-preview:focus-visible,
.theme-mode-card:focus-visible {
    outline: 3px solid var(--ds-accent);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    #modal-skin-selector .modal-body {
        padding: 0.75rem !important;
    }
    #modal-skin-selector .modal-header .avatar,
    #modal-skin-selector .theme-mode-card > .d-flex > span {
        flex-shrink: 0;
    }
    #modal-skin-selector .modal-header > .d-flex,
    #modal-skin-selector .modal-header > .d-flex > div:last-child {
        min-width: 0;
    }
    #modal-skin-selector .modal-title {
        white-space: normal;
        font-size: 1rem;
        line-height: 1.3;
    }
    #modal-skin-selector .modal-header .btn-close {
        align-self: flex-start;
        margin-left: 0.5rem;
    }
    #modal-skin-selector .modal-body > .mb-4 > .d-flex,
    #modal-skin-selector .theme-mode-card .d-flex.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    #modal-skin-selector .modal-footer {
        gap: 0.5rem;
        padding: 0.75rem !important;
    }
    #modal-skin-selector .modal-footer .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* Estructura compartida: los colores de estados clínicos se conservan. */
:root[data-skin="clasico"] body,
:root[data-skin="clasico"] .page-wrapper {
    background-color: var(--classic-workspace);
    color: var(--ds-text-main);
}

:root[data-skin="clasico"] .navbar,
:root[data-skin="clasico"] .navbar-vertical {
    background: var(--ds-surface-subtle);
    border-color: var(--ds-border);
    box-shadow: none;
}

:root[data-skin="clasico"] :is(.card, .integrador-subcard, .integrador-selector-box, .integrador-drawer-section) {
    background: var(--ds-surface-card) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-sm) !important;
    box-shadow: none !important;
}

:root[data-skin="clasico"] :is(.card-header, .card-footer, .modal-header, .modal-footer, .offcanvas-header) {
    background: var(--classic-heading) !important;
    color: var(--ds-text-main) !important;
    border-color: var(--ds-border) !important;
}

:root[data-skin="clasico"] :is(.modal-content, .offcanvas, .swal2-popup) {
    background: var(--ds-surface-subtle) !important;
    color: var(--ds-text-main) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius) !important;
    box-shadow: var(--ds-shadow-lg) !important;
}

:root[data-skin="clasico"] :is(.dropdown-menu, .list-group-item, .qv-card-section) {
    background: var(--ds-surface);
    color: var(--ds-text-main);
    border-color: var(--ds-border);
}

:root[data-skin="clasico"] body[data-skin="clasico"] :is(.form-control, .form-select, .select2-container .select2-selection, .select2-dropdown, .select2-search__field, .swal2-input, .swal2-textarea) {
    background-color: var(--ds-surface) !important;
    color: var(--ds-text-main) !important;
    border: 1px solid var(--classic-control-border) !important;
    border-radius: var(--ds-radius-sm) !important;
    box-shadow: none;
}

:root[data-skin="clasico"] body[data-skin="clasico"] .select2-container .select2-selection__rendered,
:root[data-skin="clasico"] body[data-skin="clasico"] .select2-container .select2-selection__rendered *,
:root[data-skin="clasico"] :is(.select2-results__option, .select2-results__option *) {
    color: var(--ds-text-main) !important;
}

:root[data-skin="clasico"] .form-control::placeholder,
:root[data-skin="clasico"] body[data-skin="clasico"] .select2-container .select2-selection__rendered .select2-selection__placeholder {
    color: var(--ds-text-muted) !important;
}

:root[data-skin="clasico"] body[data-skin="clasico"] :is(.form-control:disabled, .form-select:disabled, .select2-container--disabled .select2-selection) {
    background-color: var(--classic-heading) !important;
    color: var(--ds-text-muted) !important;
}

:root[data-skin="clasico"] .input-group-text {
    background: var(--classic-heading) !important;
    color: var(--ds-text-main) !important;
    border-color: var(--classic-control-border) !important;
}

:root[data-skin="clasico"] .btn {
    border-radius: var(--ds-radius-sm) !important;
    box-shadow: none !important;
}

:root[data-skin="clasico"] :is(.btn-primary, .swal2-confirm) {
    background: var(--ds-primary-gradient) !important;
    border-color: var(--ds-primary-dark) !important;
    color: #ffffff !important;
}

:root[data-skin="clasico"] :is(.btn-outline-primary, .btn-outline-secondary) {
    background: var(--ds-surface-subtle);
    border-color: var(--classic-control-border);
    color: var(--ds-text-main);
}

:root[data-skin="clasico"] :is(.btn-outline-primary, .btn-outline-secondary):hover {
    background: var(--classic-heading);
    border-color: var(--ds-text-muted);
}

:root[data-skin="clasico"] :is(.btn, .form-control, .form-select, .nav-link):focus-visible,
:root[data-skin="clasico"] .select2-container--focus .select2-selection {
    outline: 2px solid var(--ds-accent) !important;
    outline-offset: 2px;
}

:root[data-skin="clasico"] :is(.os-banner, .qv-hero) {
    background: var(--classic-heading);
    color: var(--ds-text-main);
    border: 1px solid var(--ds-border);
    box-shadow: none;
}

:root[data-skin="clasico"] :is(.card-header, .modal-header, .offcanvas-header) :is(.text-white, .text-primary),
:root[data-skin="clasico"] .offcanvas-header .offcanvas-title,
:root[data-skin="clasico"] .drawer-quickview .qv-name {
    color: var(--ds-text-main) !important;
}

:root[data-skin="clasico"] :is(.card-header, .modal-header, .offcanvas-header) .text-white-50,
:root[data-skin="clasico"] .drawer-quickview .qv-meta {
    color: var(--ds-text-muted) !important;
}

:root[data-skin="clasico"] .drawer-quickview .qv-avatar:not(.estado-paciente-color),
:root[data-skin="clasico"] .ml-help-header-icon {
    background: var(--ds-surface) !important;
    color: var(--ds-text-main) !important;
    border: 1px solid var(--classic-control-border) !important;
}

:root[data-skin="clasico"] :is(.modal-header, .card-header, .offcanvas-header) .btn-close {
    filter: none !important;
}

:root[data-skin="clasico"] .offcanvas-header :is(.btn-outline-light, .aka-header-mode-toggle, .btn-close-qv) {
    background: var(--ds-surface) !important;
    color: var(--ds-text-main) !important;
    border: 1px solid var(--classic-control-border) !important;
}

:root[data-skin="clasico"] .offcanvas-header :is(.btn-outline-light, .aka-header-mode-toggle, .btn-close-qv):hover {
    background: var(--ds-surface-hover) !important;
    border-color: var(--ds-text-muted) !important;
}

:root[data-skin="clasico"] .aka-credits-badge-wrap {
    background: #1e293b !important;
    border-color: #475569 !important;
}

/* Las grillas comparten blanco/gris, líneas finas y selección azul visible. */
:root[data-skin="clasico"] {
    --classic-grid-text: #000000;
}

:root[data-skin="clasico"][data-bs-theme="dark"] {
    --classic-grid-text: var(--ds-text-main);
}

:root[data-skin="clasico"] :is(.table-responsive, .table, .integrador-table, .dx-datagrid) {
    background: var(--ds-surface);
    color: var(--ds-text-main);
    border-color: var(--ds-border);
    --tblr-table-bg: var(--ds-surface);
    --bs-table-bg: var(--ds-surface);
    --tblr-table-color: var(--classic-grid-text);
    --tblr-table-striped-color: var(--classic-grid-text);
    --tblr-table-hover-color: var(--classic-grid-text);
    --tblr-table-active-color: var(--classic-grid-text);
    --bs-table-color: var(--classic-grid-text);
    --bs-table-striped-color: var(--classic-grid-text);
    --bs-table-hover-color: var(--classic-grid-text);
    --bs-table-active-color: var(--classic-grid-text);
}

:root[data-skin="clasico"] :is(.table, .integrador-table) thead th,
:root[data-skin="clasico"] .dx-datagrid-headers .dx-header-row > td {
    background: var(--classic-heading) !important;
    color: var(--classic-grid-text) !important;
    border: 1px solid var(--ds-border) !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

:root[data-skin="clasico"] :is(.table, .integrador-table) tbody td,
:root[data-skin="clasico"] .dx-datagrid-rowsview .dx-data-row > td {
    background: var(--ds-surface) !important;
    color: var(--classic-grid-text) !important;
    border: 1px solid var(--ds-border-subtle);
}

/* El modal tiene reglas por ID para zebra/selección y utilidades de texto blanco. */
:root[data-skin="clasico"] body[data-skin="clasico"] #modalAutorizacion :is(table, .table) :is(th, td, .text-body),
:root[data-skin="clasico"] :is(.table, .integrador-table) :is(th, td) :is(.text-white, .text-white-50, .text-light, .text-body):not(.btn):not(.badge),
:root[data-skin="clasico"] :is(.table, .integrador-table) .badge[class*="bg-opacity-"] {
    color: var(--classic-grid-text) !important;
    --bs-table-color-type: var(--classic-grid-text) !important;
    --bs-table-color-state: var(--classic-grid-text) !important;
    --bs-table-active-color: var(--classic-grid-text) !important;
    --tblr-table-active-color: var(--classic-grid-text) !important;
}

:root[data-skin="clasico"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--ds-surface) !important;
}

:root[data-skin="clasico"] :is(.table, .integrador-table) tbody tr:hover > td {
    background-color: var(--ds-surface-hover) !important;
}

:root[data-skin="clasico"] .dx-datagrid-rowsview .dx-selection > td,
:root[data-skin="clasico"] .select2-results__option--highlighted[aria-selected],
:root[data-skin="clasico"] .select2-results__option--highlighted[aria-selected] * {
    background: var(--classic-selection) !important;
    color: var(--classic-selection-text) !important;
}

/* Badges con fondo sólido en skin Clásico: contraste garantizado (texto blanco sobre fondos saturados/oscuros) */
:root[data-skin="clasico"] .badge.bg-danger,
:root[data-skin="clasico"] .badge.bg-success,
:root[data-skin="clasico"] .badge.bg-primary,
:root[data-skin="clasico"] .badge.bg-secondary,
:root[data-skin="clasico"] .badge.bg-dark,
:root[data-skin="clasico"] .badge.bg-purple,
:root[data-skin="clasico"] .badge.bg-red,
:root[data-skin="clasico"] .badge.bg-green,
:root[data-skin="clasico"] .badge.bg-blue,
:root[data-skin="clasico"] .badge.text-bg-danger,
:root[data-skin="clasico"] .badge.text-bg-success,
:root[data-skin="clasico"] .badge.text-bg-primary,
:root[data-skin="clasico"] .badge.text-bg-secondary,
:root[data-skin="clasico"] .badge.text-bg-dark {
    --tblr-badge-color: #ffffff !important;
    --bs-badge-color: #ffffff !important;
    color: #ffffff !important;
}

:root[data-skin="clasico"] .badge.bg-danger *,
:root[data-skin="clasico"] .badge.bg-success *,
:root[data-skin="clasico"] .badge.bg-primary *,
:root[data-skin="clasico"] .badge.bg-secondary *,
:root[data-skin="clasico"] .badge.bg-dark *,
:root[data-skin="clasico"] .badge.bg-purple *,
:root[data-skin="clasico"] .badge.bg-red *,
:root[data-skin="clasico"] .badge.bg-green *,
:root[data-skin="clasico"] .badge.bg-blue * {
    color: #ffffff !important;
}

:root[data-skin="clasico"] :is(.badge.bg-warning, .badge.text-bg-warning, .integrador-badge-modulo),
:root[data-skin="clasico"] :is(.badge.bg-warning, .badge.text-bg-warning, .integrador-badge-modulo) * {
    --bs-badge-color: #000 !important;
    --tblr-badge-color: #000 !important;
    color: #000 !important;
}

:root[data-skin="clasico"] .integrador-badge-modulo {
    background-color: #fff3cd !important;
}

/* Integrador: paciente blanco, área de trabajo gris y subpaneles delimitados. */
:root[data-skin="clasico"] .integrador-hero-card {
    background: var(--ds-surface) !important;
}

:root[data-skin="clasico"] .integrador-hero-card .min-w-0 {
    min-width: 0;
}

@media (max-width: 575.98px) {
    :root[data-skin="clasico"] .integrador-hero-card :is(.hero-title, .badge) {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

:root[data-skin="clasico"] #heroAvatar {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius) !important;
}

:root[data-skin="clasico"] .integrador-main-card > .card-header {
    background: var(--ds-surface) !important;
}

:root[data-skin="clasico"] .integrador-main-card .nav-tabs {
    gap: 3px;
}

:root[data-skin="clasico"] .integrador-main-card .nav-tabs .nav-link {
    background: var(--classic-heading);
    color: var(--ds-text-main);
    border: 1px solid var(--ds-border);
    border-bottom: 3px solid transparent;
    border-radius: 3px 3px 0 0;
}

:root[data-skin="clasico"] .integrador-main-card .nav-tabs .nav-link:hover {
    background: var(--ds-surface-hover);
}

:root[data-skin="clasico"] .integrador-main-card .nav-tabs .nav-link.active {
    background: var(--ds-surface);
    border-bottom-color: var(--ds-accent);
    color: var(--ds-text-main);
}

:root[data-skin="clasico"] .integrador-main-card .nav-tabs .nav-link i {
    color: inherit !important;
}

:root[data-skin="clasico"] :is(.integrador-subcard-header, .integrador-drawer-section-title, .selector-title) {
    color: var(--ds-text-main) !important;
    text-transform: none;
    letter-spacing: normal;
}

:root[data-skin="clasico"] :is(#tabPres_observaciones, .integrador-list-group-item) {
    background: var(--ds-surface) !important;
    color: var(--ds-text-main) !important;
    border-color: var(--ds-border) !important;
}

:root[data-skin="clasico"] :is(.integrador-hero-card .hero-title, .integrador-hero-card .hero-meta-item b, .integrador-selector-box .selector-meta b, .integrador-kv-value) {
    color: var(--ds-text-main) !important;
}

:root[data-skin="clasico"] :is(.integrador-hero-card .hero-meta-item, .integrador-selector-box .selector-meta, .integrador-kv-label) {
    color: var(--ds-text-muted) !important;
}

:root[data-skin="clasico"][data-bs-theme="dark"] .text-primary {
    color: var(--ds-text-main) !important;
}

:root[data-skin="clasico"][data-bs-theme="dark"] :is(.modal-header, .card-header, .offcanvas-header) .btn-close {
    filter: invert(1) !important;
}