/* Mi Garaje: the dashboard behind the sign-in. Builds on ui.css (tokens, nav, buttons, fields, phone). */
.garage { background: var(--paper); min-height: 100svh; display: flex; flex-direction: column; }
.garage [hidden] { display: none !important; }
.login-card .h3 { color: var(--ink); }
.garage main { flex: 1; }
.nav-section { margin-right: auto; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); font: 600 13px/1 var(--mono); letter-spacing: .04em; }
.nav.light .nav-section { background: rgba(5,16,23,.06); }
.nav-bar #sign-out { margin-left: auto; }
.garage-auto-link { color: inherit; font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px 0; }
.garage-auto-link:hover, .garage-demo-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.garage-demo-link { font-size: 14px; line-height: 1.6; color: var(--teal); text-decoration: none; }
.login-card > p { margin-block: 0; }
@media (max-width: 600px) {
  .garage .nav-bar { flex-wrap: wrap; border-radius: 24px; }
  .garage .nav-section { display: none; }
  .garage-auto-link { margin-left: auto; font-size: 13px; }
  .garage .nav-bar #sign-out { display: inline-flex; margin-left: 0; font-size: 13px; padding-inline: 12px; }
}
@media (max-width: 380px) {
  .garage .dash { padding-top: 144px; }
  .garage .kpis { grid-template-columns: 1fr; }
  .garage .kpi { min-height: 110px; padding: 18px 20px; }
}
.small { font-size: 13.5px; }

/* ---------- Sign in ---------- */
.login { position: relative; overflow: hidden; isolation: isolate; min-height: 100svh; display: grid; align-items: center; padding: 120px 0 70px; }
.login-glow { position: absolute; inset: -20% -10% auto 30%; height: 90%; z-index: -1; background: radial-gradient(closest-side, rgba(25,211,219,.28), transparent 70%); filter: blur(20px); }
.login-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.login-copy { position: relative; display: grid; gap: 22px; }
.login-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 46ch; }
.login-points li { position: relative; padding-left: 26px; color: var(--night-text); }
.login-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(25,211,219,.18); }
.login-points b { color: var(--white); }
.login-gecko { position: absolute; right: -6%; bottom: -60px; width: 260px; height: 340px; pointer-events: none; }
.login-card { display: grid; gap: 16px; padding: clamp(26px, 3vw, 38px); border-radius: var(--r-lg); background: var(--white); color: var(--text); box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
.login-card .fine a { color: var(--teal); }
.google-btn { --bg: var(--white); --fg: var(--ink); width: 100%; box-shadow: 0 0 0 1.5px var(--line) inset; }
.google-btn svg { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13.5px; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-card .btn-glow { width: 100%; }
.form-error { min-height: 1.2em; margin: 0; color: var(--danger); font-weight: 600; font-size: 14.5px; }
.form-error:empty { display: none; }
@media (max-width: 900px) { .login-grid { grid-template-columns: 1fr; } .login-gecko { display: none; } }

/* ---------- Dashboard ---------- */
.dash { padding: 116px 0 64px; }
.dash-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.dash-head p { margin: 6px 0 0; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line) inset; }
.seg button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--white); }

/* Vehicle switcher: plate tags like the app */
.vehicles { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 8px; scrollbar-width: thin; }
.vehicle { flex: none; display: flex; align-items: center; gap: 14px; min-width: 240px; padding: 14px 18px; border: 0; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--line) inset; cursor: pointer; text-align: left; transition: transform .3s var(--spring), box-shadow .3s; }
.vehicle:hover { transform: translateY(-2px); }
.vehicle[aria-current="true"] { background: var(--night-2); color: var(--white); box-shadow: 0 0 0 1.5px var(--cyan) inset, 0 20px 40px -24px rgba(25,211,219,.6); }
.plate { display: inline-block; padding: 5px 10px; border-radius: 8px; border: 2px solid currentColor; font: 700 15px/1 var(--display); letter-spacing: .06em; white-space: nowrap; }
.vehicle .name { display: grid; gap: 2px; font-weight: 700; font-size: 15px; }
.vehicle .name small { font-weight: 500; font-size: 13px; opacity: .7; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--r-md); background: var(--white); box-shadow: 0 0 0 1px var(--line) inset; }
.kpi span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.kpi strong { font: 700 clamp(24px, 2.4vw, 32px)/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi small { font-size: 13px; color: var(--muted); }
.kpi.hero { background: var(--night-2); box-shadow: none; }
.kpi.hero span, .kpi.hero small { color: var(--night-text); }
.kpi.hero strong { color: var(--white); }
.kpi .ring { position: absolute; right: 18px; top: 50%; translate: 0 -50%; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--cyan) calc(var(--p) * 1turn), rgba(255,255,255,.1) 0); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
@media (max-width: 980px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi .ring { top: 18px; right: 16px; translate: none; width: 40px; height: 40px; } .kpi.hero small { padding-right: 0; } .kpi.hero strong { padding-right: 46px; } }

/* Panels */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.panel { display: grid; gap: 16px; align-content: start; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line) inset; }
.panel-costs { grid-column: 1 / -1; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.panel-head p { margin: 4px 0 0; }
.panel .fine { margin: 0; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* Documents */
.docs { display: grid; gap: 10px; }
.doc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--paper); }
.doc-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #e6edef; color: var(--muted); }
.doc-icon svg { width: 22px; height: 22px; }
.doc.success .doc-icon { background: rgba(75,227,176,.18); color: #0f7a57; }
.doc.warning .doc-icon { background: rgba(255,181,71,.2); color: #a3620a; }
.doc.danger .doc-icon { background: rgba(229,72,77,.14); color: var(--danger); }
.doc b { display: block; color: var(--ink); font-size: 15.5px; }
.doc small { color: var(--muted); font-size: 13.5px; }
.doc .state { font-weight: 700; }
.doc.success .state { color: #0f7a57; } .doc.warning .state { color: #a3620a; } .doc.danger .state { color: var(--danger); }
.doc .btn { white-space: nowrap; }

/* Year */
.year { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.year li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.year li:last-child { border-bottom: 0; }
.year .when { display: grid; place-items: center; height: 58px; border-radius: 16px; background: var(--night-2); color: var(--white); text-align: center; line-height: 1.1; }
.year .when b { font: 700 22px/1 var(--display); }
.year .when small { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.year strong { display: block; color: var(--ink); }
.year span { color: var(--muted); font-size: 14px; }

/* Costs */
.costs-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 220px; padding-top: 24px; }
.bar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.bar b { position: static !important; translate: none !important; }
.bar i { display: block; width: 100%; max-width: 54px; min-height: 4px; height: calc(var(--h) * 140px); border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, var(--cyan), #0b8f96); transform-origin: bottom; animation: rise .9s var(--ease) both; }
.bar.now i { background: linear-gradient(180deg, var(--mint), var(--cyan)); box-shadow: 0 12px 30px -12px rgba(25,211,219,.8); }
.bar b { position: absolute; top: -2px; translate: 0 calc(-100% - 2px); font: 700 12.5px/1 var(--display); color: var(--ink); white-space: nowrap; }
.bar.empty b { display: none; }
.bar small { font: 600 11.5px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@keyframes rise { from { transform: scaleY(0); } }
.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cats li { display: grid; gap: 6px; font-size: 14px; }
.cats .line { display: flex; justify-content: space-between; gap: 10px; color: var(--ink); font-weight: 600; }
.cats .track { height: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.cats .track i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--aurora); }
@media (max-width: 760px) { .costs-top { grid-template-columns: 1fr; } .chart { gap: 6px; } .bar b { font-size: 10.5px; } }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--line) inset; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; padding: 12px 16px; background: var(--paper); font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.table td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .muted { color: var(--muted); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #eef3f4; color: var(--muted); white-space: nowrap; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag.success { background: rgba(75,227,176,.18); color: #0f7a57; } .tag.warning { background: rgba(255,181,71,.2); color: #a3620a; } .tag.danger { background: rgba(229,72,77,.14); color: var(--danger); }
.table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }

/* Loading and footer */
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60svh; color: var(--muted); font-weight: 600; }
.loading[hidden] { display: none; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--cyan); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.garage-foot { padding: 26px 0 34px; color: var(--muted); font-size: 14px; }
.garage-foot .wrap { justify-content: space-between; }
.garage-foot a { color: var(--muted); text-decoration: none; }
.garage-foot a:hover { color: var(--teal); }