:root {
      --bg: #f6f7f9;
      --panel: #ffffff;
      --soft: #f7f9fc;
      --soft-blue: #eef2fa;
      --text: #12172a;
      --muted: #5b6577;
      --line: #e3e7ef;
      --blue: #3355d8;
      --blue-dark: #24409e;
      --teal: #0f766e;
      --green: #0f8a6c;
      --orange: #b5790a;
      --red: #c23b3b;
      --purple: #6d28d9;
      --slate: #334155;
      --sidebar-bg: #101b34;
      --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 24px rgba(16, 24, 40, .05);
      --shadow-soft: 0 1px 2px rgba(16, 24, 40, .05);
      --radius: 14px;
    }

    * { box-sizing: border-box; }

    html {
      max-width: 100%;
      overflow-x: clip;
    }

    body {
      margin: 0;
      font-family: "Schibsted Grotesk", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    .app {
      display: flex;
      align-items: stretch;
      min-height: 100vh;
    }

    .sidebar {
      width: 288px;
      flex: 0 0 288px;
      background: var(--sidebar-bg, #0c1a3a);
      color: #fff;
      display: flex;
      flex-direction: column;
      padding: 28px 0;
      position: sticky;
      top: 0;
      height: 100vh;
    }

    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 0 24px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .sidebar-brand-name {
      font-size: 17px;
      font-weight: 800;
      line-height: 1.2;
    }

    .sidebar-brand-sub {
      font-size: 12px;
      color: #9db2e0;
      margin-top: 3px;
      font-weight: 600;
    }

    .sidebar-foot {
      margin-top: auto;
      padding: 18px 24px 0;
      border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .sidebar-foot span {
      display: block;
      font-size: 11px;
      color: #8098c9;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      font-weight: 700;
    }

    .sidebar-foot strong {
      display: block;
      font-size: 14px;
      font-weight: 750;
      margin-top: 5px;
    }

    .page {
      flex: 1 1 auto;
      min-width: 0;
      max-width: 1440px;
      margin: 0;
      padding: 30px 38px 64px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .hero {
      background: transparent;
      color: var(--text);
      border: 0;
      border-radius: 0;
      padding: 0 0 4px;
      box-shadow: none;
      overflow: visible;
      position: relative;
    }

    .hero::after {
      content: "";
      position: absolute;
      display: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: start;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.3px;
      margin-bottom: 9px;
    }

    .hero h1 {
      margin: 0;
      font-size: 25px;
      font-weight: 800;
      letter-spacing: -.4px;
      line-height: 1.12;
      color: var(--text);
    }

    .hero p {
      margin: 6px 0 0;
      max-width: 820px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }


    .hero-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .brand-logo {
      height: 48px;
      width: 48px;
      object-fit: contain;
      border-radius: 10px;
      flex: 0 0 auto;
      display: block;
      background: #fff;
      padding: 4px;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
      max-width: 930px;
    }

    .hero-meta-item {
      min-width: 0;
      display: inline-flex;
      align-items: baseline;
      gap: 7px;
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 999px;
      padding: 7px 13px;
    }

    .hero-meta-item span {
      display: inline;
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hero-meta-item strong {
      display: inline;
      margin-top: 0;
      color: var(--text);
      font-size: 12.5px;
      line-height: 1.3;
    }

    .hero-controls {
      min-width: 210px;
      background: transparent;
      border: 0;
      border-radius: 10px;
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .hero-year-control {
      display: grid;
      gap: 6px;
    }

    .hero-controls label {
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0;
      font-weight: 800;
      margin-bottom: 6px;
      display: block;
    }

    .hero-controls select {
      width: 100%;
      border: 1px solid #d0d5dd;
      background: #fff;
      color: var(--text);
      border-radius: 8px;
      padding: 11px 12px;
      font: inherit;
      font-weight: 750;
      outline: none;
    }

    .theme-toggle {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 80;
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      color: var(--muted);
      box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
      opacity: .58;
      backdrop-filter: blur(8px);
      transition: opacity .22s ease, color .22s ease, border-color .22s ease, background-color .22s ease, transform .22s ease;
    }

    .theme-toggle:hover,
    .theme-toggle:focus-visible {
      opacity: 1;
      color: var(--text);
      border-color: #98a2b3;
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
    }

    .theme-toggle-icon {
      width: 20px;
      height: 20px;
      color: currentColor;
      transition: opacity .18s ease, transform .18s ease;
    }

    .theme-toggle-icon.moon-icon {
      display: block;
    }

    .theme-toggle-icon.sun-icon {
      display: none;
    }

    .theme-toggle.is-dark .moon-icon {
      display: none;
    }

    .theme-toggle.is-dark .sun-icon {
      display: block;
    }

    .chart-labels-toggle {
      bottom: 60px;
    }

    .chart-labels-toggle-icon.labels-on-icon {
      display: block;
    }

    .chart-labels-toggle-icon.labels-off-icon {
      display: none;
    }

    .chart-labels-toggle.is-off .labels-on-icon {
      display: none;
    }

    .chart-labels-toggle.is-off .labels-off-icon {
      display: block;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    button, .button {
      border: 1px solid var(--blue);
      border-radius: 8px;
      padding: 10px 14px;
      background: var(--blue);
      color: #fff;
      font-weight: 800;
      font-size: 12.5px;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      user-select: none;
      text-decoration: none;
      transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }

    button:hover, .button:hover {
      background: var(--blue-dark);
      border-color: var(--blue-dark);
      box-shadow: 0 8px 18px rgba(20, 48, 110, .18);
      transform: translateY(-1px);
    }

    button:focus-visible,
    .button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible,
    .info:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--blue) 40%, transparent);
      outline-offset: 2px;
    }

    button.secondary, .button.secondary {
      background: #fff;
      color: #344054;
      border: 1px solid #d0d5dd;
      box-shadow: var(--shadow-soft);
    }

    button.secondary:hover, .button.secondary:hover {
      background: #f8fafc;
      border-color: #98a2b3;
      color: var(--text);
      box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    }

    button.small {
      padding: 8px 11px;
      border-radius: 8px;
      box-shadow: none;
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--text);
      font-size: 12px;
    }

    button.danger { color: var(--red); }

    .details-body > .actions {
      gap: 10px;
      align-items: center;
      margin-top: 14px !important;
    }

    .details-body > .actions button {
      min-height: 40px;
      box-shadow: none;
      justify-content: center;
      white-space: nowrap;
    }

    .details-body > .actions button:not(.small) {
      background: var(--blue);
      color: #fff;
      border: 1px solid var(--blue);
    }

    .details-body > .actions button.small {
      background: #fff;
      color: var(--text);
      border: 1px solid #cbd5e1;
      font-weight: 850;
    }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0;
      margin-top: 18px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .kpi-grid .card,
    .territorial-kpis .card {
      border: 0;
      border-left: 1px solid var(--line);
      border-top: 1px solid var(--line);
      margin-left: -1px;
      margin-top: -1px;
      border-radius: 0;
      box-shadow: none;
      min-height: 0;
      padding: 18px 18px 16px;
      background: transparent;
    }

    .kpi-grid .card:hover,
    .territorial-kpis .card:hover {
      transform: none;
      box-shadow: none;
      border-color: var(--line);
      background: color-mix(in srgb, var(--soft) 55%, transparent);
    }

    .card, .panel, .insight, details {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      animation: cardIn .22s ease both;
    }

    @keyframes cardIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .card {
      padding: 16px;
      min-height: 150px;
      min-width: 0;
    }

    .kpi-grid .card:nth-child(2) { animation-delay: .04s; }
    .kpi-grid .card:nth-child(3) { animation-delay: .08s; }
    .kpi-grid .card:nth-child(4) { animation-delay: .12s; }
    .kpi-grid .card:nth-child(5) { animation-delay: .16s; }
    .kpi-grid .card:nth-child(6) { animation-delay: .2s; }

    .card:has(#kpiImpacto) {
      background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 10%, var(--panel)), color-mix(in srgb, var(--blue) 3%, var(--panel)));
      box-shadow: inset 0 3px 0 var(--blue);
    }

    .card:has(#kpiImpacto) .label {
      color: var(--blue);
    }

    html[data-theme="dark"] .card:has(#kpiImpacto) {
      background: linear-gradient(180deg, rgba(110, 168, 255, .12), var(--panel) 70%);
      border-color: #35507e;
    }

    ::selection {
      background: color-mix(in srgb, var(--blue) 24%, transparent);
    }

    .card:hover,
    .panel:hover {
      border-color: #d0d5dd;
      box-shadow: 0 18px 36px rgba(15, 23, 42, .075);
      transform: translateY(-1px);
      transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }

    .label-row, .panel-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .panel-tools {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    .chart-expand-btn {
      min-height: 32px;
      padding: 7px 10px;
      border: 1px solid #d0d5dd;
      background: #fff;
      color: #344054;
      box-shadow: none;
      font-size: 12px;
      gap: 6px;
    }

    .chart-expand-btn:hover {
      background: var(--soft-blue);
      border-color: #bfdbfe;
      color: var(--blue-dark);
      box-shadow: none;
      transform: none;
    }

    .chart-expand-icon {
      font-size: 15px;
      line-height: 1;
      font-weight: 900;
    }

    .label {
      color: var(--muted);
      font-weight: 850;
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .value {
      margin-top: 12px;
      font-size: 32px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.3px;
      white-space: nowrap;
    }

    .sub {
      margin-top: 10px;
      font-size: 12.5px;
      line-height: 1.38;
      color: var(--muted);
    }

    .blue { color: var(--blue); }
    .red { color: var(--red); }
    .green { color: var(--green); }
    .purple { color: var(--purple); }
    .teal { color: var(--teal); }
    .orange { color: var(--orange); }
    .slate { color: var(--slate); }

    .trend {
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      border: 1px solid #d9e4f2;
      background: #f8fafc;
      color: var(--slate);
      border-radius: 999px;
      padding: 5px 8px;
      font-size: 11px;
      line-height: 1.25;
      font-weight: 850;
      white-space: normal;
    }

    .trend-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 13px;
      font-size: 13px;
      line-height: 1;
      font-weight: 900;
    }

    .trend.good {
      background: #ecfdf5;
      color: #047857;
      border-color: #bbf7d0;
    }

    .trend.bad {
      background: #fef2f2;
      color: #b91c1c;
      border-color: #fecaca;
    }

    .trend.neutral {
      background: #f8fafc;
      color: #64748b;
      border-color: #d9e4f2;
    }

    .info {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #eff6ff;
      color: var(--blue-dark);
      font-size: 12px;
      font-weight: 900;
      position: relative;
      flex: 0 0 auto;
      outline: none;
      cursor: help;
      border: 1px solid #bfdbfe;
    }

    .info::after {
      content: attr(data-tip);
      position: absolute;
      top: 28px;
      right: 0;
      width: min(335px, 80vw);
      background: #111827;
      color: #fff;
      padding: 11px 12px;
      border-radius: 8px;
      font-size: 12.5px;
      line-height: 1.38;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 500;
      box-shadow: 0 16px 35px rgba(15,23,42,.30);
      opacity: 0;
      transform: translateY(-4px);
      pointer-events: none;
      transition: .2s ease;
      z-index: 30;
      white-space: normal;
    }

    .info:hover::after,
    .info:focus::after {
      opacity: 1;
      transform: translateY(0);
    }

    .insight {
      margin-top: 18px;
      padding: 20px 22px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      border-left: 0;
      background: var(--sidebar-bg, #0c1a3a);
      border-color: transparent;
    }

    .insight h2 {
      margin: 0 0 6px;
      font-size: 12px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #8fa4d8;
      font-weight: 700;
    }

    .insight p {
      margin: 0;
      color: #dbe4f7;
      line-height: 1.55;
      font-size: 14px;
    }

    .badge {
      background: #ecfdf5;
      color: #047857;
      font-weight: 900;
      border: 1px solid #bbf7d0;
      border-radius: 999px;
      padding: 9px 12px;
      white-space: nowrap;
      font-size: 13px;
    }

    .badge.score-good { background: #ecfdf5; color: #047857; border-color: #bbf7d0; }
    .badge.score-ok { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }
    .badge.score-warn { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
    .badge.score-bad { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

    .insight-badges {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
    }

    .view-tabs {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 0;
      padding: 16px 12px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      width: auto;
      max-width: none;
    }

    .view-tab {
      border: 0;
      border-left: 3px solid transparent;
      background: transparent;
      color: #aab9dd;
      box-shadow: none;
      border-radius: 8px;
      padding: 13px 14px;
      min-height: 0;
      font-size: 14.5px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      width: 100%;
      text-align: left;
      transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }

    .view-tabs-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: #7188bd;
      padding: 0 10px 10px;
    }

    .view-tab-dot {
      width: 8px;
      height: 8px;
      border-radius: 3px;
      background: #3b4f82;
      flex: 0 0 auto;
      display: inline-block;
    }

    .view-tab:hover {
      background: rgba(255, 255, 255, .08);
      color: #fff;
      box-shadow: none;
      transform: none;
    }

    .view-tab.is-active {
      background: rgba(255, 255, 255, .14);
      color: #fff;
      border-left-color: #6ea8ff;
      box-shadow: none;
    }

    .view-tab.is-active .view-tab-dot {
      background: #6ea8ff;
    }

    .dashboard-view[hidden],
    .hero .actions[hidden],
    .hero-year-control[hidden],
    .hero-controls[hidden] {
      display: none !important;
    }

    .territorial-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }

    .territorial-top.is-single {
      grid-template-columns: 1fr;
    }

    .territorial-kpis {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
      margin-top: 18px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .territorial-command {
      border-left-color: var(--blue);
      grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
      background: linear-gradient(180deg, #ffffff, #fbfdff);
    }

    .territorial-command h2 {
      color: #5b6577;
    }

    .territorial-command p {
      color: #334155;
    }

    .territorial-command-side {
      display: grid;
      gap: 10px;
      align-content: center;
    }

    .territorial-command-side .actions {
      margin: 0;
      justify-content: stretch;
    }

    .territorial-command-side button {
      width: 100%;
      justify-content: center;
    }

    .upload-box {
      border: 1px dashed #b7c7dc;
      border-radius: 12px;
      background: #f8fbff;
      padding: 14px;
      margin-top: 12px;
    }

    .upload-box strong {
      display: block;
      color: var(--text);
      font-size: 13px;
      margin-bottom: 5px;
    }

    .upload-box p {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.45;
    }

    .territorial-form {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 10px;
      margin-top: 12px;
    }

    .territorial-form label {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .privacy-note {
      margin-top: 12px;
      border: 1px solid #fed7aa;
      border-radius: 10px;
      background: #fff7ed;
      color: #9a3412;
      padding: 10px 12px;
      font-size: 12.5px;
      line-height: 1.45;
      font-weight: 700;
    }

    .territorial-preview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .breakdown-list {
      display: grid;
      gap: 8px;
      margin-top: 14px;
    }

    .breakdown-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      border: 1px solid #e3ebf6;
      background: #fff;
      border-radius: 10px;
      padding: 10px 11px 12px;
      color: var(--slate);
      font-size: 12.5px;
      font-weight: 750;
      position: relative;
      overflow: hidden;
    }

    .breakdown-row strong {
      color: var(--text);
      font-weight: 900;
    }

    .breakdown-label {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .breakdown-label i {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--row-color, #64748b);
      flex: 0 0 auto;
    }

    .breakdown-label span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .breakdown-pct {
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      margin-left: auto;
    }

    .breakdown-row::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 7px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--row-color, #64748b) var(--row-pct, 0%), #edf2f7 0);
      opacity: .9;
    }

    .empty-state {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 18px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .territorial-map-panel {
      margin-top: 18px;
    }

    .territorial-analytics-grid {
      display: grid;
      grid-template-columns: .9fr 1.05fr 1.05fr;
      gap: 18px;
      margin-top: 18px;
      align-items: stretch;
    }

    .territorial-analytics-grid canvas {
      height: 300px;
    }

    .territorial-analytics-grid .chart-canvas-box canvas {
      height: 100% !important;
    }

    .map-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      display: inline-block;
      margin-right: 6px;
      vertical-align: -1px;
    }

    .legend-dot.regularized { background: #059669; }
    .legend-dot.disconnected { background: #dc2626; }
    .legend-dot.notified { background: #7c3aed; }
    .legend-dot.connection { background: #d97706; }
    .legend-dot.reconnection { background: #2c4d9e; }
    .legend-dot.other { background: #64748b; }

    .map-panel-actions {
      display: grid;
      gap: 10px;
      justify-items: end;
      min-width: min(100%, 460px);
    }

    .map-search {
      position: relative;
      width: min(100%, 460px);
      justify-self: end;
    }

    .map-search-control {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 6px;
      border: 1px solid #dbe6f4;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(15,23,42,.05);
      padding: 4px 5px 4px 10px;
    }

    .map-search-icon {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      color: #64748b;
    }

    .map-search-icon::before {
      content: "";
      width: 12px;
      height: 12px;
      border: 2px solid currentColor;
      border-radius: 999px;
      box-sizing: border-box;
      box-shadow: 7px 7px 0 -5px currentColor;
      transform: rotate(-12deg);
    }

    .map-search input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 8px 0;
    }

    .map-search input::placeholder {
      color: #94a3b8;
      font-weight: 760;
    }

    .map-search input:disabled {
      cursor: not-allowed;
      color: #94a3b8;
    }

    .map-search-clear {
      width: 30px;
      min-width: 30px;
      height: 30px;
      border-radius: 8px;
      padding: 0;
      display: grid;
      place-items: center;
      color: #64748b;
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      font-size: 17px;
      line-height: 1;
    }

    .map-search-clear:hover {
      transform: none;
      background: #edf5ff;
      box-shadow: none;
      color: var(--text);
    }

    .map-search-results {
      position: absolute;
      top: calc(100% + 7px);
      left: 0;
      right: 0;
      z-index: 40;
      display: grid;
      gap: 5px;
      max-height: 320px;
      overflow: auto;
      border: 1px solid #dbe6f4;
      border-radius: 12px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 18px 44px rgba(15,23,42,.18);
      padding: 7px;
    }

    .map-search-results[hidden] {
      display: none !important;
    }

    .map-search-option {
      display: grid;
      gap: 3px;
      width: 100%;
      min-height: 0;
      padding: 9px 10px;
      border: 1px solid transparent;
      border-radius: 9px;
      background: transparent;
      color: var(--text);
      box-shadow: none;
      text-align: left;
    }

    .map-search-option:hover,
    .map-search-option.is-active {
      transform: none;
      background: #edf5ff;
      border-color: #c8dcf5;
      box-shadow: none;
    }

    .map-search-option strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12.5px;
      font-weight: 950;
    }

    .map-search-option span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 780;
      line-height: 1.25;
    }

    .map-search-empty,
    .map-search-meta {
      padding: 7px 9px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 800;
      line-height: 1.35;
    }

    .map-search-meta {
      padding-bottom: 0;
      text-align: right;
    }

    .map-mode-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid #dbe6f4;
      border-radius: 10px;
      background: #f8fbff;
      padding: 4px;
    }

    .map-mode-toggle button {
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: var(--muted);
      padding: 7px 10px;
      min-height: 30px;
      font-size: 12px;
      font-weight: 900;
      box-shadow: none;
    }

    .map-mode-toggle button:hover {
      transform: none;
      box-shadow: none;
      background: #edf5ff;
      color: var(--text);
    }

    .map-mode-toggle button.is-active {
      background: var(--blue);
      color: #fff;
    }

    .map-shell {
      position: relative;
      margin-top: 14px;
      border: 1px solid #dbe6f4;
      border-radius: 14px;
      background: #edf5ff;
      overflow: hidden;
      min-height: 520px;
      aspect-ratio: 16 / 7.2;
    }

    #territorialMap {
      width: 100%;
      height: 100%;
      min-height: 360px;
      z-index: 1;
    }

    .map-empty-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      place-items: center;
      color: #475569;
      font-size: 14px;
      font-weight: 850;
      background: linear-gradient(135deg, rgba(239,247,255,.92), rgba(248,250,252,.86));
      pointer-events: none;
    }

    .map-empty-overlay[hidden] {
      display: none !important;
    }

    .leaflet-container {
      font: inherit;
      background: #eaf3fb;
    }

    .territorial-heat-layer {
      pointer-events: none;
      opacity: .82;
      filter: blur(.65px) saturate(1.18);
      mix-blend-mode: normal;
      transition: opacity .12s ease;
    }

    .territorial-heat-layer.is-zooming {
      opacity: 0;
    }

    .leaflet-popup-content-wrapper {
      border-radius: 10px;
      box-shadow: 0 12px 28px rgba(15,23,42,.16);
    }

    .map-popup {
      color: var(--text);
      font-size: 12.5px;
      line-height: 1.35;
      font-weight: 750;
    }

    .map-popup strong {
      display: block;
      margin-bottom: 4px;
      font-size: 13.5px;
      font-weight: 950;
    }

    .map-popup span {
      display: block;
      color: var(--muted);
      font-weight: 700;
    }

    .map-popup dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3px 9px;
      margin: 8px 0 0;
    }

    .map-popup dt {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .map-popup dd {
      margin: 0;
      color: var(--text);
      font-weight: 800;
    }

    .leaflet-interactive.map-selected-point {
      filter: drop-shadow(0 0 8px rgba(15,23,42,.35));
    }

    .leaflet-tooltip.map-tooltip {
      border: 1px solid #dbe6f4;
      border-radius: 8px;
      background: rgba(255,255,255,.96);
      color: var(--text);
      box-shadow: 0 10px 24px rgba(15,23,42,.14);
      padding: 8px 10px;
      font: inherit;
      font-size: 12px;
      font-weight: 760;
    }

    .map-tooltip strong {
      display: block;
      margin-bottom: 3px;
      font-size: 12.5px;
      font-weight: 950;
    }

    .map-tooltip span {
      display: block;
      color: var(--muted);
      font-weight: 760;
      line-height: 1.3;
    }

    .map-stat-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .map-stat {
      border: 1px solid #e3ebf6;
      border-radius: 10px;
      background: #fff;
      padding: 10px 12px;
    }

    .map-stat span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-bottom: 4px;
    }

    .map-stat strong {
      color: var(--text);
      font-size: 18px;
      font-weight: 950;
    }

    .automation-panel {
      margin-top: 18px;
    }

    .automation-grid {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 12px;
      margin-top: 14px;
    }

    .automation-grid .wide {
      grid-column: 1 / -1;
    }

    .automation-grid label {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .toggle-row {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 42px;
      color: var(--text);
      font-weight: 850;
    }

    .toggle-row input {
      width: 18px;
      height: 18px;
      accent-color: var(--blue);
    }

    .check-row {
      display: flex !important;
      align-items: center;
      gap: 9px;
      color: var(--text) !important;
      font-weight: 850 !important;
      margin: 10px 0 12px !important;
      text-transform: none !important;
    }

    .check-row input {
      width: 18px;
      height: 18px;
      accent-color: var(--blue);
      flex: 0 0 auto;
    }

    .sync-entry-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sub-details {
      margin-top: 12px;
    }

    .automation-status {
      margin-top: 12px;
      border: 1px solid #dbe6f4;
      border-radius: 10px;
      background: #f8fbff;
      padding: 11px 12px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.45;
      font-weight: 750;
    }

    .automation-status.is-ok {
      border-color: #bbf7d0;
      background: #f0fdf4;
      color: #166534;
    }

    .automation-status.is-error {
      border-color: #fecaca;
      background: #fef2f2;
      color: #991b1b;
    }

    .next-sync-card {
      border: 1px solid #c8eee7;
      border-radius: 10px;
      background: linear-gradient(180deg, #f0fdfa, #ffffff);
      padding: 12px;
      display: grid;
      gap: 5px;
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
    }

    .next-sync-card span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .next-sync-card strong {
      color: var(--blue);
      font-size: 22px;
      line-height: 1.05;
      font-weight: 950;
    }

    .next-sync-card small {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 750;
    }

    .chart-grid, .analysis-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }

    .panel { padding: 22px; }

    .panel h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0;
    }

    .note {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.42;
    }

    .section-head {
      margin-top: 26px;
      padding: 8px 2px 0;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
    }

    .section-head h2 {
      margin: 0;
      font-size: 22px;
      letter-spacing: 0;
    }

    .section-head p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      max-width: 760px;
    }

    canvas {
      width: 100%;
      height: 330px;
      display: block;
      margin-top: 16px;
    }

    .chart-canvas-box {
      position: relative;
      width: 100%;
      height: 330px;
      margin-top: 16px;
    }

    .chart-canvas-box canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
      margin-top: 0;
    }

    .chart-canvas-empty {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel, #fff);
      color: var(--muted);
      font-weight: 800;
      font-size: 14px;
    }

    .analysis-grid canvas { height: 300px; }
    .analysis-grid .chart-canvas-box { height: 300px; }
    .territorial-analytics-grid .chart-canvas-box { height: 300px; }

    details {
      margin-top: 22px;
      overflow: hidden;
    }

    summary {
      cursor: pointer;
      padding: 18px 20px;
      font-weight: 900;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #fff;
    }

    summary::-webkit-details-marker { display: none; }

    summary::after {
      content: "+";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--slate);
      font-weight: 900;
      flex: 0 0 auto;
    }

    details[open] summary::after { content: "-"; }

    .details-body {
      border-top: 1px solid var(--line);
      padding: 20px;
      background: #fff;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    }

    .details-body label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
      display: block;
      margin-bottom: 5px;
    }

    .input-help {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.35;
    }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      border-radius: 10px;
      padding: 11px 12px;
      font: inherit;
      font-size: 13px;
      outline: none;
    }

    textarea { min-height: 98px; resize: vertical; }

    .input-title {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .form-intro {
      background: #f8fbff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 13px 14px;
      margin-bottom: 14px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .form-message {
      display: none;
      margin: 12px 0 0;
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.4;
      font-weight: 700;
    }

    .form-message.is-error {
      display: block;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
    }

    .form-message.is-ok {
      display: block;
      background: #ecfdf5;
      border: 1px solid #bbf7d0;
      color: #047857;
    }

    .trace-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 12px;
      margin-top: 14px;
    }

    .entry-grid {
      display: grid;
      grid-template-columns: .85fr 1.55fr 1fr 1.05fr;
      gap: 12px;
      align-items: start;
    }

    .form-card {
      background: #fbfcfe;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      min-height: 0;
    }

    .form-card h3 {
      margin: 0 0 10px;
      font-size: 14px;
      letter-spacing: 0;
      color: var(--text);
    }

    .mini-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .mini-grid.two { grid-template-columns: 1fr 1fr; }
    .mini-grid.three { grid-template-columns: repeat(3, 1fr); }

    .preview-box {
      display: grid;
      gap: 8px;
      margin-top: 2px;
    }

    .preview-item {
      border: 1px solid #e3ebf6;
      background: #fff;
      border-radius: 12px;
      padding: 9px 10px;
    }

    .preview-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .preview-value {
      margin-top: 3px;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .data-table-wrap {
      overflow: auto;
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      max-height: 500px;
      background: #fff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
      min-width: 1220px;
      background: #fff;
    }

    th, td {
      padding: 9px 9px;
      border-bottom: 1px solid var(--line);
      text-align: right;
      white-space: nowrap;
    }

    th:first-child, td:first-child,
    th:nth-child(2), td:nth-child(2) { text-align: left; }
    td.source-cell, td.note-cell { max-width: 190px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
    th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--soft);
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0;
    }
    #energyView table tbody tr:nth-child(even) td { background: #f7f9fc; }
    #energyView table th:nth-child(n+3):nth-child(-n+10),
    #energyView table td:nth-child(n+3):nth-child(-n+10) { text-align: right; }
    html[data-theme="dark"] #energyView table tbody tr:nth-child(even) td { background: #101827; }
    tbody tr:hover td { background: #f9fafb; }
    tbody tr.is-selected-year td { background: #fbfdff; }
    tbody tr.is-selected-year:hover td { background: #f7fbff; }
    td.metric-good { color: #047857; font-weight: 850; }
    td.metric-bad { color: #b91c1c; font-weight: 850; }
    td.row-action { text-align: center; }
    td.empty-table {
      text-align: center;
      color: var(--muted);
      padding: 22px;
      font-weight: 750;
    }
    tr:last-child td { border-bottom: 0; }

    .footer-note {
      margin-top: 14px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-left: 4px solid #94a3b8;
      border-radius: 12px;
      background: #fff;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .chart-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 990;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(17, 24, 39, .48);
      backdrop-filter: blur(4px);
    }

    .chart-modal-overlay[hidden] { display: none; }

    .chart-modal {
      width: min(1240px, 100%);
      max-height: min(88vh, 860px);
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 24px 70px rgba(15, 23, 42, .25);
      padding: 22px;
      animation: confirmIn .22s ease both;
    }

    .chart-modal-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: start;
      margin-bottom: 12px;
    }

    .chart-modal h2 {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
      color: var(--text);
    }

    .chart-modal p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .chart-modal-close {
      min-width: 40px;
      min-height: 40px;
      padding: 0;
      justify-content: center;
      border-color: #d0d5dd;
      background: #fff;
      color: #344054;
      box-shadow: none;
      font-size: 22px;
      line-height: 1;
    }

    .chart-modal-close:hover {
      background: #f8fafc;
      border-color: #98a2b3;
      color: var(--text);
      box-shadow: none;
      transform: none;
    }

    .chart-modal-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 18px;
      min-height: 0;
      align-items: stretch;
    }

    .chart-modal-canvas {
      position: relative;
      width: 100%;
      height: min(64vh, 620px);
      min-height: 430px;
      margin-top: 0;
    }

    .chart-modal-canvas canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }

    .chart-modal-details {
      min-height: 0;
      max-height: min(64vh, 620px);
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f8fafc;
      padding: 14px;
    }

    .chart-detail-kicker {
      margin: 0 0 10px;
      color: #475467;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .chart-detail-grid {
      display: grid;
      gap: 9px;
      margin-bottom: 14px;
    }

    .chart-detail-card {
      border: 1px solid #e5e7eb;
      border-left: 4px solid #94a3b8;
      border-radius: 10px;
      background: #fff;
      padding: 10px 11px;
    }

    .chart-detail-card.is-good { border-left-color: #16a34a; }
    .chart-detail-card.is-bad { border-left-color: #dc2626; }

    .chart-detail-label {
      color: #667085;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.25;
    }

    .chart-detail-value {
      margin-top: 3px;
      color: var(--text);
      font-size: 20px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .chart-detail-card.is-good .chart-detail-value { color: #15803d; }
    .chart-detail-card.is-bad .chart-detail-value { color: #b91c1c; }

    .chart-detail-meta {
      margin-top: 4px;
      color: #667085;
      font-size: 11px;
      line-height: 1.3;
    }

    .chart-detail-table-wrap {
      overflow: auto;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #fff;
    }

    .chart-detail-table {
      width: 100%;
      min-width: 280px;
      border-collapse: collapse;
      font-size: 12px;
    }

    .chart-detail-table th,
    .chart-detail-table td {
      padding: 8px 9px;
      border-bottom: 1px solid #edf0f3;
      text-align: right;
      white-space: nowrap;
    }

    .chart-detail-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f1f5f9;
      color: #475467;
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .03em;
    }

    .chart-detail-table th:first-child,
    .chart-detail-table td:first-child {
      text-align: left;
    }

    .chart-detail-table tr:last-child td { border-bottom: 0; }

    .chart-detail-note {
      margin: 10px 0 0;
      color: #667085;
      font-size: 11px;
      line-height: 1.4;
    }

    .confirm-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(17, 24, 39, .46);
      backdrop-filter: blur(4px);
    }

    .confirm-overlay[hidden] { display: none; }

    .confirm-dialog {
      width: min(460px, 100%);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
      padding: 22px;
      animation: confirmIn .22s ease both;
    }

    @keyframes confirmIn {
      from { opacity: 0; transform: translateY(8px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .confirm-head {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: start;
    }

    .confirm-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--soft-blue);
      border: 1px solid #bfdbfe;
      color: var(--blue-dark);
      font-weight: 900;
      font-size: 18px;
    }

    .confirm-dialog h2 {
      margin: 0;
      font-size: 18px;
      line-height: 1.25;
      color: var(--text);
    }

    .confirm-dialog p {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.45;
    }

    .confirm-field {
      margin-top: 16px;
    }

    .confirm-field[hidden] { display: none; }

    .confirm-field label {
      display: block;
      margin-bottom: 7px;
      color: var(--slate);
      font-size: 12px;
      font-weight: 800;
    }

    .confirm-field input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 11px 12px;
      color: var(--text);
      font: inherit;
      font-weight: 700;
      outline: none;
    }

    .confirm-field input:focus {
      border-color: #93c5fd;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

    .confirm-field-error {
      min-height: 17px;
      margin-top: 7px;
      color: var(--red);
      font-size: 12px;
      font-weight: 800;
    }

    .confirm-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 22px;
    }

    .confirm-actions button {
      min-width: 104px;
      justify-content: center;
      box-shadow: none;
    }

    .confirm-yes {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
    }

    .confirm-yes:hover {
      background: #047857;
      border-color: #047857;
      box-shadow: 0 8px 18px rgba(5, 150, 105, .18);
    }

    .confirm-no {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
    }

    .confirm-no:hover {
      background: #b91c1c;
      border-color: #b91c1c;
      box-shadow: 0 8px 18px rgba(220, 38, 38, .18);
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      --bg: #0b1020;
      --panel: #131a2a;
      --soft: #0f1726;
      --soft-blue: #10284a;
      --text: #f3f6fb;
      --muted: #a8b3c7;
      --line: #29354a;
      --blue: #9db2e8;
      --blue-dark: #c3cfe8;
      --teal: #2dd4bf;
      --green: #34d399;
      --orange: #fbbf24;
      --red: #fb7185;
      --purple: #c084fc;
      --slate: #cbd5e1;
      --shadow: 0 18px 42px rgba(0, 0, 0, .34);
      --shadow-soft: 0 1px 2px rgba(0, 0, 0, .28);
    }

    html[data-theme="dark"] body {
      background: var(--bg);
    }

    html[data-theme="dark"] .info,
    html[data-theme="dark"] .confirm-icon {
      border-color: #244c75;
      background: var(--soft-blue);
      color: var(--blue-dark);
    }

    html[data-theme="dark"] button:not(.secondary):not(.small):not(.view-tab):not(.chart-expand-btn):not(.chart-modal-close):not(.theme-toggle),
    html[data-theme="dark"] .button:not(.secondary) {
      color: #0b1020;
    }

    html[data-theme="dark"] .hero-controls select,
    html[data-theme="dark"] input,
    html[data-theme="dark"] select,
    html[data-theme="dark"] textarea,
    html[data-theme="dark"] .confirm-field input {
      background: #0d1424;
      border-color: var(--line);
      color: var(--text);
    }

    html[data-theme="dark"] input::placeholder,
    html[data-theme="dark"] textarea::placeholder,
    html[data-theme="dark"] .map-search input::placeholder {
      color: #72819a;
      opacity: 1;
    }

    html[data-theme="dark"] button.secondary,
    html[data-theme="dark"] .button.secondary,
    html[data-theme="dark"] button.small,
    html[data-theme="dark"] .details-body > .actions button.small,
    html[data-theme="dark"] .chart-expand-btn,
    html[data-theme="dark"] .chart-modal-close {
      background: #0d1424;
      border-color: var(--line);
      color: var(--text);
    }

    html[data-theme="dark"] button.secondary:hover,
    html[data-theme="dark"] .button.secondary:hover,
    html[data-theme="dark"] button.small:hover,
    html[data-theme="dark"] .chart-expand-btn:hover,
    html[data-theme="dark"] .chart-modal-close:hover {
      background: #172236;
      border-color: #3b4b65;
      color: var(--text);
    }

    html[data-theme="dark"] .theme-toggle {
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      border-color: #3b4b65;
      color: #fbbf24;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    }

    html[data-theme="dark"] .card:hover,
    html[data-theme="dark"] .panel:hover {
      border-color: #3b4b65;
      box-shadow: 0 18px 36px rgba(0, 0, 0, .24);
    }

    html[data-theme="dark"] summary,
    html[data-theme="dark"] .details-body,
    html[data-theme="dark"] .data-table-wrap,
    html[data-theme="dark"] table,
    html[data-theme="dark"] .footer-note,
    html[data-theme="dark"] .chart-modal,
    html[data-theme="dark"] .chart-detail-card,
    html[data-theme="dark"] .chart-detail-table-wrap,
    html[data-theme="dark"] .confirm-dialog,
    html[data-theme="dark"] .empty-state,
    html[data-theme="dark"] .map-stat,
    html[data-theme="dark"] .preview-item {
      background: var(--panel);
    }

    html[data-theme="dark"] .form-card,
    html[data-theme="dark"] .form-intro,
    html[data-theme="dark"] .chart-modal-details,
    html[data-theme="dark"] .map-mode-toggle,
    html[data-theme="dark"] .map-search-control,
    html[data-theme="dark"] .automation-status {
      background: var(--soft);
    }

    html[data-theme="dark"] .territorial-command {
      background: linear-gradient(180deg, #131a2a, #101827);
    }

    html[data-theme="dark"] .territorial-command h2 {
      color: #8fa4d8;
    }

    html[data-theme="dark"] .territorial-command p {
      color: #dbe4f7;
    }

    html[data-theme="dark"] .next-sync-card {
      background: linear-gradient(180deg, rgba(45, 212, 191, .10), #0f1726);
      border-color: rgba(45, 212, 191, .24);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    html[data-theme="dark"] .next-sync-card strong {
      color: var(--blue);
    }

    html[data-theme="dark"] .map-mode-toggle button.is-active {
      color: #0b1020;
    }

    html[data-theme="dark"] .trend,
    html[data-theme="dark"] .trend.neutral {
      background: #172236;
      border-color: #334155;
      color: var(--slate);
    }

    html[data-theme="dark"] .trend.good,
    html[data-theme="dark"] .badge,
    html[data-theme="dark"] .badge.score-good,
    html[data-theme="dark"] .automation-status.is-ok,
    html[data-theme="dark"] .form-message.is-ok {
      background: rgba(16, 185, 129, .14);
      border-color: rgba(52, 211, 153, .34);
      color: #86efac;
    }

    html[data-theme="dark"] .trend.bad,
    html[data-theme="dark"] .badge.score-bad,
    html[data-theme="dark"] .automation-status.is-error,
    html[data-theme="dark"] .form-message.is-error {
      background: rgba(244, 63, 94, .14);
      border-color: rgba(251, 113, 133, .34);
      color: #fda4af;
    }

    html[data-theme="dark"] .badge.score-ok {
      background: rgba(45, 212, 191, .14);
      border-color: rgba(45, 212, 191, .32);
      color: #7dd3fc;
    }

    html[data-theme="dark"] .badge.score-warn {
      background: rgba(251, 191, 36, .14);
      border-color: rgba(251, 191, 36, .36);
      color: #fde68a;
    }

    html[data-theme="dark"] tbody tr:hover td,
    html[data-theme="dark"] tbody tr.is-selected-year td,
    html[data-theme="dark"] tbody tr.is-selected-year:hover td {
      background: #172236;
    }

    html[data-theme="dark"] td.metric-good,
    html[data-theme="dark"] .chart-detail-card.is-good .chart-detail-value {
      color: #86efac;
    }

    html[data-theme="dark"] td.metric-bad,
    html[data-theme="dark"] .chart-detail-card.is-bad .chart-detail-value {
      color: #fda4af;
    }

    html[data-theme="dark"] .map-search-results {
      background: rgba(19, 26, 42, .98);
      border-color: var(--line);
      box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
    }

    html[data-theme="dark"] .map-search-option:hover,
    html[data-theme="dark"] .map-search-option.is-active,
    html[data-theme="dark"] .map-search-clear:hover,
    html[data-theme="dark"] .map-mode-toggle button:hover {
      background: #172236;
      border-color: #334155;
    }

    html[data-theme="dark"] .map-shell,
    html[data-theme="dark"] .leaflet-container {
      background: #101827;
      border-color: var(--line);
    }

    html[data-theme="dark"] .map-empty-overlay {
      color: var(--muted);
      background: linear-gradient(135deg, rgba(15, 23, 38, .94), rgba(19, 26, 42, .88));
    }

    html[data-theme="dark"] .leaflet-popup-content-wrapper,
    html[data-theme="dark"] .leaflet-tooltip.map-tooltip {
      background: #131a2a;
      border-color: var(--line);
      color: var(--text);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
    }

    html[data-theme="dark"] .chart-detail-table th,
    html[data-theme="dark"] th {
      background: #172236;
      color: var(--muted);
    }

    html[data-theme="dark"] .chart-detail-table th,
    html[data-theme="dark"] .chart-detail-table td {
      border-bottom-color: var(--line);
    }

    .print-title { display: none; }

    @media (max-width: 1080px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-controls { min-width: 0; }

      .kpi-grid { grid-template-columns: repeat(3, 1fr); }
      .chart-grid, .analysis-grid { grid-template-columns: 1fr; }
      .territorial-top { grid-template-columns: 1fr; }
      .territorial-command,
      .territorial-analytics-grid { grid-template-columns: 1fr; }
      .territorial-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .map-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .territorial-map-panel .panel-title-row { align-items: flex-start; }
    }

    @media (max-width: 740px) {
      .page {
        width: 100%;
        padding: 10px 10px 48px;
      }
      .hero {
        padding: 14px;
        border-radius: 12px;
      }
      .hero-inner { gap: 11px; }
      .hero h1 { font-size: 25px; line-height: 1.08; }
      .hero p {
        max-width: 100%;
        font-size: 12.5px;
        line-height: 1.35;
      }
      .hero-meta { grid-template-columns: 1fr 1fr; gap: 7px; }
      .hero-meta-item { padding: 7px 8px; }
      .hero-meta-item span { font-size: 9.5px; }
      .hero-meta-item strong {
        font-size: 11.5px;
        overflow-wrap: anywhere;
      }
      .hero-meta-item:nth-child(2) { order: 3; grid-column: 1 / -1; }
      .hero-meta-item:nth-child(3) { order: 2; }
      .hero .actions { gap: 7px; margin-top: 10px; }
      .hero .actions button,
      .hero .actions .button {
        width: 100%;
        flex: 1 1 100%;
        justify-content: center;
        min-height: 37px;
        padding: 8px 9px;
        font-size: 12px;
      }
      .territorial-map-panel .panel-title-row {
        flex-direction: column;
        align-items: stretch;
      }
      .map-panel-actions {
        justify-items: stretch;
        min-width: 0;
      }
      .map-search {
        width: 100%;
      }
      .map-legend {
        justify-content: flex-start;
      }
      .map-mode-toggle {
        width: 100%;
      }
      .map-mode-toggle button {
        flex: 1 1 0;
      }
      .hero-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        border-radius: 12px;
        padding: 9px;
      }
      .hero-year-control {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px;
      }
      .hero-controls label { margin: 0; font-size: 10.5px; }
      .hero-controls select { padding: 9px 10px; }
      .theme-toggle {
        right: 10px;
        bottom: 10px;
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
      }
      .view-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px;
        padding: 4px;
      }
      .view-tab {
        min-width: 0;
        justify-content: center;
        padding: 9px 6px;
        font-size: 11.5px;
        line-height: 1.15;
        white-space: normal;
      }
      .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 10px;
      }
      .territorial-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .territorial-form,
      .territorial-preview-grid,
      .map-stat-row,
      .automation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .territorial-kpis { margin-top: 10px; }
      .automation-grid .wide { grid-column: auto; }
      .map-legend { justify-content: flex-start; }
      .map-shell { min-height: 330px; aspect-ratio: 4 / 3; }
      #territorialMap { min-height: 330px; }
      .territorial-command-side .actions button { width: 100%; }
      .card {
        min-height: 0;
        padding: 12px;
        border-radius: 9px;
      }
      .label {
        font-size: 10px;
        line-height: 1.18;
      }
      .info {
        width: 18px;
        height: 18px;
        font-size: 11px;
      }
      .value {
        margin-top: 10px;
        font-size: clamp(22px, 7vw, 27px);
        white-space: normal;
      }
      .trend {
        white-space: normal;
        align-items: flex-start;
        line-height: 1.15;
        padding: 5px 7px;
      }
      .sub {
        font-size: 11.5px;
        line-height: 1.34;
      }
      .insight {
        grid-template-columns: 1fr;
        margin-top: 12px;
        padding: 14px;
      }
      .insight-badges { align-items: stretch; }
      .badge { text-align: center; }
      .form-grid, .entry-grid, .trace-grid, .mini-grid.two, .mini-grid.three { grid-template-columns: 1fr; }
      .details-body { padding: 14px; }
      .details-body > .actions button { flex: 1 1 100%; }
      .panel-title-row { align-items: start; }
      .panel-tools { gap: 6px; }
      .chart-expand-btn { width: 32px; min-width: 32px; padding: 0; }
      .chart-expand-btn .chart-expand-text { display: none; }
      .chart-modal-overlay { padding: 10px; align-items: stretch; }
      .chart-modal { max-height: none; height: calc(100vh - 20px); padding: 16px; border-radius: 14px; }
      .chart-modal-head { gap: 12px; }
      .chart-modal h2 { font-size: 18px; }
      .chart-modal-body {
        flex: 1 1 auto;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(300px, 52vh) auto;
        gap: 12px;
        overflow: auto;
      }
      .chart-modal-canvas { min-height: 300px; height: 100%; }
      .chart-canvas-empty { font-size: 12px; }
      .chart-modal-details { max-height: none; overflow: visible; }
      .chart-detail-grid { grid-template-columns: 1fr; }
      .confirm-dialog { padding: 18px; }
      .confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .confirm-actions button { min-width: 0; }
      .section-head {
        display: block;
        margin-top: 18px;
      }
      .section-head h2 { font-size: 19px; }
      .section-head p { font-size: 12px; }
      .panel {
        padding: 15px;
        border-radius: 10px;
      }
      .panel h2 { font-size: 16px; }
      .note { font-size: 12px; }
      .chart-grid,
      .analysis-grid {
        gap: 12px;
        margin-top: 12px;
      }
      canvas { height: 250px; }
      .chart-canvas-box { height: 250px; }
      .data-table-wrap { max-height: 440px; }
      th:first-child, td:first-child,
      th:nth-child(2), td:nth-child(2) {
        position: sticky;
        background: #fff;
        z-index: 2;
      }
      th:first-child, td:first-child { left: 0; min-width: 54px; }
      th:nth-child(2), td:nth-child(2) { left: 54px; min-width: 58px; box-shadow: 8px 0 12px rgba(15,23,42,.06); }
      th:first-child, th:nth-child(2) { background: var(--soft); z-index: 3; }
      html[data-theme="dark"] th:first-child,
      html[data-theme="dark"] td:first-child,
      html[data-theme="dark"] th:nth-child(2),
      html[data-theme="dark"] td:nth-child(2) {
        background: var(--panel);
      }
      html[data-theme="dark"] th:first-child,
      html[data-theme="dark"] th:nth-child(2) {
        background: var(--soft);
      }
    }

    @media (max-width: 360px) {
      .kpi-grid,
      .territorial-kpis,
      .map-stat-row,
      .automation-grid {
        grid-template-columns: 1fr;
      }
    }

    @media print {
      * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      body { background: #fff; }
      .page { width: 100%; padding: 0; }
      .sidebar, .hero, .view-tabs, .kpi-grid, .insight, #territorialView, details, .footer-note, .confirm-overlay, .chart-modal-overlay, .theme-toggle, .chart-labels-toggle, .sr-only { display: none !important; }
      #interanualView[hidden] { display: none !important; }
      #interanualView .analysis-section { break-before: auto; page-break-before: auto; }
      .print-title {
        display: block;
        margin: 0 0 6mm;
        padding: 5mm 6mm;
        border: 1px solid #d9e4f2;
        border-radius: 5mm;
        background: #fff;
        color: #111827;
      }
      .print-title h1 {
        margin: 1mm 0 1mm;
        font-size: 20pt;
        letter-spacing: 0;
      }
      .print-title p {
        margin: 0;
        font-size: 10pt;
        color: #667085;
      }
      .print-eyebrow {
        font-size: 8pt;
        text-transform: uppercase;
        letter-spacing: 0;
        font-weight: 900;
        color: #14306e;
      }
      .chart-grid, .analysis-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6mm;
        margin-top: 0;
      }
      .panel {
        box-shadow: none;
        border: 1px solid #d9e4f2;
        border-radius: 4mm;
        padding: 4mm;
        break-inside: avoid;
        page-break-inside: avoid;
        background: #fff;
      }
      .panel h2 { font-size: 13pt; }
      .note { font-size: 8.5pt; }
      .panel-title-row .info, .chart-expand-btn { display: none; }
      canvas { height: 68mm !important; margin-top: 3mm; }
      .chart-canvas-box { height: 68mm !important; margin-top: 3mm; }
      .analysis-section {
        break-before: page;
        page-break-before: always;
        margin-top: 0;
      }
      .section-head {
        margin: 0 0 4mm;
        padding: 0;
      }
      .section-head h2 { font-size: 16pt; }
      .section-head p { font-size: 9pt; max-width: none; }
      .analysis-grid canvas { height: 56mm !important; }
      .analysis-grid .chart-canvas-box { height: 56mm !important; }
      @page { size: A4 landscape; margin: 8mm; }
    }

    /* === Ajustes UX presidencia (solo presentación; no cambia lógica ni cálculos) === */
    /* Ocultar estados/controles técnicos del panel territorial */
    #territorialPrivacyBadge,
    .territorial-command-side .next-sync-card,
    #automationStatus { display: none !important; }

    /* Overlay del mapa: que el texto envuelva y no se corte en mobile */
    .map-empty-overlay {
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      justify-items: stretch;
      padding: 16px 22px;
      text-align: center;
      line-height: 1.35;
    }

    /* Targets táctiles más grandes para usuario mayor (mobile) */
    @media (max-width: 740px) {
      /* Evitar que el mapa derive su ancho desde la altura (aspect-ratio + min-height)
         y termine más ancho que la pantalla, cortando el contenido a la derecha. */
      .map-shell { aspect-ratio: auto; height: 320px; min-height: 320px; }
      #territorialMap { height: 100%; min-height: 320px; }
      .info { width: 26px; height: 26px; font-size: 13px; }
      .theme-toggle {
        width: 48px; height: 48px;
        min-width: 48px; min-height: 48px;
        right: 12px; bottom: 12px;
        opacity: .82;
      }
      .theme-toggle-icon, .chart-labels-toggle-icon { width: 24px; height: 24px; }
      .chart-labels-toggle { bottom: 68px; }
      .chart-expand-btn { min-height: 40px; width: 40px; min-width: 40px; }
      .map-mode-toggle button { min-height: 40px; padding: 9px 12px; }
      .map-search-clear { width: 38px; min-width: 38px; height: 38px; }
      button.small { padding: 10px 12px; }
    }

    @media (max-width: 900px) {
      .app { flex-direction: column; }
      .sidebar {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
      }
      .sidebar-brand { padding: 0; border-bottom: 0; }
      .sidebar-foot { display: none; }
      .view-tabs-label { display: none; }
      .view-tabs { flex-direction: row; padding: 0 0 0 8px; flex: 1 1 auto; }
      .view-tab { width: auto; }
      .page { max-width: none; }
    }

    /* ── Tweaks: densidad ── */
    html[data-density="compacto"] .page { padding: 18px 22px 44px; }
    html[data-density="compacto"] .card { padding: 12px; min-height: 0; }
    html[data-density="compacto"] .value { font-size: 26px; margin-top: 8px; }
    html[data-density="compacto"] .sub { margin-top: 6px; font-size: 11.5px; }
    html[data-density="compacto"] .kpi-grid { margin-top: 12px; }
    html[data-density="compacto"] .kpi-grid .card, html[data-density="compacto"] .territorial-kpis .card { padding: 12px 14px 11px; }
    html[data-density="compacto"] .hero h1 { font-size: 21px; }
    html[data-density="amplio"] .page { padding: 36px 46px 72px; }
    html[data-density="amplio"] .card { padding: 24px; }
    html[data-density="amplio"] .value { font-size: 38px; margin-top: 14px; }
    html[data-density="amplio"] .kpi-grid { margin-top: 24px; }
    html[data-density="amplio"] .kpi-grid .card, html[data-density="amplio"] .territorial-kpis .card { padding: 24px 22px 20px; }
    html[data-density="amplio"] .hero h1 { font-size: 29px; }

    /* ── Tweaks: tarjetas planas ── */
    html[data-cards="planas"] .kpi-grid,
    html[data-cards="planas"] .territorial-kpis,
    html[data-cards="planas"] .card,
    html[data-cards="planas"] .panel,
    html[data-cards="planas"] details {
      box-shadow: none;
      border-color: #d5dae4;
    }
    html[data-cards="planas"] .card:hover,
    html[data-cards="planas"] .panel:hover {
      box-shadow: none;
      transform: none;
      border-color: #c4cbd9;
    }
    html[data-theme="dark"][data-cards="planas"] .card,
    html[data-theme="dark"][data-cards="planas"] .panel,
    html[data-theme="dark"][data-cards="planas"] details {
      border-color: #33405a;
    }