:root {
  --ease-out-strong: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-strong: cubic-bezier(.77, 0, .175, 1);
  --focus-ring: 0 0 0 3px #ffc51566, 0 0 0 5px #0754a633;
  --editorial-ink: #071831;
  --editorial-blue: #0b4f91;
  --editorial-soft: #e8f0f8;
  --dark-copy: #d6e3f0;
}

body {
  background:
    radial-gradient(circle at 92% 18%, #0b5baa12 0 14%, transparent 35%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f8 55%, #f8fafc 100%);
}

main { max-width: 1380px; }
#content { position: relative; }

.section-title {
  color: var(--editorial-ink);
  font-size: clamp(2rem, 4vw, 3.15rem);
  letter-spacing: -.045em;
  line-height: .98;
}

button {
  touch-action: manipulation;
  transition:
    transform 140ms var(--ease-out-strong),
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

main button:not(.primary):not(.danger) {
  border: 1px solid #c6d3e1;
  color: #173451;
  background: #f6f9fc;
}

.primary {
  box-shadow: inset 0 -2px #d9a900;
}

.danger {
  box-shadow: inset 0 -2px #982516;
}

button:not(:disabled):active {
  transform: scale(.97);
}

input,
select,
button {
  outline: none;
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

input,
select {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

input:focus-visible,
select:focus-visible {
  border-color: var(--blue);
  background: #fff;
}

input,
select {
  min-height: 44px;
  border-color: #b8c7d8;
  background: #fbfdff;
}

label {
  color: #213d59;
  letter-spacing: .01em;
}

header .site-nav {
  transition: transform 220ms var(--ease-out-strong);
}

#content [data-admin-module] {
  animation: none;
}

.panel,
.card {
  border-color: #ccd8e5;
  box-shadow: 0 14px 36px #061a380f;
}

.panel {
  position: relative;
}

.panel > h3:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  color: var(--editorial-ink);
  font-size: 1.15rem;
}

.panel > h3:first-child::before {
  width: 6px;
  height: 24px;
  border-radius: 3px;
  background: var(--yellow);
  content: "";
}

.card {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

dialog {
  opacity: 0;
  transform: scale(.97);
  transition:
    opacity 180ms var(--ease-out-strong),
    transform 220ms var(--ease-out-strong),
    overlay 180ms allow-discrete,
    display 180ms allow-discrete;
}

dialog[open] {
  opacity: 1;
  transform: scale(1);
}

dialog::backdrop {
  background: transparent;
  transition:
    background-color 180ms ease,
    overlay 180ms allow-discrete,
    display 180ms allow-discrete;
}

dialog[open]::backdrop {
  background: #061a38bb;
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(.97);
  }

  dialog[open]::backdrop {
    background: transparent;
  }
}

.empty-state {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  overflow: hidden;
  padding: 28px 30px;
  border: 1px solid #ced9e6;
  border-left: 5px solid var(--yellow);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px #061a380d;
}

.empty-state-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  color: var(--blue);
  font-size: 1.25rem;
  font-weight: 1000;
}

.empty-state-copy {
  display: grid;
  gap: 5px;
}

.empty-state h2,
.empty-state p {
  margin: 0;
}

.empty-state h2 {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.empty-state p {
  max-width: 650px;
  color: #627286;
  line-height: 1.55;
}

/* Lenguaje editorial deportivo para el contenido, sin alterar el banner. */
.competition-context {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow: visible;
  margin: 0 0 18px;
  padding: 17px 20px 17px 25px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(110deg, var(--navy), #0b477f);
  box-shadow: 0 12px 28px #061a3821;
}

.competition-context::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--yellow);
  content: "";
}

.competition-context-copy { display: grid; gap: 3px; }
.competition-context span {
  color: var(--dark-copy);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.competition-context strong {
  color: #fff;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.competition-switcher {
  position: relative;
  flex: 0 0 auto;
}

.competition-switcher summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #ffffff33;
  border-radius: 9px;
  color: #fff;
  background: #ffffff12;
  cursor: pointer;
  list-style: none;
}

.competition-switcher summary::-webkit-details-marker { display: none; }
.competition-switcher summary span { color: #fff; letter-spacing: .04em; }
.competition-switcher[open] summary { border-color: var(--yellow); background: #ffffff1c; }
.competition-switcher[open] summary b { transform: rotate(180deg); }
.competition-switcher summary b { transition: transform 150ms ease; }

.competition-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 4px;
  width: min(390px, 88vw);
  padding: 7px;
  border: 1px solid #c7d3df;
  border-radius: 12px;
  color: var(--editorial-ink);
  background: #fff;
  box-shadow: 0 20px 50px #061a3840;
}

main .competition-menu button:not(.primary):not(.danger) {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  min-height: 54px;
  padding: 9px 38px 9px 12px;
  border: 0;
  text-align: left;
  background: transparent;
}

.competition-menu button:hover,
.competition-menu button[aria-selected="true"] { background: #eaf2f9; }
.competition-menu button span { color: #173451; font-size: .86rem; letter-spacing: 0; text-transform: none; }
.competition-menu button small { color: #60758b; font-weight: 700; }
.competition-menu button b { position: absolute; top: 50%; right: 13px; color: var(--editorial-blue); transform: translateY(-50%); }

/* Cualquier texto auxiliar que viva en una superficie oscura usa una tinta clara. */
.competition-context p,
.competition-context .muted,
.admin-control-room p,
.admin-control-room .muted,
.league-banner p,
.league-banner .muted,
.knockout-card p,
.knockout-card .muted,
.round-bracket p,
.round-bracket .muted,
footer p,
footer .muted {
  color: var(--dark-copy);
}

.branch-badge {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--yellow);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.view-switch {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid #ced9e6;
  border-radius: 10px;
  background: #e9f0f7;
}

.view-switch button { min-height: 38px; color: #41546b; background: transparent; }
.view-switch button.primary,
.view-switch button:disabled { opacity: 1; color: #fff; background: var(--navy); }

.schedule-wrap {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 18px 46px #061a3817;
}
.schedule { border-top: 5px solid var(--yellow); }
.schedule th { padding-block: 17px; background: var(--navy); }
.schedule td { height: 68px; border-bottom-color: #dce4ed; }
.schedule td:first-child { color: var(--editorial-blue); font-weight: 950; }
.schedule td:nth-child(4) {
  color: var(--editorial-ink);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}
.schedule .vs { color: var(--navy); font-size: 0; }
.schedule .vs::before {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--navy);
  background: var(--yellow);
  content: "VS";
  font-size: .72rem;
}

.schedule tbody tr:nth-child(even) td { background: #f1f6fb; }
.schedule tbody tr:last-child td { border-bottom: 0; }
.schedule td:nth-child(5),
.schedule td:nth-child(7) { font-size: 1rem; font-weight: 900; }
.schedule td:nth-child(10) {
  color: #254965;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.schedule .status-live {
  color: #a51f12;
  background: #fff0ec;
}

.live-section { position: relative; border-top: 0; padding-left: 22px; }
.live-section::before {
  position: absolute;
  inset: 32px auto 0 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--yellow) 0 52px, #cbd7e4 52px 100%);
  content: "";
}
.live-section .card { border-radius: 10px; }
.live-section .card.live {
  border: 0;
  box-shadow: inset 0 5px var(--yellow), 0 18px 42px #061a3817;
}
.teams .score {
  display: inline-flex;
  gap: .22em;
  align-items: center;
  justify-content: center;
  min-width: 4.8em;
  padding: 9px 13px;
  border-radius: 8px;
  color: #fff;
  background: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.teams .score i { font-style: normal; }
.teams > b { min-width: 0; overflow-wrap: anywhere; }
.upcoming-group { margin-top: 34px; --round-accent: #2b78c5; }
.upcoming-group.tone-1 { --round-accent: #d99600; }
.upcoming-group.tone-2 { --round-accent: #7656b5; }
.upcoming-group.tone-3 { --round-accent: #23845c; }
.upcoming-group h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1rem; color: var(--navy); }
.upcoming-group h3::before { content: ''; width: 9px; height: 9px; background: var(--round-accent); border-radius: 50%; flex-shrink: 0; }
.upcoming-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.upcoming-round { background: #fff; }
.upcoming-round + .upcoming-round { border-top: 1px solid var(--line); }
.upcoming-round > summary { display: flex; align-items: center; gap: 18px; padding: 22px 24px; cursor: pointer; list-style: none; color: var(--navy); }
.upcoming-round > summary::-webkit-details-marker { display: none; }
.upcoming-round > summary:focus-visible { outline: 3px solid #2b78c5; outline-offset: -4px; }
.upcoming-round-title { flex: 1; min-width: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.upcoming-round-meta { display: grid; gap: 5px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.upcoming-round-meta small { color: #4a617c; font-weight: 500; }
.upcoming-chevron { flex-shrink: 0; }
.upcoming-round > summary:active { background: #e2ecf8; }
@media (hover: hover) and (pointer: fine) {
  .upcoming-round > summary:hover { background: #f3f7fc; }
}
.upcoming-round[open] .upcoming-chevron { transform: rotate(180deg); }
.upcoming-round[open] > summary { background: #edf4fc; border-bottom: 1px solid var(--line); }
.upcoming-round-body { padding: 16px 20px 20px; }
.upcoming-notice { display: inline-block; color: #735000; background: #fff3c4; padding: 5px 9px; border-radius: 5px; font-size: .75rem; font-weight: 750; margin-bottom: 12px; }
.upcoming-round-body .actions { margin-top: 16px; }
.upcoming-admin { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; }
.prepared-round { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); }
.prepared-round > span { color: #4a617c; flex: 1; font-size: .85rem; }
@media(max-width: 520px) {
  .upcoming-round > summary { padding: 18px 14px; gap: 10px; }
  .upcoming-round-title { font-size: 1.15rem; }
  .upcoming-round-body { padding: 12px 10px 16px; }
}
.general-schedule-legend { display: flex; gap: 9px; flex-wrap: wrap; margin: 18px 0 12px; }
.general-schedule-key,
.category-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.general-schedule-key::before { width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: currentColor; content: ""; }
.general-schedule .tone-0 td { background: #edf6ff; }
.general-schedule .tone-1 td { background: #fff7df; }
.general-schedule .tone-2 td { background: #f4efff; }
.general-schedule .tone-3 td { background: #eaf8f1; }
.general-schedule .tone-0 td:first-child { box-shadow: inset 5px 0 #2b78c5; }
.general-schedule .tone-1 td:first-child { box-shadow: inset 5px 0 #d99600; }
.general-schedule .tone-2 td:first-child { box-shadow: inset 5px 0 #7656b5; }
.general-schedule .tone-3 td:first-child { box-shadow: inset 5px 0 #23845c; }
.general-schedule-key.tone-0,.general-schedule .tone-0 .category-pill { color: #165a9d; background: #dceeff; }
.general-schedule-key.tone-1,.general-schedule .tone-1 .category-pill { color: #815b00; background: #ffebad; }
.general-schedule-key.tone-2,.general-schedule .tone-2 .category-pill { color: #5b3d98; background: #e8ddff; }
.general-schedule-key.tone-3,.general-schedule .tone-3 .category-pill { color: #176a48; background: #d5f1e2; }
.score-stat { border-bottom: 3px solid #c9d8e8; border-radius: 6px; }
.score-stat b { font-size: 2rem; }
.standings-table tbody tr:first-child td { background: #fff8d6; }
.standings-table td:first-child { color: var(--editorial-blue); font-size: 1.05rem; font-weight: 1000; }

.grid .card {
  overflow: hidden;
  padding: 0;
}
.grid .card > .badge {
  display: block;
  padding: 13px 18px;
  border-bottom: 1px solid #d9e3ed;
  color: #3e5871;
  background: var(--editorial-soft);
}
.grid .card > .teams,
.grid .card > .scoreboard,
.grid .card > .set-breakdown {
  margin-inline: 18px;
}
.grid .card > .set-breakdown { margin-bottom: 18px; }
.grid .card.live > .badge { color: #fff; background: var(--navy); }

.admin-control-room {
  border-radius: 10px;
  box-shadow: 0 18px 42px #061a3826;
}
.admin-control-tabs { background: #04142d; }
main .admin-control-tabs button:not(.primary):not(.danger) {
  min-height: 46px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #b9c9dc;
  background: transparent;
  box-shadow: none;
}
main .admin-control-tabs button:not(.primary):not(.danger).active {
  color: #fff;
  border-bottom-color: var(--yellow);
  background: transparent;
}

.admin-grid {
  gap: 22px;
}
.admin-grid > .panel,
.admin-grid > form.panel {
  border-top: 5px solid var(--editorial-blue);
}

.report-download {
  border-left: 5px solid var(--yellow);
}

table:not(.schedule) thead th {
  padding-block: 15px;
  color: #fff;
  background: var(--navy);
}

table:not(.schedule) tbody tr:nth-child(even) td {
  background: #f3f7fb;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover {
    box-shadow: 0 5px 16px #061a3817;
  }

  main button:not(.primary):not(.danger):not([data-admin-target]):hover {
    border-color: #8ca8c2;
    color: var(--navy);
    background: #eaf2f9;
  }

  main .admin-control-tabs button:not(.primary):not(.danger):hover {
    color: #fff;
    background: #ffffff0d;
    box-shadow: none;
  }

  .card:hover {
    border-color: #b8c7d8;
    box-shadow: 0 16px 38px #061a3814;
  }

  .schedule tbody tr:hover td { background: #fff8d6; }
}

@media (max-width: 520px) {
  .teams { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 7px; }
  .teams .score { min-width: 4.35em; padding-inline: 9px; font-size: clamp(1.55rem,8vw,2rem); }
  .empty-state {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px;
  }

  .empty-state-mark {
    width: 44px;
    height: 44px;
  }

  .competition-context { align-items: flex-start; flex-direction: column; }
  .competition-switcher { width: 100%; }
  .competition-switcher summary { justify-content: space-between; width: 100%; }
  .competition-menu { right: auto; left: 0; width: min(100%, 390px); }
  .live-section { padding-left: 13px; }
  .live-section::before { width: 3px; }
  .view-switch { display: flex; overflow-x: auto; }
  .view-switch button { flex: 0 0 auto; }

  .section-title { font-size: clamp(1.85rem, 9vw, 2.55rem); }
}

@media (prefers-reduced-motion: reduce) {
  button,
  .card,
  dialog,
  header .site-nav {
    transition-duration: 1ms;
  }

  button:not(:disabled):active,
  dialog,
  dialog[open] {
    transform: none;
  }
}