:root {
  color-scheme: dark;
  --bg: #070b12;
  --bg-2: #0b111c;
  --panel: #101a29;
  --panel-2: #142235;
  --panel-3: #18304a;
  --surface: #f5f8fb;
  --surface-2: #e4edf4;
  --text: #f7fbff;
  --text-soft: #c7d6e8;
  --text-muted: #8396aa;
  --text-dark: #111b28;
  --gold: #ffcb45;
  --blue: #39a8e8;
  --blue-2: #14669e;
  --green: #46d47a;
  --red: #ef4d5a;
  --purple: #7b5fc4;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(96,188,240,.26);
  --shadow: 0 18px 50px rgba(0,0,0,.32);
  --radius: 18px;
  --radius-sm: 12px;
  --font: Inter, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  --player-col: clamp(142px, 11vw, 190px);
  --cell-min: clamp(86px, 6.7vw, 112px);
  --row-h: 50px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100%; margin: 0; color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.45;
  background:
    radial-gradient(circle at 18% -10%, rgba(50, 159, 224, .28), transparent 34rem),
    radial-gradient(circle at 90% 8%, rgba(255, 203, 69, .12), transparent 28rem),
    linear-gradient(180deg, #070b12 0%, #07111d 54%, #050910 100%);
}
button, input, textarea, select { font: inherit; }
button, .importLabel {
  cursor: pointer; color: var(--text); background: linear-gradient(180deg, #217bb6, #11517f);
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: .66rem .88rem;
  font-weight: 850; line-height: 1; box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
button:hover, .importLabel:hover { transform: translateY(-1px); filter: brightness(1.08); border-color: rgba(255,203,69,.85); }
button:active, .importLabel:active { transform: translateY(0); }
button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
button.danger { background: linear-gradient(180deg, #d95148, #8d241f); }
button.ghost, .ghost-button, button.ghost-button { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: var(--text-soft); box-shadow: none; }
button.primary { background: linear-gradient(180deg, #2388c8, #145f96); }
.importLabel input { display: none; }
.hidden { display: none !important; }
.editor-only { display: none; }
body.edit-mode .editor-only { display: inline-flex; }
body.edit-mode .bracket-tools.editor-only { display: flex; }
.mini { padding: .52rem .68rem; font-size: .86rem; }

[data-bind], .editable-list li span, .editable-input {
  outline: 2px solid transparent; border-radius: 8px; transition: background 120ms ease, outline-color 120ms ease;
}
body.edit-mode [contenteditable="true"]:focus,
body.edit-mode .editable-input:focus { outline-color: rgba(255, 203, 69, .9); background: rgba(255,255,255,.08); }
body.view-mode [contenteditable="true"] { pointer-events: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .72rem 1rem;
  background:
    linear-gradient(90deg, rgba(14,30,48,.98), rgba(6,10,17,.98) 48%, rgba(6,10,17,.98)),
    rgba(5,9,15,.98);
  border-bottom: 1px solid rgba(255,203,69,.24);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.topbar__brand {
  display: grid;
  grid-template-columns: 38px minmax(280px, 1fr) auto;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  max-width: min(1120px, 72vw);
}
.topbar__brand img {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.25));
}
.topbar__titleblock {
  min-width: 0;
  display: grid;
  gap: .08rem;
}
.topbar__kicker {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1;
}
.topbar strong {
  display: block;
  min-width: 0;
  color: #fff;
  font-size: clamp(1.05rem, 1.45vw, 1.55rem);
  font-weight: 1000;
  letter-spacing: -.015em;
  line-height: 1.08;
  white-space: normal;
  text-wrap: balance;
  text-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.topbar__subtitle {
  color: var(--text-soft);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#saveStatus {
  display: inline-flex;
  align-items: center;
  color: var(--text-soft);
  font-size: .84rem;
  font-weight: 750;
  white-space: nowrap;
}
#saveStatus::before { content:""; width:.5rem; height:.5rem; margin-right:.45rem; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(70,212,122,.75); }
.actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.5rem; }

.app-shell { width: 100%; max-width: none; padding: 1rem; display: grid; gap: 1rem; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent), linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden;
}
.card h2 { margin:0; font-size:1rem; font-weight:950; letter-spacing:.035em; text-transform:uppercase; }

/* Cabecera tipo dashboard/PokeCompanion: título integrado, compacto y legible */
.tournament-header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.85rem, 1.5vw, 1.35rem);
  min-height: 132px;
  padding: clamp(1rem, 1.7vw, 1.45rem);
  background:
    radial-gradient(circle at 5% 20%, rgba(255,203,69,.18), transparent 15rem),
    linear-gradient(135deg, rgba(23,95,145,.42), transparent 54%),
    linear-gradient(180deg, rgba(20,34,53,.98), rgba(8,16,28,.98));
}
.tournament-header::after {
  content:"";
  position:absolute;
  inset:auto 1rem 0 1rem;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,203,69,.5), rgba(57,168,232,.48), transparent);
}
.header-emblem {
  width: clamp(64px, 5.5vw, 96px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.24);
}
.header-emblem img { width: 70%; height: 70%; filter: drop-shadow(0 5px 0 rgba(0,0,0,.22)); }
.header-copy { max-width: 100%; min-width: 0; }
.eyebrow { display:inline-flex; color: var(--gold); font-weight: 1000; text-transform: uppercase; letter-spacing: .13em; font-size: .78rem; margin-bottom: .42rem; }
.tournament-header h1 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(2.05rem, 3.4vw, 4.15rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 5px 0 rgba(0,0,0,.22);
}
.tournament-header p { margin: .55rem 0 0; max-width: 82ch; color: var(--text-soft); font-weight: 800; font-size: clamp(.96rem, 1.05vw, 1.1rem); }
.header-status { display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; white-space: nowrap; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:.5rem .72rem; color:#dbeafa; background:rgba(255,255,255,.06); font-weight:850; font-size:.88rem; }
body.edit-mode .header-status .status-pill:first-child { display:none; }
body.view-mode .header-status .editor-only { display:none; }

.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .95rem 1rem; background: linear-gradient(180deg, #123957, #0d263d); border-bottom: 1px solid var(--line); }
.section-copy { min-width: 0; }
.section-kicker { display:block; margin-bottom:.18rem; color:var(--blue); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:950; }
.section-title-row p { margin:.22rem 0 0; color:#d9e9f7; }
.calendar-header { border-bottom: 0; }

/* Fechas clave como barra compacta dentro del calendario */
.schedule-cards { display:grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: .7rem; padding: .85rem 1rem 1rem; background: rgba(5,10,17,.22); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid var(--line); }
.schedule-card { min-height: 96px; border-radius: 14px; overflow:hidden; background:#f4f8fb; color: var(--text-dark); border: 1px solid rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 20px rgba(0,0,0,.16); }
.schedule-card__head { padding: .48rem .7rem; text-align:center; color:white; font-size:.84rem; font-weight:1000; text-transform:uppercase; letter-spacing:.04em; }
.schedule-card__body { display:grid; align-content:start; gap:.44rem; padding: .68rem .8rem .78rem; text-align:left; }
.schedule-card__tag { justify-self:start; display:inline-flex; align-items:center; justify-content:center; padding:.3rem .62rem; background:#e8eef4; color:#152237; border-radius:999px; font-size:.78rem; font-weight:950; }
.schedule-card__text { margin:0; font-weight:850; line-height:1.22; font-size:.92rem; }

.timeline-scroll { overflow:auto; background: rgba(244,247,251,.98); }
.timeline-board { min-width: calc(var(--player-col) + 14 * var(--cell-min)); display:grid; grid-template-columns: var(--player-col) repeat(14, minmax(var(--cell-min), 1fr)); color: var(--text-dark); }
.tl-cell { position:relative; min-height: var(--row-h); display:flex; align-items:center; justify-content:center; border-right:1px solid rgba(17,31,45,.16); border-bottom:1px solid rgba(17,31,45,.12); background:rgba(242,247,250,.94); }
.tl-head { min-height: 92px; padding:.44rem .42rem; flex-direction:column; gap:.25rem; font-size:.78rem; font-weight:900; text-align:center; background: linear-gradient(180deg, #f8fbff, #dfe8ef); }
.tl-head.combat { color:#fff; background: linear-gradient(180deg, #ad242d, #721116); }
.tl-head.league { color:#111a25; background: linear-gradient(180deg, #ffdc75, #e1b133); }
.tl-head.players-head { color:#fff; background: linear-gradient(180deg, #12517d, #0d2b45); justify-content:center; font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; }
.tl-icon { width: 36px; height: 36px; display:block; object-fit:contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.18)); }
.tl-emoji { font-size: 1.55rem; line-height: 1; }
.tl-title { text-transform:uppercase; line-height:1.02; }
.tl-subtitle { font-size:.7rem; line-height:1.05; }
.player-cell { justify-content:flex-start; padding:0 .7rem; gap:.5rem; color:#fff; font-weight:900; background: linear-gradient(90deg, var(--player-color), rgba(9,20,32,.84)); }
.player-ball { width:28px; height:28px; flex: 0 0 auto; }
.track-line { position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%); background: var(--track-color); opacity:.72; }
.progress-dot { position:relative; z-index:1; width:29px; height:22px; border-radius:999px; border:3px solid #1d2c3d; background:#f5f8fb; box-shadow:0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.8); }
body.edit-mode .progress-dot { cursor:pointer; }
.progress-dot.complete { background: var(--green); border-color:#124425; }
.progress-dot.dead { background: var(--red); border-color:#58171b; }
.progress-dot.bye { background: var(--blue); border-color:#17435d; }
.progress-dot.complete::after { content:"✓"; color:#0b2c16; font-weight:1000; position:absolute; inset:0; display:grid; place-items:center; font-size:.88rem; }
.progress-dot.dead::after { content:"×"; color:#fff; font-weight:1000; position:absolute; inset:0; display:grid; place-items:center; font-size:1.1rem; }
.progress-dot.bye::after { content:"B"; color:#082234; font-weight:1000; position:absolute; inset:0; display:grid; place-items:center; font-size:.72rem; }

.info-grid { display:grid; grid-template-columns: minmax(280px, 1.35fr) minmax(205px, .82fr) minmax(270px, 1fr) minmax(260px, .95fr) minmax(310px, 1.12fr) minmax(245px, .9fr); gap:1rem; align-items:stretch; }
.info-card { padding:0; min-height: 230px; }
.info-card h2 { padding:.72rem 1rem; text-align:center; background:linear-gradient(180deg, #12517d, #0d304d); border-bottom:1px solid var(--line); }
.info-card p { padding: .85rem 1rem 0; margin:0; color:#e5f1fb; }
.editable-list { margin:0; padding:1rem 1.1rem 0 1.35rem; }
.editable-list li { margin:0 0 .58rem; color:#f3f7fb; }
.delete-rule { margin-left:.4rem; padding:.25rem .4rem; font-size:.75rem; border-radius:7px; background:rgba(239,75,83,.22); box-shadow:none; }
.rules-card .mini { margin:.75rem 1rem 1rem; }
.caps-list { padding: .8rem; display:grid; gap:.55rem; }
.cap-item { display:grid; grid-template-columns: 34px 1fr 52px; gap:.45rem; align-items:center; }
.cap-item img { width:30px; height:30px; object-fit:contain; }
.cap-name, .cap-value { min-height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#f3f7fb; color:#142033; font-weight:900; padding:.22rem .5rem; }
.cap-name { justify-content:flex-start; }
.score-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; padding:1rem; }
.score-item { min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.22rem; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); border-radius:12px; text-align:center; }
.score-item span { font-size:1.6rem; }
.score-item strong { color:var(--gold); text-transform:uppercase; }
.score-item em { color:#fff; font-style:normal; font-weight:900; }
.skulls { padding:1.2rem; text-align:center; font-size:1.8rem; letter-spacing:.35rem; }
.classification-list { padding: .7rem 1rem 1rem; display:grid; gap:.46rem; }
.rank-row { display:grid; grid-template-columns: 42px 1fr 72px; gap:.45rem; align-items:center; }
.rank-place { color:var(--gold); font-weight:1000; }
.rank-field { min-height:34px; display:flex; align-items:center; border-radius:8px; background:#f3f7fb; color:#142033; font-weight:900; padding:.25rem .65rem; }
.transparency-card { min-height: 180px; }

.bracket-card { min-height: 560px; grid-column: 1 / -1; }
.bracket-title { display:flex; align-items:center; justify-content:center; gap:2rem; padding:1rem; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.05)); border-bottom:1px solid var(--line); }
.bracket-title span { font-size:2rem; }
.bracket-title h2 { margin:0; font-size:clamp(2rem, 4vw, 4rem); color:var(--gold); line-height:.95; letter-spacing:.025em; }
.bracket-title p { margin:.3rem 0 0; text-transform:uppercase; font-weight:900; color:#fff; letter-spacing:.06em; }
.bracket-tools { display:flex; gap:.6rem; padding: .85rem 1rem 0; }
.bracket-scroll { overflow:auto; padding:1.25rem; scroll-padding-inline:1.25rem; }
.bracket-canvas { width:max-content; min-width: 1180px; min-height: 460px; margin:0 auto; display:grid; grid-template-columns: 270px 270px 270px 300px; gap: 62px; align-items:start; position:relative; }
.bracket-round { display:flex; flex-direction:column; gap:1rem; position:relative; }
.bracket-round.q .match:first-of-type { margin-top: 78px; }
.bracket-round.q .match + .match { margin-top: 92px; }
.bracket-round.s .match { margin-top: 190px; }
.bracket-round.f .match { margin-top: 190px; }
.round-title { align-self:flex-start; min-width:190px; padding:.52rem .85rem; border-radius:10px; background:linear-gradient(180deg, #135684, #0a3556); border:1px solid rgba(93,190,245,.25); text-align:center; font-size:.78rem; line-height:1.05; text-transform:uppercase; font-weight:1000; letter-spacing:.045em; }
.match { position:relative; width: 270px; padding:.62rem; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.14); box-shadow: 0 12px 26px rgba(0,0,0,.26); }
.bracket-round:not(.f) .match::after { content:""; position:absolute; top:50%; left:100%; width:62px; height:2px; background:rgba(203,217,231,.45); }
.match::before { content:""; position:absolute; top:50%; right:-64px; width:2px; height:0; background:rgba(203,217,231,.34); }
.match.join-down::before { height: 84px; }
.match.join-up::before { height: 84px; transform: translateY(-84px); }
.match-label { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; color:#a9c5dd; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.participant { width:100%; min-height: 42px; display:grid; grid-template-columns: 34px 1fr; gap:.42rem; align-items:center; margin:.3rem 0; padding:.28rem .45rem; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:#f4f7fb; color:#132236; font-weight:950; text-align:left; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.participant .seed { width:28px; height:28px; display:grid; place-items:center; border-radius:7px; background:#dbe6ef; color:#132236; font-size:.88rem; }
.participant.pending { background:rgba(255,255,255,.12); color:#a9b9c8; }
.participant.bye { background:rgba(94,190,245,.18); color:#dff3ff; }
.participant.winner { outline:3px solid var(--green); background:#dff8e9; }
.participant.loser { opacity:.58; }
body.edit-mode .participant.playable { cursor:pointer; }
body.edit-mode .participant.playable:hover { outline:3px solid var(--gold); }
.vs-pill { width:42px; height:24px; display:grid; place-items:center; margin:.08rem auto; border-radius:7px; color:#fff; background:#0b3658; font-size:.78rem; font-weight:1000; }
.result-line { margin-top:.45rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; color:#c8d8e7; font-size:.78rem; }
.result-button { padding:.25rem .48rem; border-radius:999px; font-size:.72rem; background:rgba(255,255,255,.09); box-shadow:none; }
.bracket-help { padding:.75rem 1rem 1rem; color:#d9e9f7; border-top:1px solid var(--line); }


.bracket-summary {
  display:grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap:.75rem;
  padding: 0 1rem 1rem;
}
.bracket-summary-card {
  min-height: 118px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  padding: .82rem .9rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.bracket-summary-card h3 {
  margin: 0 0 .45rem;
  color: var(--gold);
  font-size: .82rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bracket-summary-card p { margin: 0; color: #e6f2fb; font-weight: 800; }
.bracket-summary-card small { display:block; margin-top:.38rem; color: var(--text-muted); font-weight: 800; line-height: 1.25; }
.bracket-summary-value {
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height: 38px;
  border-radius: 10px;
  background: #f4f8fb;
  color: #132236;
  font-weight: 1000;
  padding: .45rem .58rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.bracket-summary-value .seed {
  width: 28px;
  height: 28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#dbe6ef;
  color:#132236;
  font-size:.85rem;
}
.bracket-legend-row { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.5rem; }
.bracket-legend-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .5rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); font-size:.78rem; font-weight:850; color:#e4f0fb; }
.bracket-legend-dot { width:.72rem; height:.72rem; border-radius:50%; background:#aebbc8; }
.bracket-legend-dot.win { background:var(--green); }
.bracket-legend-dot.bye { background:var(--blue); }
.bracket-legend-dot.pending { background:#9aa9b8; }
.site-footer {
  width: 100%;
  padding: 1rem 1.1rem 1.25rem;
  display:grid;
  gap:.42rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(5,9,15,.76);
  font-size:.92rem;
}
.footer-mainline,
.footer-credits {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  text-align:center;
}
.footer-mainline { color:#f5fbff; font-weight:850; }
.footer-credits { color:#94a8bc; font-size:.84rem; }
.footer-separator { color: rgba(255,203,69,.72); }
.site-footer a { color:#8ed2ff; text-decoration:none; font-weight:900; }
.site-footer a:hover { color:var(--gold); text-decoration:underline; }

.login-dialog { width:min(440px, calc(100vw - 2rem)); border:1px solid rgba(96,188,240,.28); border-radius:18px; padding:0; background:var(--panel-2); color:var(--text); box-shadow: var(--shadow); }
.login-dialog::backdrop { background:rgba(0,0,0,.62); backdrop-filter: blur(4px); }
.login-box { padding:1.1rem; display:grid; gap:.9rem; }
.login-box h2 { margin:0; color:var(--gold); text-transform:uppercase; }
.login-box p { margin:0; color:var(--text-soft); }
.login-box label { display:grid; gap:.4rem; font-weight:900; }
.login-box input { width:100%; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:.75rem .85rem; background:#f7fbff; color:#142033; font-weight:800; }
.form-error { min-height:1.2rem; color:#ff9b9b !important; font-weight:800; }
.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; }

@media (max-width: 1500px) {
  .info-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}
@media (max-width: 980px) {
  body { font-size:15px; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .topbar__brand { max-width:100%; grid-template-columns: 34px minmax(0, 1fr); }
  .topbar__subtitle { white-space: normal; overflow: visible; }
  #saveStatus { grid-column: 2; }
  .actions { justify-content:flex-start; }
  .app-shell { padding:.65rem; }
  .tournament-header { grid-template-columns: auto minmax(0, 1fr); }
  .header-status { grid-column: 1 / -1; align-items:flex-start; }
  .bracket-summary { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
  .site-footer { justify-items:center; }
  .schedule-cards { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .info-grid { grid-template-columns: 1fr; }
  .tournament-header h1 { font-size: clamp(2rem, 8vw, 3.4rem); }
}
@media (max-width: 560px) {
  .topbar { padding:.65rem .72rem; }
  .topbar__brand { grid-template-columns: 30px minmax(0,1fr); gap:.6rem; }
  .topbar__brand img { width:28px; height:28px; }
  .topbar strong { font-size:1rem; }
  .topbar__kicker { font-size:.64rem; }
  .topbar__subtitle { font-size:.78rem; }
  #saveStatus { font-size:.78rem; }
  .actions { width:100%; overflow:auto; flex-wrap:nowrap; padding-bottom:.1rem; }
  .actions button, .actions .importLabel { white-space:nowrap; }
  .schedule-cards { grid-template-columns: 1fr; }
  .tournament-header { grid-template-columns: 1fr; }
  .header-emblem { width:64px; }
  .bracket-summary { grid-template-columns: 1fr; }
}
@media print {
  .no-print, .editor-only, dialog { display:none !important; }
  body { background:#fff; color:#000; }
  .app-shell { padding:0; gap:.5rem; }
  .card { box-shadow:none; break-inside: avoid; }
  .timeline-scroll, .bracket-scroll { overflow: visible; }
  .bracket-canvas { transform: scale(.82); transform-origin: top left; }
}

/* v20260706-08 — logo/favicons */
.topbar__brand {
  grid-template-columns: 48px minmax(280px, 1fr) auto;
}
.topbar__brand .topbar__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.tl-icon,
.cap-item img {
  image-rendering: auto;
}
.footer-credits {
  max-width: 1100px;
  justify-self: center;
}
@media (max-width: 560px) {
  .topbar__brand { grid-template-columns: 36px minmax(0, 1fr); }
  .topbar__brand .topbar__logo { width: 34px; height: 34px; }
}

/* v20260706-10 — tres brackets de combate y sin panel rápido */
.bracket-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  padding: 1rem;
}
.bracket-panel {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,35,55,.96), rgba(8,20,34,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.24);
  overflow: hidden;
}
.bracket-panel__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: .95rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(90deg, rgba(18,85,130,.42), rgba(255,203,69,.08));
}
.bracket-panel__head span {
  display:inline-flex;
  width:max-content;
  padding:.22rem .52rem;
  border-radius:999px;
  background:rgba(255,203,69,.12);
  border:1px solid rgba(255,203,69,.22);
  color:var(--gold);
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:1000;
  letter-spacing:.08em;
}
.bracket-panel__head h3 {
  margin:.35rem 0 .15rem;
  color:#fff;
  font-size:1.45rem;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.bracket-panel__head p {
  margin:0;
  color:var(--text-soft);
  font-weight:850;
}
.bracket-panel .bracket-scroll { padding: 1.2rem; }
.bracket-panel .bracket-canvas { min-width: 1180px; margin: 0 auto; }
.bracket-panel .bracket-summary { padding: 0 1rem 1rem; }
body.edit-mode .participant.slot-editable.pending { cursor:pointer; }
body.edit-mode .participant.slot-editable.pending:hover { outline:3px solid var(--gold); }