/* ═══════════════════════════════════════════════════════════════ +Gol Scanner — hoja única Tema claro por defecto; el oscuro se activa con data-theme="dark". Plan: data-plan="free" | "premium" en . ═══════════════════════════════════════════════════════════════ */ /* ─────────── 1. Tokens ─────────── */ :root, [data-theme="light"]{ --bg:#f5f6f2; --surface:#ffffff; --surface-2:#eef0e9; --ink:#14170f; --ink-2:#3d4335; --mute:#6b7263; --dim:#949c88; --line:#dee2d7; --line-2:#eaeee3; --accent:#4a7c15; --accent-soft:#eef7dd; --chip:#c6ff3f; --chip-ink:#1b2a00; --amber:#9a6206; --amber-soft:#fcf3e2; --red:#a93526; --red-soft:#fceeec; --red-linea:#e3c6c1; --shadow:0 1px 2px rgba(20,23,15,.05), 0 10px 26px -16px rgba(20,23,15,.2); --glow-1:rgba(74,124,21,.13); --glow-2:rgba(31,107,255,.10); } [data-theme="dark"]{ --bg:#07080a; --surface:#0d0f13; --surface-2:#12151b; --ink:#f2f5ef; --ink-2:#cbd2c8; --mute:#98a199; --dim:rgba(242,245,239,.44); --line:rgba(242,245,239,.12); --line-2:rgba(242,245,239,.06); --accent:#c6ff3f; --accent-soft:rgba(198,255,63,.10); --chip:#c6ff3f; --chip-ink:#0b0f04; --amber:#f0b45e; --amber-soft:rgba(240,180,94,.10); --red:#ff6b5c; --red-soft:rgba(255,107,92,.10); --red-linea:rgba(255,107,92,.32); --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.75); --glow-1:rgba(18,255,126,.18); --glow-2:rgba(31,107,255,.15); } :root{ --serif:"Instrument Serif","Iowan Old Style",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace; --ease:cubic-bezier(.16,1,.3,1); --pad:clamp(1rem,3.2vw,2rem); --max:1340px; --hcab:56px; color-scheme:light; } [data-theme="dark"]{ color-scheme:dark; } /* ─────────── 2. Base ─────────── */ *,*::before,*::after{box-sizing:border-box;margin:0} html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth; scroll-padding-top:calc(var(--hcab) + 70px)} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px; line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:clip} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul{list-style:none;padding:0} h1,h2,h3{font-weight:400;line-height:1.06;letter-spacing:-.028em;text-wrap:balance} p{text-wrap:pretty} ::selection{background:var(--chip);color:var(--chip-ink)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .skip{position:fixed;top:-100px;left:1rem;z-index:99;background:var(--chip); color:var(--chip-ink);padding:.6rem 1rem;border-radius:8px;font-weight:600} .skip:focus{top:1rem} .fade{opacity:0;transform:translateY(10px); transition:opacity .6s var(--ease),transform .6s var(--ease)} .is-ready .fade{opacity:1;transform:none} .is-ready .fade.d1{transition-delay:.05s} .is-ready .fade.d2{transition-delay:.1s} .no-js .fade{opacity:1;transform:none;transition:none} /* ─────────── 3. Cabecera ─────────── */ .top{position:sticky;top:0;z-index:40;background:var(--surface); border-bottom:1px solid var(--line)} .top-in{display:flex;align-items:center;gap:.5rem .9rem;min-height:var(--hcab); width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad); flex-wrap:wrap} /* Dos versiones del logo, sin caja de fondo: la palabra del logo es casi negra y sobre tema oscuro desaparecería, así que hay un gemelo con la tipografía en claro. El icono y el verde son los mismos en las dos. */ .mark{display:inline-flex;align-items:center;line-height:0} .mark img{height:34px;width:auto;display:block} @media (min-width:720px){ .mark img{height:40px} } .logo-oscuro{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .logo-claro{display:none} :root:not([data-theme="light"]) .logo-oscuro{display:block} } [data-theme="dark"] .logo-claro{display:none} [data-theme="dark"] .logo-oscuro{display:block} [data-theme="light"] .logo-claro{display:block} [data-theme="light"] .logo-oscuro{display:none} .top-sp{margin-left:auto} .fecha{font-size:.8rem;color:var(--mute);white-space:nowrap} /* Interruptor de plan y de tema */ .sw{display:inline-flex;align-items:stretch;border:1px solid var(--line); border-radius:3px;overflow:hidden;background:var(--surface-2)} .sw button{font-family:var(--mono);font-size:.63rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;padding:.4rem .62rem;color:var(--mute); transition:background .3s var(--ease),color .3s var(--ease)} .sw button:hover{color:var(--ink)} .sw button[aria-pressed="true"]{background:var(--chip);color:var(--chip-ink)} .sw.tema button[aria-pressed="true"]{background:var(--ink);color:var(--bg)} /* El tema va con iconos: sol al trazo, luna rellena. Heredan currentColor, asi que el boton activo los invierte solo. */ .sw.tema button{display:inline-flex;align-items:center;justify-content:center; padding:.38rem .62rem} .sw.tema svg{width:15px;height:15px;display:block} .sw.tema button[data-tema="light"] svg{fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round} .sw.tema button[data-tema="dark"] svg{fill:currentColor;stroke:none} /* ─────────── 4. Estructura ─────────── */ /* minmax(0,1fr) y no 1fr a secas: un 1fr no baja del ancho minimo de su contenido, y la tira de instrumentos (644px puestos en fila) estiraba la columna hasta sacar la pagina de la pantalla en el movil. El overflow-x del body lo escondia, asi que se perdia texto por la derecha sin que se viera ni una barra de scroll. */ .shell{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad); display:grid;grid-template-columns:minmax(0,1fr)} .shell>*{min-width:0} @media (min-width:1000px){ .shell{grid-template-columns:252px minmax(0,1fr)} } .side{border-bottom:1px solid var(--line-2);padding:.85rem 0} .side-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em; text-transform:uppercase;color:var(--dim);margin-bottom:.65rem} .tools{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.15rem} .tools::-webkit-scrollbar{display:none} .tool{display:inline-flex;align-items:center;gap:.5rem;flex:none; font-size:.84rem;font-weight:500;color:var(--ink-2); border:1px solid var(--line);border-radius:3px;padding:.42rem .66rem; white-space:nowrap;background:var(--surface); transition:color .3s var(--ease),border-color .3s var(--ease), background .3s var(--ease)} .tool .ic{opacity:.6;font-size:.9em} .tool:hover{color:var(--accent);border-color:var(--accent)} .tool:hover .ic{opacity:1} .tool.on{background:var(--chip);color:var(--chip-ink);border-color:var(--chip); font-weight:700} .tool.on .ic{opacity:1} @media (min-width:1000px){ .side{border-bottom:0;border-right:1px solid var(--line-2); padding:clamp(1.4rem,3.4vh,2.1rem) 1.5rem clamp(2rem,6vh,3rem) 0; position:sticky;top:var(--hcab);align-self:start; max-height:calc(100vh - var(--hcab));overflow-y:auto} .side-k{margin-bottom:.9rem} .tools{display:block;overflow:visible} .tools li + li{margin-top:.15rem} .tool{display:flex;width:100%;border:0;border-left:2px solid transparent; border-radius:0;padding:.58rem .7rem;font-size:.78rem;background:none} .tool:hover{background:var(--surface-2);border-left-color:var(--accent)} .tool.on{background:var(--accent-soft);color:var(--accent); border-left-color:var(--accent)} .side-pie{display:block;margin-top:1.4rem;padding-top:1rem; border-top:1px solid var(--line-2);font-family:var(--mono); font-size:.62rem;line-height:1.8;color:var(--dim)} } .side-pie{display:none} .content{min-width:0;padding:clamp(1.3rem,3.4vh,2.1rem) 0 0} @media (min-width:1000px){ .content{padding:clamp(1.4rem,3.4vh,2.1rem) 0 0 2rem} } /* ─────────── 5. Encabezado de página ─────────── */ .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.78rem; color:var(--mute)} .crumb a{color:var(--mute)} .crumb a:hover{color:var(--accent)} .crumb .sep{opacity:.55} .crumb .aqui{color:var(--ink-2)} h1{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3.1rem);margin-top:.8rem; max-width:26ch} h1 em{font-style:italic;color:var(--accent)} .lead{margin-top:.85rem;max-width:66ch;color:var(--ink-2);font-size:.97rem} .lead b{color:var(--ink);font-weight:600} .bloque{margin-top:clamp(1.4rem,3.6vh,2.1rem)} /* ─────────── 6. Cabecera del cuadro y filtros ─────────── */ .cab-cuadro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:.8rem 1.2rem;margin:.7rem 0 1.1rem} .h-compacto{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.4rem);margin:0; max-width:none} .h-compacto em{font-style:italic;color:var(--accent)} /* bloque, no flex: si no, cada se convierte en un item y el texto se parte en trozos sueltos */ .pie-cuadro{display:block;margin-top:1.1rem;font-size:.84rem;line-height:1.6; color:var(--mute);max-width:74ch} .pie-cuadro .btn{margin-left:.5rem;vertical-align:middle} .pie-cuadro b{color:var(--ink-2);font-weight:600} .btn-mini{padding:.34rem .6rem;font-size:.62rem} /* ─────────── 7. Piezas comunes ─────────── */ .panel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem; padding-bottom:.8rem;margin-bottom:.95rem;border-bottom:1px solid var(--line)} .panel-head h2{font-family:var(--serif);font-size:clamp(1.35rem,3vw,1.9rem)} .panel-head .g{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em; text-transform:uppercase;color:var(--dim)} .live{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .85rem; padding:.15rem 0 .9rem;font-size:.87rem;color:var(--mute)} .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none; box-shadow:0 0 0 0 var(--glow-1);animation:pulso 2.4s var(--ease) infinite} @keyframes pulso{ 0%{box-shadow:0 0 0 0 var(--glow-1)} 70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent} } .live b{color:var(--ink);font-weight:600} .live-hora{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-left:auto} /* Cuánto hace que se midió lo que se ve. El scanner publica cada 3 min como mucho y la página no se refresca sola, así que decirlo es más honesto que enseñar una hora suelta. En ámbar cuando el dato ya se ha enfriado. */ .edad{margin-left:.4rem} .edad.frio{color:var(--amber);font-weight:600} /* el minuto ya se salió de la ventana del scanner */ .c-min.fuera-ventana{color:var(--amber)} .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:var(--line-2);border:1px solid var(--line);border-radius:5px; overflow:hidden;margin:.95rem 0 1.2rem} .chip{background:var(--surface);padding:.8rem .9rem} .chip .k{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em; text-transform:uppercase;color:var(--dim)} .chip .v{display:block;margin-top:.28rem;font-family:var(--mono);font-weight:600; font-size:clamp(1.3rem,3.6vw,1.8rem);letter-spacing:-.04em;line-height:1; font-variant-numeric:tabular-nums} .chip .v.ok{color:var(--accent)} .chip .v.no{color:var(--red)} .chip .v.pend{color:var(--amber)} @media (min-width:640px){ .chips{grid-template-columns:repeat(4,minmax(0,1fr))} } .nota{border:1px solid var(--line);border-left:3px solid var(--amber); background:var(--amber-soft);border-radius:5px;padding:.9rem 1.05rem; margin-bottom:1.2rem} .nota .t{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em; text-transform:uppercase;color:var(--amber);margin-bottom:.35rem} .nota p{font-size:.88rem;color:var(--ink-2);max-width:66ch} .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono); font-size:.71rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:.68rem 1.05rem;border-radius:3px; transition:transform .4s var(--ease),box-shadow .4s var(--ease), background .3s var(--ease),color .3s var(--ease), border-color .3s var(--ease)} .btn-pri{background:var(--chip);color:var(--chip-ink)} .btn-pri:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .btn-sec{border:1px solid var(--line);color:var(--ink-2);background:var(--surface)} .btn-sec:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem} /* ── Aviso de recarga: la web no se refresca sola y hay que decirlo ── */ .aviso-f5{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem; border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:6px;background:var(--accent-soft); padding:.7rem .9rem;margin:0 0 1.1rem} .f5-txt{font-size:.86rem;color:var(--ink-2);flex:1;min-width:min(100%,20rem)} .f5-txt b{color:var(--ink);font-weight:600} /* ─────────── 7.b Piezas del cuadro ─────────── */ /* Aquí vivía el diseño de fichas del scanner y del histórico. Los dos son tablas desde el 9 de septiembre de 2026, así que de aquello solo queda lo que se reaprovechó: la bandera, el motivo del descarte y los chips. */ /* ── La banderita del país ──────────────────────────────────────── Las banderas reales no tienen todas la misma proporción (Suiza es cuadrada, Catar es larguísima). Se recortan todas a 20x15 con object-fit para que las columnas no bailen. El borde de dentro es para que las blancas (Japón) no se pierdan sobre fondo claro. */ .bandera{width:20px;height:15px;object-fit:cover;border-radius:2px; vertical-align:-2px;margin-right:.45rem;flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)} .ag-lg .bandera{margin-right:.35rem;vertical-align:-3px} /* por qué se descartó, bajo el estado */ .tj-motivo{font-size:.78rem;color:var(--mute)} /* la agenda todavía usa este hueco cuando no hay nada que enseñar */ .tj-vacio{padding:1.1rem 0;color:var(--mute);font-size:.92rem;max-width:62ch} .cab-nota{font-size:.82rem;color:var(--mute)} .chips.cinco{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:640px){ .chips.cinco{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (min-width:1100px){ .chips.cinco{grid-template-columns:repeat(5,minmax(0,1fr))} } /* ─────────── 7.c Agenda del día ─────────── */ .ag-grupo{margin-top:1.4rem} .ag-tit,.ag-grupo > summary{display:flex;align-items:center;gap:.6rem; font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);margin:0 0 .55rem} .ag-grupo.plegado > summary{cursor:pointer;list-style:none;padding:.5rem 0} .ag-grupo.plegado > summary::-webkit-details-marker{display:none} .ag-grupo.plegado > summary::before{content:"▸";color:var(--mute)} .ag-grupo.plegado[open] > summary::before{content:"▾"} .ag-grupo.plegado > summary:hover{color:var(--accent)} .ag-n{font-weight:400;color:var(--mute)} .ag-lista{margin:0;padding:0;list-style:none;border:1px solid var(--line); border-radius:6px;background:var(--surface);overflow:hidden} .ag-fila{display:grid;gap:.15rem .8rem;padding:.6rem .85rem;align-items:center; grid-template-columns:3.2rem 1fr auto; border-bottom:1px solid var(--line-2)} .ag-lista li:last-child{border-bottom:0} .ag-fila:hover{background:var(--surface-2)} @media (min-width:900px){ .ag-fila{grid-template-columns:3.4rem minmax(0,1.5fr) minmax(0,1fr) 4.4rem 5.4rem 6.2rem} } .ag-hora{font-size:.76rem;color:var(--mute);white-space:nowrap} .ag-eq{font-size:.92rem;font-weight:500;color:var(--ink);overflow-wrap:anywhere} .ag-eq em{font-style:normal;color:var(--dim);margin:0 .1rem} .ag-lg{font-family:var(--mono);font-size:.63rem;letter-spacing:.03em;color:var(--mute); overflow-wrap:anywhere;grid-column:2/-1} @media (min-width:900px){ .ag-lg{grid-column:auto} } .ag-ven{font-family:var(--mono);font-size:.7rem;color:var(--dim);white-space:nowrap} .ag-res{text-align:right;white-space:nowrap;font-family:var(--mono)} .ag-gol{font-size:.92rem;font-weight:600;color:var(--ink); font-variant-numeric:tabular-nums} .ag-est{font-size:.76rem;color:var(--mute)} .ag-min{display:block;font-size:.66rem;color:var(--amber)} .ag-scan{justify-self:end} .ag-scan:empty{display:none} /* el partido en juego se marca; el terminado se apaga */ .ag-fila.jugando{background:var(--accent-soft)} .ag-fila.jugando .ag-hora{color:var(--ink-2)} .ag-fila.final .ag-eq{color:var(--ink-2)} .ag-fila.aplazado,.ag-fila.cancelado{opacity:.6} /* En Free no se distingue el aviso: se enseña como "en la ventana" */ [data-plan="free"] .ag-scan .v.con-aviso::before{content:none} /* ── Texto de fondo de la portada, plegado ────────────────────── Va cerrado: quien viene a mirar el cuadro no lo ve, y Google sí. */ .seo{margin-top:clamp(1.8rem,5vh,2.8rem);border-top:1px solid var(--line-2); padding-top:1rem} .seo > summary{font-size:.84rem;color:var(--mute);cursor:pointer; list-style:none;padding:.35rem 0} .seo > summary::-webkit-details-marker{display:none} .seo > summary::before{content:"▸";margin-right:.45rem;color:var(--dim); display:inline-block;transition:transform .25s var(--ease)} .seo[open] > summary::before{transform:rotate(90deg)} .seo > summary:hover{color:var(--ink-2)} .seo-cuerpo{max-width:68ch;padding:.5rem 0 .3rem;color:var(--ink-2); font-size:.92rem;line-height:1.72} .seo-cuerpo h2{font-family:var(--serif);font-size:1.12rem;color:var(--ink); margin:1.3rem 0 .4rem;font-weight:600} .seo-cuerpo h2:first-child{margin-top:.4rem} .seo-cuerpo p{margin:0 0 .75rem} .seo-cuerpo b{color:var(--ink);font-weight:600} .seo-cuerpo i{font-style:italic} .seo-cuerpo a{color:var(--accent);text-decoration:underline; text-underline-offset:2px} /* ── Preguntas frecuentes ── */ .faq{max-width:68ch;margin-top:.6rem} .faq-item{border-bottom:1px solid var(--line-2)} .faq-item > summary{padding:.72rem 0;cursor:pointer;list-style:none; font-weight:500;color:var(--ink);font-size:.94rem} .faq-item > summary::-webkit-details-marker{display:none} .faq-item > summary::before{content:"+";margin-right:.5rem;color:var(--accent); font-weight:700} .faq-item[open] > summary::before{content:"–"} .faq-item > p{margin:0 0 .9rem;padding-left:1.1rem;color:var(--ink-2); font-size:.9rem;line-height:1.7} /* ─────────── 8. Tablas ─────────── */ .tw{overflow-x:auto;overflow-y:visible;border:1px solid var(--line);border-radius:5px; background:var(--surface)} table{width:100%;border-collapse:collapse;min-width:520px} thead th{font-family:var(--mono);font-size:.59rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--dim);text-align:left; padding:.72rem .8rem;border-bottom:1px solid var(--line); background:var(--surface-2);white-space:nowrap} thead th:last-child{text-align:right} tbody td{padding:.82rem .8rem;border-bottom:1px solid var(--line-2);vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody td:last-child{text-align:right} tbody tr{transition:background .25s var(--ease)} tbody tr:hover{background:var(--surface-2)} /* fila que ademas paso el filtro y se envio a Telegram */ tbody tr.avisado{background:var(--accent-soft)} tbody tr.avisado:hover{background:var(--accent-soft)} .c-hora{font-family:var(--mono);font-size:.72rem;color:var(--mute);white-space:nowrap} .c-part{min-width:190px} .pa{font-size:.93rem;color:var(--ink);font-weight:500} .vs{color:var(--dim);margin:0 .32rem} .lg{display:block;margin-top:.14rem;font-family:var(--mono);font-size:.6rem; letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .c-liga{font-family:var(--mono);font-size:.68rem;color:var(--ink-2); letter-spacing:.04em;min-width:150px} .c-prob,.c-st{font-family:var(--mono);font-size:.81rem;white-space:nowrap} .c-prob{color:var(--ink);font-weight:500} /* ── El cuadro en vivo, en tabla ────────────────────────────────── La probabilidad es el dato que se mira primero, así que va en cifra grande con una barrita debajo: en una fila estrecha se lee de un vistazo mejor que el aro de las fichas. --p lo pone cada . */ .cuadro-live .c-part{min-width:210px} .cuadro-live .pa{font-size:.93rem;font-weight:500;color:var(--ink)} .cuadro-live .vs{margin:0 .34rem} .cuadro-live .c-liga{font-size:.68rem;letter-spacing:.03em;color:var(--mute); white-space:normal;min-width:150px} /* Las columnas de cifras a la derecha. No basta el text-align:right de :last-child, porque la ultima celda es la de Estado y en free va oculta: la cuota se quedaba pegada a la izquierda. */ .cuadro-live th.num,.cuadro-live td.num{text-align:right} .cuadro-live .c-prob{text-align:right;min-width:86px} .cuadro-live .pct{display:block;font-size:1.12rem;font-weight:600;color:var(--ink); line-height:1.05;letter-spacing:-.01em} .cuadro-live .pct i{font-style:normal;font-size:.68em;color:var(--mute); margin-left:.06em} .cuadro-live .barra{display:block;height:3px;margin-top:.3rem;border-radius:2px; background:var(--line);overflow:hidden} .cuadro-live .barra::before{content:"";display:block;height:100%;border-radius:2px; width:calc(var(--p, 0) * 1%);background:var(--accent)} .cuadro-live .c-edo{text-align:right} .cuadro-live .c-edo .tj-motivo{display:block;margin-top:.25rem;font-size:.66rem} /* ── El histórico, la misma tabla más una columna de resultado ── El color de la fila lo manda el RESULTADO, no el aviso: el acierto se ve de lejos y el fallo se queda callado, que es lo que se pidió. Estas reglas van después de tr.avisado a propósito, para ganarle. */ .cuadro-dia .c-hora{min-width:52px} .cuadro-dia .c-edo{text-align:left} .cuadro-dia .c-res{text-align:right;white-space:nowrap;min-width:96px} .cuadro-dia tbody tr{box-shadow:inset 3px 0 0 -1px transparent} .cuadro-dia tbody tr.gol, .cuadro-dia tbody tr.gol:hover{background:var(--accent-soft); box-shadow:inset 3px 0 0 -1px var(--accent)} .cuadro-dia tbody tr.singol, .cuadro-dia tbody tr.singol:hover{background:transparent} .cuadro-dia tbody tr.singol .pa{color:var(--ink-2)} .cuadro-dia tbody tr.enjuego{box-shadow:inset 3px 0 0 -1px var(--amber)} .cuadro-dia tbody tr.fuera{opacity:.62} @media (max-width:719px){ .cuadro-live .c-prob{text-align:left} .cuadro-live .barra{max-width:120px} .cuadro-live .c-edo{text-align:left} .cuadro-dia .c-res{text-align:left} /* plegada en ficha ya hay border-left de 3px: el box-shadow duplicaria la raya. Se apaga y manda el borde. */ .cuadro-dia tbody tr, .cuadro-dia tbody tr.gol, .cuadro-dia tbody tr.enjuego{box-shadow:none} .cuadro-dia tbody tr.gol{background:var(--accent-soft)} /* el color de la raya lo manda el resultado, no el aviso: sin esto tr.avisado pintaba de verde tambien los que acabaron sin gol */ .cuadro-dia tbody tr.gol{border-left-color:var(--accent)} .cuadro-dia tbody tr.singol{border-left-color:var(--red-linea)} .cuadro-dia tbody tr.enjuego{border-left-color:var(--amber)} .cuadro-dia tbody tr.fuera{border-left-color:var(--line)} /* plegada en ficha, el resultado ocupa la fila entera abajo */ .cuadro-dia tbody td.c-res{grid-column:1/-1;padding-top:.5rem !important; border-top:1px solid var(--line-2) !important} } .aprox{color:var(--dim);font-size:.85em} /* Cinco estados con dos reglas: el COLOR dice el veredicto y el RELLENO dice si pasó el filtro de alerta. Nada de cinco colores que nadie recuerda. */ .v{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono); font-size:.59rem;font-weight:700;letter-spacing:.11em;padding:.25rem .44rem; border-radius:2px;white-space:nowrap;border:1px solid transparent} .v.entrar{border-color:var(--accent);color:var(--accent)} .v.considerar{border-color:var(--amber);color:var(--amber)} .v.descartado,.v.no-entrar,.v.sin-value{border-color:var(--line);color:var(--mute)} /* con aviso: el chip se rellena y se marca */ .v.con-aviso::before{content:"✦";font-size:.9em;line-height:1} .v.entrar.con-aviso{background:var(--chip);color:var(--chip-ink); border-color:var(--chip)} .v.considerar.con-aviso{background:var(--amber);border-color:var(--amber)} [data-theme="light"] .v.considerar.con-aviso{color:#fff} [data-theme="dark"] .v.considerar.con-aviso{color:#2a1d05} :root:not([data-theme="dark"]) .v.considerar.con-aviso{color:#fff} /* En Free solo se ven TRES estados: el veredicto. El relleno, la marca y el borde de la ficha avisada son el plus de Premium. */ [data-plan="free"] .v.con-aviso::before{content:none} [data-plan="free"] .v.entrar.con-aviso{background:none;color:var(--accent); border-color:var(--accent)} [data-plan="free"] .v.considerar.con-aviso{background:none;color:var(--amber); border-color:var(--amber)} /* ── Leyenda de estados ── */ .leyenda{margin-top:1.3rem;border:1px solid var(--line);border-radius:6px; background:var(--surface)} .leyenda > summary{cursor:pointer;padding:.7rem .95rem;font-size:.84rem; color:var(--ink-2);list-style:none} .leyenda > summary::-webkit-details-marker{display:none} .leyenda > summary::before{content:"▸ ";color:var(--mute)} .leyenda[open] > summary::before{content:"▾ "} .leyenda > summary:hover{color:var(--accent)} .ley-lista{margin:0;padding:0 .95rem .3rem;list-style:none} .ley-lista li{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem; align-items:center;padding:.5rem 0;border-top:1px solid var(--line-2)} @media (min-width:620px){ .ley-lista li{grid-template-columns:7.6rem 1fr 4.2rem 4.6rem 4rem} } .ley-etq{font-size:.82rem;color:var(--ink-2)} .ley-pct,.ley-roi,.ley-n{font-size:.8rem;text-align:right} .ley-pct{color:var(--ink);font-weight:600} .ley-roi.pos{color:var(--accent)} .ley-roi.neg{color:var(--mute)} .ley-n{color:var(--dim)} .ley-cab{border-top:0} .ley-cab span{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em; text-transform:uppercase;color:var(--dim);font-weight:500} .ley-pie{padding:.7rem .95rem 1rem;font-size:.79rem;line-height:1.6; color:var(--mute);max-width:70ch;border-top:1px solid var(--line-2)} .c-res{white-space:nowrap} /* El resultado no es simétrico a propósito: la ganancia canta y el fallo se apaga. Que se vea de un vistazo dónde entró el gol. */ .r{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:700; letter-spacing:.1em} .r.ok{background:var(--chip);color:var(--chip-ink);padding:.2rem .45rem; border-radius:3px;letter-spacing:.09em} .r.ok::before{content:"✓ ";font-weight:700} .r.no{color:var(--mute);font-weight:500} .r.pend{color:var(--amber);font-weight:500} .mk{display:block;margin-top:.18rem;font-family:var(--mono);font-size:.68rem; color:var(--mute);font-variant-numeric:tabular-nums} .r.ok + .mk{color:var(--ink);font-weight:600;font-size:.74rem} .r.no + .mk{color:var(--dim)} /* gana a tbody td:last-child, que alinea a derecha (o izquierda en movil) */ tbody tr td.vacio{padding:2.2rem .8rem;text-align:center;color:var(--mute); font-size:.9rem} .vacio b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:.25rem} .motivo{font-family:var(--mono);font-size:.66rem;color:var(--mute)} /* Columnas solo-premium: en plan free desaparecen */ [data-plan="free"] .pro{display:none} [data-plan="free"] .solo-pro{display:none} [data-plan="premium"] .solo-free{display:none} /* Aviso de columnas recortadas en free */ .recorte{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem; margin-top:.8rem;font-family:var(--mono);font-size:.66rem;color:var(--mute)} .recorte b{color:var(--ink-2);font-weight:600} /* ─────────── 9. Bloqueo premium ─────────── */ .bloqueo{border:1px solid var(--line);border-radius:6px;background:var(--surface); padding:clamp(1.4rem,4vw,2.4rem);text-align:center;box-shadow:var(--shadow)} .bloqueo .ic{font-size:1.7rem;color:var(--amber)} .bloqueo h2{font-family:var(--serif);font-size:clamp(1.4rem,3.4vw,2.1rem); margin-top:.6rem} .bloqueo p{margin:.8rem auto 0;max-width:52ch;color:var(--ink-2);font-size:.95rem} .bloqueo .btns{justify-content:center} .avance{display:grid;gap:.55rem;margin:1.4rem auto 0;max-width:44ch;text-align:left} .avance li{display:grid;grid-template-columns:1.1rem 1fr;gap:.55rem;font-size:.9rem; color:var(--ink-2)} .avance li::before{content:"—";color:var(--accent);font-family:var(--mono)} /* ─────────── 10. Mensaje de ejemplo ─────────── */ .msg{border:1px solid var(--line);background:var(--surface-2);border-radius:5px; padding:1rem 1.1rem;max-width:460px} .msg .hd{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em; text-transform:uppercase;color:var(--dim);padding-bottom:.7rem; margin-bottom:.8rem;border-bottom:1px solid var(--line-2)} .msg pre{font-family:var(--mono);font-size:.76rem;line-height:1.7;color:var(--ink-2); white-space:pre-wrap;word-break:break-word} .msg pre b{color:var(--accent);font-weight:600} .dos{display:grid;gap:clamp(1.2rem,3vw,2rem)} @media (min-width:860px){ .dos{grid-template-columns:1fr 1fr;align-items:start} } /* ─────────── 11. Texto informativo ─────────── */ .prosa{max-width:70ch} .prosa h2{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem); margin:clamp(1.6rem,4vh,2.4rem) 0 .7rem} .prosa h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em; text-transform:uppercase;color:var(--accent);margin:1.4rem 0 .5rem} .prosa p{color:var(--ink-2);margin-bottom:.9rem} .prosa p b{color:var(--ink);font-weight:600} .prosa ul{display:grid;gap:.5rem;margin:0 0 1rem} .prosa li{display:grid;grid-template-columns:1.1rem 1fr;gap:.55rem;color:var(--ink-2)} .prosa li::before{content:"—";color:var(--accent);font-family:var(--mono)} .cifras-linea{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1.2rem 0; font-family:var(--mono);font-size:.7rem;color:var(--mute)} .cifras-linea b{color:var(--ink)} /* ─────────── 12. Pie ─────────── */ .pie{margin-top:clamp(2rem,5vh,3rem);padding:clamp(1.3rem,3.4vh,1.9rem) 0 3rem; border-top:1px solid var(--line-2)} .pie p{font-family:var(--mono);font-size:.66rem;line-height:1.8;color:var(--mute); max-width:74ch} .pie p b{color:var(--ink-2);font-weight:600} .legal{display:flex;flex-wrap:wrap;gap:.42rem 1.1rem;align-items:center;margin-top:.95rem; padding-top:.9rem;border-top:1px solid var(--line-2); font-size:.79rem;color:var(--mute)} .b18{border:1px solid var(--line);padding:.11rem .36rem;color:var(--ink-2); font-family:var(--mono);font-size:.72rem} /* ─────────── 13. Sin JavaScript ─────────── */ .no-js [role="tabpanel"][hidden]{display:block !important} .no-js [role="tabpanel"]{margin-bottom:clamp(1.6rem,4vh,2.4rem)} .no-js .sw{display:none} /* ─────────── 14. Móvil: filas como fichas ─────────── */ @media (max-width:719px){ html{scroll-padding-top:112px} .tw{border:0;background:none;overflow:visible} table{min-width:0;display:block} thead{display:none} tbody{display:block} tbody tr{display:grid;grid-template-columns:1fr 1fr;column-gap:.9rem;row-gap:.5rem; border:1px solid var(--line);border-left-width:3px;border-radius:5px; padding:.8rem .95rem;margin-bottom:.55rem;background:var(--surface)} tbody tr:last-child td{border-bottom:0} tbody tr.gol{border-left-color:var(--accent)} tbody tr.singol{border-left-color:var(--red)} tbody tr.enjuego{border-left-color:var(--amber)} tbody tr.fuera{border-left-color:var(--line)} tbody tr.avisado{border-left-color:var(--accent)} tbody td{display:block;padding:0;border:0;text-align:left} tbody td:last-child{text-align:left} tbody td[data-l]::before{content:attr(data-l);display:block;margin-bottom:.12rem; font-family:var(--mono);font-size:.57rem;letter-spacing:.12em; text-transform:uppercase;color:var(--dim)} .c-hora,.c-part,.c-liga{grid-column:1/-1} .c-part{padding-bottom:.5rem !important; border-bottom:1px solid var(--line-2) !important} .mk{display:inline;margin-left:.38rem} .vacio{grid-column:1/-1;padding:1.7rem 0} } /* ─────────── 15. Movimiento reducido ─────────── */ /* Windows trae esta preferencia activada de fábrica en muchos equipos: aquí solo se apaga el pulso infinito, no los hover ni las entradas. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .dot{animation:none} }