@font-face { font-family: 'XTF Square'; src: url('/map/brand-font.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #060b0e; color: #eaf7f8; }
.vehicle-map { flex: 1; min-height: 320px; height: 320px; width: 100%; margin-top: 4px; border: 1px solid #29464a; border-radius: 10px; isolation: isolate; background: #d9e1df; color-scheme: light; }
.map-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.map-footer p { flex: 1 1 220px; margin: 0; font-size: .78rem; }
.map-footer button { padding: 8px 10px; font-size: .76rem; }
.vehicle-map .leaflet-control-zoom a { background: #fff; color: #17292c; }
.vehicle-map .leaflet-control-attribution { background: rgba(255,255,255,.94); color: #263238; }
.vehicle-map .leaflet-control-attribution a { color: #075b89; }
.vehicle-icon { border: 2px solid #fff; border-radius: 50%; background: #075764; box-shadow: 0 2px 9px #0008; display: grid; place-items: center; }
.vehicle-pointer { display: block; width: 18px; height: 22px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%); transform-origin: center; }
.vehicle-pointer--unknown { width: 11px; height: 11px; clip-path: none; border-radius: 50%; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 82% -10%, rgba(40, 192, 203, .18), transparent 38rem), radial-gradient(circle at 0 35%, rgba(14, 129, 162, .13), transparent 32rem), #060b0e; }
main { width: min(1280px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 64px; }
.masthead, .section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.masthead { padding-bottom: 17px; border-bottom: 1px solid rgba(144, 222, 228, .19); }
h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1; letter-spacing: -.05em; }
h2 { margin: 0; font-size: clamp(1.55rem, 4vw, 2.3rem); letter-spacing: -.035em; }
h3 { margin: 0; font-size: 1.17rem; }
p { color: #a8c0c4; line-height: 1.55; }
.intro { max-width: 650px; margin: 9px 0 0; font-size: .86rem; }
.eyebrow { margin: 0 0 10px; color: #64ebea; font-weight: 700; font-size: .72rem; letter-spacing: .16em; }
.status, .group-top span { display: inline-flex; width: fit-content; border-radius: 99px; padding: 8px 11px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.status { color: #c3d6d9; background: #19272b; }.status.pending { color: #f7cc82; background: rgba(234, 164, 57, .14); }
.connection-stack { display: grid; justify-items: end; gap: 6px; }.freshness { color: #819a9f; font-size: .73rem; }
.notice { display: flex; justify-content: space-between; gap: 16px; margin: 16px 0; padding: 11px 14px; border: 1px solid rgba(99, 228, 234, .26); border-radius: 11px; background: rgba(34, 127, 140, .1); color: #a9c6ca; font-size: .82rem; }
.notice strong { color: #76f0ed; font-size: .78rem; letter-spacing: .08em; }
.telemetry, .groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.telemetry { grid-template-columns: 1fr; }
.vehicle-dashboard { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: stretch; margin-top: 16px; }
.vehicle-summary { display: grid; align-content: start; gap: 12px; min-width: 0; }
.vehicle-dashboard .map-card { display: flex; flex-direction: column; min-width: 0; }
.metric, .card { border: 1px solid rgba(143, 218, 225, .16); border-radius: 13px; padding: 14px; background: linear-gradient(145deg, rgba(19, 35, 40, .88), rgba(7, 14, 17, .88)); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.metric { min-height: 92px; min-width: 0; overflow-wrap: anywhere; }
.metric > p { margin: 0 0 5px; font-size: .85rem; }
.metric > strong { display: block; font-size: 1.2rem; line-height: 1.25; }
.metric > span { display: block; margin-top: 4px; font-size: .8rem; line-height: 1.45; color: #a8c0c4; }
.map-footer button { border: 1px solid #35626b; background: #14343d; color: #eaf7f8; border-radius: 7px; padding: 10px 14px; cursor: pointer; }
.travel-card { align-content: start; }
.vehicle-summary .card { min-width: 0; }
.journey strong { overflow-wrap: anywhere; }
.field-list .telemetry-field strong { white-space: normal; overflow-wrap: anywhere; letter-spacing: normal; line-height: 1.4; }
.field-list .telemetry-field summary span { margin-top: 0; }
.map-card .vehicle-pointer { margin-top: 0; }
.map-card .leaflet-control-zoom span { margin-top: 0; color: inherit; font-size: 22px; }
.api-cost { transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }.api-cost small { display: block; margin-top: 7px; color: #91aaae; font-size: .7rem; line-height: 1.35; }.api-cost--unknown { border-color: rgba(143, 218, 225, .16); }.api-cost--green { border-color: rgba(91, 224, 157, .65); background: linear-gradient(145deg, rgba(16, 70, 55, .86), rgba(7, 22, 18, .9)); }.api-cost--green strong { color: #91f4bd; }.api-cost--orange { border-color: rgba(255, 177, 67, .8); background: linear-gradient(145deg, rgba(102, 61, 18, .86), rgba(31, 20, 8, .9)); }.api-cost--orange strong { color: #ffc46c; }.api-cost--red { border-color: rgba(255, 104, 104, .82); background: linear-gradient(145deg, rgba(100, 27, 31, .88), rgba(31, 8, 10, .92)); }.api-cost--red strong { color: #ff9292; }
.card p { margin: 0 0 9px; font-size: .82rem; }.card strong { display: block; font-size: clamp(1.75rem, 4vw, 2.7rem); letter-spacing: -.06em; }.card span { display: block; margin-top: 8px; color: #91aaae; font-size: .8rem; }
.travel-card { display: grid; gap: 11px; }.journey { padding-top: 11px; border-top: 1px solid rgba(143, 218, 225, .14); }.journey:first-of-type { padding-top: 0; border-top: 0; }.journey > span { display: block; color: #77e3e2; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.journey strong { display: block; margin: 3px 0; font-size: 1rem; letter-spacing: -.02em; }.journey small { color: #91aaae; font-size: .8rem; }.map-card { min-height: 220px; }.map-top { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.map-top h2 { font-size: 1.05rem; }.map-top > span { max-width: 180px; color: #91aaae; font-size: .75rem; text-align: right; }.map-canvas { position: relative; min-height: 137px; overflow: hidden; margin-top: 13px; border: 1px solid rgba(108, 217, 222, .18); border-radius: 10px; background: radial-gradient(circle at 50% 44%, rgba(59, 202, 207, .18), transparent 18%), #071317; }.map-grid { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(103, 225, 229, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 225, 229, .16) 1px, transparent 1px); background-size: 27px 27px; transform: perspective(180px) rotateX(53deg) scale(1.5); transform-origin: 50% 100%; }.map-canvas p { position: absolute; right: 12px; bottom: 0; left: 12px; margin: 0; color: #c4dde0; font-size: .78rem; }.map-marker { position: absolute; top: 45%; left: 50%; width: 16px; height: 16px; border: 3px solid #d9ffff; border-radius: 50% 50% 50% 0; background: #46e2e4; box-shadow: 0 0 0 7px rgba(70, 226, 228, .18), 0 0 28px rgba(70, 226, 228, .75); }
.telemetry-fields { margin-top: 10px; }.telemetry-fields .section-head { margin: 0 0 14px; }.field-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 460px; overflow: auto; padding-right: 3px; }.telemetry-field { min-width: 0; border: 1px solid rgba(143, 218, 225, .14); border-radius: 9px; background: rgba(5, 16, 20, .54); }.telemetry-field summary { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px; cursor: pointer; }.telemetry-field summary::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-right: 2px solid #65e5e4; border-bottom: 2px solid #65e5e4; transform: rotate(-45deg); }.telemetry-field[open] summary::before { transform: rotate(45deg); }.telemetry-field summary::-webkit-details-marker { display: none; }.telemetry-field strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }.telemetry-field summary span { color: #8ba4a8; white-space: nowrap; font-size: .68rem; }.telemetry-field pre { overflow: auto; margin: 0; padding: 0 10px 10px; color: #c8e4e6; font: .7rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.section-head { margin: 38px 0 15px; align-items: start; }.section-head > p { max-width: 400px; margin: 3px 0; font-size: .84rem; }
.groups { grid-template-columns: repeat(3, 1fr); }.group { display: flex; min-height: 240px; flex-direction: column; }.group-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }.group-top span { background: rgba(85, 180, 194, .13); color: #84e9eb; }.description { margin: 10px 0 8px; font-size: .82rem; }.group ul, .security ul { margin: 0; padding-left: 18px; color: #cadadd; line-height: 1.55; font-size: .8rem; }.group button { width: 100%; margin-top: auto; padding: 8px; border: 1px solid #305a61; border-radius: 9px; background: transparent; color: #789699; font: inherit; font-size: .78rem; }
.security { margin-top: 36px; padding: 20px; border: 1px solid rgba(128, 188, 194, .2); border-radius: 15px; background: rgba(10, 27, 31, .78); }.security ul { margin-top: 12px; }
.login-shell { width: min(100%, 470px); margin: 9vh auto 0; padding: 28px; border: 1px solid rgba(125, 223, 229, .25); border-radius: 18px; background: linear-gradient(145deg, rgba(18, 44, 50, .92), rgba(7, 14, 17, .96)); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }.login-shell h1 { margin-bottom: 12px; }.login-shell > p { margin-bottom: 24px; }
.login-form, .viewer-form { display: grid; gap: 13px; }.login-form label, .viewer-form label { display: grid; gap: 6px; color: #c8e2e5; font-size: .82rem; font-weight: 700; }.login-form input, .viewer-form input, .session-row input { width: 100%; min-width: 0; border: 1px solid #315c63; border-radius: 9px; padding: 10px 11px; outline: none; background: #081418; color: #edfafa; font: inherit; }.login-form input:focus, .viewer-form input:focus, .session-row input:focus { border-color: #64ebea; box-shadow: 0 0 0 3px rgba(100, 235, 234, .13); }.login-form button, .viewer-form button, .account-bar button, .session-row button { border: 1px solid #4fbdc2; border-radius: 9px; padding: 10px 12px; background: #1d777c; color: #f4ffff; font: inherit; font-weight: 800; cursor: pointer; }.login-form button:hover, .viewer-form button:hover, .account-bar button:hover, .session-row button:hover { background: #269298; }.form-error { min-height: 1.3em; margin: 0; color: #ffaaa6; font-size: .82rem; }
.account-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; padding: 10px 13px; border: 1px solid rgba(128, 188, 194, .18); border-radius: 10px; background: rgba(8, 20, 24, .72); color: #b9d2d6; font-size: .82rem; }.account-bar button, .session-row button.secondary { border-color: #416069; background: transparent; color: #b9d2d6; }
.owner-panel { margin-top: 38px; }.owner-panel .section-head { margin-top: 0; }.viewer-form { grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) auto; align-items: end; padding: 16px; border: 1px solid rgba(104, 231, 234, .2); border-radius: 13px; background: rgba(15, 41, 46, .72); }.viewer-form .form-error { grid-column: 1 / -1; }.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }.admin-grid h3 { margin-bottom: 14px; }.session-list, .audit-list { display: grid; gap: 10px; }.session-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(143, 218, 225, .13); }.session-row:first-child { border-top: 0; padding-top: 0; }.session-row strong, .session-row small { grid-column: 1 / -1; }.session-row small { color: #91aaae; font-size: .73rem; }.audit-list p { margin: 0; padding: 9px 0; border-top: 1px solid rgba(143, 218, 225, .13); font-size: .75rem; }.audit-list p:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .telemetry { grid-template-columns: 1fr; }.groups, .field-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { .viewer-form, .admin-grid { grid-template-columns: 1fr; }.session-row { grid-template-columns: 1fr; }.session-row strong, .session-row small { grid-column: auto; } }
@media (max-width: 580px) { main { width: min(100% - 24px, 680px); padding-top: 22px; }.masthead, .section-head, .notice { align-items: stretch; flex-direction: column; }.connection-stack { justify-items: start; }.groups, .field-list { grid-template-columns: 1fr; }.vehicle-map { min-height: 280px; height: 280px; }.metric { min-height: 92px; }.group { min-height: auto; }.group button { margin-top: 20px; }.map-top { align-items: start; }.map-top > span { text-align: left; }.login-shell { margin-top: 24px; padding: 22px; } }

.panel-extras { margin-top: 22px; border-top: 1px solid rgba(143,218,225,.16); }
.panel-disclosure { border-bottom: 1px solid rgba(143,218,225,.16); padding: 0 2px; }
.panel-disclosure > summary { padding: 15px 0; color: #a8c0c4; cursor: pointer; font-size: .86rem; font-weight: 600; }
.panel-disclosure > summary:hover { color: #eaf7f8; }
.panel-disclosure[open] { padding-bottom: 16px; }
.panel-disclosure .security { margin-top: 0; }
.panel-disclosure.telemetry-fields { margin-top: 0; }
.panel-disclosure .api-cost { max-width: 360px; min-height: auto; }
.technical-help, .panel-disclosure > p { font-size: .8rem; }
.session-row strong { font-size: 1rem; letter-spacing: normal; overflow-wrap: anywhere; }
.health-section { margin-top: 32px; }
.energy-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; color:#9ebdc3; font-size:.8rem; }
.energy-toolbar select { padding:9px; background:#10242a; color:#eaf7f8; border:1px solid #36555b; border-radius:8px; }
.energy-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; padding:22px 0; border-top:1px solid #294149; border-bottom:1px solid #294149; margin:14px 0; }
.energy-stat { flex:1 1 210px; display:flex; flex-direction:column; gap:7px; }
.energy-stat > span { color:#a8c7cc; font-size:.83rem; }.energy-stat > strong { color:#e7fcfc; font-size:1.75rem; letter-spacing:-.04em; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }.energy-unit { font-size:.95rem; letter-spacing:0; white-space:nowrap; }
.energy-stat small { max-width:34ch; font-size:.75rem; line-height:1.5; }
.energy-note { color:#a2bac0; line-height:1.6; font-size:.85rem; max-width:105ch; }
.energy-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:24px 0; }
.energy-chart { min-width:0; background:#0c191e; border:1px solid #253e45; border-radius:14px; padding:20px; }
.energy-chart h3,.energy-periods h3 { margin:0 0 12px; font-size:1.02rem; }.energy-chart svg { display:block; width:100%; height:auto; max-height:260px; }.energy-charts > .energy-chart:last-child:nth-child(odd) { grid-column:1 / -1; }
.energy-gridline { stroke:#263d43; stroke-width:1; }.energy-axis { fill:#9ebbc1; font-size:12px; font-family:inherit; }.energy-line { stroke:#6adfd5; stroke-width:2.5; }.energy-mark { fill:#6adfd5; }
.energy-caption { color:#99b2b9; font-size:.8rem; line-height:1.55; margin:12px 0; }.energy-chart summary { color:#8fcdc9; cursor:pointer; font-size:.78rem; }
.energy-table-scroll { overflow-x:auto; }.energy-periods { margin:26px 0; }.energy-periods th { white-space:nowrap; }
.energy-alert { padding:14px 18px; border-left:3px solid #f2b75b; background:#30291b; margin:12px 0; border-radius:7px; }
@media(max-width:760px) { .energy-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media(max-width:700px) { .energy-charts { grid-template-columns:1fr; gap:16px; }.energy-chart { padding:12px; }.energy-stat > strong { font-size:1.5rem; } }
.health-heading { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.health-heading h2 { font-size: 1.65rem; }.health-heading p { margin: 7px 0; }
.health-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.health-badge { display: inline-block; padding: 6px 10px; border-radius: 8px; background: #16343c; color: #b7dfe2; font-size: .75rem; }
.health-badge--attention { background: #543e1b; color: #ffda93; }
.health-card { display: flex; flex-direction: column; gap: 12px; }
.health-card .health-badge { align-self: start; }.health-card p { margin: 0; font-size: .85rem; }
.health-card details { margin-top: auto; }.health-card summary { color: #b7dfe2; font-size: .8rem; cursor: pointer; }
.health-card details p { margin-top: 10px; }.health-section a,.billing-section a { display: inline-block; color: #72dedf; font-size: .82rem; margin-top: 10px; }
.health-section small { display: block; color: #92aaaf; }
.health-alert { border-bottom: 1px solid #284149; padding: 14px 0; }.health-alert small { margin-top: 5px; }
.health-table { width: 100%; border-collapse: collapse; color: #bed3d7; font-size: .82rem; }.health-table th,.health-table td { padding: 8px; border-bottom: 1px solid #284149; text-align: left; }.health-table caption { text-align: left; padding: 12px 0; }
.billing-section { margin-top: 22px; }.billing-section .metric { min-height: 0; }.billing-section .metric > strong { font-size: 1.5rem; }
#health-export { margin-top: 16px; border: 1px solid #416069; background: transparent; color: #c0dde0; border-radius: 8px; padding: 10px 15px; cursor: pointer; }
#health-audit p { overflow-wrap: anywhere; font-size: .8rem; }
@media(max-width:1100px) { .health-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .health-grid { grid-template-columns:1fr; }.health-heading { flex-direction: column; align-items: start; }.health-table { font-size: .72rem; } }

.battery-columns {display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start;}
.battery-section {padding:20px 0;border-bottom:1px solid #294149;min-width:0;}
.battery-section h3 {margin:0 0 14px;color:#e7fcfc;}
.battery-section p {line-height:1.65;}
.battery-section button {margin:8px 10px 8px 0;}
.health-section button:not(summary) {border:1px solid #416069;border-radius:9px;padding:11px 14px;background:#14343d;color:#eaf7f8;font:inherit;font-size:.82rem;cursor:pointer;}
.health-section button:hover {background:#1b5059;}.health-section button:disabled {opacity:.5;cursor:default;}
.battery-bars {display:grid;gap:16px;margin:24px 0;}
.battery-bars>div {display:grid;grid-template-columns:180px 1fr 110px;align-items:center;gap:12px;font-size:.85rem;}
.battery-bars meter {width:100%;height:18px;}
.panel-disclosure>a {margin-right:20px;}
@media(max-width:900px) {.battery-columns {grid-template-columns:1fr;gap:0;}}
@media(max-width:520px) {.battery-bars>div {grid-template-columns:1fr 1fr;}.battery-bars meter {grid-row:2;grid-column:1/-1;}.energy-metrics {grid-template-columns:1fr 1fr;}.energy-stat>strong {font-size:1.2rem;}.health-table td,.health-table th {min-width:70px;}}

/* Cabecera, gráfica y pie compactos. */
.masthead { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:12px; border:0; padding:0; }
.brand-panel,.connection-stack { border:1px solid rgba(143,218,225,.16); border-radius:13px; background:linear-gradient(145deg,#132328,#080f12); padding:20px 22px; }
.brand-panel .eyebrow { font-size:.65rem; letter-spacing:.18em; margin-bottom:9px; }
.brand-panel h1 { font-family:'Bahnschrift','Aptos Display','Segoe UI',sans-serif; font-size:clamp(1.65rem,3.2vw,2.55rem); font-weight:600; line-height:1.1; letter-spacing:.075em; }
.brand-panel h1 span { color:#79dcd9; font-weight:400; }
.connection-stack { align-content:center; justify-items:end; text-align:right; gap:7px; }
.connection-stack .freshness { font-size:.83rem; line-height:1.5; }.connection-stack .attention { color:#f7cc82; }
.block-history { margin:15px 0 22px; padding:22px; }.chart-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:10px; }
.chart-heading h3 { margin:0; }.block-counter { color:#9ceae6; font-size:.85rem; padding:7px 12px; background:#163137; border:1px solid #2e5258; border-radius:8px; white-space:nowrap; }
.block-history svg { max-height:none; height:196px; }.energy-line { fill:none; }.energy-mark--partial { fill:#0c191e; stroke:#f2b75b; stroke-width:2; }
.garage-footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; align-items:stretch; }
.garage-footer .billing-section { margin:0; padding:16px; border:1px solid rgba(143,218,225,.16); border-radius:13px; background:#0b171b; }
.garage-footer .api-cost { padding:0; border:0; box-shadow:none; background:none; }.garage-footer .panel-disclosure { border-bottom:0; }.garage-footer .panel-disclosure>summary { padding:12px 0 0; font-size:.75rem; }
.garage-footer .account-bar { margin:0; border-radius:13px; padding:22px; flex-direction:column; align-items:start; justify-content:center; gap:18px; }
@media(max-width:580px) { .masthead { grid-template-columns:1fr; gap:8px; }.brand-panel,.connection-stack { padding:15px 18px; }.connection-stack { justify-items:start; text-align:left; }.garage-footer { grid-template-columns:1fr; }.block-history { padding:15px 10px; }.block-history svg { height:147px; } }

.header-battery { display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%; color:#b5d0d4; }.header-battery strong { font-size:1.55rem; color:#edffff; }.header-battery #range { color:#d0eaec; white-space:nowrap; }.journey small { display:block; line-height:1.55; }.chart-heading { justify-content:flex-end; margin-bottom:0; }
@media(max-width:580px) { .vehicle-dashboard { grid-template-columns:1fr; } }
.garage-footer .billing-section[data-state="VERDE"] { border-color:#44896a; background:#0a221b; }.garage-footer .billing-section[data-state="NARANJA"] { border-color:#ca8937; background:#312310; }.garage-footer .billing-section[data-state="ROJO"] { border-color:#d56767; background:#351519; }
/* Identidad y batería: dos grupos compactos, una única jerarquía visual. */
.brand-panel { display:flex; flex-direction:column; justify-content:center; gap:8px; }
.brand-panel h1 { font-family:'XTF Square','Consolas',monospace; font-size:clamp(2rem,3.7vw,3rem); font-weight:600; letter-spacing:.035em; line-height:1; }
.brand-panel h1 span { font-weight:600; }
.brand-panel .eyebrow { margin:0; font-size:.62rem; letter-spacing:.15em; color:#9ab8bd; }
.connection-stack { display:flex; flex-direction:column; align-items:stretch; justify-content:center; text-align:left; gap:9px; }
.header-battery { display:grid; grid-template-columns:auto minmax(80px,140px); align-items:center; justify-content:start; column-gap:28px; }
.battery-reading { display:flex; align-items:baseline; gap:12px; }
.header-battery strong { font-size:clamp(1.9rem,3vw,2.4rem); font-weight:650; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.battery-range { display:grid; gap:5px; border-left:1px solid #315058; padding-left:20px; }
.header-battery #range { font-size:1rem; font-weight:600; }
#battery-meter { width:100%; height:7px; border:0; border-radius:2px; background:#243a3e; appearance:none; }
#battery-meter::-webkit-meter-bar { border:0; border-radius:2px; background:#243a3e; }
#battery-meter::-webkit-meter-optimum-value { background:#70d8cd; border-radius:2px; }
#battery-meter::-moz-meter-bar { background:#70d8cd; border-radius:2px; }
.connection-stack .freshness { font-size:.72rem; color:#8da9ae; }
.connection-stack .attention { color:#f7cc82; }
@media(max-width:580px) { .brand-panel { gap:6px; }.header-battery { grid-template-columns:auto minmax(90px,140px); gap:24px; }.brand-panel h1 { font-size:2.15rem; } }
.app-navigation {display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:30px;}
.account-actions {display:flex;flex-wrap:wrap;gap:10px;}
.app-navigation a,.app-navigation button,.app-links a {color:#b7d4d8;font:inherit;font-size:.78rem;text-decoration:none;border:1px solid #2c494f;border-radius:7px;padding:8px 12px;background:#101e23;cursor:pointer;}
.app-navigation a:hover,.app-navigation button:hover,.app-links a:hover {border-color:#78d9d2;color:#eafffc;}
.nav-spacer {flex:1;}.install-help {padding:12px 16px;background:#14282e;border-radius:8px;font-size:.85rem;}
.app-links {display:flex;gap:12px;flex-wrap:wrap;}
.app-home {padding:35px 0 50px;}.app-home h1 {font-family:'XTF Square',monospace;font-size:2.8rem;letter-spacing:.04em;}
.home-sections {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,360px));gap:16px;margin-top:28px;}
.home-tile {display:flex;flex-direction:column;gap:8px;padding:26px;border:1px solid #32545a;border-radius:15px;background:linear-gradient(145deg,#173038,#0c171b);color:#b4cdd1;text-decoration:none;}
.home-tile:hover {border-color:#7ad9d2;background:#193239;}.home-tile strong {font-size:1.6rem;color:#efffff;}.tile-icon {color:#77e1d3;font-size:2rem;}.tile-open {margin-top:22px;color:#8fe4da;font-size:.85rem;}
.show-home .masthead,.show-home .vehicle-dashboard {display:none;}
.limited-view .garage-footer {grid-template-columns:1fr;}.limited-view .garage-footer .account-bar {flex-direction:row;align-items:center;justify-content:space-between;padding:14px 18px;}
@media(display-mode:standalone) {main {padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(30px,env(safe-area-inset-bottom));}}

#mobile-devices select{background:#102126;color:#d9eeee;border:1px solid #476066;border-radius:8px;padding:10px;font:inherit;min-height:40px}#mobile-devices select:focus-visible{outline:2px solid #82d8cb}