/* Original component design, recolored in the middle reference: blue-gray, pale lavender, navy and turquoise.
   Layout, radii and raised/inset surfaces remain in the original stylesheets. */
:root, body[data-tema] {
  color-scheme: light;
  --bg: #bbc8d8;
  --bg-card: #bbc8d8;
  --bg-grad-1: rgba(218, 225, 246, .22);
  --bg-grad-2: rgba(66, 93, 134, .08);
  --shadow-dark: #a0afc2;
  --shadow-light: #dce4f0;
  --text: #17243b;
  --muted: #35465c;
  --blue: #005c68;
  --azure: #005c68;
  --navy: #253a64;
  --lila: #005c68;
  --accent: #005c68;
  --accent-soft: rgba(0, 159, 177, .13);
  --ok: #23704e;
  --off: #596778;
  --fail: #a9364a;
  --warn: #005c68;
  --border-color: #9aaec4;
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --c-accent: var(--accent);
  --c-danger: var(--fail);
}
body { font-size: 18px; }
body[data-tema] {
  background: radial-gradient(1200px 800px at 85% -10%, var(--bg-grad-1), transparent 55%),
    radial-gradient(1000px 700px at 0% 110%, var(--bg-grad-2), transparent 55%), var(--bg);
}
a { color: var(--accent); }
.topbar { background: rgba(23,36,59,.96); }
.sidebar { border-right-color: var(--border-color); box-shadow: 12px 0 28px rgba(0,0,0,.13); }
.btn, .neu-btn-primary, .login-btn, .btn-massive {
  color: var(--text);
  background: linear-gradient(135deg, #c6e8eb, #9aaec4);
  box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
}
.neu-btn { background: var(--bg); }
.neu-btn-primary:hover { color: var(--text); }
.neu-btn-primary:active { box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light); }
.form-input, .filter-input, .maintenance .form-input, #search-input {
  color: var(--text); background: var(--bg); font-size: 18px;
  border-color: var(--border-color);
}
.form-input:focus { box-shadow: 0 0 0 2px rgba(0,159,177,.2); }
.form-label { font-size: 16px; }
.login-subtitle { font-size: 18px; }
.modal-overlay { background: rgba(0,0,0,.35); }
.login-container { max-width: min(440px, calc(100vw - 32px)); }
.topbar-title h1, .view-head h2 { font-size: 28px; }
.panel-title, .kpi-label, .filter-group label, .data-table th { font-size: 16px; }
.view-head p, .hero-sub, .panel-hint, .data-table { font-size: 18px; }
.ctl-sm { font-size: 16px !important; }
.brand-text { min-width: 0; overflow-wrap: anywhere; }
.brand-logo { flex-shrink: 0; }
.ctl-tag-lum { color: #216752; background: #e1f0e9; }
.ctl-tag-act { color: #4b6382; background: #c6e8eb; }
.data-table th, .maintenance form, .m-item { border-color: var(--border-color); }
.mobile-header { background: linear-gradient(135deg, rgba(0,159,177,.10), transparent); }
.mobile-container .stat-lbl { font-size: 16px; }
.mobile-header ~ p a { color: var(--accent); }
::selection { background: #9aaec4; color: var(--text); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.leaflet-container { background: var(--bg); }
.leaflet-control-attribution, .node-label { background: #bbc8d8 !important; color: #17243b !important; }
.street-label, .road-label { font: 15px var(--font); color: #17243b; text-shadow: 0 1px 2px #bbc8d8; }
.toggle-row .t-name { color: var(--text) !important; }
#btn-tramo { background: #c6e8eb !important; color: #17243b !important; font-size: 16px; }
#map-alertas { background: #f0d4dc; color: #842b30; }
#panel { max-height: calc(100dvh - 36px); overflow-y: auto; }
#focus-card { max-height: calc(100dvh - 36px); overflow-y: auto; }
.preview-note, .preview-placeholder {
  background: var(--bg); color: var(--muted); border-color: var(--border-color); font-size: 18px;
}
.preview-note { color: var(--text); }
@media (max-width: 860px) {
  .topbar-title h1, .view-head h2 { font-size: 26px; }
}




/* Mixed light/dark cards inspired by the middle dashboard in the reference. */
:root, body[data-tema] { --bg-card: #edf0fa; --warn: #805518; }
body { background: linear-gradient(135deg, #c8d2e1, #aabbd0); }
.kpi-card, .panel-box, .chart-box, .schedule-card, .neu-card,
.mobile-container .card, .ctl-card {
  --bg: #edf0fa;
  --shadow-dark: #bec9db;
  --shadow-light: #f7f8fc;
  background: linear-gradient(145deg, #f0f2fa, #e4e9f5);
  border: 1px solid #d6dfed;
  box-shadow: 6px 6px 14px rgba(33,53,85,.18), -4px -4px 12px rgba(236,241,250,.45);
}
.sidebar, .topbar, #view-inicio .kpi-card:first-child, #view-inicio .kpi-lower > .panel-box:last-child {
  --bg: #17243b;
  --text: #e1e9f5;
  --muted: #b4c4d9;
  --blue: #66d4df;
  --azure: #acc4f0;
  --lila: #93a8e1;
  --accent: #66d4df;
  --navy: #588ed1;
  --shadow-dark: #101c30;
  --shadow-light: #2c3f60;
  background: linear-gradient(145deg, #213957, #18243e);
  color: var(--text);
  border-color: #344d70;
}
.sidebar .nav-link.active { background: #424b78; color: #eeedf6; }
.sidebar .nav-link:hover { color: #eeedf6; }
.topbar-title h1 { color: #e1e9f5; }
.btn, .neu-btn-primary, .login-btn, .btn-massive {
  background: linear-gradient(135deg, #424b78, #293354); color: #eeedf6;
}
.neu-btn { background: var(--bg); color: var(--text); }
.neu-btn-primary:hover { color: #eeedf6; }
.view-head h2::after, .bar-fill, .ave-fill { background: linear-gradient(90deg, #00a8bb, #588ed1); }
.ctl-tag-act { color: #253a64; background: #d5ddf3; }
.ctl-tag-lum { color: #005866; background: #c6e8eb; }
#btn-tramo { background: #424b78 !important; color: #eeedf6 !important; }
.preview-note { background: #dce6f2; }
::selection { background: #67d2db; color: #10283b; }

/* Titles: indigo on light surfaces, soft lavender on navy surfaces. */
:root, body[data-tema] {
  --heading: #253a64;
  --heading-end: #513668;
}
.sidebar, .topbar, #view-inicio .kpi-card:first-child,
#view-inicio .kpi-lower > .panel-box:last-child {
  --heading: #e8e7f4;
  --heading-end: #bdb5df;
}
h1, h2, h3, h4, h5, h6, .panel-title, .brand-name, .kpi-label,
.topbar-title h1 { color: var(--heading); }
.grad, .title-grad, .view-head h2 {
  background: linear-gradient(90deg, var(--heading), var(--heading-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.view-head h2::after { background: linear-gradient(90deg, #303b60, #77729a); }

/* Display typography with a broader, heavier shape. */
:root, body[data-tema] { --font-heading: "Segoe UI", "Arial", sans-serif; }
h1, h2, h3, h4, h5, h6, .panel-title, .brand-name, .kpi-label {
  font-family: var(--font-heading); font-weight: 800; line-height: 1.2;
}
.topbar-title h1, .view-head h2 { font-size: 36px; letter-spacing: -.5px; }
.panel-title, .chart-box h4, .schedule-card h4 { font-size: 22px; letter-spacing: .3px; }
.kpi-label { font-size: 18px; letter-spacing: .3px; }
.brand-name { font-size: 20px; letter-spacing: .3px; }
.login-title, .mobile-header h1 { font-size: 32px; }
.btn:hover, .neu-btn-primary:hover, .login-btn:hover, .btn-massive:hover { filter: brightness(1.08); }
.btn-mini, .tab.active, .pg-btn:hover:not(:disabled), .mapa-btn.active { color: #303b60; }
.btn-mini:hover { color: #423e65; }
.topbar-title { min-width: 0; }
.topbar-right { flex-shrink: 0; }
@media (max-width: 860px) {
  .topbar-title h1, .view-head h2 { font-size: 30px; }
  .panel-title, .chart-box h4, .schedule-card h4 { font-size: 20px; }
}
@media (max-width: 480px) {
  .topbar-title h1, .view-head h2 { font-size: 28px; }
}

/* More breathing room without changing the section order or card structure. */
.views { max-width: 1480px; padding: 32px 36px 64px; }
.views > p { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.view-head { margin-bottom: 32px; }
.view-head h2 { padding-bottom: 12px; }
.view-head p { margin-top: 8px; max-width: 780px; }
.topbar { padding: 20px 32px; }
.topbar-sub { display: block; margin-top: 6px; line-height: 1.5; }
.kpi-grid, .kpi-lower, .charts-grid, .analytics-strip, .schedule-grid, .maint-cols { gap: 24px; }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.kpi-lower { margin-top: 32px; }
.kpi-card, .panel-box, .chart-box, .schedule-card { padding: 28px; min-width: 0; }
.panel-title, .chart-box h4 { margin-bottom: 22px; }
.panel-title { text-transform: none; letter-spacing: -.2px; line-height: 1.3; }
.kpi-label { line-height: 1.4; margin-bottom: 18px; }
.kpi-note, .panel-hint { line-height: 1.65; }
.panel-hint { margin-top: 16px; }
.schedule-now { gap: 12px; }
.snow-row { padding: 12px 14px; flex-wrap: wrap; }
.filter-bar { gap: 16px; }
.logs-toolbar, .chart-toolbar { margin-bottom: 24px; }
.tabs { flex-wrap: wrap; }
.preview-note { margin-bottom: 28px; }
/* Gradients follow each surface's heading colors, including dark cards. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .topbar-title h1, .view-head h2, .panel-title, .chart-box h4,
  .schedule-card h4, .login-title, .mobile-header h1, .brand-name {
    background-image: linear-gradient(105deg, var(--heading) 0%, var(--heading-end) 100%);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .brand-name .grad, .login-title .grad { background: none; -webkit-text-fill-color: inherit; }
}
.view-head h2::after { background: linear-gradient(90deg, #253a64, #77729a); width: 64px; }
@media (min-width: 861px) {
  .sidebar { width: 288px; }
  .main { margin-left: 288px; }
}
.sb-top { padding: 24px 18px; }
.brand { gap: 12px; }
.brand-logo { width: 48px; height: 48px; }
.brand-logo-img { width: 34px; height: 34px; }
.brand-name { font-size: 20px; letter-spacing: -.3px; text-transform: none; }
.brand-sub { margin-top: 6px; line-height: 1.45; }
@media (max-width: 860px) {
  .views { padding: 24px 20px 48px; }
  .topbar { padding: 18px 20px; }
  .view-head { margin-bottom: 24px; }
  .kpi-card, .panel-box, .chart-box, .schedule-card { padding: 22px; }
  .kpi-grid, .kpi-lower, .charts-grid, .analytics-strip, .schedule-grid, .maint-cols { gap: 20px; }
}
@media (max-width: 480px) {
  .views { padding: 20px 16px 40px; }
  .topbar { padding: 16px; gap: 12px; }
  .kpi-lower { grid-template-columns: minmax(0, 1fr); }
  .kpi-card, .panel-box, .chart-box, .schedule-card { padding: 20px; }
}

/* Section headings: underline follows the full text width. */
.view-head h2 { max-width: 100%; }
.view-head h2::after { width: 100%; }
.view-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
/* Match standard view headings while keeping maintenance content centered. */
#view-tecnicos, #view-mistareas { width: 100%; }
#desktop-management, #view-mistareas > .panel-box, #tech-feedback, #tech-orders { width: 100%; max-width: 1100px; margin-inline: auto; }
#desktop-management form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px 0; margin-bottom: 24px; }
#desktop-management form h3 { grid-column: 1 / -1; margin: 0; }
#desktop-management form button { justify-self: start; align-self: end; }
#desktop-management > h3 { margin: 24px 0 12px; }
#tech-feedback:not(:empty), #tech-orders:not(:empty) { margin-bottom: 24px; }
/* Mode colors match the phase indicators already used by the application. */
.schedule-card[data-fase="dia"] { --mode-color: #fbbf24; --mode-ink: #765000; }
.schedule-card[data-fase="noche"] { --mode-color: #22d3ee; --mode-ink: #005866; }
.schedule-card[data-fase="ahorro"] { --mode-color: #34d399; --mode-ink: #176444; }
.schedule-card[data-fase] { border-top: 4px solid var(--mode-color); }
.schedule-card[data-fase] .schedule-head { align-items: flex-start; gap: 12px; }
.schedule-card[data-fase] .sched-dot { margin-top: 8px; }
.schedule-card[data-fase] h4 {
  background: none; color: var(--mode-ink); -webkit-text-fill-color: currentColor; margin: 0;
}
.schedule-card[data-fase].active { outline: 2px solid var(--mode-color); outline-offset: 3px; }
@media (max-width: 600px) {
  #desktop-management form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #desktop-management form button { width: 100%; }
}