/* deguardia24 · hoja de estilos única (PLAN §7). Portada de design/prototype.html: mantener sincronizadas. Tokens en :root; tema por ; color de oficio por o cualquier contenedor [data-cat]. */ /* ============ TOKENS ============ */ :root{ --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace; --r-lg:22px; --r-md:14px; --r-sm:8px; --call:#12B76A; --call-ink:#fff; --wa:#25D366; --danger:#FF4D4F; --flap-bg:#17181D; --flap-bg-2:#22242B; --flap-ink:#F4EEE2; --ease-out:cubic-bezier(.2,.8,.2,1); } :root[data-theme="day"]{ --bg:#F3EEE4; --bg-grid:rgba(23,20,15,.05); --surface:#FFFDF8; --surface-2:#ECE5D8; --ink:#17140F; --ink-2:#5E574C; --line:rgba(23,20,15,.12); --shadow:0 1px 0 rgba(23,20,15,.06),0 12px 30px -12px rgba(23,20,15,.25); --glow:none; } :root[data-theme="night"]{ --bg:#090D17; --bg-grid:rgba(238,233,223,.04); --surface:#111829; --surface-2:#18213A; --ink:#EFEAE0; --ink-2:#9AA4BA; --line:rgba(239,234,224,.11); --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -16px rgba(0,0,0,.7); --glow:0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent),0 0 42px -8px color-mix(in srgb,var(--acc) 55%,transparent); } /* Color de acento por oficio (el valor por defecto va antes: misma especificidad que [data-cat]) */ :root{--acc:#F5A524; --acc-ink:#1C1303} [data-cat="cerrajeros"] {--acc:#F5A524; --acc-ink:#1C1303} [data-cat="fontaneros"] {--acc:#3E8BFF; --acc-ink:#fff} [data-cat="electricistas"]{--acc:#FFD400; --acc-ink:#171300} [data-cat="desatascos"] {--acc:#19C37D; --acc-ink:#03150C} [data-cat="persianistas"] {--acc:#A855F7; --acc-ink:#fff} [data-cat="cristaleros"] {--acc:#22C3E6; --acc-ink:#03161B} [data-cat="calderas"] {--acc:#FF6B3D; --acc-ink:#1C0A03} [data-cat="electrodomesticos"]{--acc:#EAB308; --acc-ink:#171300} /* ============ BASE ============ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 var(--font-body); background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px); background-size:28px 28px; min-height:100vh; transition:background-color .6s var(--ease-out),color .6s var(--ease-out); } :root[data-theme="night"] body{ background-image:radial-gradient(1200px 500px at 50% -200px,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%), linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px); background-size:auto,28px 28px,28px 28px; } a{color:inherit} :focus-visible{outline:3px solid var(--acc); outline-offset:3px; border-radius:6px} .wrap{max-width:560px; margin:0 auto; padding:0 16px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums} h1,h2,h3{font-family:var(--font-display); letter-spacing:-.02em; line-height:1.05; margin:0} h1{font-size:clamp(30px,8vw,44px); font-weight:800} h2{font-size:24px; font-weight:800} .muted{color:var(--ink-2)} .small{font-size:13px} /* ============ HEADER ============ */ .top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0} .brand{display:flex; align-items:center; gap:2px; font:800 24px var(--font-display); letter-spacing:-.04em; text-decoration:none} .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--acc);margin-left:3px;box-shadow:0 0 0 0 var(--acc);animation:beacon 1.8s infinite} @keyframes beacon{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}} .shift{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:13px; font-weight:600; white-space:nowrap} .shift svg{width:16px;height:16px} .shift-long{display:none} @media (min-width:480px){.shift-long{display:inline}.shift-short{display:none}} /* Pantallas muy estrechas (320 px): logo y píldora más compactos; si aun así no caben, la píldora baja de línea. */ @media (max-width:359px){.top{flex-wrap:wrap; row-gap:8px}.brand{font-size:21px}.shift{font-size:12px; padding:6px 10px}.shift svg{display:none}} /* ============ TAPE (cinta de obra) ============ */ .tape{height:14px; margin:28px -16px; background:repeating-linear-gradient(-45deg,#FFD400 0 14px,#17140F 14px 28px); opacity:.9} :root[data-theme="night"] .tape{opacity:.55} /* ============ PULSE STAT ============ */ .pulse{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); margin:14px 0 18px} .radar{position:relative; width:12px; height:12px; flex:none} .radar::before,.radar::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--call)} .radar::after{animation:ping 1.6s var(--ease-out) infinite} @keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}} .pulse b{color:var(--ink)} /* ============ KING CARD (#1) ============ */ .king{position:relative; background:var(--surface); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow),var(--glow); border:1px solid var(--line)} .king-band{display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--acc); color:var(--acc-ink); font:800 13px var(--font-mono); letter-spacing:.08em; text-transform:uppercase} .king-band .live,.king-band .cat-label{display:inline-flex; align-items:center; gap:6px} .king-band .cat-label svg{width:14px; height:14px} .king-band .live i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 1.2s steps(2) infinite} @keyframes blink{50%{opacity:.2}} .king-body{padding:18px 16px 16px} .king-name{font:800 clamp(26px,7vw,34px)/1.05 var(--font-display); letter-spacing:-.03em; margin:2px 0 12px; display:flex; align-items:center; gap:10px} .crown{width:30px;height:30px;color:var(--acc); flex:none; filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--acc) 60%,transparent))} .chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px} .chip{display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; background:var(--surface-2); font-size:13px; font-weight:600} .chip svg{width:14px;height:14px} .chip.ok{color:var(--call)} .btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:0; border-radius:var(--r-md); font:800 18px var(--font-display); cursor:pointer; text-decoration:none; transition:transform .12s var(--ease-out),filter .2s} .btn:active{transform:scale(.98)} .btn svg{width:22px;height:22px} .btn-call{min-height:64px; background:var(--call); color:var(--call-ink); font-size:20px; box-shadow:0 10px 24px -10px var(--call)} .btn-call .num{font:600 14px var(--font-mono); opacity:.85} .btn-call-stack{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1} .btn-wa{min-height:52px; margin-top:8px; background:transparent; color:var(--ink); border:2px solid var(--wa)} .btn-acc{min-height:58px; background:var(--acc); color:var(--acc-ink)} .btn-ghost{min-height:48px; background:var(--surface-2); color:var(--ink); font-size:16px} .adnote{display:flex; justify-content:space-between; gap:8px; margin-top:12px; font-size:12px; color:var(--ink-2)} .adnote a{color:var(--ink-2)} /* ============ RUNNERS (#2..#n) ============ */ .runners{margin-top:12px; display:grid; gap:8px} .runner{position:relative; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:10px; padding:12px 12px 12px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md)} .pos{font:800 26px var(--font-mono); text-align:center; color:var(--ink-2)} .runner-name{font-weight:700; line-height:1.2} .runner-meta{font-size:13px; color:var(--ink-2)} .round{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--call); color:#fff; text-decoration:none} .round svg{width:22px;height:22px} details.more{margin-top:8px} details.more summary{list-style:none; cursor:pointer; padding:14px; border-radius:var(--r-md); border:1px dashed var(--line); text-align:center; font-weight:700; color:var(--ink-2)} details.more summary::-webkit-details-marker{display:none} details.more[open] summary{margin-bottom:8px} .sos{margin-top:16px; padding:12px 14px; border-radius:var(--r-md); background:color-mix(in srgb,var(--danger) 12%,transparent); font-size:14px} .sos b{color:var(--danger)} /* ============ FLAP BOARD (Solari) ============ */ .board{background:var(--flap-bg); border-radius:var(--r-lg); padding:12px 10px; box-shadow:0 20px 40px -18px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05)} .board-head{display:flex; justify-content:space-between; color:#8D8A83; font:800 11px var(--font-mono); letter-spacing:.14em; padding:0 4px 8px} .brow{display:flex; gap:2px; align-items:center; padding:3px 0} .brow + .brow{border-top:1px solid rgba(255,255,255,.04)} .brow .gap{width:6px} .brow .nm,.brow .am{display:flex; gap:2px} .tile{--s:clamp(14px,4.3vw,19px); position:relative; width:var(--s); height:calc(var(--s)*1.45); display:grid; place-items:center; background:linear-gradient(var(--flap-bg-2) 50%,#1C1E24 50%); color:var(--flap-ink); font:800 calc(var(--s)*.78) var(--font-mono); border-radius:3px; text-transform:uppercase; perspective:200px} .tile::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.65)} .tile.flip{animation:flap .09s linear} @keyframes flap{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg);filter:brightness(.6)}100%{transform:rotateX(0)}} .brow.first .tile{color:var(--acc)} .brow.first .tile.p{background:var(--acc); color:var(--acc-ink)} /* ============ VACANT ============ */ .vacant{border:2px dashed color-mix(in srgb,var(--acc) 70%,transparent); border-radius:var(--r-lg); padding:18px 16px; background:color-mix(in srgb,var(--acc) 6%,var(--surface)); text-align:center} .vacant .board{margin:4px auto 16px; display:inline-block} .vacant p{margin:8px 0 16px} .field{display:grid; gap:6px; text-align:left; margin-bottom:12px} .field label{font-size:13px; font-weight:700} .input{width:100%; min-height:50px; padding:12px 14px; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:16px var(--font-body)} .input:focus{border-color:var(--acc); outline:none} .inline{display:flex; gap:8px} .inline .btn{width:auto; padding:0 18px; font-size:16px; min-height:50px} /* ============ HOME ============ */ .hero{padding:18px 0 8px} .hero p{font-size:18px; color:var(--ink-2); margin:10px 0 20px} .tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px} .cat{position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:132px; padding:14px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); text-decoration:none; overflow:hidden; box-shadow:var(--shadow); transition:transform .2s var(--ease-out)} .cat:hover{transform:translateY(-2px)} .cat .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink)} .cat .ico svg{width:26px;height:26px} .cat b{font:800 clamp(17px,5vw,20px) var(--font-display); letter-spacing:-.02em; hyphens:auto; overflow-wrap:break-word} .cat span{font-size:13px; color:var(--ink-2)} .cat::after{content:""; position:absolute; right:-30px; bottom:-30px; width:90px; height:90px; border-radius:50%; background:var(--acc); opacity:.12} .where{margin-top:14px; display:grid; gap:8px} .geo{display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--ink); font:700 15px var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px 0} .geo svg{width:18px;height:18px;color:var(--acc)} .steps{display:grid; gap:10px; margin-top:12px} .step{display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start} .step i{font:800 18px var(--font-mono); font-style:normal; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--surface-2)} /* ============ PRO / PUJAR ============ */ .ring-wrap{display:flex; align-items:center; gap:14px; margin:6px 0 16px} .ring{width:64px;height:64px; flex:none} .ring circle{fill:none; stroke-width:6} .ring .bg{stroke:var(--surface-2)} .ring .fg{stroke:var(--acc); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset 1s} .ring text{fill:var(--ink); font:800 13px var(--font-mono)} .lever{margin:18px 0 10px; padding:18px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)} .readout{display:flex; align-items:baseline; justify-content:space-between; gap:10px} .amount{font:800 56px/1 var(--font-mono); letter-spacing:-.04em} .amount small{font-size:26px} .verdict{font:800 18px var(--font-display); text-align:right} .verdict.win{color:var(--acc)} .track{position:relative; margin:22px 0 30px} input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; margin:0} input[type=range]::-webkit-slider-runnable-track{height:12px; border-radius:99px; background:linear-gradient(90deg,var(--acc) var(--fill,50%),var(--surface-2) var(--fill,50%))} input[type=range]::-moz-range-track{height:12px; border-radius:99px; background:linear-gradient(90deg,var(--acc) var(--fill,50%),var(--surface-2) var(--fill,50%))} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:36px; height:36px; margin-top:-12px; border-radius:12px; background:var(--ink); border:4px solid var(--acc); box-shadow:0 6px 16px -4px rgba(0,0,0,.5); cursor:grab} input[type=range]::-moz-range-thumb{width:28px; height:28px; border-radius:12px; background:var(--ink); border:4px solid var(--acc); cursor:grab} .marks{position:absolute; left:18px; right:18px; top:40px; height:20px; pointer-events:none} .mark{position:absolute; transform:translateX(-50%); font:800 11px var(--font-mono); color:var(--ink-2); white-space:nowrap} .mark::before{content:""; display:block; width:2px; height:8px; margin:0 auto 2px; background:currentColor} .mark.m1{color:var(--acc)} .quick{display:flex; gap:6px; flex-wrap:wrap} .quick button{border:1px solid var(--line); background:var(--surface-2); color:var(--ink); padding:8px 12px; border-radius:999px; font:700 13px var(--font-body); cursor:pointer} .form{margin-top:16px} .check{display:flex; gap:10px; align-items:flex-start; font-size:13px; margin:10px 0; color:var(--ink-2)} .check input{width:20px; height:20px; accent-color:var(--acc); flex:none; margin-top:1px} .paynote{text-align:center; font-size:12px; color:var(--ink-2); margin-top:8px} .ticker{position:fixed; left:0; right:0; bottom:0; padding-bottom:env(safe-area-inset-bottom); z-index:5; overflow:hidden; background:var(--flap-bg); color:var(--flap-ink); font:700 13px var(--font-mono); border-top:1px solid rgba(255,255,255,.06)} .ticker-in{display:inline-flex; gap:36px; padding:8px 0; white-space:nowrap; animation:marquee 40s linear infinite} .ticker-in span b{color:var(--acc)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ticker:hover .ticker-in{animation-play-state:paused} .toast{position:fixed; left:50%; top:16px; z-index:20; transform:translate(-50%,-150%); background:var(--ink); color:var(--bg); padding:12px 16px; border-radius:var(--r-md); font-weight:700; box-shadow:0 16px 40px -10px rgba(0,0,0,.5); transition:transform .45s var(--ease-out); max-width:calc(100% - 32px)} .toast.show{transform:translate(-50%,0)} .watchers{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--ink)} .watchers .radar::before,.watchers .radar::after{background:var(--danger)} /* ============ ÉXITO ============ */ .win-hero{text-align:center; padding:30px 0 10px} .win-crown{width:120px; height:120px; color:var(--acc); margin:0 auto 10px; filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--acc) 70%,transparent))} .win-crown.drop{animation:drop .9s var(--ease-out) both} @keyframes drop{0%{transform:translateY(-140px) rotate(-18deg);opacity:0}60%{transform:translateY(8px) rotate(4deg);opacity:1}100%{transform:none}} .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow)} .linkbox{display:flex; gap:8px; margin-top:10px} .linkbox code{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:12px; border-radius:var(--r-sm); background:var(--surface-2); font:13px var(--font-mono)} canvas#confetti{position:fixed; inset:0; pointer-events:none; z-index:30} /* ============ FOOTER ============ */ footer{margin-top:36px; padding:20px 0 30px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2)} footer nav{display:flex; flex-wrap:wrap; gap:6px 14px; margin:8px 0} .crumbs{font-size:13px; color:var(--ink-2); margin:6px 0 10px} .crumbs a{text-decoration:none} .prostrip{display:grid; gap:12px; padding:16px; border-radius:var(--r-lg); background:var(--flap-bg); color:var(--flap-ink)} .prostrip h3{font-size:22px} .prostrip .btn{min-height:52px} /* ============ PÁGINAS (añadido en la Fase 2) ============ */ .skip{position:absolute; left:-9999px; top:0} .skip:focus{left:16px; top:8px; z-index:50; background:var(--ink); color:var(--bg); padding:8px 12px; border-radius:var(--r-sm)} main{display:block} .section{margin-top:32px} .section h2{margin-bottom:12px} .lead{font-size:18px; color:var(--ink-2); margin:10px 0 18px} .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:12px 0} .stat{padding:12px 14px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line)} .stat b{display:block; font:800 22px var(--font-mono); font-variant-numeric:tabular-nums} .stat span{font-size:13px; color:var(--ink-2)} .faq details{border-bottom:1px solid var(--line); padding:4px 0} .faq summary{cursor:pointer; list-style:none; padding:12px 28px 12px 0; font-weight:700; position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; position:absolute; right:4px; top:10px; font:800 20px var(--font-mono); color:var(--ink-2)} .faq details[open] summary::after{content:"–"} .faq p{margin:0 0 14px; color:var(--ink-2)} .linklist{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none} .linklist a{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); text-decoration:none; font-weight:600; font-size:14px} .linklist a svg{width:16px; height:16px; color:var(--acc); flex:none} .linklist a:hover{border-color:var(--acc)} .linklist small{color:var(--ink-2); font-weight:500} .zonegroup{margin-top:18px} .zonegroup h2{font-size:18px; margin-bottom:10px} .zonegroup .tag{display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--acc); color:var(--acc-ink); font:800 11px var(--font-mono); letter-spacing:.06em; vertical-align:middle} .prose{font-size:16px} .prose h2{font-size:22px; margin:28px 0 8px} .prose p,.prose li{color:var(--ink-2)} .prose .draft{padding:10px 14px; border-radius:var(--r-md); background:color-mix(in srgb,#FFD400 22%,transparent); color:var(--ink); font-size:14px} .terms{font-size:14px; color:var(--ink-2)} .terms b{color:var(--ink)} .updated{font-size:12px; color:var(--ink-2); margin-top:8px} .notfound{text-align:center; padding:40px 0 10px} .notfound .board{display:inline-block; margin:10px 0 18px} .cat-link{display:contents} footer .disclaimer{margin-top:12px} .btn[aria-disabled="true"]{opacity:.55; pointer-events:none} /* ============ SALA DE SUBASTAS (Fase 3) ============ */ .seg{display:flex; gap:6px; margin:16px 0 4px; overflow-x:auto; padding-bottom:2px} .seg button{flex:none; min-height:44px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:700 14px var(--font-body); cursor:pointer} .seg button.on{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)} .brow.mine{outline:2px solid var(--call); outline-offset:2px; border-radius:4px} .devpay{border:2px dashed var(--danger); border-radius:var(--r-lg); padding:18px 16px; background:var(--surface)} .devpay .btn{margin-top:8px} /* ============ ADMIN (Fase 5) ============ */ .wrap:has(.admin){max-width:1180px} .adminnav{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 18px} .adminnav a{min-height:40px; display:inline-flex; align-items:center; padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); text-decoration:none; font-weight:700; font-size:14px} .adminnav a.active{background:var(--ink); color:var(--bg)} .tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface)} .tbl{width:100%; border-collapse:collapse; font-size:13px} .tbl th,.tbl td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top} .tbl th{font:800 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap} .tbl td.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap} .tbl tr:last-child td{border-bottom:0} .tbl .muted{color:var(--ink-2)} .pill{display:inline-block; padding:2px 8px; border-radius:999px; font:800 11px var(--font-mono); background:var(--surface-2)} .pill.ok{background:color-mix(in srgb,var(--call) 20%,transparent); color:var(--call)} .pill.bad{background:color-mix(in srgb,var(--danger) 18%,transparent); color:var(--danger)} .pill.warn{background:color-mix(in srgb,#FFB020 25%,transparent); color:#B26B00} .mini{min-height:32px; padding:4px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font:700 12px var(--font-body); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; white-space:nowrap} .mini.danger{color:var(--danger)} .grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px} select.input{appearance:auto} /* ============ MEJORAS 24/09 (logo, web, top semanal, "ponte encima") ============ */ .logo{width:44px; height:44px; border-radius:12px; object-fit:contain; background:#fff; border:1px solid var(--line); flex:none} .logo.sm{width:28px; height:28px; border-radius:8px} .runner-name{display:flex; align-items:center; gap:8px} .runner-name span{overflow-wrap:anywhere} .runner-links{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:2px; font-size:12px} .runner-links a{color:var(--ink-2)} a.chip{text-decoration:none; color:inherit} .chip.top{background:color-mix(in srgb,#FFD400 30%,var(--surface-2))} /* Pill flotante centrado a caballo del borde superior (como outbid.lol): no ocupa espacio de flujo. */ .claim-hover{position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:2; padding:3px 12px; border-radius:999px; background:var(--ink); color:var(--bg); font:700 12px var(--font-body); text-decoration:none; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s} .king-wrap:hover .claim-hover,.king-wrap:focus-within .claim-hover, .runner:hover .claim-hover,.runner:focus-within .claim-hover{opacity:1; pointer-events:auto} @media (hover:none){.claim-hover{opacity:1; pointer-events:auto}} .king-wrap{position:relative} .brow[role=button]{cursor:pointer; position:relative; border-radius:4px} .brow .claim{position:absolute; right:4px; top:50%; transform:translateY(-50%); padding:4px 10px; border-radius:999px; background:var(--acc); color:var(--acc-ink); font:800 12px var(--font-body); opacity:0; pointer-events:none; transition:opacity .15s; white-space:nowrap} .brow[role=button]:hover .claim,.brow[role=button]:focus-visible .claim{opacity:1} .weekly{margin-top:14px} .weekly ol{list-style:none; margin:0; padding:0; display:grid; gap:6px} .weekly li{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line)} .weekly .medal{font-size:20px; text-align:center} .weekly .tot{font:800 15px var(--font-mono); font-variant-numeric:tabular-nums} .pblock{margin-top:22px; padding:16px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)} .pblock > h2{display:flex; align-items:center; gap:10px; font-size:20px; margin-bottom:12px} .pblock > h2 i{font:800 15px var(--font-mono); font-style:normal; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:var(--acc); color:var(--acc-ink); flex:none} .pblock .lever{margin:0; box-shadow:none; border:0; padding:0; background:none} .preview{pointer-events:none; margin:4px 0 14px} .preview-label{font:800 11px var(--font-mono); letter-spacing:.1em; color:var(--ink-2); text-transform:uppercase; margin:0 0 6px} .field .hint{font-size:12px; color:var(--ink-2); margin:0} .input.ok{border-color:var(--call)} .input.bad{border-color:var(--danger)} details.optional{margin:6px 0 12px} details.optional summary{cursor:pointer; font-weight:700; font-size:14px; color:var(--ink-2); padding:8px 0} .zone-map{display:block; width:100%; max-width:360px; max-height:220px; margin:10px 0 2px} .zone-map path{fill:color-mix(in srgb,var(--acc) 16%,transparent); stroke:var(--acc); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round} .zone-map circle{fill:var(--ink-2); opacity:.55} .zone-map circle.here{fill:var(--acc); opacity:1; stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke} .towns{columns:2 150px; gap:16px; margin:4px 0 0; padding-left:18px; font-size:14px; color:var(--ink-2)} .towns li.here{color:var(--ink); font-weight:700} .compare{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; margin-top:8px} .compare th,.compare td{padding:10px 12px; vertical-align:top; border-bottom:1px solid var(--line); text-align:left} .compare thead th{font:800 12px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)} .compare td:last-child{font-weight:700} .compare tbody tr:last-child td{border-bottom:0} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} .ticker-in{white-space:normal; flex-wrap:wrap} } @media (min-width:900px){ .wrap{max-width:620px} } /* ============ AVISO DE COOKIES (App.razor) ============ */ .consent{position:fixed; left:12px; right:12px; bottom:12px; z-index:60; max-width:560px; margin:0 auto; padding:14px 16px; border-radius:var(--r-lg); background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); font-size:14px} .consent[hidden]{display:none} .consent p{margin:0 0 10px} .consent a{color:inherit} .consent div{display:flex; gap:8px} .consent .btn{min-height:44px; font-size:15px} /* ============ PLAZA FUNDADORA (Pujar.razor) ============ */ .founder-offer{margin:16px 0 0; padding:16px; border-radius:var(--r-lg); background:color-mix(in srgb,var(--acc) 12%,var(--surface)); border:2px solid var(--acc)} .founder-offer h2{margin:0 0 6px; font-size:20px} .founder-offer p{margin:0; font-size:15px} .founder-offer .seg{margin-top:12px} .pblock[hidden]{display:none} /* ============ VÍDEOS (PromoVideo.razor) ============ */ .promo-video{margin:16px 0; max-width:560px} .promo-video video{display:block; width:100%; max-height:70vh; border-radius:var(--r-md); background:#000} .promo-video figcaption{margin-top:6px} @media (orientation: portrait){.promo-video video{aspect-ratio:9/16; width:auto; height:70vh; max-width:100%; margin:0 auto}}