/**
 * Accesibilidad: zoom, scroll horizontal, tema oscuro SOLO si el usuario lo activa (localStorage + clase html.dpec-theme-dark).
 * Por defecto el sitio permanece en tema claro (no se usa prefers-color-scheme para colores del portal).
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color-scheme: light;
}

html.dpec-theme-dark {
    color-scheme: dark;
}

/* —— Zoom y contenido ancho —— */
body.dpec-portal .portal-main,
body.dpec-portal .container {
    max-width: 100%;
    overflow-x: clip;
}

body.dpec-portal .portal-table-wrap,
body.dpec-portal .portal-chart-box,
body.dpec-portal .portal-panel__body {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.dpec-portal .portal-nav-list {
    flex-wrap: wrap;
    row-gap: 6px;
}

body.dpec-portal .portal-header-logos,
body.dpec-portal .portal-bottom-nav {
    flex-wrap: wrap;
}

body.dpec-portal .portal-header-user .portal-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(42vw, 220px);
}

body.dpec-portal .highcharts-container {
    font-family: inherit;
}

/* Texto introductorio de proyección (fuera del SVG de Highcharts): contraste en tema oscuro */
html.dpec-theme-dark body.dpec-portal .dpec-proyeccion-caption {
    color: #d8eee0;
    background: rgba(30, 92, 58, 0.22);
    border-left-color: #4caf7a;
}

html.dpec-theme-dark body.dpec-portal .portal-user-menu-theme {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dpec-theme-dark body.dpec-portal .portal-user-menu-theme .form-check-label {
    color: #e8f1ea !important;
}

html.dpec-theme-dark body.dpec-portal .portal-user-menu-pwa-btn .portal-user-pwa-icon {
    color: #7ec89a;
}

html.dpec-theme-dark body.dpec-portal .portal-notif-intro {
    background: linear-gradient(90deg, rgba(30, 92, 58, 0.22) 0%, rgba(21, 29, 23, 0.96) 100%);
    border-color: #2a3f32;
    box-shadow: none;
}

html.dpec-theme-dark body.dpec-portal .portal-notif-intro__icon-wrap {
    background: rgba(30, 92, 58, 0.35);
    border-color: rgba(74, 107, 88, 0.6);
    color: #9ed4b0;
}

html.dpec-theme-dark body.dpec-portal .portal-notif-intro__title {
    color: #f0faf3;
}

html.dpec-theme-dark body.dpec-portal .portal-notif-intro__sub {
    color: #b8d4c0;
}

/* Bloques tipo dl (p. ej. «Información del mensaje» en detalle de notificación) */
html.dpec-theme-dark body.dpec-portal .portal-dl__row {
    border-bottom-color: #2a3f32;
}

html.dpec-theme-dark body.dpec-portal .portal-dl__dt {
    color: #9cb8a8;
}

html.dpec-theme-dark body.dpec-portal .portal-dl__dd {
    color: #e8f1ea;
}

html.dpec-theme-dark body.dpec-portal .portal-detail-inline-icon {
    color: #7ec89a;
}

html.dpec-theme-dark body.dpec-portal .portal-panel-head-icon--meta {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.22), rgba(37, 99, 235, 0.12));
    color: #93c5fd;
    box-shadow: none;
}

/* —— Tema oscuro opcional (portal) —— */
html.dpec-theme-dark body.dpec-portal {
    background: #0f1611;
    color: #e8f1ea;
}

html.dpec-theme-dark body.dpec-portal .portal-top-header {
    background: linear-gradient(180deg, #151d17 0%, #121a14 100%);
    border-bottom-color: #2a3f32;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

html.dpec-theme-dark body.dpec-portal .portal-nav-bar {
    background: linear-gradient(135deg, #0d2418 0%, #1a4030 45%, #1e5c3a 100%);
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 28px rgba(0, 0, 0, 0.4);
}

html.dpec-theme-dark body.dpec-portal .portal-panel {
    background: #151d17;
    border-color: #2a3f32;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
}

html.dpec-theme-dark body.dpec-portal .portal-panel:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

html.dpec-theme-dark body.dpec-portal .portal-panel__head {
    background: linear-gradient(90deg, #1a2e20 0%, rgba(30, 92, 58, 0.35) 100%);
    border-bottom-color: #2a3f32;
    color: #b8e6c8;
}

html.dpec-theme-dark body.dpec-portal .portal-page-hero {
    background: linear-gradient(145deg, #1a241c 0%, #151d17 55%, #121914 100%);
    border-color: #2a3f32;
    color: #e8f1ea;
}

html.dpec-theme-dark body.dpec-portal .portal-page-hero__title {
    color: #f2faf4;
}

html.dpec-theme-dark body.dpec-portal .portal-page-hero__sub {
    color: #b8d4c0;
}

html.dpec-theme-dark body.dpec-portal .portal-field-label {
    color: #c8ddd0;
}

html.dpec-theme-dark body.dpec-portal .portal-select,
html.dpec-theme-dark body.dpec-portal .portal-input,
html.dpec-theme-dark body.dpec-portal .form-control {
    background: #1a241c;
    border-color: #3a5240;
    color: #e8f1ea;
}

html.dpec-theme-dark body.dpec-portal .portal-bottom-nav {
    background: #121a14;
    border-top-color: #2a3f32;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}

html.dpec-theme-dark body.dpec-portal .portal-table th,
html.dpec-theme-dark body.dpec-portal .portal-table td {
    border-color: #2a3f32;
    color: #e4eee6;
}

html.dpec-theme-dark body.dpec-portal .portal-table thead th {
    color: #c8e0d0;
    background: #1a2e20;
}

html.dpec-theme-dark body.dpec-portal .portal-table thead {
    background: #1a2e20;
}

html.dpec-theme-dark body.dpec-portal .highcharts-background {
    fill: transparent;
}

html.dpec-theme-dark body.dpec-portal .highcharts-title,
html.dpec-theme-dark body.dpec-portal .highcharts-title tspan {
    fill: #e8f1ea !important;
}

html.dpec-theme-dark body.dpec-portal .highcharts-title {
    color: #e8f1ea !important;
}

html.dpec-theme-dark body.dpec-portal .highcharts-axis-labels text,
html.dpec-theme-dark body.dpec-portal .highcharts-legend-item text {
    fill: #c0d4c6 !important;
}

html.dpec-theme-dark body.dpec-portal .highcharts-axis-title,
html.dpec-theme-dark body.dpec-portal .highcharts-axis-title tspan {
    fill: #c0d4c6 !important;
}

html.dpec-theme-dark body.dpec-portal .highcharts-grid-line {
    stroke: rgba(200, 220, 208, 0.12);
}

html.dpec-theme-dark body.dpec-portal #consumo .highcharts-no-data text {
    fill: #a8c4b0 !important;
}

html.dpec-theme-dark footer.portal-site-footer {
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}

html.dpec-theme-dark footer.portal-site-footer .footer-brand-name,
html.dpec-theme-dark footer.portal-site-footer .footer-section-title {
    color: rgba(255, 255, 255, 0.82);
}

html.dpec-theme-dark body.dpec-portal .dropdown-menu {
    background: #1c2720;
    border: 1px solid #2a3f32;
}

html.dpec-theme-dark body.dpec-portal .dropdown-item {
    color: #e8f1ea;
}

html.dpec-theme-dark body.dpec-portal .dropdown-item:hover {
    background: #2a3f32;
    color: #fff;
}

html.dpec-theme-dark body.dpec-portal .form-check-input {
    background-color: #2a3f32;
    border-color: #4a6b58;
}

html.dpec-theme-dark body.dpec-portal .form-check-input:checked {
    background-color: var(--dpec-green, #1e5c3a);
    border-color: #3a9e68;
}

/* —— Tema oscuro opcional (login) —— */
html.dpec-theme-dark body.login-body {
    background: #0f1611;
    color: #e8f1ea;
}

html.dpec-theme-dark .login-body header.login-top {
    background: #151d17;
    border-bottom-color: #2a3f32;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

html.dpec-theme-dark .login-body main.login-main-area {
    background:
        radial-gradient(ellipse 70% 50% at 20% 80%, rgba(30, 92, 58, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 60% 60% at 80% 10%, rgba(30, 92, 58, 0.1) 0%, transparent 70%),
        #0f1611;
}

html.dpec-theme-dark .login-body .login-header-title {
    color: #b8e6c8;
}

html.dpec-theme-dark .login-body .login-shell {
    background: #151d17;
    border-color: #2a3f32;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

html.dpec-theme-dark .login-body .login-shell .field-input {
    background: #1a241c;
    border-color: #3a5240;
    color: #e8f1ea;
}

html.dpec-theme-dark .login-body .login-shell .field-label {
    color: #c8ddd0;
}

html.dpec-theme-dark .login-body .login-shell-head h1 {
    color: #f2faf4;
}

html.dpec-theme-dark .login-body .login-shell-head p {
    color: #a8c4b0;
}

/* —— Movimiento reducido —— */
@media (prefers-reduced-motion: reduce) {
    body.dpec-portal.fade-page-in {
        animation: none !important;
    }

    body.dpec-portal *,
    .login-body * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}