:root { --bg:#05070d; --navy:#0b1630; --navy2:#11204a; --gold:#d4af37; --gold2:#f3d77a; --tx:#e9ecf3; --mut:#8b93a7; }
* { box-sizing: border-box; }
body { margin:0; background: radial-gradient(ellipse at top, #0f1d42 0%, var(--bg) 60%) fixed; color:var(--tx);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body.embed { background: var(--bg); }
.wrap { max-width: 760px; margin: 0 auto; padding: 16px 12px 32px; }
.hero { text-align:center; padding: 10px 0 6px; }
.brand { letter-spacing: .35em; font-size: 12px; color: var(--mut); }
.brand span { color: var(--gold); }
h1 { margin: 6px 0 4px; font-size: 26px; color: var(--gold2); font-weight: 700; letter-spacing: .02em; }
.meta { display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; font-size:13px; color:var(--mut); margin: 6px 0 12px; }
.live { color:#ff5a5a; font-weight:700; letter-spacing:.08em; }
.live i { display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff3b3b; margin-right:4px; vertical-align:1px; }
.search { width:100%; padding:10px 12px; border-radius:10px; border:1px solid #23305a; background:#0a1328; color:var(--tx); font-size:16px; margin-bottom:10px; }
.search:focus { outline:none; border-color: var(--gold); }
table.rk { width:100%; border-collapse: collapse; background: rgba(11,22,48,.75); border:1px solid #1c2a55; border-radius:12px; overflow:hidden; }
.rk th { background: linear-gradient(180deg, #13245a, #0d1a40); color: var(--gold); font-size:12px; text-transform:uppercase; letter-spacing:.08em; padding:10px 8px; text-align:left; border-bottom:1px solid var(--gold); }
.rk td { padding: 9px 8px; border-bottom:1px solid #18244a; }
.rk tr:last-child td { border-bottom: 0; }
.rk .n { text-align:right; white-space:nowrap; }
.rk .pos { width: 44px; font-weight:700; color: var(--mut); }
.rk .tot { font-weight:700; color: var(--gold2); font-size:16px; }
.rk .et { color: #7fd1a3; font-size: 13px; }
.rk tr.top1 .pos, .rk tr.top2 .pos, .rk tr.top3 .pos { color: var(--gold); }
.rk tr.top1 td { background: rgba(212,175,55,.12); }
.up { color:#3ddc84; font-size:13px; } .down { color:#ff6b6b; font-size:13px; } .eq { color: var(--mut); }
.new { color: var(--gold); font-size: 11px; font-weight:700; }
.vacio { text-align:center; color: var(--mut); padding: 20px; }
.foot { text-align:center; color: var(--mut); font-size: 12px; margin-top: 12px; }
.err { color: #ff6b6b; }
@media (max-width: 420px) { .rk td, .rk th { padding: 8px 5px; } body { font-size: 14px; } h1 { font-size: 22px; } }

/* ---------- pestañas y clasificación completa ---------- */
[hidden] { display: none !important; }
.vtabs { display: flex; gap: 6px; margin: 4px 0 8px; }
.vtabs button { flex: 1; padding: 10px 6px; border-radius: 10px; border: 1px solid #23305a; background: #0a1328; color: var(--mut);
  font-weight: 700; font-size: 13px; letter-spacing: .06em; cursor: pointer; }
.vtabs button.on { color: #1a1405; background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: var(--gold); }
.cscroll { overflow: auto; max-height: 76vh; border: 1px solid #1c2a55; border-radius: 12px; background: rgba(11,22,48,.75);
  -webkit-overflow-scrolling: touch; }
body.embed .cscroll { max-height: 1200px; }
table.cl { border-collapse: separate; border-spacing: 0; font-size: 13px; white-space: nowrap; min-width: 100%; }
.cl th, .cl td { padding: 6px 7px; border-bottom: 1px solid #18244a; text-align: center; }
.cl thead th { position: sticky; top: 0; z-index: 2; background: #0f1d44; color: var(--gold); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; height: 30px; }
.cl thead tr:nth-child(2) th { top: 30px; color: #c9cfdf; font-weight: 600; text-transform: none; border-bottom: 1px solid var(--gold); }
.cl .c-et { border-left: 2px solid #2e3f78; color: var(--gold2); text-align: left; }
.cl .c-et span { position: sticky; left: 186px; padding: 0 4px; }
.cl .c-ini { border-left: 2px solid #2e3f78; }
.cl .c-pos { position: sticky; left: 0; z-index: 1; width: 40px; min-width: 40px; background: #0b1630; color: var(--mut); font-weight: 700; }
.cl .c-jug { position: sticky; left: 40px; z-index: 1; min-width: 128px; max-width: 160px; text-align: left; background: #0b1630;
  box-shadow: 2px 0 0 #1c2a55; overflow: hidden; text-overflow: ellipsis; }
.cl thead .c-pos, .cl thead .c-jug { z-index: 4; background: #13245a; }
.cl .c-tot { font-weight: 800; color: var(--gold2); font-size: 14px; background: #0d1a3d; border-left: 1px solid var(--gold); }
.cl thead .c-tot { color: var(--gold); font-size: 11px; }
.cl .c-v { color: #4b5675; min-width: 34px; }
.cl .c-v.si { color: var(--tx); font-weight: 600; }
.cl tr.top1 .c-pos, .cl tr.top2 .c-pos, .cl tr.top3 .c-pos { color: var(--gold); }
.cl tbody tr:hover td { background-color: #13224d; }
.c-nom { background: none; border: 0; color: var(--tx); font: inherit; padding: 0; cursor: pointer; text-align: left;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-nom:hover, .c-nom:focus { color: var(--gold2); text-decoration: underline; outline: none; }
@media (min-width: 768px) {
  .wrap:has(#vista-completa:not([hidden])) { max-width: 1280px; }
  .cl .c-tot { position: sticky; right: 0; z-index: 1; }
  .cl thead .c-tot { z-index: 4; }
}
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(2,4,10,.78); display: flex; align-items: center; justify-content: center; padding: 14px; }
.mcard { position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow: auto; background: #0b1630;
  border: 1px solid var(--gold); border-radius: 14px; padding: 18px 16px 14px; }
.mcard h2 { margin: 0 30px 6px 0; color: var(--gold2); font-size: 20px; }
.mclose { position: absolute; top: 10px; right: 10px; background: #13224d; border: 1px solid #2a3a6e; color: var(--tx);
  border-radius: 8px; width: 32px; height: 32px; cursor: pointer; }
.dres { display: flex; gap: 16px; color: var(--mut); margin-bottom: 10px; } .dres b { color: var(--gold2); font-size: 17px; }
.det-et { border-top: 1px solid #1c2a55; padding: 8px 0; }
.det-h { display: flex; justify-content: space-between; color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.det-t { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 14px; }
.det-t td { padding: 3px 0; } .det-t .n { text-align: right; font-weight: 700; }
.det-0 { color: var(--mut); font-size: 13px; margin-top: 4px; }
.det-total { display: flex; justify-content: space-between; border-top: 1px solid var(--gold); padding-top: 10px; margin-top: 4px;
  font-weight: 800; color: var(--gold2); }