:root {
  --bg: #03151e;
  --bg-deep: #021018;
  --sidebar: #031720;
  --panel: #082734;
  --panel-2: #0b3241;
  --panel-3: #0d3b4b;
  --line: rgba(92, 183, 215, .22);
  --line-strong: rgba(92, 183, 215, .42);
  --text: #f6fbff;
  --muted: #9db9c7;
  --muted-2: #6f94a6;
  --lime: #92e600;
  --lime-2: #b7ff3f;
  --cyan: #38d6f2;
  --cyan-2: #7ceaff;
  --amber: #ffb536;
  --orange: #ff8d36;
  --red: #ff5877;
  --green: #44dca2;
  --shadow: 0 20px 60px rgba(0, 0, 0, .26);
  --sidebar-w: 272px;
  --topbar-h: auto;
  --radius: 18px;
  --radius-sm: 12px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 76% 8%, rgba(35, 163, 196, .13), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(111, 209, 0, .08), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #031821 0%, #02131b 100%);
  border-right: 1px solid var(--line);
  box-shadow: 14px 0 50px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 25px 20px 18px;
  cursor: pointer;
  user-select: none;
}
.brand:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.brand-mark {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #f3fbff;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.05), 0 0 24px rgba(56, 214, 242, .12);
  background: #061f2a;
}
.brand-mark span { color: var(--lime); font-size: 30px; font-weight: 900; letter-spacing: -.06em; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font-size: 24px; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.brand-copy span { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .28em; margin-top: 8px; }
.sidebar-divider { height: 1px; margin: 0 18px 14px; background: var(--line); }
.sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 0 10px 18px; scrollbar-width: thin; scrollbar-color: rgba(146,230,0,.35) transparent; }
.nav-group { margin: 10px 0 14px; }
.nav-group-title {
  padding: 8px 10px 6px;
  color: #6f9aac;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nav-item {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  margin: 3px 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #b8d5e2;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.nav-item:hover { color: #fff; background: rgba(56,214,242,.07); border-color: rgba(56,214,242,.1); }
.nav-item.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(116,205,0,.25), rgba(56,214,242,.06));
  border-color: rgba(146,230,0,.28);
  box-shadow: inset 3px 0 0 var(--lime);
}
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; color: #7fcde0; font-size: 17px; }
.nav-item.is-active .nav-icon { color: var(--lime); }
.nav-label { font-weight: 690; line-height: 1.12; }
.nav-tag {
  min-width: 34px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #d8f8ff;
  background: rgba(56,214,242,.15);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}
.nav-item.is-active .nav-tag { color: #071800; background: var(--lime); }
.sidebar-footer { flex: 0 0 auto; padding: 12px 10px 16px; background: linear-gradient(0deg, rgba(0,0,0,.18), transparent); }
.freeze-card { padding: 13px; border: 1px solid rgba(146,230,0,.22); border-radius: 13px; background: rgba(42,83,0,.18); display: grid; gap: 4px; }
.freeze-card__label { color: var(--lime-2); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.freeze-card strong { font-size: 13px; }
.freeze-card span { color: #a7c2ce; font-size: 11px; line-height: 1.35; }
.privacy-line { margin-top: 10px; padding: 0 4px; color: #86a8b7; font-size: 10px; display: flex; align-items: center; gap: 7px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.status-dot--safe { background: var(--green); box-shadow: 0 0 12px rgba(68,220,162,.6); }
.status-dot--warn { background: var(--amber); box-shadow: 0 0 12px rgba(255,181,54,.55); }
.status-dot--danger { background: var(--red); box-shadow: 0 0 12px rgba(255,88,119,.55); }

.workspace { grid-column: 2; min-width: 0; min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(3, 21, 30, .94);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
  backdrop-filter: blur(18px);
}
.topbar-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 30px 12px; }
.topbar-title { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.topbar h1 { margin: 3px 0 2px; font-size: clamp(23px, 2.2vw, 34px); line-height: 1.04; letter-spacing: -.045em; }
.topbar p { margin: 0; color: var(--muted); font-size: 13px; }
.system-badges { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 7px; min-height: 29px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: #b7d4e0; background: rgba(8,39,52,.72); font-size: 10px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.badge--version { color: var(--lime-2); border-color: rgba(146,230,0,.26); background: rgba(92,146,0,.12); }
.badge--safe { color: var(--green); }
.badge--data { color: var(--cyan-2); }
.controlbar { display: flex; align-items: center; gap: 12px; padding: 10px 30px 15px; border-top: 1px solid rgba(92,183,215,.1); overflow-x: auto; }
.date-presets { display: flex; gap: 6px; flex: 0 0 auto; }
.chip-button, .button, .icon-button {
  border: 1px solid var(--line);
  background: rgba(7, 35, 47, .82);
  transition: .17s ease;
  cursor: pointer;
}
.chip-button { min-height: 39px; padding: 8px 12px; border-radius: 11px; color: #d6e8ef; font-weight: 700; }
.chip-button:hover, .chip-button.is-active { border-color: rgba(146,230,0,.52); color: var(--lime-2); background: rgba(72,111,0,.2); }
.date-range { display: flex; align-items: end; gap: 8px; min-width: max-content; }
.date-range label { display: grid; gap: 4px; color: #85a9b9; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.date-range input, .input, .select, .textarea {
  min-height: 39px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #061f2a;
  color: #f6fbff;
  outline: none;
}
.date-range input:focus, .input:focus, .select:focus, .textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(56,214,242,.12); }
.date-arrow { color: #648b9d; padding-bottom: 10px; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: 11px; color: #eaf8ff; font-weight: 780; white-space: nowrap; }
.button svg { font-size: 17px; }
.button:hover { transform: translateY(-1px); border-color: rgba(56,214,242,.5); background: rgba(12,55,70,.95); }
.button--primary { color: #071600; border-color: #78bc00; background: linear-gradient(180deg, #79bf00, #5b9300); box-shadow: 0 9px 22px rgba(94,150,0,.18); }
.button--primary:hover { color: #071600; border-color: var(--lime); background: linear-gradient(180deg, #95e600, #69a900); }
.button--accent { color: #00202a; border-color: var(--cyan); background: linear-gradient(180deg, #61e8ff, #2bbbd6); }
.button--warning { color: #271300; border-color: var(--amber); background: linear-gradient(180deg, #ffc661, #e89a20); }
.button--danger { color: #fff; border-color: rgba(255,88,119,.7); background: rgba(141,30,52,.65); }
.button--ghost { background: rgba(5,28,38,.7); }
.button--small { min-height: 32px; padding: 6px 10px; border-radius: 9px; font-size: 12px; }
.button[disabled], .chip-button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 11px; color: #d9f2fb; }
.icon-button:hover { border-color: rgba(56,214,242,.55); color: var(--cyan-2); }
.icon-button svg { font-size: 19px; }
.quick-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.mobile-only { display: none; }

.main { min-height: calc(100vh - 150px); padding: 24px 30px 48px; }
.page { max-width: 1740px; margin: 0 auto; animation: page-in .25s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.page-head h2 { margin: 2px 0 4px; font-size: clamp(24px, 2.7vw, 40px); line-height: 1.04; letter-spacing: -.045em; }
.page-head p { margin: 0; color: var(--muted); max-width: 850px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 26px 0 12px; }
.section-title h3 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.section-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.section-kicker { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }

.hero {
  position: relative;
  min-height: 350px;
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.5fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: #071e28;
  box-shadow: var(--shadow);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(1,17,24,.98) 0%, rgba(2,20,28,.9) 33%, rgba(2,20,28,.18) 68%, rgba(1,14,21,.42) 100%),
    linear-gradient(0deg, rgba(1,16,23,.92) 0%, transparent 44%),
    url('../img/barcelona-noche-sasa.jpg');
  background-size: cover;
  background-position: center;
  filter: saturate(1.06);
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(56,214,242,.06), transparent 38%, rgba(146,230,0,.04)); pointer-events: none; }
.hero-content { position: relative; z-index: 1; padding: clamp(28px, 4vw, 55px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero-brand .brand-mark { width: 50px; height: 50px; }
.hero-brand .brand-mark span { font-size: 26px; }
.hero-brand-copy { display: grid; }
.hero-brand-copy strong { font-size: 18px; letter-spacing: -.02em; }
.hero-brand-copy span { color: var(--lime); font-size: 9px; font-weight: 900; letter-spacing: .22em; }
.hero h2 { margin: 0 0 12px; max-width: 620px; font-size: clamp(38px, 5.5vw, 74px); line-height: .94; letter-spacing: -.06em; }
.hero h2 em { color: var(--lime); font-style: normal; }
.hero p { max-width: 650px; margin: 0 0 22px; color: #c4d9e2; font-size: clamp(14px, 1.35vw, 18px); }
.hero-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.hero-side { position: relative; z-index: 1; min-height: 350px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 24px; }
.hero-status-card { width: min(460px, 100%); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 16px; border: 1px solid rgba(124,234,255,.24); border-radius: 17px; background: rgba(2,22,31,.78); backdrop-filter: blur(14px); box-shadow: 0 18px 45px rgba(0,0,0,.27); }
.hero-status-card .mini-stat { padding: 11px; border-radius: 11px; background: rgba(8,47,61,.7); border: 1px solid rgba(92,183,215,.16); }
.mini-stat span { display: block; color: #8fb1c0; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mini-stat strong { display: block; margin-top: 5px; font-size: 18px; }
.mini-stat strong.lime { color: var(--lime-2); }
.mini-stat strong.cyan { color: var(--cyan-2); }

.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.quick-card {
  position: relative;
  min-height: 142px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(11,50,65,.95), rgba(5,29,39,.92));
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
  cursor: pointer;
  transition: .18s ease;
}
.quick-card::before { content: ""; position: absolute; inset: auto -35px -55px auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(56,214,242,.13), transparent 68%); }
.quick-card:hover { transform: translateY(-3px); border-color: rgba(146,230,0,.42); }
.quick-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--cyan-2); background: rgba(56,214,242,.1); border: 1px solid rgba(56,214,242,.18); font-size: 20px; }
.quick-card h3 { margin: 13px 0 4px; font-size: 16px; }
.quick-card p { margin: 0; color: var(--muted); font-size: 12px; }
.quick-card .arrow { position: absolute; right: 16px; top: 16px; color: var(--lime); font-size: 20px; }

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.metric-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-card {
  position: relative;
  min-height: 134px;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(12,55,70,.94), rgba(6,31,42,.95));
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.metric-card::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--lime), transparent); opacity: .55; }
.metric-label { color: #94b5c3; font-size: 10px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.metric-value { margin-top: 12px; font-size: clamp(25px, 2.3vw, 38px); font-weight: 900; line-height: 1; letter-spacing: -.05em; }
.metric-value--lime { color: var(--lime); }
.metric-value--cyan { color: var(--cyan-2); }
.metric-value--amber { color: var(--amber); }
.metric-value--red { color: var(--red); }
.metric-note { margin-top: 9px; color: #9ab8c5; font-size: 11px; }
.metric-source { margin-top: 6px; color: #648b9c; font-size: 9px; }
.metric-delta { position: absolute; top: 15px; right: 15px; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; background: rgba(68,220,162,.1); color: var(--green); }

.panel-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(10,48,62,.94), rgba(5,29,39,.96));
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
}
.panel--2 { grid-column: span 2; }
.panel--3 { grid-column: span 3; }
.panel--4 { grid-column: span 4; }
.panel--5 { grid-column: span 5; }
.panel--6 { grid-column: span 6; }
.panel--7 { grid-column: span 7; }
.panel--8 { grid-column: span 8; }
.panel--9 { grid-column: span 9; }
.panel--12 { grid-column: span 12; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-header h3, .panel-header h4 { margin: 0; letter-spacing: -.025em; }
.panel-header h3 { font-size: 19px; }
.panel-header h4 { font-size: 15px; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.panel-badge { padding: 5px 8px; border-radius: 999px; color: var(--cyan-2); background: rgba(56,214,242,.11); font-size: 9px; font-weight: 800; white-space: nowrap; }
.panel--flat { box-shadow: none; }
.panel--warning { border-color: rgba(255,181,54,.3); background: linear-gradient(155deg, rgba(69,47,10,.66), rgba(34,27,11,.75)); }
.panel--danger { border-color: rgba(255,88,119,.28); }
.panel--success { border-color: rgba(68,220,162,.25); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-grid { display: grid; grid-template-columns: repeat(6, minmax(130px,1fr)); gap: 9px; }
.field { display: grid; gap: 5px; }
.field label { color: #83a7b8; font-size: 9px; font-weight: 820; text-transform: uppercase; letter-spacing: .09em; }
.select { width: 100%; }
.textarea { width: 100%; min-height: 110px; resize: vertical; }

.table-wrap { overflow: auto; border: 1px solid rgba(92,183,215,.15); border-radius: 12px; }
.table { width: 100%; border-collapse: collapse; min-width: 720px; }
.table th, .table td { padding: 11px 12px; border-bottom: 1px solid rgba(92,183,215,.12); text-align: left; vertical-align: middle; }
.table th { position: sticky; top: 0; z-index: 1; color: #8bc5d8; background: #0a3342; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.table td { color: #d9ebf2; font-size: 12px; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(56,214,242,.045); }
.table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.table .muted { color: var(--muted); }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.status-pill--ok { color: var(--green); background: rgba(68,220,162,.1); border: 1px solid rgba(68,220,162,.2); }
.status-pill--warn { color: var(--amber); background: rgba(255,181,54,.1); border: 1px solid rgba(255,181,54,.2); }
.status-pill--danger { color: var(--red); background: rgba(255,88,119,.1); border: 1px solid rgba(255,88,119,.2); }
.status-pill--info { color: var(--cyan-2); background: rgba(56,214,242,.1); border: 1px solid rgba(56,214,242,.2); }
.status-pill--neutral { color: #b9ced7; background: rgba(157,185,199,.08); border: 1px solid rgba(157,185,199,.15); }

.progress { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(34,88,108,.58); }
.progress > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lime)); box-shadow: 0 0 12px rgba(146,230,0,.18); }
.progress--amber > span { background: linear-gradient(90deg, #f1932c, var(--amber)); }
.progress--red > span { background: linear-gradient(90deg, #d33a59, var(--red)); }
.bar-list { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(180px, 2fr) auto; gap: 12px; align-items: center; }
.bar-row-label { color: #d9edf4; font-size: 12px; font-weight: 700; }
.bar-row-value { min-width: 86px; text-align: right; color: #bcd4de; font-size: 11px; font-variant-numeric: tabular-nums; }

.alert-list { display: grid; gap: 9px; }
.alert-item { padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(92,183,215,.16); background: rgba(4,27,36,.7); }
.alert-item strong { display: block; font-size: 12px; }
.alert-item p { margin: 4px 0 0; color: #9eb9c6; font-size: 11px; }
.alert-item--warning { border-left: 3px solid var(--amber); }
.alert-item--danger { border-left: 3px solid var(--red); }
.alert-item--safe { border-left: 3px solid var(--green); }

.info-strip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 12px 0; border: 1px solid rgba(56,214,242,.2); border-radius: 12px; background: rgba(5,39,52,.65); color: #b9d4df; font-size: 11px; }
.info-strip strong { color: var(--cyan-2); }
.info-strip--warning { border-color: rgba(255,181,54,.3); background: rgba(75,48,7,.34); }
.info-strip--warning strong { color: var(--amber); }
.info-strip--safe { border-color: rgba(68,220,162,.28); background: rgba(9,73,54,.28); }
.info-strip--safe strong { color: var(--green); }

.tabs { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3,24,33,.7); width: max-content; max-width: 100%; overflow-x: auto; }
.tab { min-height: 34px; padding: 7px 11px; border: 0; border-radius: 9px; color: #94b7c6; background: transparent; font-weight: 750; cursor: pointer; white-space: nowrap; }
.tab:hover { color: #fff; }
.tab.is-active { color: #071700; background: var(--lime); }

.iframe-shell { position: relative; min-height: 610px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: #03131b; }
.iframe-shell iframe { width: 100%; height: 720px; display: block; border: 0; background: #03131b; }
.iframe-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #061f2a; }
.iframe-toolbar p { margin: 0; color: #8eafbd; font-size: 11px; }
.iframe-actions { display: flex; gap: 7px; }
.iframe-placeholder { min-height: 600px; display: grid; place-items: center; padding: 30px; text-align: center; }
.iframe-placeholder > div { max-width: 560px; }
.iframe-placeholder h3 { margin: 12px 0 8px; }
.iframe-placeholder p { color: var(--muted); }

.geo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; }
.geo-map {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    radial-gradient(circle at 70% 30%, rgba(56,214,242,.08), transparent 30%),
    linear-gradient(rgba(56,214,242,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,214,242,.05) 1px, transparent 1px),
    #041c26;
  background-size: auto, 40px 40px, 40px 40px, auto;
}
.geo-map::before { content: "MOTOR GEO INTEGRADO · COORDENADAS REALES"; position: absolute; left: 18px; top: 16px; z-index: 2; color: rgba(124,234,255,.5); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.geo-map svg { width: 100%; height: 100%; min-height: 610px; }
.geo-point { cursor: pointer; transition: .15s ease; }
.geo-point:hover { filter: brightness(1.35); transform-box: fill-box; transform-origin: center; transform: scale(1.12); }
.geo-side { min-height: 610px; }
.geo-side .panel { height: 100%; }
.geo-empty { height: 100%; display: grid; place-items: center; padding: 35px; text-align: center; color: var(--muted); }
.geo-details dl { display: grid; grid-template-columns: 115px 1fr; gap: 8px 12px; margin: 0; }
.geo-details dt { color: #7299aa; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.geo-details dd { margin: 0; color: #e4f3f8; font-size: 12px; }

.camera-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.camera-card { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,38,50,.72); }
.camera-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.camera-code { color: var(--lime-2); font-size: 20px; font-weight: 900; }
.camera-card h4 { margin: 6px 0 2px; font-size: 14px; }
.camera-card p { margin: 0; color: var(--muted); font-size: 11px; }
.camera-temp { padding: 4px 7px; border-radius: 999px; color: var(--cyan-2); background: rgba(56,214,242,.1); font-size: 9px; font-weight: 800; }
.camera-card .progress { margin-top: 13px; }

.timeline { position: relative; display: grid; gap: 11px; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--cyan), rgba(56,214,242,.08)); }
.timeline-item { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 11px 12px 11px 8px; border: 1px solid rgba(92,183,215,.14); border-radius: 13px; background: rgba(4,27,36,.58); }
.timeline-node { z-index: 1; width: 20px; height: 20px; margin: 2px auto 0; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--cyan); background: #062631; color: var(--cyan); font-size: 8px; font-weight: 900; }
.timeline-content strong { display: block; font-size: 13px; }
.timeline-content span { color: var(--muted); font-size: 10px; }
.timeline-date { text-align: right; color: #a9c2cd; font-size: 10px; font-variant-numeric: tabular-nums; }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.project-card { position: relative; min-height: 205px; display: flex; flex-direction: column; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, rgba(10,49,63,.94), rgba(4,27,36,.96)); transition: .18s ease; cursor: pointer; }
.project-card:hover { transform: translateY(-3px); border-color: rgba(146,230,0,.42); }
.project-card::after { content: ""; position: absolute; right: -35px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(56,214,242,.12), transparent 68%); }
.project-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.project-card h3 { margin: 14px 0 7px; font-size: 18px; line-height: 1.1; letter-spacing: -.025em; }
.project-card p { margin: 0; color: var(--muted); font-size: 11px; }
.project-meta { display: grid; gap: 6px; margin-top: auto; padding-top: 20px; }
.project-meta-row { display: flex; justify-content: space-between; gap: 12px; color: #86a7b6; font-size: 10px; }
.project-meta-row strong { color: #d6e8ee; text-align: right; }

.expert-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.expert-card { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 11px; padding: 13px; border: 1px solid rgba(92,183,215,.14); border-radius: 13px; background: rgba(4,28,37,.62); }
.expert-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #071800; background: var(--lime); font-size: 11px; font-weight: 900; }
.expert-card strong { display: block; font-size: 12px; }
.expert-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }

.flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.flow-step { position: relative; min-height: 132px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(7,38,50,.72); }
.flow-step:not(:last-child)::after { content: "→"; position: absolute; right: -17px; top: 49px; z-index: 2; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--lime); background: var(--bg); font-weight: 900; }
.flow-step span { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.flow-step h4 { margin: 9px 0 6px; font-size: 14px; }
.flow-step p { margin: 0; color: var(--muted); font-size: 10px; }

.empty-state { min-height: 260px; display: grid; place-items: center; padding: 28px; text-align: center; border: 1px dashed rgba(92,183,215,.28); border-radius: 15px; background: rgba(4,26,35,.38); }
.empty-state > div { max-width: 570px; }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto; border-radius: 16px; color: var(--cyan-2); background: rgba(56,214,242,.1); border: 1px solid rgba(56,214,242,.2); font-size: 28px; }
.empty-state h3 { margin: 13px 0 6px; }
.empty-state p { margin: 0 0 15px; color: var(--muted); }

.kpi-ring { position: relative; width: 126px; height: 126px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lime) calc(var(--value, 0) * 1%), rgba(53,107,125,.32) 0); }
.kpi-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #082a37; box-shadow: inset 0 0 0 1px var(--line); }
.kpi-ring-content { position: relative; z-index: 1; text-align: center; }
.kpi-ring-content strong { display: block; font-size: 23px; line-height: 1; }
.kpi-ring-content span { color: var(--muted); font-size: 9px; }

.qa-grid { display: grid; gap: 8px; }
.qa-row { display: grid; grid-template-columns: 78px 130px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid rgba(92,183,215,.13); border-radius: 11px; background: rgba(4,27,36,.6); }
.qa-id { color: var(--cyan-2); font-size: 10px; font-weight: 900; }
.qa-area { color: #a8c1cb; font-size: 10px; }
.qa-test { font-size: 11px; }

.command-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.command-card { min-height: 110px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,38,50,.78); cursor: pointer; text-align: left; }
.command-card:hover { border-color: rgba(146,230,0,.42); background: rgba(11,51,66,.92); }
.command-card strong { display: block; margin-top: 8px; }
.command-card span { color: var(--muted); font-size: 10px; }
.command-icon { color: var(--cyan-2); font-size: 22px; }

.modal { width: min(820px, calc(100vw - 28px)); max-height: calc(100vh - 38px); padding: 0; border: 1px solid var(--line-strong); border-radius: 20px; color: var(--text); background: #061f2a; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.modal::backdrop { background: rgba(0,10,15,.75); backdrop-filter: blur(6px); }
.modal-card { margin: 0; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 3px 0 0; font-size: 23px; }
.modal-body { padding: 20px; overflow: auto; max-height: calc(100vh - 150px); }

.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 9px; width: min(390px, calc(100vw - 36px)); }
.toast { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 11px; align-items: start; padding: 13px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(5,32,43,.96); box-shadow: 0 18px 50px rgba(0,0,0,.32); animation: toast-in .22s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.toast strong { display: block; font-size: 12px; }
.toast p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.toast-bar { width: 5px; min-height: 36px; border-radius: 99px; background: var(--cyan); }
.toast--success .toast-bar { background: var(--green); }
.toast--warning .toast-bar { background: var(--amber); }
.toast--danger .toast-bar { background: var(--red); }
.toast-close { border: 0; background: transparent; color: #8aaaba; cursor: pointer; }
.sidebar-scrim { display: none; }

.small { font-size: 11px; }
.muted { color: var(--muted); }
.lime { color: var(--lime-2); }
.cyan { color: var(--cyan-2); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.green { color: var(--green); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.hidden { display: none !important; }

@media (max-width: 1450px) {
  :root { --sidebar-w: 248px; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .metric-grid--5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filter-grid { grid-template-columns: repeat(3, minmax(150px,1fr)); }
  .project-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .controlbar { align-items: flex-end; flex-wrap: wrap; }
  .quick-actions { margin-left: 0; }
}

@media (max-width: 1120px) {
  :root { --sidebar-w: 222px; }
  .topbar-main, .controlbar, .main { padding-left: 20px; padding-right: 20px; }
  .hero { grid-template-columns: 1fr; min-height: 420px; }
  .hero-side { min-height: 100px; align-items: flex-end; }
  .panel--3, .panel--4, .panel--5, .panel--6, .panel--7, .panel--8, .panel--9 { grid-column: span 12; }
  .geo-layout { grid-template-columns: 1fr; }
  .geo-side { min-height: auto; }
  .camera-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flow-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flow-step:nth-child(2)::after { display: none; }
}

@media (max-width: 860px) {
  :root { --sidebar-w: 280px; }
  .app { display: block; }
  .sidebar { transform: translateX(-101%); transition: transform .22s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 35; border: 0; background: rgba(0,10,15,.66); backdrop-filter: blur(3px); }
  body.sidebar-open .sidebar-scrim { display: block; }
  .mobile-only { display: grid; }
  .topbar-main { align-items: center; }
  .system-badges { display: none; }
  .topbar-title { align-items: center; }
  .controlbar { gap: 9px; }
  .date-presets { order: 2; }
  .date-range { order: 1; width: 100%; overflow-x: auto; }
  .quick-actions { order: 3; width: 100%; overflow-x: auto; }
  .main { padding-top: 18px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-actions { justify-content: flex-start; }
  .metric-grid, .metric-grid--4, .metric-grid--5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-content { padding: 30px 24px; }
  .hero-side { padding: 16px; }
  .hero-status-card { width: 100%; }
  .expert-grid { grid-template-columns: 1fr; }
  .qa-row { grid-template-columns: 70px minmax(0,1fr) auto; }
  .qa-area { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 14px; }
  .topbar-main, .controlbar, .main { padding-left: 13px; padding-right: 13px; }
  .topbar-main { padding-top: 14px; }
  .topbar p { display: none; }
  .topbar h1 { font-size: 22px; }
  .date-range label { min-width: 140px; }
  .date-range .button { min-width: 155px; }
  .hero { min-height: 500px; border-radius: 18px; }
  .hero::before { background-position: 67% center; }
  .hero h2 { font-size: 42px; }
  .hero-status-card { grid-template-columns: 1fr 1fr; }
  .quick-grid, .project-grid { grid-template-columns: 1fr; }
  .metric-grid, .metric-grid--4, .metric-grid--5 { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 116px; padding: 14px; }
  .metric-value { font-size: 27px; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .camera-grid { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: 1fr; }
  .flow-step::after { display: none !important; }
  .bar-row { grid-template-columns: 1fr auto; gap: 5px 10px; }
  .bar-row .progress { grid-column: 1 / -1; order: 3; }
  .iframe-shell iframe { height: 620px; }
  .command-grid { grid-template-columns: 1fr; }
  .panel { padding: 15px; }
  .tabs { width: 100%; }
}

@media (max-width: 430px) {
  .metric-grid, .metric-grid--4, .metric-grid--5 { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .hero-status-card { grid-template-columns: 1fr; }
}

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #111; }
  .sidebar, .topbar, .page-actions, .toolbar .button, .tabs, .toast-stack, .modal, .no-print { display: none !important; }
  .app { display: block; }
  .workspace { margin: 0; }
  .main { padding: 0; }
  .page { max-width: none; }
  .panel, .metric-card, .quick-card, .project-card { color: #111; background: #fff; border-color: #bbb; box-shadow: none; break-inside: avoid; }
  .metric-label, .metric-note, .panel-header p, .muted { color: #555 !important; }
  .metric-value--lime, .lime { color: #4c7900 !important; }
  .metric-value--cyan, .cyan { color: #00748a !important; }
  .hero { min-height: 250px; color: #fff; box-shadow: none; }
  .panel-grid { display: block; }
  .panel { margin-bottom: 12px; }
  a { text-decoration: none; }
}

/* ================================================================
   v17.10.0 · PORTADA PREMIUM, FILTRO GLOBAL Y CABINA CEO
   ================================================================ */
.global-filter-status {
  flex: 0 0 auto;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid rgba(146,230,0,.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(71,112,0,.19), rgba(6,37,45,.82));
  white-space: nowrap;
}
.global-filter-status > div { display: grid; line-height: 1.12; }
.global-filter-status strong { color: var(--lime-2); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.global-filter-status span:last-child { color: #c6dae3; font-size: 10px; margin-top: 3px; }
.global-filter-status.is-warning { border-color: rgba(255,181,54,.38); }
.global-filter-status.is-warning strong { color: var(--amber); }

.dashboard-home { max-width: 1840px; }
.home-hero {
  position: relative;
  min-height: 236px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: 1px solid rgba(92,183,215,.34);
  border-radius: 20px;
  background-color: #04141d;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 0 22px 65px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.025);
}
.home-hero--van { background-image: url('../img/sasa-furgoneta-barcelona-noche.jpg'); }
.home-hero--barcelona { background-image: url('../img/barcelona-frontal-luces.jpg'); }
.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1,13,19,.9) 0%, rgba(1,13,19,.34) 34%, rgba(1,13,19,.05) 65%, rgba(1,13,19,.28) 100%), linear-gradient(0deg, rgba(2,16,23,.78), transparent 56%);
}
.home-hero-brand, .home-hero-actions { position: relative; z-index: 2; }
.home-hero-brand { display: flex; align-items: flex-end; gap: 18px; }
.home-hero .hero-brand { margin: 0; }
.home-hero .hero-brand .brand-mark { width: 48px; height: 48px; background: rgba(2,20,28,.78); }
.home-hero-copy { display: grid; gap: 3px; max-width: 560px; }
.home-hero-copy > span { color: var(--lime-2); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.home-hero-copy strong { color: #fff; font-size: 17px; }
.home-hero-copy small { color: #bad0da; font-size: 10px; }
.home-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.hero-switch {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(124,234,255,.34);
  border-radius: 11px;
  color: #e7f8ff;
  background: rgba(2,23,31,.78);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.hero-switch:hover { border-color: var(--lime); color: var(--lime-2); }
.light-pulse { position: absolute; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: #fff5bd; box-shadow: 0 0 8px #ffdb52, 0 0 20px rgba(255,205,62,.8); animation: sasa-light 3.4s ease-in-out infinite; pointer-events: none; }
.light-pulse--1 { right: 13%; top: 32%; animation-delay: .1s; }
.light-pulse--2 { right: 20%; top: 43%; animation-delay: 1.1s; }
.light-pulse--3 { left: 20%; top: 48%; animation-delay: 2s; }
@keyframes sasa-light { 0%, 30%, 100% { opacity: .18; transform: scale(.65); } 45%, 64% { opacity: .95; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .light-pulse { animation: none; opacity: .45; } }

.home-kpi-grid { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 9px; margin: 12px 0; }
.home-kpi-grid .metric-card { min-height: 136px; padding: 14px; }
.home-kpi-grid .metric-value { font-size: clamp(21px, 1.75vw, 31px); }
.home-kpi-grid .metric-source { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.control-home-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 12px; }
.home-transfer-panel { grid-column: span 4; }
.home-projects-panel { grid-column: span 3; }
.home-geo-panel { grid-column: span 5; }
.home-legal-panel, .home-ceo-panel, .home-alerts-panel { grid-column: span 4; }
.transfer-launch-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.transfer-launch-grid--wide { grid-template-columns: repeat(8, minmax(0,1fr)); }
.transfer-launch-tile {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 7px;
  border: 1px solid rgba(92,183,215,.2);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10,51,65,.82), rgba(4,28,38,.86));
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: .18s ease;
}
.transfer-launch-tile:hover { transform: translateY(-2px); border-color: rgba(146,230,0,.55); background: rgba(15,60,74,.95); box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.transfer-launch-icon { color: var(--cyan-2); font-size: 24px; line-height: 1; }
.transfer-launch-tile:nth-child(2) .transfer-launch-icon, .transfer-launch-tile:nth-child(8) .transfer-launch-icon { color: var(--lime-2); }
.transfer-launch-tile strong { font-size: 10px; line-height: 1.18; }
.transfer-launch-tile small { display: flex; align-items: center; gap: 5px; color: #9ebbc7; font-size: 8px; }
.panel-footer-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(92,183,215,.14); color: var(--muted); font-size: 9px; }
.text-link { border: 0; padding: 2px; background: transparent; color: var(--cyan-2); font-weight: 780; cursor: pointer; }
.text-link:hover { color: var(--lime-2); }

.module-link-list { display: grid; gap: 7px; }
.module-link {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 20px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(92,183,215,.17);
  border-radius: 10px;
  color: #e8f6fb;
  background: rgba(3,27,37,.62);
  text-align: left;
  cursor: pointer;
}
.module-link:hover { border-color: rgba(146,230,0,.42); background: rgba(8,47,60,.88); }
.module-link:disabled { opacity: .5; cursor: not-allowed; }
.module-link-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--lime-2); background: rgba(146,230,0,.08); font-weight: 900; }
.module-link strong { font-size: 11px; }
.module-link-arrow { color: var(--cyan-2); text-align: right; }

.home-filter-chips { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; }
.home-filter-chips span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: #c9e0e9; background: rgba(5,31,41,.72); font-size: 9px; white-space: nowrap; }
.home-map-preview { min-height: 260px; overflow: hidden; border: 1px solid rgba(56,214,242,.16); border-radius: 12px; background: #041b25; }
.home-map-preview .geo-map, .home-map-preview svg { min-height: 260px; height: 260px; }
.map-placeholder { position: relative; min-height: 260px; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center; overflow: hidden; }
.map-placeholder > * { position: relative; z-index: 1; }
.map-placeholder strong { font-size: 15px; }
.map-placeholder span { max-width: 470px; color: var(--muted); font-size: 10px; }
.map-network { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(circle at 20% 70%, rgba(56,214,242,.95) 0 3px, transparent 4px), radial-gradient(circle at 35% 43%, rgba(146,230,0,.95) 0 3px, transparent 4px), radial-gradient(circle at 51% 61%, rgba(56,214,242,.95) 0 3px, transparent 4px), radial-gradient(circle at 67% 37%, rgba(146,230,0,.95) 0 3px, transparent 4px), radial-gradient(circle at 82% 60%, rgba(56,214,242,.95) 0 3px, transparent 4px), linear-gradient(25deg, transparent 47%, rgba(56,214,242,.2) 48% 49%, transparent 50%), linear-gradient(-18deg, transparent 47%, rgba(146,230,0,.17) 48% 49%, transparent 50%), linear-gradient(rgba(56,214,242,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(56,214,242,.05) 1px, transparent 1px); background-size: auto, auto, auto, auto, auto, 110px 75px, 130px 95px, 32px 32px, 32px 32px; }

.mini-metric-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.mini-metric { padding: 10px; border: 1px solid rgba(92,183,215,.15); border-radius: 10px; background: rgba(4,30,40,.66); }
.mini-metric span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.mini-metric strong { display: block; margin-top: 5px; color: var(--lime-2); font-size: 16px; }
.privacy-note { color: #9db9c7; font-size: 9px; }
.ceo-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-bottom: 10px; }
.ceo-preview-grid > div { min-height: 68px; padding: 9px; border: 1px solid rgba(92,183,215,.15); border-radius: 10px; background: rgba(4,29,39,.66); }
.ceo-preview-grid span { display: block; color: var(--muted); font-size: 8px; }
.ceo-preview-grid strong { display: block; margin-top: 5px; font-size: 16px; }
.ceo-preview-grid small { color: var(--muted-2); font-size: 8px; }

.ceo-context-strip { display: grid; grid-template-columns: 1.1fr 1.1fr 1.8fr 1fr; gap: 8px; margin-bottom: 12px; }
.ceo-context-strip > div { min-height: 68px; padding: 11px 13px; border: 1px solid rgba(92,183,215,.18); border-radius: 12px; background: rgba(6,34,45,.72); }
.ceo-context-strip span { display: block; color: var(--muted-2); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.ceo-context-strip strong { display: block; margin-top: 5px; color: #f5fbff; font-size: 11px; line-height: 1.25; }
.ceo-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.metric-card--ceo { min-height: 168px; }
.metric-delta { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 10px; font-weight: 800; }
.metric-delta small { color: var(--muted-2); font-weight: 600; }
.metric-delta--good { color: var(--lime-2); }
.metric-delta--bad { color: var(--red); }
.metric-delta--neutral { color: var(--muted); }
.economic-day { padding: 10px 0; border-bottom: 1px solid rgba(92,183,215,.12); }
.economic-day:last-child { border-bottom: 0; }
.economic-day > strong { display: block; margin-bottom: 7px; color: var(--cyan-2); font-size: 10px; }
.coverage-list { display: grid; gap: 7px; }
.coverage-list > div { min-height: 48px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(92,183,215,.14); border-radius: 10px; background: rgba(4,29,39,.57); }
.coverage-list span:first-child { color: #a9c2cd; font-size: 10px; }
.coverage-list strong { font-size: 11px; text-align: right; }
.schema-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.schema-check { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px; border: 1px solid rgba(92,183,215,.15); border-radius: 11px; background: rgba(4,29,39,.62); }
.schema-check > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-weight: 900; }
.schema-check.is-ready > span { color: #061900; background: var(--lime); }
.schema-check.is-pending > span { color: #261400; background: var(--amber); }
.schema-check strong { display: block; font-size: 10px; }
.schema-check small { display: block; color: var(--muted); font-size: 8px; }
.connector-grid { grid-template-columns: repeat(4, minmax(220px,1fr)) !important; }

.transfer-tabs { width: 100%; }
.camera-card--button { color: inherit; text-align: left; cursor: pointer; }
.camera-card--button:hover { border-color: rgba(146,230,0,.5); }
.go-no-go-banner { display: flex; align-items: center; gap: 13px; padding: 16px; margin-bottom: 12px; border-radius: 13px; }
.go-no-go-banner span { min-width: 88px; padding: 8px 12px; border-radius: 9px; text-align: center; font-size: 22px; font-weight: 950; }
.go-no-go-banner strong { font-size: 15px; }
.go-no-go-banner--go { border: 1px solid rgba(146,230,0,.38); background: rgba(65,112,0,.18); }
.go-no-go-banner--go span { color: #061900; background: var(--lime); }
.go-no-go-banner--pending { border: 1px solid rgba(255,181,54,.35); background: rgba(100,62,0,.18); }
.go-no-go-banner--pending span { color: #281500; background: var(--amber); }
.go-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.go-check { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: center; padding: 12px; border: 1px solid rgba(92,183,215,.15); border-radius: 11px; background: rgba(4,29,39,.62); }
.go-check > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-weight: 900; }
.go-check.is-pass > span { color: #061900; background: var(--lime); }
.go-check.is-pending > span { color: #281500; background: var(--amber); }
.go-check strong, .go-check small { display: block; }
.go-check strong { font-size: 10px; }
.go-check small { color: var(--muted); font-size: 8px; }
.project-actions { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }

@media (max-width: 1600px) {
  .home-kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .home-transfer-panel { grid-column: span 5; }
  .home-projects-panel { grid-column: span 3; }
  .home-geo-panel { grid-column: span 4; }
  .transfer-launch-grid--wide { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1280px) {
  .home-transfer-panel, .home-projects-panel, .home-geo-panel { grid-column: span 12; }
  .home-legal-panel, .home-ceo-panel, .home-alerts-panel { grid-column: span 6; }
  .ceo-metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .schema-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .connector-grid { grid-template-columns: repeat(2, minmax(220px,1fr)) !important; }
}
@media (max-width: 860px) {
  .home-hero { min-height: 330px; align-items: flex-end; flex-direction: column; justify-content: flex-end; }
  .home-hero-brand { width: 100%; }
  .home-hero-actions { width: 100%; justify-content: flex-start; }
  .home-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-legal-panel, .home-ceo-panel, .home-alerts-panel { grid-column: span 12; }
  .ceo-context-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ceo-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .go-check-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .global-filter-status { order: 0; width: 100%; }
}
@media (max-width: 620px) {
  .home-hero { min-height: 390px; padding: 16px; background-position: 56% center; }
  .home-hero--barcelona { background-position: 67% center; }
  .home-hero-brand { align-items: flex-start; flex-direction: column; }
  .home-kpi-grid, .ceo-metric-grid, .ceo-context-strip, .mini-metric-row, .ceo-preview-grid, .schema-grid, .go-check-grid, .connector-grid { grid-template-columns: 1fr !important; }
  .transfer-launch-grid, .transfer-launch-grid--wide { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .coverage-list > div { grid-template-columns: 1fr auto; }
  .coverage-list .status-pill { grid-column: 1 / -1; justify-self: start; }
}

/* v17.10 · desglose CEO de coste operativo SAFE */
.ceo-cost-breakdown { overflow: hidden; }
.ceo-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.ceo-breakdown-grid .mini-metric {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(3, 24, 34, .78);
  border: 1px solid rgba(68, 188, 220, .18);
  border-radius: 14px;
  padding: 13px;
}
.ceo-breakdown-grid .mini-metric span {
  color: var(--muted, #91abb7);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ceo-breakdown-grid .mini-metric strong {
  color: var(--lime, #9cf416);
  font-size: 1.06rem;
  overflow-wrap: anywhere;
}
@media (max-width: 1180px) { .ceo-breakdown-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ceo-breakdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v17.10 · ajuste visual aprobado Barcelona y control móvil */
.home-hero--barcelona .home-hero-overlay {
  background:
    linear-gradient(90deg, rgba(1,13,19,.72) 0%, rgba(1,13,19,.20) 38%, rgba(1,13,19,.02) 72%, rgba(1,13,19,.12) 100%),
    linear-gradient(0deg, rgba(2,16,23,.50), transparent 62%);
  backdrop-filter: brightness(1.08) saturate(1.12);
}
@media (max-width: 620px) {
  .controlbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    overflow: visible;
  }
  .global-filter-status, .date-presets, .date-range, .quick-actions { width: 100%; min-width: 0; overflow: visible; }
  .date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 7px;
  }
  .date-range label { min-width: 0; width: 100%; }
  .date-range input { width: 100%; min-width: 0; }
  .date-range .button { grid-column: 1 / -1; width: 100%; min-width: 0; justify-content: center; }
  .date-presets, .quick-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .date-presets .chip-button { flex: 1 1 calc(25% - 6px); min-width: 66px; }
  .quick-actions .button { flex: 1 1 calc(50% - 6px); justify-content: center; min-width: 120px; }
  .quick-actions .icon-button { flex: 0 0 42px; }
}


/* v17.11.2 · Tooltips, drill-down y salud de conexiones */
.metric-grid,
.ceo-metric-grid,
.home-kpi-grid { overflow: visible; }

.metric-card--interactive {
  cursor: pointer;
  overflow: visible;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.metric-card--interactive:hover,
.metric-card--interactive:focus-visible {
  z-index: 30;
  transform: translateY(-3px);
  border-color: rgba(155,227,61,.7);
  box-shadow: 0 18px 40px rgba(0,0,0,.32), 0 0 0 2px rgba(155,227,61,.14);
  outline: none;
}
.metric-card[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 80;
  left: 12px;
  right: 12px;
  top: calc(100% + 9px);
  min-width: 250px;
  max-width: 410px;
  padding: 12px 14px;
  border: 1px solid rgba(86,180,233,.42);
  border-radius: 12px;
  color: #eafaff;
  background: rgba(2,18,27,.98);
  box-shadow: 0 18px 44px rgba(0,0,0,.48);
  font-size: 11px;
  font-weight: 570;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.metric-card[data-tooltip]:hover::before,
.metric-card[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.metric-open-hint {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: var(--lime);
  font-size: 9px;
  font-weight: 850;
  opacity: .72;
}
.metric-card--interactive:hover .metric-open-hint { opacity: 1; }

.flow-step--button {
  width: 100%;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.flow-step--button:hover,
.flow-step--button:focus-visible {
  border-color: rgba(155,227,61,.65);
  background: rgba(12,55,70,.92);
  outline: none;
  transform: translateY(-2px);
}
.flow-step--button small {
  display: block;
  margin-top: 12px;
  color: var(--lime);
  font-size: 9px;
  font-weight: 850;
}

.external-health-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(5,31,42,.88);
}
.external-health-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #a8c4cf;
  font-size: 11px;
}
.external-health-status[data-status="ok"] { color: var(--green); }
.external-health-status[data-status="error"] { color: var(--red); }
.external-health-actions { display: flex; flex-wrap: wrap; gap: 7px; }

@media (max-width: 840px) {
  .metric-card[data-tooltip]::before {
    position: fixed;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 16px;
    max-width: none;
  }
  .external-health-card { align-items: flex-start; flex-direction: column; }
}


/* v17.11.3 · Proyectos y enlaces */
.project-link-status{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 10px;border:1px solid rgba(86,180,233,.22);border-radius:10px;background:rgba(4,30,42,.7);font-size:10px;color:#9fbec9}.project-link-status[data-status="ok"]{color:#9be33d;border-color:rgba(155,227,61,.35)}.project-link-status[data-status="error"]{color:#ff7182;border-color:rgba(255,113,130,.35)}.project-link-status[data-status="checking"]{color:#f2b84b}.project-actions{flex-wrap:wrap}.project-card{overflow:visible}.project-card .button{white-space:nowrap}

/* v17.11.4 · Traslado solo lectura */
.panel-badge--readonly {
  color: #d8f7ff;
  border-color: rgba(86,180,233,.55);
  background: rgba(17,74,98,.72);
}
.transfer-center::before {
  content: 'MODO CONSULTA · CAMBIOS BLOQUEADOS';
  display: block;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(86,180,233,.38);
  border-radius: 12px;
  color: #bfefff;
  background: rgba(9,44,59,.72);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

/* v17.11.6 · Solo extensión comercial; frontal v17.11.4 protegido */
.commercial-extension { border-top:1px solid rgba(86,180,233,.18); padding-top:14px; }
.abc-badge { display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;font-size:10px;font-weight:900;border:1px solid transparent; }
.abc-a { color:#071909;background:#9be33d;border-color:#baf67a; }
.abc-b { color:#2c2100;background:#f2b84b;border-color:#ffd98b; }
.abc-c { color:#d8f7ff;background:#16455a;border-color:#2b7792; }

/* v17.11.7 · Operativo Granollers conectado */
.transfer-live-panel{overflow:hidden}.transfer-live-frame-shell{height:780px;margin-top:12px}.transfer-live-frame-shell iframe{width:100%;height:100%;border:0;background:#031923}.transfer-live-status{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid rgba(67,214,154,.35);border-radius:10px;background:rgba(6,57,51,.45);font-size:10px}.transfer-live-status small{color:#8fb3bd}@media(max-width:900px){.transfer-live-frame-shell{height:680px}}

/* v17.11.8 · Capa 2 de microanálisis y popups ejecutivos */
.deep-analysis{margin:14px 0 16px;border:1px solid rgba(101,221,255,.28);border-radius:15px;background:linear-gradient(145deg,rgba(4,31,42,.96),rgba(8,48,62,.96));overflow:hidden}
.deep-analysis>summary{list-style:none;cursor:pointer;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(101,221,255,.16)}
.deep-analysis>summary::-webkit-details-marker{display:none}.deep-analysis>summary span{display:block;color:#65ddff;font-size:9px;font-weight:900;letter-spacing:.12em}.deep-analysis>summary h3{margin:4px 0 3px;font-size:18px}.deep-analysis>summary p{margin:0;color:#91afbb;font-size:10px}.deep-analysis>summary>strong{color:#9be33d;font-size:10px;white-space:nowrap}.deep-analysis-body{padding:14px}
.analysis-source-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.analysis-source-strip>div{padding:9px 10px;border:1px solid rgba(101,221,255,.15);border-radius:9px;background:rgba(3,25,35,.7)}.analysis-source-strip span{display:block;color:#7899a6;font-size:8px;font-weight:900}.analysis-source-strip strong{display:block;margin-top:4px;color:#dff8ff;font-size:9px;line-height:1.35}
.analysis-micro-grid,.kpi-modal-micro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.micro-panel{min-width:0;padding:12px;border:1px solid rgba(101,221,255,.18);border-radius:12px;background:rgba(3,29,40,.78)}.micro-panel h4{margin:0;font-size:12px}.micro-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px}.micro-head p{margin:3px 0 0;color:#7899a6;font-size:8px}.micro-legend{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.micro-legend span{font-size:8px;color:#9bb7c2;white-space:nowrap}.micro-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.micro-legend b{color:#ecfbff}.micro-line-chart{width:100%;height:125px;display:block}.micro-bars,.micro-composition{display:grid;gap:7px}.micro-bar-row{display:grid;grid-template-columns:minmax(100px,1.1fr) minmax(80px,1.4fr) 72px;gap:7px;align-items:center}.micro-bar-label{display:flex;align-items:center;gap:5px;min-width:0}.micro-bar-label>span{color:#65ddff;font-size:8px;font-weight:900}.micro-bar-label strong{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.micro-bar-track{height:8px;border-radius:999px;background:#031821;overflow:hidden}.micro-bar-track i{display:block;height:100%;background:linear-gradient(90deg,#236b87,#65ddff);border-radius:999px}.micro-bar-track i.lime{background:#9be33d}.micro-bar-track i.amber{background:#f3b63f}.micro-bar-row>b{font-size:8px;color:#dff8ff;text-align:right}.micro-composition>div{display:grid;grid-template-columns:minmax(100px,1fr) minmax(80px,1.3fr) 90px;gap:7px;align-items:center}.micro-composition span,.micro-composition b{font-size:8px}.micro-composition b{text-align:right;color:#dff8ff}.micro-empty{padding:20px 8px;color:#7899a6;font-size:9px;line-height:1.55;text-align:center}.micro-table-wrap{max-height:230px;overflow:auto}.micro-table{width:100%;border-collapse:collapse;font-size:8px}.micro-table th{position:sticky;top:0;padding:7px;background:#0b4154;color:#bcefff;text-align:left}.micro-table td{padding:7px;border-bottom:1px solid rgba(101,221,255,.12);color:#d6edf4}.micro-table .numeric{text-align:right}
.analysis-story-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:11px}.analysis-story-grid article{padding:10px;border-radius:10px;border:1px solid rgba(155,227,61,.17);background:rgba(6,42,50,.74)}.analysis-story-grid span{display:block;color:#9be33d;font-size:8px;font-weight:900}.analysis-story-grid p{margin:5px 0 0;color:#c9e2e9;font-size:9px;line-height:1.45}.committee-note{margin-top:10px;padding:10px 12px;border-left:4px solid #65ddff;border-radius:8px;background:rgba(7,54,67,.68);color:#acd0da;font-size:9px;line-height:1.5}.committee-note strong{color:#e8fbff}
.metric-detail-modal--deep{width:min(1120px,calc(100vw - 48px))}.kpi-modal-hero{display:grid;grid-template-columns:1.4fr 1fr auto;gap:12px;align-items:center;padding:13px;border:1px solid rgba(101,221,255,.22);border-radius:12px;background:rgba(5,41,53,.75)}.kpi-modal-hero>div>span,.kpi-definition-grid span{display:block;color:#65ddff;font-size:8px;font-weight:900}.kpi-modal-hero strong{display:block;margin-top:5px;color:#9be33d;font-size:26px}.kpi-modal-hero small{display:block;margin-top:4px;color:#91afbb;font-size:9px}.kpi-modal-comparison strong{font-size:15px;color:#dff8ff}.kpi-definition-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:9px;margin:10px 0}.kpi-definition-grid article{padding:11px;border-radius:10px;border:1px solid rgba(101,221,255,.15);background:rgba(3,29,40,.74)}.kpi-definition-grid p{margin:5px 0 0;font-size:9px;line-height:1.5;color:#d3e9ef}
@media(max-width:1100px){.analysis-micro-grid,.kpi-modal-micro-grid{grid-template-columns:1fr 1fr}.analysis-story-grid{grid-template-columns:1fr 1fr}.analysis-source-strip{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.analysis-micro-grid,.kpi-modal-micro-grid,.analysis-story-grid,.analysis-source-strip,.kpi-definition-grid{grid-template-columns:1fr}.kpi-modal-hero{grid-template-columns:1fr}.micro-bar-row{grid-template-columns:1fr 1fr 65px}.deep-analysis>summary{align-items:flex-start;flex-direction:column}.metric-detail-modal--deep{width:100%}}

/* v17.11.9 · Flujos y básculas */
.transfer-launch-tile[data-view="flows"]{border-color:rgba(243,182,63,.45)}.transfer-launch-tile[data-view="flows"] .transfer-launch-icon{color:#f3b63f}