/* news.css — Página NOTICIAS de METEOR (terminal de prensa deportiva). Datos 100% reales: feed ESPN/diarios, portadas kiosko.net, tendencias por frecuencia de titulares. Enfoque: impacto para apuestas. */ :root{ --bg:#0a0f1a; --surface:#111a2b; --surface2:#0d1626; --surface3:#0b1322; --line:#20304b; --line-soft:rgba(255,255,255,.05); --txt:#eaf2fb; --mut:#6c7f99; --mut2:#9fb3cc; --cyan:#38d6ff; --green:#3ee6a0; --amber:#ffb547; --red:#ff5d5d; --violet:#9b8cff; --r-card:16px; --r-pill:999px; } *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;} /* overflow-x en (meteoro-ui.css); NO en o iOS despega el fixed. */ body{max-width:100%;} body{background:var(--bg);color:var(--txt);font:14px/1.5 "Inter",system-ui,sans-serif;padding-bottom:72px;} /* ── Marcadores (banner superior) ── */ #scores-banner{position:sticky;top:0;z-index:60;background:#070c15;border-bottom:1px solid var(--line);overflow:hidden;height:36px;display:flex;align-items:center;} #scores-banner .sc-lbl{padding:0 14px;font:800 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--red);border-right:1px solid var(--line);height:100%;display:flex;align-items:center;gap:7px;background:var(--surface);white-space:nowrap;} #scores-banner .sc-lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:sc-pulse 1.6s ease-in-out infinite;} @keyframes sc-pulse{0%,100%{opacity:1}50%{opacity:.35}} #scores-banner .sc-vp{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);} .sc-track{display:inline-flex;white-space:nowrap;animation:sc-scroll linear infinite;} #scores-banner:hover .sc-track{animation-play-state:paused;} @keyframes sc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .sc{display:inline-flex;align-items:center;gap:7px;padding:0 18px;font:600 12px "JetBrains Mono",monospace;border-right:1px solid var(--line);color:var(--mut2);} .sc b{color:var(--txt);} .sc.sc-live,.sc.sc-live b,.sc.sc-live i{color:var(--green);font-style:normal;} /* ── Encabezado ── */ header{display:flex;align-items:baseline;gap:14px;padding:26px 30px 8px;flex-wrap:wrap;} h1{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;letter-spacing:.26em;color:var(--txt);} h1 .h1ic{width:21px;height:21px;color:var(--cyan);flex:0 0 auto;} header small{color:var(--mut);font-size:12px;letter-spacing:.01em;} nav{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap;} nav a{color:var(--mut2);font:600 10px "JetBrains Mono",monospace;letter-spacing:.16em;text-decoration:none;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-pill);transition:color .15s,border-color .15s;} nav a:hover{color:var(--txt);border-color:var(--mut);} nav a.on{color:var(--cyan);border-color:var(--cyan);background:rgba(56,214,255,.06);} /* ── Barra de stats (real) ── */ .newsbar{display:flex;gap:20px;padding:2px 30px 12px;flex-wrap:wrap;color:var(--mut2);font:600 12px "JetBrains Mono",monospace;letter-spacing:.02em;} .newsbar b{color:var(--cyan);} .newsbar .dot{color:var(--green);} /* ── Tabs de deporte ── */ .tabs{display:flex;gap:7px;padding:2px 30px 8px;flex-wrap:wrap;} .tabs button{display:inline-flex;align-items:center;gap:7px;background:var(--surface3);border:1px solid var(--line);color:var(--mut2);padding:7px 14px;border-radius:var(--r-pill); font:600 12px "Inter",system-ui,sans-serif;cursor:pointer;transition:color .15s,border-color .15s,background .15s;-webkit-tap-highlight-color:transparent;white-space:nowrap;} /* logo de liga: los oficiales (MLB/NBA/NHL) traen negros → chip blanco para que resalten */ .tabs .tl{flex:0 0 auto;width:18px;height:18px;object-fit:contain;} .tabs .tl-lg{background:#fff;border-radius:5px;padding:1.5px;} .tabs .tl-svg{width:16px;height:16px;} .tabs button:hover{color:var(--txt);border-color:var(--mut);} .tabs button.on{color:var(--cyan);border-color:var(--cyan);background:rgba(56,214,255,.08);} .tabs button .cnt{font:700 10px "JetBrains Mono",monospace;color:var(--mut);margin-left:6px;} .tabs button.on .cnt{color:var(--cyan);} /* ── Layout de 2 columnas ── */ /* minmax(0,1fr): sin esto la columna de grid crece al ancho del CONTENIDO (titulares largos) y se sale de la pantalla en móvil. */ .grid{max-width:1220px;margin:0 auto;padding:8px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start;} .section-t{display:flex;align-items:center;gap:9px;font:800 10px "JetBrains Mono",monospace;letter-spacing:.2em;color:var(--mut);margin:18px 0 12px;} .section-t .ln{flex:1;height:1px;background:var(--line);} .section-t .ac{color:var(--cyan);} aside .section-t:first-child{margin-top:0;} /* ── PORTADAS DEL DÍA (grid) ── */ .portadas{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;} .portada{position:relative;cursor:pointer;display:block;text-decoration:none;color:inherit;background:var(--surface3);border:1px solid var(--line);border-radius:12px;overflow:hidden; aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;transition:border-color .16s,transform .16s,box-shadow .16s;} .portada:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.4);} .portada img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;} .portada .ph{color:var(--mut);font:600 11px "Inter",system-ui,sans-serif;text-align:center;padding:10px;line-height:1.5;} .portada .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 7px;font:700 11px "Inter",system-ui,sans-serif;color:#fff; background:linear-gradient(180deg,transparent,rgba(5,8,13,.92));display:flex;align-items:center;gap:6px;} .portada .cap .fl{width:16px;height:11px;border-radius:2px;object-fit:cover;flex:0 0 auto;} /* ── Controles feed: idioma + impacto ── */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;} .filters button{background:var(--surface3);border:1px solid var(--line);color:var(--mut2);padding:8px 15px;border-radius:var(--r-pill); font:600 12.5px "Inter",system-ui,sans-serif;cursor:pointer;transition:color .15s,border-color .15s,background .15s;-webkit-tap-highlight-color:transparent;} .filters button:hover{color:var(--txt);border-color:var(--mut);} .filters button.on{color:var(--cyan);border-color:var(--cyan);background:rgba(56,214,255,.08);} .filters.imp button.on{color:var(--amber);border-color:var(--amber);background:rgba(255,181,71,.08);} /* ── Feed de noticias ── */ .feed{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;} .art{position:relative;display:flex;gap:14px;align-items:flex-start; background:linear-gradient(180deg,var(--surface),var(--surface2));border:1px solid var(--line); border-radius:var(--r-card);padding:16px 18px;text-decoration:none;color:var(--txt); transition:border-color .16s,transform .16s,box-shadow .16s;} .art:hover{border-color:#2c4063;transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34);} .art.impact{border-left:3px solid var(--amber);background:linear-gradient(180deg,rgba(255,181,71,.05),var(--surface2));} .art.impact:hover{border-color:var(--amber);} .art .thumb{width:88px;height:66px;border-radius:11px;flex:0 0 88px;object-fit:cover;background:var(--surface3);border:1px solid var(--line);} .art .fav{width:30px;height:30px;border-radius:9px;flex:0 0 30px;margin-top:1px;background:var(--surface3);border:1px solid var(--line);object-fit:contain;padding:3px;} .art .fav.ph{display:flex;align-items:center;justify-content:center;color:var(--cyan);font:800 13px "Inter",system-ui,sans-serif;padding:0;} .art .art-body{flex:1;min-width:0;} .art .meta{display:flex;gap:8px;align-items:center;margin-bottom:9px;flex-wrap:wrap;} .tag{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;padding:4px 9px;border-radius:7px;background:rgba(56,214,255,.1);color:var(--cyan);text-transform:uppercase;line-height:1;} .tag.src{background:rgba(155,140,255,.13);color:var(--violet);letter-spacing:.06em;} .tag.imp{display:inline-flex;align-items:center;gap:5px;background:rgba(255,181,71,.15);color:var(--amber);} .tag.imp::before{content:"";width:9px;height:9px;background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;} .tag.fav-tag{background:rgba(245,197,66,.15);color:#f5c542;} .time{display:inline-flex;align-items:center;gap:5px;color:var(--mut);font:500 11px "JetBrains Mono",monospace;margin-left:auto;white-space:nowrap;} .time::before{content:"";width:11px;height:11px;flex:0 0 auto;background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;} .art h3{font:600 16px/1.4 "Inter",system-ui,sans-serif;color:var(--txt);letter-spacing:-.005em;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .art:hover h3{color:#fff;} .art p{color:var(--mut2);font:400 13px/1.55 "Inter",system-ui,sans-serif;margin-top:7px;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .empty{text-align:center;color:var(--mut);padding:56px 20px;font:500 14px "Inter",system-ui,sans-serif;background:var(--surface2);border:1px dashed var(--line);border-radius:var(--r-card);} /* ── Sidebar ── */ aside{display:grid;gap:8px;position:sticky;top:48px;} .panel{background:linear-gradient(180deg,var(--surface),var(--surface2));border:1px solid var(--line);border-radius:var(--r-card);padding:16px 16px 14px;} /* Tendencias */ .trend{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:padding-left .14s;} .trend:last-child{border-bottom:0;} .trend:hover{padding-left:8px;} .trend .rk{font:800 12px "JetBrains Mono",monospace;color:var(--mut);width:20px;flex:0 0 20px;} .trend:nth-child(1) .rk,.trend:nth-child(2) .rk,.trend:nth-child(3) .rk{color:var(--cyan);} .trend .tm{flex:1;font:600 13.5px "Inter",system-ui,sans-serif;color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .trend .n{font:600 11px "JetBrains Mono",monospace;color:var(--mut2);white-space:nowrap;} .trend .n b{color:var(--amber);} /* Fuentes */ .src-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line-soft);} .src-row:last-child{border-bottom:0;} .src-row img{width:20px;height:20px;border-radius:5px;flex:0 0 20px;background:var(--surface3);object-fit:contain;} .src-row .nm{flex:1;font:600 13px "Inter",system-ui,sans-serif;color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .src-row .ct{font:600 11px "JetBrains Mono",monospace;color:var(--mut);} /* Cobertura por deporte (barritas) */ .cov-row{display:flex;align-items:center;gap:10px;padding:7px 4px;} .cov-row .cl{font:600 12px "Inter",system-ui,sans-serif;color:var(--mut2);width:64px;flex:0 0 64px;text-transform:capitalize;} .cov-row .bar{flex:1;height:7px;border-radius:4px;background:var(--surface3);overflow:hidden;} .cov-row .bar>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--violet));} .cov-row .cn{font:700 11px "JetBrains Mono",monospace;color:var(--mut2);width:26px;text-align:right;} /* ── Modal de portada ── */ #portada-modal{position:fixed;inset:0;z-index:9998;background:rgba(6,11,18,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:12px;} #portada-modal.on{display:flex;} #portada-modal .pm-card{width:100%;max-width:min(96vw,900px);height:96vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.62);} #portada-modal .pm-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);} #portada-modal .pm-head b{font:700 15px "Inter",system-ui,sans-serif;flex:1;} #portada-modal .pm-open{color:var(--cyan);font:700 11px "JetBrains Mono",monospace;letter-spacing:.08em;text-decoration:none;} #portada-modal .pm-open:hover{text-decoration:underline;} #portada-modal .pm-x{background:var(--surface3);border:1px solid var(--line);color:var(--mut2);border-radius:9px;width:32px;height:32px;font-size:14px;cursor:pointer;transition:color .15s,border-color .15s;} #portada-modal .pm-x:hover{color:var(--txt);border-color:var(--cyan);} #portada-modal .pm-body{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;min-height:200px;background:#05070b;} #portada-modal .pm-img{max-width:100%;height:auto;display:block;margin:0 auto;} #portada-modal .pm-load{color:var(--mut2);font:500 13px "Inter",system-ui,sans-serif;padding:48px;text-align:center;line-height:1.7;} #portada-modal .pm-load a{color:var(--cyan);} /* ── Móvil ── */ @media (max-width:900px){ .grid{grid-template-columns:1fr;} aside{position:static;order:2;} } @media (max-width:680px){ header{padding:20px 18px 6px;gap:10px;} h1{font-size:15px;letter-spacing:.2em;} .newsbar,.tabs{padding-left:18px;padding-right:18px;gap:12px;} .grid{padding:8px 14px 24px;gap:16px;} /* Tarjetas compactas: foto pequeña arriba a la izquierda, titular 2 líneas, sin entradilla (queda muy largo en móvil). */ .art{padding:13px 14px;border-radius:14px;gap:11px;} .art h3{font:600 14.5px/1.32 "Inter",system-ui,sans-serif;-webkit-line-clamp:2;} .art p{display:none;} .art .thumb{width:58px;height:58px;flex:0 0 58px;} .art .meta{gap:6px;margin-bottom:7px;} .art .tag{font-size:8px;padding:3px 6px;} .art .tag.imp{display:none;} /* el riel ámbar ya indica "afecta apuestas" */ .art .time{font-size:10px;} .portadas{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;} .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .tabs::-webkit-scrollbar{display:none;} }