/* v32: compact first screens + actual safe areas. Keep scrolling available for accessibility. */
:root {
  --cc-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --cc-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --cc-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --cc-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --cc32-ink:#173349; --cc32-muted:#536b7d; --cc32-surface:#ffffff; --cc32-soft:#f1f7fa; --cc32-line:#d4e2ea;
}
html[data-theme="dark"] { --cc32-ink:#edf6fd; --cc32-muted:#b5c9d8; --cc32-surface:#15283a; --cc32-soft:#1c3549; --cc32-line:#365368; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Pro: all essential information in a short, readable card. */
body dialog#ccPremiumDialog {
  box-sizing:border-box!important; width:min(440px,calc(100vw - 24px))!important; max-width:440px!important;
  max-height:calc(var(--cc-view-height,100dvh) - var(--cc-safe-top) - var(--cc-safe-bottom) - 24px)!important;
  inset:0!important; margin:auto!important; padding:0!important; border-radius:22px!important;
  overflow:auto!important; overscroll-behavior:contain; background:var(--cc32-surface)!important;
  border:1px solid var(--cc32-line)!important; color:var(--cc32-ink)!important;
}
body #ccPremiumDialog .cc-dialog-close { position:absolute!important; top:12px!important; right:12px!important; width:36px!important; height:36px!important; min-height:36px!important; padding:0!important; font-size:24px!important; background:var(--cc32-soft)!important; color:var(--cc32-ink)!important; border:1px solid var(--cc32-line)!important; box-shadow:none!important; z-index:2; }
body #ccPremiumDialog .cc-premium-content { padding:22px 20px 16px!important; display:grid!important; gap:10px!important; }
body #ccPremiumDialog .cc-eyebrow { font-size:10px!important; letter-spacing:1.3px; color:var(--cc32-muted)!important; padding-right:38px; }
body #ccPremiumDialog h2 { font-size:clamp(21px,5.4vw,25px)!important; line-height:1.15!important; letter-spacing:-.4px!important; margin:0!important; padding-right:30px!important; color:var(--cc32-ink)!important; }
body #ccPremiumDialog p { font-size:13px!important; line-height:1.4!important; margin:0!important; color:var(--cc32-muted)!important; }
body #ccPremiumDialog .cc-benefits { display:grid!important; gap:8px!important; margin:2px 0!important; padding:12px!important; border:1px solid var(--cc32-line)!important; border-radius:14px; background:var(--cc32-soft)!important; }
body #ccPremiumDialog .cc-benefits>div { display:grid!important; grid-template-columns:24px minmax(0,1fr)!important; align-items:center; gap:8px!important; font-size:13px!important; line-height:1.35!important; color:var(--cc32-ink)!important; }
body #ccPremiumDialog .cc-benefits>div>span:first-child { font-size:19px!important; }
body #ccPremiumDialog .cc-gate-actions { display:grid!important; gap:7px!important; margin:0!important; }
body #ccPremiumDialog .cc-gate-actions>* { min-height:42px!important; width:100%!important; padding:9px 12px!important; font-size:14px!important; font-weight:750!important; border-radius:12px!important; text-align:center; line-height:1.3!important; text-decoration:none!important; }
body #ccPremiumDialog .cc-gate-error:empty { display:none!important; }
body #ccPremiumDialog .cc-premium-content>small { font-size:11px!important; line-height:1.4!important; text-align:center; color:var(--cc32-muted)!important; margin:0!important; }
body #ccPremiumDialog .cc-text-button { min-height:38px!important; padding:7px 10px!important; font-size:13px!important; margin:0!important; color:var(--cc32-ink)!important; border:0; }
/* Map: one settings control at a time; vehicle replaces the account block. */
body.cc-app .app-header .cc-account-row { display:none!important; }
body.cc-app #selectedVehicleCard { display:grid!important; grid-template-columns:64px minmax(0,1fr); align-items:start; column-gap:12px!important; row-gap:5px!important; margin:12px!important; padding:13px!important; background:var(--cc32-surface)!important; border:1px solid var(--cc32-line)!important; border-radius:17px!important; }
body.cc-app #selectedVehicleCard .ccv-card-top { grid-column:1/-1; margin:0 0 4px!important; }
body.cc-app #selectedVehicleCard .ccv-car-photo { grid-column:1; grid-row:2/5; width:64px!important; height:66px!important; min-height:0!important; margin:0!important; object-fit:contain!important; border-radius:10px!important; background:#fff; }
body.cc-app #selectedVehicleCard h3 { grid-column:2; margin:0!important; font-size:16px!important; line-height:1.25!important; overflow-wrap:anywhere; }
body.cc-app #selectedVehicleCard>small:not(.ccv-reference-modes) { grid-column:2; font-size:11px!important; line-height:1.4; }
body.cc-app #selectedVehicleCard .ccv-tags { grid-column:2; margin:0!important; flex-wrap:wrap; }
body.cc-app #selectedVehicleCard .ccv-tags span { font-size:10px!important; line-height:1.2; }
body.cc-app #selectedVehicleCard .ccv-card-metrics, body.cc-app #selectedVehicleCard .ccv-reference-modes,
body.cc-app #selectedVehicleCard>p, body.cc-app #selectedVehicleCard>button { grid-column:1/-1; }
body.cc-app #selectedVehicleCard .ccv-card-metrics { margin:4px 0 0!important; padding-top:7px!important; }
body.cc-app #selectedVehicleCard .ccv-card-metrics strong { font-size:19px!important; }
body.cc-app #selectedVehicleCard .ccv-reference-modes { font-size:10px!important; line-height:1.35; }
body.cc-app #selectedVehicleCard:not(:has(.ccv-car-photo)) h3,
body.cc-app #selectedVehicleCard:not(:has(.ccv-car-photo))>small,
body.cc-app #selectedVehicleCard:not(:has(.ccv-car-photo)) .ccv-tags { grid-column:1/-1; }
body.cc-app #selectedVehicleCard>p { font-size:12px!important; margin:0!important; line-height:1.4; }
body.cc-app #selectedVehicleCard>button { min-height:40px!important; margin:2px 0 0!important; }
body.cc-app .quick-actions[aria-label="Buscar gasolineras"] { padding-top:8px!important; }
body.cc-app .quick-actions[aria-label="Buscar gasolineras"] button { min-height:44px!important; }
body.cc-app:has(.left-panel.sheet-open) #mobileSettingsBtn { display:none!important; }
body.cc-app.right-panel-open #mobileSettingsBtn { display:none!important; }
@media(min-width:921px){body.cc-app #mobileSettingsBtn { display:none!important; }}
/* GPS gate: no route link and a cancel action always reachable. */
body.cc-app #tripLocationModal {
  inset:0!important; padding:calc(12px + var(--cc-safe-top)) 12px calc(12px + var(--cc-safe-bottom))!important;
  align-items:center!important; justify-items:center!important; overflow:auto!important; z-index:9000!important;
}
body.cc-app #tripLocationModal .trip-location-modal {
  box-sizing:border-box; width:min(390px,100%)!important; max-width:390px!important;
  max-height:calc(var(--cc-view-height,100dvh) - var(--cc-safe-top) - var(--cc-safe-bottom) - 24px)!important;
  padding:20px!important; border-radius:20px!important; overflow:auto!important; background:var(--cc32-surface)!important;
  color:var(--cc32-ink)!important; border:1px solid var(--cc32-line)!important; text-align:left!important;
}
body.cc-app #tripLocationModal .trip-location-icon { font-size:26px!important; margin:0 0 6px!important; }
body.cc-app #tripLocationModal h2 { font-size:22px!important; line-height:1.2!important; margin:0 0 8px!important; }
body.cc-app #tripLocationModal p { font-size:13px!important; line-height:1.45!important; margin:6px 0!important; color:var(--cc32-muted)!important; }
body.cc-app #tripLocationModal .trip-location-help { font-size:11px!important; }
body.cc-app #tripLocationModal .trip-location-actions { display:grid!important; grid-template-columns:1fr!important; gap:7px!important; margin-top:14px!important; }
body.cc-app #tripLocationModal button { min-height:42px!important; padding:9px 12px!important; font-size:14px!important; margin:0!important; border-radius:12px!important; }
body.cc-app #tripLocationModal #tripLocationDiagnosticsBtn { order:3; min-height:34px!important; font-size:12px!important; background:transparent!important; box-shadow:none!important; color:var(--cc32-muted)!important; }
body.cc-app #tripLocationModal .trip-location-diagnostics { margin-top:10px; padding:9px!important; border-radius:12px!important; background:var(--cc32-soft)!important; color:var(--cc32-ink)!important; }
body.cc-app #tripLocationModal .trip-location-diagnostics p { font-size:11px!important; margin:3px 0!important; }
body.cc-app.cc-gps-open #mobileDock, body.cc-app.cc-gps-open #mobileSettingsBtn { visibility:hidden!important; pointer-events:none!important; }
/* Login/register: show the form first, no marketing wall above it. */
body.cc-compact-auth { background:var(--cc32-soft)!important; color:var(--cc32-ink)!important; height:auto!important; overflow-y:auto!important; }
body.cc-compact-auth .cc-auth-wrap { width:min(440px,100%); min-height:100dvh; margin:0 auto; padding:calc(18px + var(--cc-safe-top)) 16px calc(18px + var(--cc-safe-bottom)); display:flex; flex-direction:column; justify-content:center; gap:14px; }
body.cc-compact-auth .cc-auth-brand { display:flex; align-items:center; gap:9px; color:var(--cc32-ink); text-decoration:none; font-size:19px; font-weight:800; }
body.cc-compact-auth .cc-auth-brand>span { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#c4edee; font-size:23px; }
body.cc-compact-auth .cc-auth-brand small { font-size:11px; font-weight:500; display:block; color:var(--cc32-muted); }
body.cc-compact-auth .auth-card { padding:22px!important; border-radius:20px!important; border:1px solid var(--cc32-line)!important; background:var(--cc32-surface)!important; }
body.cc-compact-auth .auth-card h1 { font-size:26px!important; line-height:1.12!important; margin:0 0 6px!important; letter-spacing:-.5px!important; }
body.cc-compact-auth .auth-card>p { font-size:13px!important; line-height:1.4!important; margin:0 0 15px!important; color:var(--cc32-muted)!important; }
body.cc-compact-auth .auth-card form { gap:12px!important; }
body.cc-compact-auth .auth-card label { font-size:13px!important; gap:5px!important; }
body.cc-compact-auth .auth-card input { min-height:44px!important; height:44px!important; font-size:16px!important; padding:10px 12px!important; }
body.cc-compact-auth .auth-card label small { font-size:11px!important; line-height:1.3!important; font-weight:400; }
body.cc-compact-auth .auth-card button[type="submit"] { min-height:44px!important; font-size:15px!important; padding:10px!important; }
body.cc-compact-auth .auth-card .form-foot { font-size:13px!important; line-height:1.4!important; margin:12px 0 0!important; }
body.cc-compact-auth .auth-card #planCaption { font-size:11px!important; line-height:1.4!important; margin:9px 0 0!important; }
body.cc-compact-auth #message { padding:9px!important; font-size:12px!important; }
body.cc-compact-auth .cc-back-map { text-align:center; padding:7px; color:var(--cc32-ink); font-size:13px; }
/* Q: let the copy have full width; never compress into a vertical column. */
body.cc-q-app .q-shell { padding-top:calc(16px + var(--cc-safe-top))!important; padding-bottom:calc(24px + var(--cc-safe-bottom))!important; }
body.cc-q-app .q-header h1 { font-size:clamp(23px,5vw,32px)!important; line-height:1.12!important; }
body.cc-q-app .q-header p { font-size:13px!important; line-height:1.4!important; }
body.cc-q-app .q-vehicle-card { display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:center!important; padding:12px!important; gap:10px!important; }
body.cc-q-app .q-vehicle-card>div { width:auto!important; min-width:0!important; }
body.cc-q-app .q-vehicle-card strong { font-size:16px!important; line-height:1.25!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; }
body.cc-q-app .q-vehicle-card span { font-size:12px!important; line-height:1.35; }
body.cc-q-app .q-vehicle-card a { min-height:40px; display:flex; align-items:center; padding:6px 8px; font-size:12px!important; }
body.cc-q-app .q-vehicle-card.q-no-vehicle { grid-template-columns:minmax(0,1fr)!important; }
body.cc-q-app .q-vehicle-card.q-no-vehicle a { justify-self:start; border:1px solid var(--q-line); border-radius:10px; }
body.cc-q-app .q-tabs { top:calc(6px + var(--cc-safe-top))!important; }
body.cc-q-app .q-panel-head h2 { font-size:21px!important; line-height:1.2!important; }
body.cc-q-app .q-trip-live { padding-top:calc(12px + var(--cc-safe-top))!important; padding-bottom:calc(14px + var(--cc-safe-bottom))!important; }
@media(max-width:920px) {
  body.cc-app #rightPanelToggle { top:calc(10px + var(--cc-safe-top))!important; right:calc(10px + var(--cc-safe-right))!important; }
  body.cc-app #mobileSettingsBtn { top:calc(62px + var(--cc-safe-top))!important; right:calc(12px + var(--cc-safe-right))!important; width:40px!important; height:40px!important; min-height:40px!important; font-size:21px!important; }
  body.cc-app #mobileDock.cc-navigation { bottom:calc(8px + var(--cc-safe-bottom))!important; }
  body.cc-app .leaflet-top { top:var(--cc-safe-top)!important; }
  body.cc-app .leaflet-bottom { bottom:var(--cc-safe-bottom)!important; }
  body.cc-app .left-panel { bottom:calc(var(--cc-dock-height,62px) + 18px + var(--cc-safe-bottom))!important; max-height:calc(100dvh - var(--cc-safe-top) - var(--cc-safe-bottom) - 126px)!important; }
  body.cc-app .side-panel { bottom:calc(var(--cc-dock-height,62px) + 18px + var(--cc-safe-bottom))!important; max-height:calc(100dvh - var(--cc-safe-top) - var(--cc-safe-bottom) - 126px)!important; }
  body.cc-app #tripFullscreen { padding-top:calc(12px + var(--cc-safe-top))!important; padding-bottom:calc(12px + var(--cc-safe-bottom))!important; }
  body.cc-app .diario-fullscreen-inner { padding-top:calc(16px + var(--cc-safe-top))!important; }
  body .ccv-dialog { max-height:calc(100dvh - var(--cc-safe-top) - var(--cc-safe-bottom) - 24px)!important; }
}
@media(max-width:400px){ body.cc-compact-auth .auth-card{padding:18px!important;} body.cc-compact-auth .cc-auth-wrap{gap:10px;} body.cc-q-app .q-header{gap:10px!important;margin-bottom:12px!important;} }
@media(max-height:650px) {
  body #ccPremiumDialog .cc-premium-content{gap:7px!important;padding:17px 17px 12px!important;}
  body #ccPremiumDialog .cc-benefits{gap:6px!important;padding:10px!important;}
  body.cc-compact-auth .cc-auth-wrap{padding-top:calc(10px + var(--cc-safe-top));padding-bottom:calc(10px + var(--cc-safe-bottom));gap:9px;justify-content:flex-start;}
  body.cc-compact-auth .auth-card{padding:16px!important;}
  body.cc-compact-auth .auth-card form{gap:9px!important;}
}
@media(prefers-reduced-motion:reduce){body #ccPremiumDialog{animation:none!important;}}