/* MEDITEL: superficie clara única y jerarquía visual compartida. */
:root {
    --primary: #245a83;
    --primary-dark: #193e5d;
    --primary-light: #477798;
    --turquoise: #dce9f1;
    --teal: #477798;
    --color-primary: #245a83;
    --color-primary-darkest: #193e5d;
    --color-bg: #f6f8fa;
    --color-bg-subtle: #f6f8fa;
    --color-bg-muted: #edf2f6;
    --color-surface: #fff;
    --color-border: #dfe6ec;
    --color-border-light: #e9eef2;
    --color-text: #203247;
    --color-text-secondary: #526579;
    --color-text-muted: #687b8c;
    --border: #dfe6ec;
    --shadow: rgba(27, 55, 75, .08);
    --sidebar-width: 252px;
    --header-height: 64px;
    --content-max-width: 1520px;
}

html, body, .dashboard-page, .main-content {
    background: #f6f8fa !important;
    color: #203247;
}

.sidebar, .global-header-bar {
    background: #fff !important;
    box-shadow: none !important;
    border-color: #e3e9ee !important;
}
.sidebar { border-right: 1px solid #e3e9ee; }
.sidebar-header { padding: 20px 18px; }
.sidebar-nav { padding: 16px 10px 24px; }
.sidebar .nav-section { margin-bottom: 18px; }
.sidebar .nav-title { color: #5d7184 !important; letter-spacing: .07em; }
.sidebar .nav-item {
    border-radius: 10px !important;
    color: #4d6073 !important;
    min-height: 40px;
    margin: 2px 0;
}
.sidebar .nav-item:hover { background: #f2f6f9 !important; color: #245a83 !important; }
.sidebar .nav-item.active {
    background: #eaf2f8 !important;
    color: #1d547d !important;
    box-shadow: inset 3px 0 #326b95 !important;
}
.sidebar .nav-icon-wrapper, .sidebar .logo-icon {
    background: #eaf2f8 !important;
    color: #245a83 !important;
    box-shadow: none !important;
}
.sidebar .nav-icon-wrapper i, .sidebar .logo-icon i { color: #245a83 !important; }
.sidebar .nav-item.active .nav-icon-wrapper { background: #dceaf3 !important; color: #245a83 !important; }
.sidebar .nav-item.active .nav-icon-wrapper i { color: #245a83 !important; }
/* Cada opción conserva su espacio y los nombres largos pueden ocupar dos líneas. */
.sidebar:not(.compact) .sidebar-nav { padding: 16px 12px 28px; }
.sidebar:not(.compact) .nav-section { padding: 0; margin-bottom: 22px; }
.sidebar:not(.compact) .nav-title { padding: 4px 10px 8px; margin-bottom: 4px; }
.sidebar:not(.compact) .nav-item {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0 0 6px;
    padding: 8px 10px;
    gap: 10px;
    align-items: center;
    box-shadow: none;
}
.sidebar:not(.compact) .nav-item:hover { transform: none; }
.sidebar:not(.compact) .nav-item .nav-icon-wrapper {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}
.sidebar:not(.compact) .nav-item > span:not(.nav-badge):not(.nav-indicator) {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
    line-height: 1.35;
}
.global-header-bar { padding: 0 22px; }
.global-action-btn {
    background: #fff !important;
    border: 1px solid #e3e9ee !important;
    color: #42617b !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
.global-action-btn:hover { background: #f2f6f9 !important; }
.global-action-btn i { color: #42617b !important; }
.global-header-bar .header-clock, .global-header-bar .header-datetime {
    background: #f2f6f9 !important;
    color: #314c63 !important;
    box-shadow: none !important;
}

/* Texto secundario y acciones del tablero: contraste suficiente sobre blanco. */
#page-dashboard .notif-time,
#page-dashboard .email-time,
#page-dashboard .email-preview,
#page-dashboard .chat-time,
#page-dashboard .chat-last-message { color: #526579 !important; }
#page-dashboard .btn-notif.btn-accept { background: #087b45 !important; color: #fff !important; }
#page-dashboard .btn-notif.btn-join { background: #245a83 !important; color: #fff !important; }
#page-dashboard .btn-notif.btn-review { background: #986100 !important; color: #fff !important; }
#page-dashboard .status-text.online { color: #1d6484 !important; }

.main-content :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.sidebar :is(a, button):focus-visible {
    outline: 3px solid #397aa3 !important;
    outline-offset: 2px !important;
}

.main-content > .page-container.active { padding: 0 !important; }
.main-content > .page-container > * { max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; }
.dashboard-page-content {
    max-width: 1520px !important;
    padding: 32px 32px 64px !important;
}
#page-dashboard > .dashboard-section-heading,
#page-dashboard > .stats-grid,
#page-dashboard > .dashboard-more,
#page-dashboard > .charts-row,
#page-dashboard > .tables-row {
    width: calc(100% - 64px) !important;
    max-width: 1456px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.dashboard-intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 0 0 24px;
}
.dashboard-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #5b7890;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.dashboard-intro h1 {
    color: #203247;
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.18;
}
.dashboard-intro p, .dashboard-section-heading p {
    margin-top: 8px;
    color: #687b8c;
    font-size: 13px;
    line-height: 1.45;
}
.dashboard-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 32px 0 16px;
}
.dashboard-section-heading h2 {
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: #203247;
}

.dashboard-topbar {
    position: static !important;
    padding: 18px 20px !important;
    margin-bottom: 0 !important;
    border: 1px solid #e2e9ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(27,55,75,.03) !important;
    backdrop-filter: none !important;
    gap: 16px !important;
}
.topbar-filters { gap: 12px !important; flex: 1 1 660px; }
.filter-group { min-width: 154px; flex: 1 1 154px; gap: 7px; }
.filter-group label { color: #687b8c !important; font-size: 11px !important; }
.filter-group label i { color: #5b7890 !important; }
.filter-select, .topbar-search input, .chart-period-select {
    min-height: 40px;
    background-color: #fff !important;
    border: 1px solid #dfe6ec !important;
    border-radius: 9px !important;
    color: #31475b !important;
    box-shadow: none !important;
}
.filter-select:focus, .topbar-search input:focus, .chart-period-select:focus,
.main-content input:focus, .main-content select:focus, .main-content textarea:focus {
    outline: 2px solid #b8cfdf !important;
    outline-offset: 1px;
    box-shadow: none !important;
}
.filter-buttons { padding-top: 19px; gap: 8px; }
.btn-filter-primary, .btn-filter-action {
    min-height: 40px;
    border-radius: 9px !important;
    box-shadow: none !important;
    transform: none !important;
}
.btn-filter-primary { background: #245a83 !important; color: #fff !important; }
.btn-filter-action { background: #fff !important; border: 1px solid #dfe6ec !important; }

#page-dashboard .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: auto !important;
    margin-bottom: 0 !important;
}
#page-dashboard .stat-card-modern {
    min-height: 178px;
    border: 1px solid #e2e9ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(27,55,75,.03) !important;
    transform: none !important;
}
#page-dashboard .stat-card-modern:hover {
    border-color: #b6ccdb !important;
    box-shadow: 0 7px 20px rgba(27,55,75,.08) !important;
}
#page-dashboard .card-accent { display: none !important; }
#page-dashboard .card-main { padding: 18px 18px 10px !important; }
#page-dashboard .card-top { gap: 12px !important; margin-bottom: 12px !important; }
#page-dashboard .icon-wrapper {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: #eaf2f8 !important;
    color: #245a83 !important;
    box-shadow: none !important;
    font-size: 18px !important;
}
#page-dashboard .card-label { color: #637587 !important; font-weight: 600 !important; }
#page-dashboard .card-value { color: #203247 !important; line-height: 1.12 !important; }
#page-dashboard .stat-change, #page-dashboard .stat-period,
#page-dashboard .progress-text { color: #62788b !important; }
#page-dashboard .progress-bar-new { background: #edf2f6 !important; }
#page-dashboard .progress-fill-new { background: #608bab !important; }
#page-dashboard .card-actions { border-top: 1px solid #edf1f4 !important; padding: 8px 18px !important; }
#page-dashboard .btn-analysis {
    color: #245a83 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 5px 0 !important;
    min-height: 28px;
    width: auto !important;
    white-space: nowrap;
}
#page-dashboard .btn-analysis:hover { text-decoration: underline; transform: none !important; }

.dashboard-more {
    margin-top: 16px;
    border: 1px solid #e2e9ee;
    border-radius: 12px;
    background: #fff;
}
.dashboard-more > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    color: #29465c;
    font-size: 14px;
    font-weight: 700;
}
.dashboard-more > summary::-webkit-details-marker { display: none; }
.dashboard-more > summary:focus-visible { outline: 2px solid #b8cfdf; outline-offset: 2px; }
.dashboard-more-hint { color: #718394; font-size: 12px; font-weight: 500; }
.dashboard-more-hint i { margin-left: 8px; transition: transform .2s; }
.dashboard-more[open] .dashboard-more-hint i { transform: rotate(180deg); }
.dashboard-more .stats-grid { padding: 0 16px 16px; }

#page-dashboard .charts-row {
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr) !important;
    gap: 16px !important;
    width: auto !important;
    margin-bottom: 16px !important;
}
#page-dashboard .tables-row { gap: 16px !important; width: auto !important; }
#page-dashboard .chart-card, #page-dashboard .table-card {
    border: 1px solid #e2e9ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(27,55,75,.03) !important;
    overflow: hidden;
    transform: none !important;
}
#page-dashboard .chart-header, #page-dashboard .table-header {
    min-height: 62px;
    padding: 16px 20px !important;
    border-bottom: 1px solid #edf1f4 !important;
    background: #fff !important;
}
#page-dashboard .chart-header h3, #page-dashboard .table-header h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #29465c !important;
}
#page-dashboard .chart-header h3 i, #page-dashboard .table-header h3 i { color: #5d809b !important; }
#page-dashboard .chart-body { min-height: 300px; padding: 20px !important; }
#page-dashboard .chart-body canvas { max-height: 280px; }
#page-dashboard .data-table-modern th { background: #f7f9fb !important; color: #637587 !important; }
#page-dashboard .data-table-modern td { border-color: #edf1f4 !important; }

.db-capacity-panel {
    margin: 20px 0 4px !important;
    padding: 20px !important;
    background: #fff !important;
    border: 1px solid #e2e9ee !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(27,55,75,.03) !important;
}
.db-capacity-panel[hidden] { display: none !important; }
.db-capacity-heading h2 { color: #29465c !important; }
.db-capacity-heading button {
    background: #fff !important;
    color: #245a83 !important;
    border: 1px solid #dfe6ec !important;
}
.db-capacity-grid > div { background: #f6f8fa !important; }
.db-capacity-grid strong { color: #203247 !important; }
.db-capacity-panel.is-unavailable .db-capacity-grid,
.db-capacity-panel.is-unavailable .db-capacity-note { display: none !important; }
.db-capacity-panel.is-unavailable { padding: 16px 20px !important; }

/* Superficies de los módulos: mismos bordes, tipografía y separación. */
.main-content .card, .main-content .module-card, .main-content .content-card,
.main-content .config-card, .main-content .user-card, .main-content .usuario-card,
.main-content .stat-card, .main-content .metric-card {
    border-color: #e2e9ee !important;
    box-shadow: 0 2px 8px rgba(27,55,75,.035) !important;
}
.main-content .data-table thead th, .main-content .tbl-premium thead th {
    background: #f6f8fa !important;
    color: #53687b !important;
}

/* Encabezados de módulos: información clara en vez de banners saturados. */
#page-usuarios .usu-module-header,
#page-contratos .module-header,
.main-content .module-header {
    background: #fff !important;
    color: #203247 !important;
    border: 1px solid #e2e9ee !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(27,55,75,.035) !important;
}
#page-usuarios .usu-module-header::before,
#page-contratos .module-header::before,
.main-content .module-header::before { display: none !important; }
#page-usuarios .usu-header-text h1,
#page-contratos .module-header-info h2,
.main-content .module-header h1,
.main-content .module-header h2 { color: #203247 !important; text-shadow: none !important; }
#page-usuarios .usu-header-text p,
#page-contratos .module-header-info p,
.main-content .module-header p { color: #64788a !important; }
.main-content .module-header .header-text h1 { color: #203247 !important; text-shadow: none !important; }
.main-content .module-header .header-text p { color: #526579 !important; text-shadow: none !important; }
.main-content .module-header .header-icon-box {
    background: #eaf2f8 !important;
    color: #245a83 !important;
    border: 1px solid #dce8f0 !important;
}
.main-content .module-header .header-icon-box i { color: #245a83 !important; }
.main-content .module-header .header-stat-box {
    background: #f8fafb !important;
    border: 1px solid #dfe6ec !important;
    color: #203247 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.main-content .module-header .header-stat-box .stat-value,
.main-content .module-header .header-stat-box .stat-number,
.main-content .module-header .header-stat-box i { color: #203247 !important; text-shadow: none !important; }
.main-content .module-header .header-stat-box .stat-label { color: #526579 !important; }
.main-content .module-header .btn-header-action {
    background: #fff !important;
    color: #245a83 !important;
    border: 1px solid #cbdbe6 !important;
    backdrop-filter: none !important;
}
#page-usuarios .usu-header-icon,
#page-contratos .module-header-icon,
.main-content .module-header-icon {
    background: #eaf2f8 !important;
    color: #245a83 !important;
    box-shadow: none !important;
}
#page-usuarios .usu-stat-box,
#page-contratos .header-stat-box {
    background: #f6f8fa !important;
    border: 1px solid #e6ecf0 !important;
    color: #29465c !important;
    box-shadow: none !important;
}
#page-usuarios .usu-stat-number,
#page-contratos .header-stat-box .stat-number { color: #203247 !important; }
#page-usuarios .usu-stat-label,
#page-contratos .header-stat-box .stat-label { color: #687b8c !important; }
#page-usuarios .usu-btn-header { background: #fff !important; color: #245a83 !important; border: 1px solid #dfe6ec !important; box-shadow: none !important; }
#page-usuarios .usu-btn-header-accent { background: #245a83 !important; color: #fff !important; }

/* Encabezados de módulos que todavía conservaban la paleta oscura. */
#page-admisiones .adm-module-header,
#page-diagnosticos .dx-module-header,
#page-medicamentos .med-module-header,
#page-telemedicina-no-interactiva .async-header {
    background: #fff !important;
    background-image: none !important;
    color: #203247 !important;
    border: 1px solid #dfe6ec !important;
    box-shadow: 0 4px 18px rgba(27,55,75,.05) !important;
}
#page-admisiones .adm-module-header::before,
#page-admisiones .adm-module-header::after,
#page-telemedicina-no-interactiva .async-header::before { display: none !important; }
#page-admisiones .adm-header-text h1,
#page-diagnosticos .dx-header-text h1,
#page-medicamentos .med-header-text h1,
#page-telemedicina-no-interactiva .async-header .title-info h1 {
    color: #203247 !important;
    text-shadow: none !important;
}
#page-admisiones .adm-header-text p,
#page-diagnosticos .dx-header-text p,
#page-medicamentos .med-header-text p,
#page-telemedicina-no-interactiva .async-header .title-info p { color: #526579 !important; opacity: 1 !important; text-shadow: none !important; }
#page-admisiones .adm-header-icon,
#page-diagnosticos .dx-header-icon,
#page-medicamentos .med-header-icon,
#page-telemedicina-no-interactiva .async-header .icon-container {
    background: #eaf2f8 !important;
    color: #245a83 !important;
    border: 1px solid #dce8f0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
#page-admisiones .adm-stat-box,
#page-diagnosticos .dx-stat-box,
#page-medicamentos .med-stat-box,
#page-telemedicina-no-interactiva .stat-badge {
    background: #f8fafb !important;
    background-image: none !important;
    border: 1px solid #dfe6ec !important;
    color: #203247 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
#page-admisiones .adm-stat-number,
#page-diagnosticos .dx-stat-number,
#page-medicamentos .med-stat-number,
#page-telemedicina-no-interactiva .stat-badge span { color: #203247 !important; }
#page-admisiones .adm-stat-label,
#page-diagnosticos .dx-stat-label,
#page-medicamentos .med-stat-label,
#page-telemedicina-no-interactiva .stat-badge small { color: #526579 !important; opacity: 1 !important; }
#page-admisiones .adm-btn-header,
#page-diagnosticos .dx-btn-header,
#page-medicamentos .med-btn-header,
#page-telemedicina-no-interactiva .btn-header-action.secondary {
    background: #fff !important;
    color: #245a83 !important;
    border: 1px solid #cbdbe6 !important;
    box-shadow: none !important;
}
#page-telemedicina-no-interactiva .btn-header-action.primary { background: #245a83 !important; color: #fff !important; }
#page-admisiones .adm-btn-header:hover,
#page-diagnosticos .dx-btn-header:hover,
#page-medicamentos .med-btn-header:hover { background: #edf4f8 !important; transform: none !important; }
#page-diagnosticos .dx-context-bar,
#page-medicamentos .med-context-bar { background: #fff !important; border-color: #e3e9ee !important; }
#page-diagnosticos .dx-tab-btn,
#page-medicamentos .med-tab-btn { color: #526579 !important; }
#page-diagnosticos .dx-tab-btn:hover,
#page-medicamentos .med-tab-btn:hover { background: #f2f6f9 !important; color: #245a83 !important; }
#page-diagnosticos .dx-tab-btn.active,
#page-medicamentos .med-tab-btn.active { background: #eaf2f8 !important; color: #1d547d !important; border-bottom-color: #326b95 !important; }
#page-diagnosticos .dx-tab-badge { background: #e2ebf1 !important; color: #245a83 !important; }
#page-usuarios .usu-context-bar { background: transparent !important; border-color: #edf1f4 !important; }
#page-usuarios .usu-ctx-chip { background: #fff !important; color: #526579 !important; border: 1px solid #dfe6ec !important; box-shadow: none !important; }
#page-usuarios .usu-ctx-chip.active { background: #eaf2f8 !important; color: #245a83 !important; border-color: #bfd2e0 !important; }
#page-usuarios .usu-tabs-container,
#page-usuarios .usu-main-content,
#page-contratos .contratos-container { background: #fff !important; }
#page-usuarios .usu-tabs-container { border-bottom: 1px solid #e2e9ee !important; }
#page-contratos .main-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    background: #fff !important;
    border: 1px solid #e2e9ee !important;
    box-shadow: none !important;
}
#page-contratos .main-tabs .tab-btn {
    flex: 1 1 145px !important;
    min-width: 0;
    background: #fff !important;
    color: #526579 !important;
    border: 1px solid #e5ebef !important;
    box-shadow: none !important;
}
#page-contratos .main-tabs .tab-btn.active {
    background: #eaf2f8 !important;
    color: #245a83 !important;
    border-color: #bfd2e0 !important;
}
#page-contratos .main-tabs .tab-btn span { display: inline !important; }
#page-contratos .main-tabs .tab-btn .tab-badge { background: #edf2f6 !important; color: #526579 !important; }

@media (max-width: 1200px) {
    #page-dashboard .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #page-dashboard .charts-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 680px) {
    .global-header-bar { padding: 0 14px !important; }
    #page-dashboard :is(.notifications-panel, .email-panel, .chat-panel, .settings-panel) {
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
    }
    #page-dashboard .email-tabs { max-width: 100%; overflow-x: auto; box-sizing: border-box; padding: 0 8px; }
    #page-dashboard .email-tab { flex: 0 0 auto; padding: 10px 8px; }
    .global-actions-left { gap: 8px !important; }
    .global-actions-left > .global-action-btn:nth-child(1),
    .global-actions-left > .global-action-btn:nth-child(2),
    .global-actions-left > .global-action-btn:nth-child(5),
    .global-actions-left > .global-divider,
    .global-datetime { display: none !important; }
    .dashboard-page-content { padding: 20px 16px 48px !important; }
    #page-dashboard > .dashboard-section-heading,
    #page-dashboard > .stats-grid,
    #page-dashboard > .dashboard-more,
    #page-dashboard > .charts-row,
    #page-dashboard > .tables-row { width: calc(100% - 32px) !important; }
    .dashboard-intro { margin-bottom: 18px; }
    .dashboard-section-heading { align-items: start; flex-direction: column; gap: 3px; margin-top: 26px; }
    .dashboard-section-heading p { margin-top: 0; }
    .dashboard-topbar { padding: 16px !important; }
    .dashboard-topbar .topbar-actions { display: none !important; }
    .topbar-filters { flex-basis: 100%; }
    .filter-group { flex-basis: 100%; }
    .filter-buttons { padding-top: 0; }
    #page-dashboard .stats-grid, #page-dashboard .tables-row { grid-template-columns: 1fr !important; }
    #page-dashboard .stat-card-modern { min-height: 160px; }
    #page-dashboard .charts-row { grid-template-columns: 1fr !important; }
    .dashboard-more > summary { align-items: start; flex-direction: column; gap: 4px; }
    #page-contratos .module-header-content { display: block !important; text-align: left !important; }
    #page-contratos .module-header-info { margin-bottom: 16px; }
    #page-contratos .module-header-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    #page-contratos .module-header-stats .header-stat-box { min-width: 0 !important; }
    #page-contratos .main-tabs .tab-btn { flex-basis: calc(50% - 4px) !important; }
    #page-contratos .main-tabs .tab-btn .tab-badge { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    #page-dashboard .stat-card-modern, .dashboard-more-hint i { transition: none !important; }
}

/* La pantalla de acceso comparte la misma superficie blanca. */
body.login-page {
    background: #f6f8fa !important;
    color: #203247;
}
.login-page .bg-animation, .login-page .grid-pattern, .login-page .bubbles-layer { display: none !important; }
.login-page .login-wrapper {
    max-width: 1060px;
    min-height: 590px;
    background: #fff !important;
    border: 1px solid #e2e9ee !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 50px rgba(27,55,75,.08) !important;
    backdrop-filter: none !important;
}
.login-page .login-branding, .login-page .login-form-panel {
    background: #fff !important;
    padding: clamp(28px, 4vw, 54px) !important;
}
.login-page .login-branding { border-right: 1px solid #e9eef2 !important; }
.login-page .login-branding::before, .login-page .login-form-panel::before,
.login-page .form-header::before, .login-page .form-header::after,
.login-page .logo-icon::after { display: none !important; }
.login-page .logo-icon, .login-page .feature-item i {
    background: #eaf2f8 !important;
    color: #245a83 !important;
    box-shadow: none !important;
}
.login-page .logo-text h1, .login-page .branding-tagline,
.login-page .branding-tagline span, .login-page .form-header h2 {
    color: #203247 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
.login-page .logo-text span, .login-page .branding-description,
.login-page .form-header p, .login-page .form-group label,
.login-page .feature-item { color: #607488 !important; }
.login-page .feature-item {
    background: #f8fafb !important;
    border: 1px solid #e5ecf0 !important;
    box-shadow: none !important;
    transform: none !important;
}
.login-page .form-header {
    padding: 0 !important;
    margin-bottom: 28px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.login-page .form-header-badge {
    color: #245a83 !important;
    background: #eaf2f8 !important;
    border: 0 !important;
}
.login-page .form-header-badge i { color: #245a83 !important; }
.login-page .input-wrapper input {
    background: #fff !important;
    color: #203247 !important;
    border: 1px solid #dfe6ec !important;
    box-shadow: none !important;
}
.login-page .input-wrapper input:focus { outline: 2px solid #b8cfdf !important; outline-offset: 1px; }
.login-page .btn-login {
    background: #245a83 !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
.login-page .btn-login::before { display: none !important; }
.login-page .btn-login:hover { background: #1d4e73 !important; transform: none !important; }
.login-page .security-badge, .login-page .login-footer p { color: #718394 !important; }

@media (max-width: 900px) {
    .login-page .login-branding { display: none !important; }
    .login-page .login-wrapper { max-width: 520px; min-height: 0; }
}
@media (max-width: 680px) {
    .login-page .login-wrapper { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
    .login-page .login-form-panel { padding: 28px 20px 40px !important; }
}

/* Los módulos comparten un ancho móvil; las acciones no deben quedar fuera de la vista. */
@media (max-width: 680px) {
    #page-configuracion .page-header-config {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px;
        padding: 20px 16px !important;
        background: #fff !important;
    }
    #page-configuracion .page-header-config .header-left,
    #page-configuracion .page-header-config .header-actions {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }
    #page-configuracion .page-header-config .header-actions .btn {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #page-configuracion .config-tabs { gap: 6px; padding: 10px 16px !important; }
    #page-configuracion .config-tab { flex: 0 0 auto; padding: 10px 12px !important; }
    #page-configuracion .config-tab span:not(.tab-badge):not(.tab-badge-new) { display: inline !important; }
    #page-configuracion .config-content { padding: 20px 16px !important; }
    #page-configuracion .toolbar-left,
    #page-configuracion .toolbar-right,
    #page-configuracion .toolbar-left > * { width: 100% !important; min-width: 0 !important; }
    #page-configuracion .stats-row { grid-template-columns: 1fr !important; }
    #page-configuracion .stat-mini { min-width: 0 !important; }

    #page-telemedicina-no-interactiva .async-header .header-content,
    #page-teleapoyo .module-header.teleapoyo-header .header-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
    }
    #page-telemedicina-no-interactiva .header-title-section,
    #page-teleapoyo .header-info { width: 100% !important; min-width: 0 !important; }
    #page-telemedicina-no-interactiva .header-stats-row,
    #page-teleapoyo .module-header.teleapoyo-header .header-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }
    #page-telemedicina-no-interactiva .header-stats-row .stat-badge,
    #page-teleapoyo .header-stats-row .header-stat-box {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #page-telemedicina-no-interactiva .header-actions,
    #page-teleapoyo .module-header.teleapoyo-header .header-actions {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-column: auto !important;
        justify-self: stretch !important;
        justify-content: stretch !important;
        gap: 8px;
    }
    #page-telemedicina-no-interactiva .header-actions .btn-header-action,
    #page-teleapoyo .header-actions .btn-header-action {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        justify-content: center;
    }
}