/* Setup Racing | Motorsport Premium — añadir DESPUÉS de styles.css y paddock.css.
   Usa tokens de la aplicación existente; no altera cálculos, coches o lógica del setup. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root {
  --bg:#111315;--panel:#171A1D;--card:#202429;--card-2:#292E34;
  --line:#353B42;--text:#F3F4F2;--dim:#9299A1;--accent:#D32F35;
  --accent-ink:#ffffff;--accent-soft:rgba(211,47,53,.13);
  --stage:#171A1D;--r:10px;--r-sm:7px;--shadow:0 10px 30px rgba(0,0,0,.20);
  --mp-nav:#171A1D;--mp-danger:#ef646a;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}
html{font-size:15px}
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.5;letter-spacing:-.008em}
h1,h2,h3,h4,.car-card .name,.ev-top b{font-family:'Barlow Condensed',Inter,sans-serif;letter-spacing:.025em}
.topbar{background:var(--mp-nav);border-bottom:1px solid var(--line);padding-inline:clamp(12px,2.4vw,30px);min-height:65px;backdrop-filter:none}
.topbar h1{font-family:'Barlow Condensed',sans-serif;font-size:1.45rem;letter-spacing:.045em;text-transform:uppercase}
.topbar .sub{font-size:.72rem}
main{padding-top:23px}
.garage-head h2,.sec-head h2,.ev-head h2{font-size:1.8rem;line-height:1.15}
.block,.panel,.car-card,.ev-card,.ses-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.block,.panel{padding:15px 16px 12px}
.car-card,.ev-card,.ses-card{transition:border-color .16s ease,background-color .16s ease}
.car-card:hover,.ev-card:hover,.ses-card:hover{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));background:var(--card-2)}
.car-card .mini{background:var(--stage);border:1px solid var(--line);border-radius:8px}
.tabs{background:var(--panel);border-radius:8px;padding:4px;gap:4px}
.tabs button{border-radius:6px;font-size:.84rem;transition:color .16s ease,background .16s ease}
.tabs button.on{background:var(--card-2);box-shadow:inset 0 -2px 0 var(--accent)}
.btn{min-height:39px;border-radius:7px;font-size:.87rem;transition:background .16s ease,border-color .16s ease}
.btn.primary{color:var(--accent-ink)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 84%,white)}
.btn.danger{background:var(--mp-danger);border-color:var(--mp-danger);color:#fff}
.btn:disabled{opacity:.48;cursor:not-allowed}
.fld{gap:6px}
.fld input,.fld select,.fld textarea{background:var(--card-2);border-radius:6px;min-height:40px;transition:border-color .15s ease}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent)}
input[type=number],.f input,.f .val,.badge,.dorsal{font-variant-numeric:tabular-nums}
.tag,.badge{border-radius:6px}
.block h3{letter-spacing:.075em}
.icon-btn{border-radius:7px;background:var(--card);border-color:var(--line)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Editor de apariencia: classes mp-* aisladas para evitar interferencias con estilos de la app. */
.mp-trigger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--text);font-size:1.12rem}
.mp-trigger:hover{border-color:var(--accent)}
.mp-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.70);display:flex;align-items:center;justify-content:center;padding:16px}
.mp-dialog{width:min(100%,810px);max-height:min(90vh,900px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;color:var(--text);box-shadow:0 22px 70px rgba(0,0,0,.45)}
.mp-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px}
.mp-header h2{font-size:1.8rem;margin:0}.mp-muted{color:var(--dim);font-size:.83rem;margin:2px 0 0}
.mp-close{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:6px 12px}
.mp-preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 20px}
.mp-preset{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px;text-align:left;color:var(--text);cursor:pointer}
.mp-preset[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.mp-preset-swatch{display:block;height:36px;border-radius:5px;margin-bottom:8px;border:1px solid rgba(128,128,128,.25)}
.mp-preset strong{display:block;font-size:.83rem}.mp-preset small{display:block;color:var(--dim);font-size:.73rem}
.mp-section-title{font-family:'Barlow Condensed',sans-serif;letter-spacing:.055em;font-size:1.2rem;margin:15px 0 8px}
.mp-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.mp-field{display:grid;grid-template-columns:36px minmax(0,1fr) 112px;gap:9px;align-items:center;padding:9px;background:var(--card);border:1px solid var(--line);border-radius:7px}
.mp-picker{width:36px;height:34px;padding:1px;background:transparent;border:0;cursor:pointer}
.mp-field label{font-size:.79rem;font-weight:600}.mp-field small{display:block;font-size:.68rem;color:var(--dim);font-weight:400}
.mp-hex{width:100%;min-width:0;min-height:34px;background:var(--card-2);border:1px solid var(--line);border-radius:5px;padding:5px 7px;color:var(--text);font:12px Inter,monospace}
.mp-hex[aria-invalid="true"]{border-color:var(--mp-danger)}
.mp-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.mp-btn{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:10px 14px;cursor:pointer}
.mp-btn.mp-main{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mp-warning{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid #e8b34e;font-size:.78rem;color:var(--text)}
.mp-preview{margin-top:13px;background:var(--bg);border:1px solid var(--line);padding:13px;border-radius:7px}
.mp-preview-card{background:var(--card);border:1px solid var(--line);padding:12px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.mp-preview-number{font-family:'Barlow Condensed',sans-serif;font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}
@media(max-width:620px){.mp-dialog{padding:15px;max-height:94vh}.mp-preset-grid{grid-template-columns:1fr}.mp-preset{display:grid;grid-template-columns:72px 1fr;column-gap:9px}.mp-preset-swatch{grid-row:span 2;margin:0;height:37px}.mp-fields{grid-template-columns:1fr}.mp-actions .mp-btn{flex:1}.mp-header h2{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.btn,.tabs button,.car-card,.ev-card,.ses-card{transition:none!important}}

/* ---------- Ajustes de integración con Setup Racing ----------
   Barlow Condensed es más estrecha que Inter: los títulos pequeños necesitan más cuerpo
   y las métricas (pesos, uso, gasto) usan la tipografía de cifras del sistema. */
.block h3{font-size:.98rem;letter-spacing:.07em}
.panel h3{font-size:1.1rem;letter-spacing:.03em}
.panel h3 .wk,.wk{font-family:'Barlow Condensed',Inter,sans-serif;font-size:.92rem;letter-spacing:.05em;border-radius:5px}
.car-card .name{font-size:1.32rem;line-height:1.15}
.ev-top b{font-size:1.22rem}
.sec{font-family:'Barlow Condensed',Inter,sans-serif;font-size:1rem;letter-spacing:.08em}
.balance b{font-family:'Barlow Condensed',Inter,sans-serif;font-size:1.3rem;font-weight:600}
.stat b{font-family:'Barlow Condensed',Inter,sans-serif;font-size:1.75rem;font-weight:600}
.kv.big span{font-family:'Barlow Condensed',Inter,sans-serif;font-size:1.15rem;letter-spacing:.02em}
.kv i{font-family:Inter,system-ui,sans-serif;font-size:.68rem;letter-spacing:.06em}
.wtabs button,.hotb .wl{font-family:'Barlow Condensed',Inter,sans-serif;font-size:1.05rem;letter-spacing:.04em}
.modal .sheet{border-radius:12px}
.sheet h3{font-size:1.45rem}
/* Los avisos de estado conservan su semántica (ok / warn / bad) aunque cambie el acento. */
.tag.bad,.pill.est-pendiente{color:var(--bad)}

/* ---------- Logo Race Manager en la barra superior ---------- */
.applogo { display: inline-flex; align-items: center; flex: none; border-radius: 6px; }
.applogo img { display: block; height: 42px; width: auto; }
.applogo .logo-cla { display: none; }
:root[data-theme="light"] .applogo .logo-osc { display: none; }
:root[data-theme="light"] .applogo .logo-cla { display: block; }
/* En el garaje el logo hace de título (el texto queda solo para lectores de pantalla) */
body.en-garaje #title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body:not(.en-garaje) .applogo { padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--line); border-radius: 0; }
@media (max-width: 600px) {
  .applogo img { height: 32px; }
  body:not(.en-garaje) .applogo img { height: 26px; }
}
@media print { .applogo { display: none; } }

/* ---------- Inicio de sesión ---------- */
body.sin-sesion #user, body.sin-sesion #menu, body.sin-sesion #savestate, body.sin-sesion #back { display: none !important; }
body.sin-sesion .topbar { display: none; }
.login-wrap { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 24px 0; }
.login-card { width: min(420px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px 22px; box-shadow: var(--shadow); }
.login-logo { display: block; width: min(300px, 80%); height: auto; margin: 4px auto 20px; }
.login-card .logo-cla { display: none; }
:root[data-theme="light"] .login-card .logo-osc { display: none; }
:root[data-theme="light"] .login-card .logo-cla { display: block; }
.login-seg { display: flex; width: 100%; margin-bottom: 16px; }
.login-seg button { flex: 1; }
.login-card .check { margin: 2px 0 6px; font-size: .88rem; }
.login-card .check input, .cuenta input[type=checkbox] { width: 17px; height: 17px; min-height: 0; accent-color: var(--accent); }
.login-msg { min-height: 1.2em; margin: 4px 0 10px; color: var(--bad); font-size: .86rem; }
.login-msg:empty { min-height: 0; margin: 0; }
.cuenta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); }
.cuenta > div:first-child { display: flex; flex-direction: column; }