/* ============================================================
RallyNote Pro — Tema "Motorsport Premium" (oscuro + claro)
Drop-in. Cargar SIEMPRE DESPUES de css/app.css:
Por defecto: oscuro. Con [data-theme="light"] en o clase
.theme-light en pasa a claro. El script anade el boton.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@600;700;800&family=Barlow+Condensed:wght@600;700&display=swap');
/* ---------- Tokens: OSCURO (por defecto) ---------- */
:root{
--bg:#0b0e13;
--bg-2:#0f141b;
--surface:#151b23;
--surface-2:#1b232d;
--line:#28323f;
--text:#eef2f6;
--muted:#94a2b2;
--red:#ef3b24;
--red-deep:#b3160a;
--green:#26c26b;
--amber:#f5b301;
--topbar:rgba(12,16,22,.85);
--page-grad-1:rgba(239,59,36,.10);
--page-grad-2:rgba(38,194,107,.06);
--page-base-a:#0c1017;
--page-base-b:#090c11;
--input-bg:#151b23;
--card-grad-a:#151b23;
--card-grad-b:#0f141b;
--radius:14px; --radius-lg:18px;
--shadow:0 14px 34px rgba(0,0,0,.5);
--shadow-sm:0 4px 14px rgba(0,0,0,.35);
--ring:0 0 0 3px rgba(239,59,36,.35);
}
/* ---------- Tokens: CLARO ---------- */
:root[data-theme="light"], body.theme-light{
--bg:#eef1f5;
--bg-2:#f4f6f9;
--surface:#ffffff;
--surface-2:#f1f3f7;
--line:#d9dfe8;
--text:#141a22;
--muted:#5b6673;
--topbar:rgba(255,255,255,.9);
--page-grad-1:rgba(239,59,36,.08);
--page-grad-2:rgba(38,194,107,.05);
--page-base-a:#eef1f5;
--page-base-b:#e6eaf0;
--input-bg:#ffffff;
--card-grad-a:#ffffff;
--card-grad-b:#f4f6f9;
--shadow:0 12px 28px rgba(17,24,39,.12);
--shadow-sm:0 3px 10px rgba(17,24,39,.08);
}
/* ---------- Base ---------- */
html,body{
background:
radial-gradient(1200px 600px at 80% -10%, var(--page-grad-1), transparent 60%),
radial-gradient(900px 500px at 0% 110%, var(--page-grad-2), transparent 55%),
linear-gradient(180deg, var(--page-base-a) 0%, var(--page-base-b) 100%) !important;
font-family:'Barlow', system-ui, sans-serif !important;
-webkit-font-smoothing:antialiased;
}
/* Color de texto base, EXCEPTO en modo carrera (que gestiona su propio día/noche) */
body:not(.in-race){ color:var(--text) !important; }
/* Contenedores de vista: dejan ver el fondo del tema (corrige fondo claro en oscuro) */
#view-hub,#view-login,.view,.view.active,.hub-wrap,.admin-wrap,.rp-wrap,.race-viewer{ background:transparent !important; }
h1,h2,h3,.lc-title,.hc-title,.hub-welcome-name,.rp-title,
.nb-rally-name,.race-stage-name,.rc-name{
font-family:'Barlow Semi Condensed','Barlow',sans-serif !important;
letter-spacing:.2px;
}
.tb-odo,.race-odo-val,.race-timer,.pn-num{ font-variant-numeric:tabular-nums; }
/* ---------- Botones y controles ---------- */
button,.btn,.hc-cta{ font-family:'Barlow',sans-serif; border-radius:12px;
transition:transform .12s ease, box-shadow .2s ease, background .2s ease; }
button:active,.btn:active{ transform:translateY(1px); }
.btn,button.primary,.rp-stage-go,.sb-add-btn{
background:linear-gradient(180deg,var(--red),var(--red-deep)) !important;
color:#fff !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:var(--shadow-sm); }
.btn:hover,.rp-stage-go:hover{ box-shadow:0 6px 20px rgba(239,59,36,.35); }
.icon-btn{ background:var(--surface-2) !important; border:1px solid var(--line) !important;
color:var(--text) !important; border-radius:12px !important; }
.icon-btn:hover{ border-color:var(--red) !important; }
.icon-btn.active{ background:var(--red) !important; border-color:var(--red) !important; color:#fff !important; }
input,select,textarea{
background:var(--input-bg) !important; color:var(--text) !important;
border:1px solid var(--line) !important; border-radius:10px !important; padding:10px 12px !important; outline:none !important; }
input:focus,select:focus,textarea:focus{ box-shadow:var(--ring) !important; border-color:var(--red) !important; }
/* Boton de tema (lo inyecta theme-toggle.js) */
.rn-theme-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:10px; cursor:pointer;
background:var(--surface-2); border:1px solid var(--line); color:var(--text); font-size:18px; }
.rn-theme-toggle:hover{ border-color:var(--red); }
/* ---------- Topbar ---------- */
.tb-logo,.hub-logo,.sb-logo,.login-logo{ font-weight:800; letter-spacing:.3px; }
.tb-menu,.race-topbar,.nb-header,.nb-statusbar{
background:var(--topbar) !important; backdrop-filter:blur(8px); border-bottom:1px solid var(--line) !important; }
.tb-odo{ background:var(--surface-2) !important; border:1px solid var(--line) !important;
color:var(--red) !important; border-radius:10px; padding:4px 10px; font-weight:700; }
/* ---------- Panel de inicio (hub) ---------- */
.hub-welcome-label{ color:var(--muted) !important; letter-spacing:2px; }
.hub-welcome-name{ color:var(--text) !important; }
.hub-cards{ gap:18px !important; }
.hub-card,.hc-icon{ border-radius:var(--radius-lg) !important; }
.hub-card{
position:relative;
background:linear-gradient(180deg,var(--card-grad-a),var(--card-grad-b)) !important;
border:1px solid var(--line) !important; box-shadow:var(--shadow); overflow:hidden;
transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease; }
.hub-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg,var(--red),transparent 70%); }
.hub-card:hover{ transform:translateY(-3px); border-color:var(--red) !important; }
.hub-card-race::before{ background:linear-gradient(90deg,var(--red),var(--amber) 90%); }
.hub-card-notes::before{ background:linear-gradient(90deg,var(--green),transparent 70%); }
.hc-icon{ background:var(--surface-2) !important; border:1px solid var(--line) !important; color:var(--red) !important; }
.hc-title{ color:var(--text) !important; font-weight:800 !important; }
.hc-desc{ color:var(--muted) !important; }
.hc-cta{ color:var(--red) !important; font-weight:700 !important; }
/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
background:
radial-gradient(800px 400px at 50% -10%, var(--page-grad-1), transparent 60%),
linear-gradient(180deg,var(--page-base-a),var(--page-base-b)); }
.login-card{ width:min(380px,92vw); padding:34px 30px !important;
background:linear-gradient(180deg,var(--card-grad-a),var(--card-grad-b)) !important;
border:1px solid var(--line) !important; border-radius:var(--radius-lg) !important; box-shadow:var(--shadow); }
.login-card::before{ content:""; display:block; height:4px; width:56px; margin-bottom:18px;
background:linear-gradient(90deg,var(--red),var(--red-deep)); border-radius:4px; }
.login-logo,.lc-title{ font-size:26px; font-weight:800 !important; color:var(--text) !important; }
.login-sub{ color:var(--muted) !important; margin-bottom:18px; }
.login-card label{ color:var(--muted) !important; font-size:13px; }
.login-card button,.login-card [type=submit]{ width:100%; margin-top:8px; padding:12px !important;
background:linear-gradient(180deg,var(--red),var(--red-deep)) !important; color:#fff !important;
font-weight:700 !important; border:none !important; border-radius:10px !important; }
.l-err{ color:#e0362a !important; }
.login-footer{ color:var(--muted) !important; margin-top:16px; font-size:12px; }
body:not(.in-app):not(.in-race) form{ max-width:380px; margin:10vh auto; padding:30px;
background:linear-gradient(180deg,var(--card-grad-a),var(--card-grad-b));
border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
/* ---------- Selector de rally / tramo ---------- */
.rally-card,.rp-rally,.rp-stage,.sb-item{
background:linear-gradient(180deg,var(--card-grad-a),var(--card-grad-b)) !important;
border:1px solid var(--line) !important; border-left:3px solid var(--red) !important;
border-radius:var(--radius) !important; box-shadow:var(--shadow-sm); }
.rp-stage:hover,.rally-card:hover,.sb-item:hover{ border-color:var(--red) !important; }
.rc-name,.rp-rally-name,.rp-stage-name,.sb-item-name{ color:var(--text) !important; font-weight:700 !important; }
.rc-meta,.rp-stage-meta,.sb-item-meta{ color:var(--muted) !important; }
.rp-title{ color:var(--text) !important; }
/* ---------- Editor de notas / notebook ---------- */
/* Contenedores del cuaderno: fondo por color (NO shorthand) para no borrar el rayado */
.panel,.notebook{ background-color:var(--bg-2) !important; }
/* El texto cae EXACTO sobre cada renglón (interlineado = altura de línea del rayado) */
.pacenote-editor{ color:var(--text) !important; line-height:var(--line-h, 50px) !important; }
/* Rayado adaptado al modo oscuro (líneas y margen sutiles) */
:root:not([data-theme="light"]) .pacenote-editor{
background-image:
linear-gradient(to right, transparent 59px, rgba(239,59,36,0.5) 59px, rgba(239,59,36,0.5) 60px, transparent 60px),
repeating-linear-gradient(to bottom, transparent 0,
transparent calc(var(--line-h, 50px) - 1px),
rgba(255,255,255,0.12) calc(var(--line-h, 50px) - 1px),
rgba(255,255,255,0.12) var(--line-h, 50px)) !important;
background-size: 100% 100%, 100% var(--line-h, 50px) !important;
background-position: 0 0, 0 calc(var(--line-h, 50px) - 6px) !important;
background-repeat: no-repeat, repeat !important;
}
.notebook-margin{ border-right:2px solid var(--red) !important; opacity:.8; }
.nb-rally-name{ color:var(--text) !important; }
.nb-stage-name{ color:var(--muted) !important; }
.quickbar,.qb{ background:var(--topbar) !important; border-top:1px solid var(--line) !important; }
.qb-lbl{ color:var(--muted) !important; }
.save-status.saved{ color:var(--green) !important; }
.save-status.saving,.save-status.dirty{ color:var(--amber) !important; }
.pacenote-editor .pn-num{ color:var(--red) !important; font-weight:800; }
.pacenote-editor .pn-dir{ color:var(--text) !important; font-weight:800; }
.pacenote-editor .pn-dist{ color:var(--muted) !important; }
.pacenote-editor .pn-danger{ color:var(--amber) !important; font-weight:700; }
.pacenote-editor .pn-terrain, .pacenote-editor .terr{ color:#3f9bff !important; }
/* ---------- Modo carrera (mantiene su propio dia/noche) ---------- */
.race-odo-lbl{ color:var(--muted) !important; letter-spacing:2px; }
.race-odo-val,.race-timer{ font-family:'Barlow Semi Condensed','Barlow',sans-serif !important; font-weight:800; color:var(--red) !important; }
.race-timer-btn,.race-zoom-btn{ background:var(--surface-2) !important; border:1px solid var(--line) !important; color:var(--text) !important; border-radius:12px !important; }
.race-timer-btn:hover{ border-color:var(--red) !important; }
.race-empty,.rp-no-notes{ color:var(--muted) !important; text-align:center; padding:48px 20px; }
.race-empty::before,.rp-no-notes::before{ content:"🏁"; display:block; font-size:40px; margin-bottom:10px; opacity:.7; }
/* Scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
/* ---------- Inicio: secciones (Gestión / Reconocimiento / Carrera) ---------- */
.hub-sections{ display:flex; flex-direction:column; gap:24px; }
.hub-section-head{ display:flex; align-items:center; gap:12px; margin:2px 2px 10px; }
.hub-section-title{
font-family:'Barlow Semi Condensed','Barlow',sans-serif;
font-weight:800; font-size:17px; letter-spacing:1px; text-transform:uppercase;
color:var(--text); position:relative; padding-left:14px;
}
.hub-section-title::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:5px; height:18px; border-radius:3px; background:var(--red);
}
.hub-section-head::after{ content:""; flex:1; height:1px; background:var(--line); }
/* Acento por sección: 1=Gestión rojo, 2=Reconocimiento verde, 3=Carrera ámbar */
.hub-section:nth-of-type(2) .hub-section-title::before{ background:var(--green); }
.hub-section:nth-of-type(3) .hub-section-title::before{ background:var(--amber); }
/* ---------- Tomar Notas: selector y cuaderno en pantallas separadas ---------- */
/* La barra lateral pasa a ser un cajón oculto a cualquier anchura (antes quedaba
anclada al lado del cuaderno en escritorio). Así el selector "Elige un rally"
y el cuaderno ocupan la pantalla completa cada uno. */
body.in-app .tb-menu{ display:flex !important; }
body.in-app #sidebar{
position:fixed !important; top:0; left:0; bottom:0; height:100%;
width:min(320px,86vw) !important;
transform:translateX(-100%) !important;
transition:transform .22s ease; z-index:60;
border-right:1px solid var(--line);
}
body.in-app #sidebar.open{ transform:translateX(0) !important; }
body.in-app #sidebar-ov{ position:fixed; inset:0; z-index:59; background:rgba(0,0,0,.45); }
body.in-app.sidebar-open #sidebar-ov, body.in-app #sidebar-ov.open{ display:block !important; }
body.in-app #content-area{ flex-direction:column !important; }
/* Botón para volver a la selección de tramo (en la barra del cuaderno) */
.nb-back-btn{
display:inline-flex; align-items:center; gap:4px;
background:var(--surface-2); color:var(--text);
border:1px solid var(--line); border-radius:10px;
font-weight:700; font-size:13px; padding:6px 12px; cursor:pointer;
white-space:nowrap; margin-right:8px; flex-shrink:0;
}
.nb-back-btn:hover{ border-color:var(--red); color:#fff; background:var(--red); }
/* ---------- Inicio: menú raíz de secciones + subsecciones (drill-down) ---------- */
.hub-root{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.hub-wrap.sectioned .hub-root{ display:none; }
.hub-root-tile{
position:relative; text-align:left; cursor:pointer;
background:linear-gradient(180deg,var(--card-grad-a),var(--card-grad-b));
border:1px solid var(--line); border-radius:var(--radius-lg);
padding:22px; box-shadow:var(--shadow); color:var(--text);
transition:transform .15s ease, border-color .2s ease;
}
.hub-root-tile::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg,var(--red),transparent 70%); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.rt-recce::before{ background:linear-gradient(90deg,var(--green),transparent 70%); }
.rt-carrera::before{ background:linear-gradient(90deg,var(--amber),transparent 80%); }
.hub-root-tile:hover{ transform:translateY(-3px); border-color:var(--red); }
.rt-icon{ width:54px; height:54px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line);
display:flex; align-items:center; justify-content:center; color:var(--red); margin-bottom:12px; }
.rt-recce .rt-icon{ color:var(--green); }
.rt-carrera .rt-icon{ color:var(--amber); }
.rt-title{ font-family:'Barlow Semi Condensed','Barlow',sans-serif; font-weight:800; font-size:22px; }
.rt-desc{ color:var(--muted); font-size:14px; margin-top:4px; line-height:1.4; }
.rt-go{ color:var(--red); font-weight:700; font-size:14px; margin-top:12px; }
.hub-subview{ display:none; }
.hub-subview.open{ display:block; }
.hub-sub-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.hub-sub-back{
display:inline-flex; align-items:center; gap:6px; cursor:pointer;
background:var(--surface-2); color:var(--text); border:1px solid var(--line);
border-radius:10px; font-weight:700; font-size:14px; padding:8px 14px;
}
.hub-sub-back:hover{ border-color:var(--red); color:#fff; background:var(--red); }
.hub-sub-title{ font-family:'Barlow Semi Condensed','Barlow',sans-serif; font-weight:800; font-size:20px; letter-spacing:.5px; text-transform:uppercase; }
/* ---------- Coordenadas del tramo: selector Decimal / G M S ---------- */
.ms-coord-fmt{ display:inline-flex; gap:6px; margin:2px 0 12px; }
.ms-fmt-tab{
background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
border-radius:8px; padding:5px 14px; font-size:13px; font-weight:700; cursor:pointer;
}
.ms-fmt-tab.active{ background:var(--red); border-color:var(--red); color:#fff; }
/* ---------- Tramo: generar recorrido por carretera (OSRM) ---------- */
.ms-route-btn{ margin-top:8px; }
.ms-route-status{ font-size:13px; margin-top:6px; color:var(--muted); }
.ms-route-status.ok{ color:var(--green); font-weight:600; }
.ms-route-status.err{ color:var(--red); font-weight:600; }
/* ============================================================
Reasignación COMPLETA de las variables de app.css para que
TODO tenga contraste en oscuro (y valores originales en claro).
Esto arregla textos/botones que se perdían en modo oscuro.
============================================================ */
/* --- OSCURO (por defecto) --- */
:root{
--surface2:#1b232d;
--surface3:#232c37;
--border:#28323f;
--border2:#222b34;
--text-2:#c7ced6;
--text-3:#9aa7b5;
--text-4:#7a8797;
--red-light:#2a1512;
--red-mid:#3a1c17;
--orange:#f5a623;
--orange-lt:#2a2113;
--green-lt:#12251a;
--blue:#4a9bff;
--blue-lt:#11233a;
--gray:#9aa7b5;
--gray-lt:#1b232d;
}
/* --- CLARO (valores originales de app.css) --- */
:root[data-theme="light"], body.theme-light{
--surface2:#f0f2f5;
--surface3:#e4e7ec;
--border:#d1d5db;
--border2:#e5e7eb;
--text-2:#374151;
--text-3:#6b7280;
--text-4:#9ca3af;
--red-light:#fef2f0;
--red-mid:#fcd5cc;
--orange:#f5a623;
--orange-lt:#fef7ea;
--green-lt:#f0fdf4;
--blue:#2563eb;
--blue-lt:#eff6ff;
--gray:#6b7280;
--gray-lt:#f9fafb;
}
/* ---------- Lazo (seleccionar/mover/copiar trazos a mano) ---------- */
body.nb-mode-lasso .ink-canvas{ pointer-events:auto !important; touch-action:none !important; cursor:crosshair; }
.lasso-bar{
position:fixed; left:50%; transform:translateX(-50%);
bottom:calc(env(safe-area-inset-bottom,0px) + 16px); z-index:120;
display:flex; gap:8px; align-items:center;
background:var(--surface); border:1px solid var(--line); border-radius:12px;
padding:8px 10px; box-shadow:0 10px 28px rgba(0,0,0,.4);
}
.lasso-count{ color:var(--muted); font-size:13px; max-width:230px; }
.lasso-act{ background:var(--surface-2); border:1px solid var(--line); color:var(--text);
border-radius:9px; padding:7px 12px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
.lasso-act:hover{ border-color:var(--red); }
.lasso-act:disabled{ opacity:.45; cursor:default; }
/* ---------- Botón "Volver" UNIFICADO (mismo sitio y aspecto en todas las páginas) ---------- */
.hub-back, .hub-sub-back, .rmgr-detail-back, .crew-detail-back, .nb-back-btn {
display:inline-flex !important;
align-items:center; gap:6px;
background:var(--surface-2) !important;
color:var(--text) !important;
border:1px solid var(--line) !important;
border-left:3px solid var(--red) !important;
border-radius:10px !important;
font-weight:800 !important;
font-size:14px !important;
line-height:1 !important;
padding:9px 14px !important;
cursor:pointer; white-space:nowrap;
box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.hub-back:hover, .hub-sub-back:hover, .rmgr-detail-back:hover,
.crew-detail-back:hover, .nb-back-btn:hover {
background:var(--red) !important;
border-color:var(--red) !important;
color:#fff !important;
}