:root{
  --content-width: min(1080px, 92%);
  --border-radius: 8px;
}
h1{ letter-spacing:-.02em; }
header > p{ color:var(--text-light); }
.fecha{ font-weight:700; color:var(--text); margin:.1rem 0 .1rem; text-transform:capitalize; }
.fecha:empty{ display:none; }

/* small top nav */
.topnav{ display:flex; gap:1rem; align-items:center; margin-bottom:.4rem; font-size:.8rem; font-weight:700; }
.topnav a{ color:var(--text-light); }
.topnav a[aria-current]{ color:var(--text); text-decoration:underline; }
.live{ display:inline-flex; align-items:center; gap:.4rem; color:var(--text-light); font-weight:700; font-size:.75rem; }
.live::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent-hover); }

/* setup */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem 1rem; }
@media (max-width:520px){ .grid2{ grid-template-columns:1fr; } }
.grid2 label{ font-weight:700; font-size:.82rem; margin-bottom:0; }
.grid2 input{ display:block; width:100%; margin:.2rem 0 0; }
.lead{ font-weight:800; font-size:1.05rem; margin:1.1rem 0 .3rem; }
.seg{ display:inline-flex; border:2px solid var(--border); border-radius:9px; overflow:hidden; margin:.2rem 0 .9rem; }
.seg button{ margin:0; border:none; border-radius:0; box-shadow:none; background:transparent; color:var(--text);
  font-weight:800; padding:.5rem 1.1rem; cursor:pointer; }
.seg button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-text); }
.setup-hint{ font-size:.82rem; color:var(--text-light); margin:1.2rem 0 0; }
.actions{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.actions button{ width:auto; margin:0; }
button.ghost{ background:transparent; color:var(--text); border:2px solid var(--border); }
button.ghost:hover{ border-color:var(--text); color:var(--text); }

/* champion */
.champ{ background:var(--accent); color:var(--accent-text); border-radius:var(--border-radius);
  padding:1.2rem 1.5rem; margin-bottom:1.6rem; display:flex; align-items:center; gap:1rem; }
.champ .trophy{ font-size:2.6rem; }
.champ small{ opacity:.8; text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.7rem; }
.champ .name{ font-size:1.8rem; font-weight:900; line-height:1; margin-top:.1rem; }

/* bracket */
.rounds{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; align-items:start; }
@media (max-width:800px){ .rounds{ grid-template-columns:1fr; } }
.round > h3{ font-weight:800; font-size:1.1rem; margin:.2rem 0 1rem; padding-bottom:.5rem;
  border-bottom:2px solid var(--text); }
.round > h3 em{ font-style:normal; }
.group-lbl{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em;
  color:var(--text-light); margin:1.1rem 0 .5rem; display:flex; align-items:center; gap:.5rem; }
.group-lbl::after{ content:""; flex:1; height:1px; background:var(--border); opacity:.5; }

.match{ border:1px solid var(--border); border-radius:var(--border-radius); padding:.85rem 1rem; margin:0 0 .9rem; }
.match.final{ border:2px solid var(--accent); }
.m-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem; }
.m-head .lbl{ font-weight:800; font-size:1rem; }
.m-head .ct{ font-size:.72rem; font-weight:700; color:var(--text-light); }

.team{ display:flex; justify-content:space-between; align-items:center; text-align:left;
  margin:.32rem 0; padding:.55rem .8rem; font-size:1rem; font-weight:700; border-radius:7px;
  background:var(--bg); color:var(--text); border:2px solid var(--border); }
.team.win{ background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.team.tbd{ opacity:.5; border-style:dashed; font-style:italic; font-weight:400; }
.team .check{ font-size:.8rem; font-weight:900; opacity:0; }
.team.win .check{ opacity:1; }
/* clickable only in edit mode */
.rounds.editable .team:not(.tbd){ cursor:pointer; }
.rounds.editable .team:not(.tbd):hover{ border-color:var(--text); }
.vs{ text-align:center; font-size:.62rem; font-weight:800; letter-spacing:.16em; color:var(--text-light); }

table.rank{ width:auto; min-width:340px; }
table.rank td.pos{ font-weight:900; width:54px; color:var(--text-light); }
table.rank tr.g1 td{ font-weight:800; }

.waiting{ border:1px dashed var(--border); border-radius:var(--border-radius); padding:2.5rem 1.5rem;
  text-align:center; color:var(--text-light); }

/* reglas */
.rules-box{ margin:2rem 0 0; }
.rules-box h3{ margin:0; font-size:1rem; font-weight:800; }
.rules{ white-space:pre-wrap; font-size:.9rem; line-height:1.55; color:var(--text-light); margin:.5rem 0 0; }
.rules-edit textarea{ width:100%; min-height:230px; font-size:.88rem; line-height:1.5; }

.hidden{ display:none; }
footer small{ color:var(--text-light); }
@media print{ .actions, footer, .topnav{ display:none; } body{ background:#fff; } }