/* fingerprint: WACG-SC-2026-CSS */
/* SIMULADOR CAMPEÓN — hoja de estilos — © Weimar Armando Chavez Garcia, 2026 */

  :root{
    --bg:#EEF1F6;
    --surface:#FFFFFF;
    --surface-2:#E7ECF3;
    --text:#12161F;
    --text-dim:#5B6472;
    --border:#D9E0E9;
    --accent:#C81E3A;
    --accent-ink:#FFFFFF;
    --accent-tint:rgba(200,30,58,.08);
    --accent-2:#1E4FA3;
    --pos:#1A8A56;
    --warn:#9A6A00;
    --neg:#B23A52;
    --focus:#1E4FA3;
    --shadow:0 12px 28px -12px rgba(18,22,31,.22);

    --fun-a:#FF5C7A;
    --fun-b:#7C5CFC;
    --fun-c:#FFB020;
    --fun-shadow:0 16px 34px -16px rgba(124,92,252,.45);

    --font-display:'Oswald',"Arial Narrow",sans-serif;
    --font-body:'Work Sans',system-ui,-apple-system,sans-serif;

    --fs-xs:.72rem; --fs-sm:.85rem; --fs-base:1rem; --fs-md:1.05rem;
    --fs-lg:1.3rem; --fs-xl:1.7rem; --fs-2xl:2.4rem;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A0E15; --surface:#121926; --surface-2:#0D1420;
      --text:#ECEFF4; --text-dim:#8B93A6; --border:#232C3D;
      --accent:#FF5A73; --accent-ink:#0A0E15; --accent-tint:rgba(255,90,115,.12);
      --accent-2:#5B8DEF; --pos:#34C77B; --warn:#E0B341; --neg:#FF8FA2; --focus:#5B8DEF;
      --shadow:0 16px 32px -14px rgba(0,0,0,.55);
      --fun-a:#FF6E8E; --fun-b:#9B82FF; --fun-c:#FFC93C;
      --fun-shadow:0 18px 36px -16px rgba(155,130,255,.5);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A0E15; --surface:#121926; --surface-2:#0D1420;
    --text:#ECEFF4; --text-dim:#8B93A6; --border:#232C3D;
    --accent:#FF5A73; --accent-ink:#0A0E15; --accent-tint:rgba(255,90,115,.12);
    --accent-2:#5B8DEF; --pos:#34C77B; --warn:#E0B341; --neg:#FF8FA2; --focus:#5B8DEF;
    --shadow:0 16px 32px -14px rgba(0,0,0,.55);
    --fun-a:#FF6E8E; --fun-b:#9B82FF; --fun-c:#FFC93C;
    --fun-shadow:0 18px 36px -16px rgba(155,130,255,.5);
  }

  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--font-body); font-size:var(--fs-base); line-height:1.5;
    padding-inline:20px;
  }
  .wrap{max-width:1240px; margin-inline:auto;}
  h1,h2,h3{font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0;}
  ::selection{background:var(--accent-tint);}
  button, select, input{font-family:inherit;}
  a{color:var(--accent-2);}

  /* ---------- header ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:16px; padding-block:22px; border-bottom:1px solid var(--border);
  }
  .brand{display:flex; align-items:center; gap:14px;}
  .brand-mark{
    width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, var(--accent), var(--fun-b)); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 8px 18px -8px rgba(124,92,252,.55);
  }
  .brand-text h1{font-size:var(--fs-xl); letter-spacing:.2px;}
  .brand-text p{margin:2px 0 0; color:var(--text-dim); font-size:var(--fs-sm);}
  .top-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .live-badge{
    display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface);
    border-radius:999px; padding:7px 14px; font-size:var(--fs-sm); color:var(--text-dim);
  }
  .live-dot{width:8px; height:8px; border-radius:50%; background:var(--pos); box-shadow:0 0 0 3px var(--accent-tint);}
  .btn{
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    border-radius:9px; padding:9px 16px; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
    transition:transform .15s ease, filter .15s ease, border-color .15s ease;
  }
  .btn:hover{border-color:var(--text-dim); transform:translateY(-1px);}
  .btn:active{transform:translateY(0);}
  .btn:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
  .btn-accent{background:linear-gradient(120deg, var(--accent), var(--fun-a)); border-color:transparent; color:var(--accent-ink); box-shadow:0 10px 22px -12px rgba(200,30,58,.55);}
  .btn-accent:hover{filter:brightness(1.06); transform:translateY(-2px) scale(1.01);}
  .btn-accent:disabled{opacity:.55; cursor:not-allowed; transform:none;}
  .tab{transition:transform .15s ease;}
  .tab:hover{transform:translateY(-1px);}

  .league-select{
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    border-radius:9px; padding:8px 14px; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  }
  .lang-toggle{display:flex; border:1px solid var(--border); border-radius:9px; overflow:hidden;}
  .lang-btn{
    border:none; background:var(--surface); color:var(--text-dim); padding:8px 13px;
    font-size:var(--fs-sm); font-weight:700; cursor:pointer; letter-spacing:.03em;
  }
  .lang-btn + .lang-btn{border-left:1px solid var(--border);}
  .lang-btn[aria-pressed="true"]{background:var(--text); color:var(--surface);}

  /* ---------- layout ---------- */
  .grid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:22px; margin-block:22px 40px; align-items:start;}
  @media (max-width:940px){ .grid{grid-template-columns:1fr;} }

  .card{background:var(--surface); border:1px solid var(--border); border-radius:14px;}
  .card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:18px 20px 0;}
  .card-head h2{font-size:var(--fs-lg);}
  .updated-chip{font-size:var(--fs-xs); color:var(--text-dim); white-space:nowrap;}

  /* tabs */
  .tabs{display:flex; gap:4px; padding:14px 20px 0; flex-wrap:wrap;}
  .tab{
    border:1px solid var(--border); background:var(--surface-2); color:var(--text-dim);
    border-radius:8px; padding:7px 14px; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  }
  .tab[aria-selected="true"]{background:var(--text); color:var(--surface); border-color:var(--text);}

  .table-scroll{overflow-x:auto; margin-top:14px;}
  table{width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:640px;}
  thead th{
    text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-dim); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border);
    white-space:nowrap;
  }
  tbody td{padding:11px 12px; border-bottom:1px solid var(--border); white-space:nowrap;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover td{background:var(--surface-2);}
  td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
  tr.leader td{background:var(--accent-tint);}
  tr.leader td:first-child{box-shadow:inset 3px 0 0 var(--accent);}
  tr.top td{background:color-mix(in srgb, var(--accent-2) 8%, transparent);}
  tr.top td:first-child{box-shadow:inset 3px 0 0 var(--accent-2);}
  .pos-cell{display:flex; align-items:center; gap:8px; font-weight:600;}
  .club-cell{display:flex; align-items:center; gap:10px; font-weight:500;}
  .badge{
    width:26px; height:28px; flex:none; color:#fff; font-family:var(--font-display);
    font-size:.66rem; display:flex; align-items:center; justify-content:center; letter-spacing:.02em;
    clip-path:polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%);
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.25);
    padding-bottom:2px;
  }
  .pts-cell{font-weight:700; font-variant-numeric:tabular-nums;}
  .dg-pos{color:var(--pos);} .dg-neg{color:var(--neg);}
  .legend{display:flex; gap:16px; flex-wrap:wrap; padding:14px 20px 18px; font-size:var(--fs-xs); color:var(--text-dim);}
  .legend span{display:inline-flex; align-items:center; gap:6px;}
  .dot{width:8px; height:8px; border-radius:50%;}

  /* ---------- simulator ---------- */
  .sim{padding:20px; position:sticky; top:20px; box-shadow:var(--shadow);}
  .sim h2{font-size:var(--fs-lg);}
  .sim .sub{color:var(--text-dim); font-size:var(--fs-sm); margin:4px 0 18px;}
  label.field{display:block; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin-bottom:6px;}
  select#teamSelect{
    width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--text); font-size:var(--fs-md); font-weight:600; margin-bottom:16px;
  }
  .stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px;}
  .stat-tile{background:var(--surface-2); border-radius:10px; padding:10px 12px;}
  .stat-tile .v{font-family:var(--font-display); font-size:var(--fs-lg); font-variant-numeric:tabular-nums;}
  .stat-tile .l{font-size:var(--fs-xs); color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em;}
  .stat-tile.accent{background:color-mix(in srgb, var(--accent-2) 12%, var(--surface-2));}
  .stat-divider{font-size:var(--fs-xs); color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin:2px 0 10px;}

  .form-chips{display:inline-flex; gap:3px; vertical-align:middle;}
  .chip{
    width:16px; height:16px; border-radius:4px; font-size:.6rem; font-weight:700; color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:var(--font-body);
  }
  .chip.g{background:var(--pos);} .chip.e{background:var(--warn);} .chip.p{background:var(--neg);}

  /* ---------- panel para el hincha ---------- */
  .fan-card{margin-top:16px; border-radius:14px; padding:18px 20px 20px; border:1px solid var(--border);}
  .fan-card.ok{border-color:var(--pos); background:linear-gradient(180deg, color-mix(in srgb, var(--pos) 13%, var(--surface)) 0%, var(--surface) 130px);}
  .fan-card.help{border-color:var(--accent-2); background:linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 13%, var(--surface)) 0%, var(--surface) 130px);}
  .fan-card.no{border-color:var(--neg); background:linear-gradient(180deg, color-mix(in srgb, var(--neg) 13%, var(--surface)) 0%, var(--surface) 130px);}
  .fan-head{display:flex; align-items:flex-start; gap:12px;}
  .fan-badge-big{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff;}
  .fan-badge-big.ok{background:var(--pos);} .fan-badge-big.help{background:var(--accent-2);} .fan-badge-big.no{background:var(--neg);}
  .fan-title{font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600; line-height:1.2;}
  .fan-sub{color:var(--text-dim); font-size:var(--fs-sm); margin-top:4px; max-width:66ch;}

  .meter{margin:16px 0 4px;}
  .meter-top{display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin-bottom:6px;}
  .meter-top b{font-family:var(--font-display); font-size:var(--fs-md); color:var(--text); text-transform:none; letter-spacing:0;}
  .meter-track{height:10px; border-radius:6px; background:var(--surface-2); overflow:hidden;}
  .meter-fill{height:100%; border-radius:6px;}
  .meter-fill.ok{background:var(--pos);} .meter-fill.help{background:var(--accent-2);} .meter-fill.no{background:var(--neg);}
  .meter-phrase{margin-top:8px; font-size:var(--fs-sm);}

  .fan-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px;}
  @media (max-width:640px){ .fan-cols{grid-template-columns:1fr;} }
  .fan-col h4{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin:0 0 8px;}
  .fan-row{display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border);}
  .fan-row:last-child{border-bottom:none;}
  .fan-row .badge{width:22px; height:22px; font-size:.6rem;}
  .fan-row .nm{flex:1; font-weight:600; font-size:var(--fs-sm);}
  .fan-row .val{font-variant-numeric:tabular-nums; color:var(--text-dim); font-size:var(--fs-xs); text-align:right; white-space:nowrap;}
  .fan-empty{color:var(--text-dim); font-size:var(--fs-sm); font-style:italic;}
  .fan-note{margin-top:16px; padding-top:14px; border-top:1px solid var(--border); font-size:var(--fs-sm);}

  .foot{color:var(--text-dim); font-size:var(--fs-xs); padding:26px 2px 40px; border-top:1px solid var(--border); margin-top:8px; line-height:1.6;}

  #simTableCard{margin-bottom:28px;}
  #simTableCard .card-head p{margin:6px 0 0; color:var(--text-dim); font-size:var(--fs-sm); max-width:70ch;}
  .note{color:var(--text-dim); font-size:var(--fs-sm); padding:0 20px 18px; margin:0;}

  /* ---------- tabla simulada: look propio, distinto de la tabla oficial ---------- */
  .sim-fun{
    position:relative; overflow:hidden; border-radius:20px; border:2px solid transparent;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      linear-gradient(120deg, var(--fun-b), var(--fun-a) 55%, var(--fun-c)) border-box;
    box-shadow:var(--fun-shadow);
  }
  .sim-fun::before{
    content:""; position:absolute; inset:0 0 auto 0; height:6px;
    background:linear-gradient(90deg, var(--fun-b), var(--fun-a), var(--fun-c));
  }
  .sim-fun .card-head{justify-content:flex-start; gap:12px; padding-top:22px; flex-wrap:wrap;}
  .sim-chip{
    display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:800;
    text-transform:uppercase; letter-spacing:.06em; color:#fff; padding:5px 12px; border-radius:999px;
    background:linear-gradient(120deg, var(--fun-b), var(--fun-a)); white-space:nowrap;
  }
  #simTableTitle{
    text-transform:uppercase; letter-spacing:.02em;
    background:linear-gradient(90deg, var(--fun-b), var(--fun-a));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  tr.picked td{background:color-mix(in srgb, var(--fun-b) 14%, transparent);}
  tr.picked td:first-child{box-shadow:inset 3px 0 0 var(--fun-b);}
  .sim-fun .fan-row .badge, .sim-fun table .badge{box-shadow:0 2px 6px rgba(0,0,0,.15);}

  /* ---------- probabilidades (Monte Carlo) ---------- */
  #mcCard{margin-bottom:28px;}
  .mc-list{padding:6px 20px 20px; display:flex; flex-direction:column; gap:10px;}
  .mc-row{display:grid; grid-template-columns:28px 1fr 110px 46px; align-items:center; gap:12px;}
  .mc-rank{color:var(--text-dim); font-variant-numeric:tabular-nums; font-size:var(--fs-sm);}
  .mc-name{display:flex; align-items:center; gap:10px; font-weight:600; font-size:var(--fs-sm);}
  .mc-bar-track{height:10px; border-radius:6px; background:var(--surface-2); overflow:hidden;}
  .mc-bar-fill{height:100%; border-radius:6px; background:linear-gradient(90deg, var(--accent-2), var(--fun-b));}
  .mc-pct{text-align:right; font-family:var(--font-display); font-size:var(--fs-md); font-variant-numeric:tabular-nums;}
  @media (max-width:640px){
    .mc-row{grid-template-columns:22px 1fr 42px;}
    .mc-row .mc-rank{order:1;} .mc-row .mc-name{order:2;} .mc-row .mc-pct{order:3;}
    .mc-row .mc-bar-track{order:4; grid-column:1 / -1;}
  }

  /* ---------- site nav (header/footer, páginas legales) ---------- */
  .site-nav{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
  .site-nav a{
    color:var(--text-dim); text-decoration:none; font-size:var(--fs-sm); font-weight:600;
    padding:8px 12px; border-radius:8px; transition:background .15s ease, color .15s ease;
  }
  .site-nav a:hover, .site-nav a:focus-visible{background:var(--surface-2); color:var(--text);}
  .site-nav a.current{color:var(--accent); background:var(--accent-tint);}

  .legal-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px 30px; margin-block:26px 40px; max-width:860px;}
  .legal-card h1{font-size:var(--fs-2xl); margin-bottom:6px;}
  .legal-card .updated-chip{display:block; margin-bottom:18px;}
  .legal-card h2{font-size:var(--fs-lg); margin-top:26px; margin-bottom:8px;}
  .legal-card p, .legal-card li{color:var(--text-dim); font-size:var(--fs-base); line-height:1.65;}
  .legal-card ul{padding-left:20px; margin:10px 0;}
  .legal-card a{color:var(--accent-2); font-weight:600;}
  .legal-card strong{color:var(--text);}

  .foot-nav{
    display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; padding-block:6px 10px;
  }
  .foot-nav a{color:var(--text-dim); text-decoration:none; font-size:var(--fs-xs); font-weight:600;}
  .foot-nav a:hover{color:var(--accent-2);}
  .foot{text-align:center; color:var(--text-dim); font-size:var(--fs-xs); padding-block:18px 30px; border-top:1px solid var(--border); margin-top:30px;}

  /* ---------- ad slots ---------- */
  .ad-native{max-width:100%; margin:22px auto; min-height:1px; overflow:hidden;}
  .ad-slot{
    display:flex; align-items:center; justify-content:center; margin:22px auto; background:var(--surface-2);
    border:1px dashed var(--border); border-radius:10px; color:var(--text-dim); font-size:var(--fs-xs);
    letter-spacing:.05em; text-transform:uppercase; overflow:hidden;
  }
  .ad-slot ins.adsbygoogle{display:block;}
  .ad-slot-top{max-width:728px; min-height:90px;}
  .ad-slot-mid{max-width:336px; min-height:280px;}
  .ad-slot-pop{
    position:fixed; right:16px; bottom:16px; width:300px; min-height:250px; z-index:60;
    box-shadow:var(--shadow); background:var(--surface); border-color:var(--border);
  }
  .ad-slot-corner{
    position:fixed; left:16px; bottom:16px; width:250px; min-height:100px; z-index:55;
    box-shadow:var(--shadow); background:var(--surface); border-color:var(--border);
  }
  .ad-close{
    position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; border:none;
    background:rgba(18,22,31,.65); color:#fff; font-size:.7rem; cursor:pointer; line-height:1;
  }
  @media (max-width:640px){ .ad-slot-pop, .ad-slot-corner{display:none;} }

/* Desplazamiento automático a la tabla simulada */
#simTableCard{scroll-margin-top:16px;}
#simTableTitle:focus{outline:none;}