:root { --ink:#071127; --blue:#2457ff; --lime:#b7ff3c; --soft:#f4f6fb; --line:#d9dfeb; --muted:#667085; --font:'Manrope',sans-serif; --display:'Space Grotesk',sans-serif; }
* { box-sizing:border-box; }
/* Las reglas de display de abajo le ganan al [hidden] del navegador si no se fuerza. */
[hidden] { display:none !important; }
.hint { margin:0; color:var(--muted); font-size:13px; } body { margin:0; background:var(--soft); color:var(--ink); font-family:var(--font); } button,input,select,textarea { font:inherit; } button { cursor:pointer; } .shell { max-width:1440px; margin:auto; padding:0 20px 32px; } .topbar { display:flex; justify-content:space-between; align-items:center; min-height:70px; } .brand { display:inline-flex; align-items:center; height:52px; text-decoration:none; } .brand img { display:block; width:53px; height:44px; object-fit:contain; } .eyebrow { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } h1,h2,h3 { font-family:var(--display); letter-spacing:0; } h1 { font-size:36px; margin:6px 0; } h2 { font-size:22px; margin:0; } h3 { font-size:17px; margin:24px 0 12px; } .login-view { min-height:calc(100vh - 100px); display:grid; place-items:center; } .login-form,.new-race,.races,.work-area { background:white; border:1px solid var(--line); border-radius:8px; } .login-form { width:min(100%,420px); padding:28px; display:grid; gap:16px; } label { display:grid; gap:6px; color:#475467; font-size:13px; font-weight:700; } input,select,textarea { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--ink); } textarea { min-height:90px; resize:vertical; } .action,.secondary-action,.icon-button { border:0; border-radius:6px; font-weight:800; } .action { padding:12px 16px; background:var(--lime); color:var(--ink); } .secondary-action { padding:10px 12px; background:#eaf0ff; color:#12348e; } .icon-button { padding:8px 11px; background:transparent; color:var(--muted); } .page-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:28px 0 20px; } .new-race { padding:24px; margin-bottom:20px; } .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .wide { grid-column:1/-1; } .check { display:flex; align-items:center; gap:8px; padding:10px 0; } .check input { width:auto; } .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 20px; } .metric { padding:18px; background:#071127; color:white; border-radius:8px; } .metric b { display:block; font-family:var(--display); font-size:28px; } .metric span { font-size:12px; color:#c8d2ec; } .workspace { display:grid; grid-template-columns:280px minmax(0,1fr); gap:18px; } .races { padding:16px; height:max-content; } .section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .race-item { width:100%; display:grid; gap:4px; text-align:left; border:0; border-left:3px solid transparent; background:transparent; padding:12px 10px; border-radius:4px; } .race-item:hover,.race-item.active { background:#edf2ff; border-left-color:var(--blue); } .race-item small { color:var(--muted); } .work-area { overflow:hidden; } .toolbar { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--line); } .select-label { display:flex; align-items:center; gap:8px; }.select-label select { width:auto; } .download { color:#12348e; font-size:13px; font-weight:800; text-decoration:none; } .configuration { display:grid; gap:1px; background:var(--line); border-bottom:1px solid var(--line); } details { padding:14px 16px; background:white; } summary { cursor:pointer; font-size:13px; font-weight:800; } .settings-form { display:grid; gap:14px; margin-top:14px; } .compact-form,.document-form { display:grid; grid-template-columns:1fr 1.4fr 130px auto auto auto; gap:8px; align-items:end; margin-top:14px; } .document-form { grid-template-columns:130px 1fr 90px auto; } .document-form textarea { grid-column:1/-1; } .registrations { padding:18px; } .registrations p { margin:4px 0 0; color:var(--muted); font-size:13px; } .table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; font-size:13px; } th,td { padding:12px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:var(--muted); font-size:11px; text-transform:uppercase; } td.person { white-space:normal; min-width:180px; } td.person small { display:block; color:var(--muted); margin-top:3px; } .badge { display:inline-block; padding:4px 7px; border-radius:4px; background:#eaf0ff; color:#12348e; font-size:11px; font-weight:800; } .badge.confirmed,.badge.paid { background:#e8f7d8; color:#385d00; } .row-actions { display:flex; gap:6px; } .small-button { border:1px solid var(--line); border-radius:5px; background:white; padding:6px 7px; font-size:11px; font-weight:800; } .error { color:#b42318; font-size:13px; margin:0; } @media (max-width:900px) { .workspace { grid-template-columns:1fr; }.races { display:none; }.compact-form,.document-form { grid-template-columns:1fr 1fr; }.document-form textarea { grid-column:1/-1; } } @media (max-width:620px) { .shell { padding:0 12px 24px; }.page-heading { align-items:start; flex-direction:column; }.form-grid,.metrics { grid-template-columns:1fr; }.compact-form,.document-form { grid-template-columns:1fr; }.toolbar { align-items:start; gap:10px; flex-direction:column; } }