/* =========================================================================
   RiftScore — sistema visual
   Direccion: el estandar de la categoria (UI de producto oscura) ejecutado
   con oficio. Liston: densidad de app de marcadores + disciplina de detalle.
   Sin framework, sin webfonts. El peso es una promesa al usuario.
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Superficies. Neutro frio, tres niveles, nada mas. */
  --bg: #0a0c10;
  --surface: #12151b;
  --surface-hi: #191d25;
  --border: #232833;
  --border-hi: #2e3542;

  /* Texto. Los tres pasan 4.5:1 sobre --surface (5.2, 7.2 y 14+). */
  --text: #e6e9ef;
  --text-2: #9aa3b2;
  --text-3: #808a99;

  /* Semanticos. El acento es oro: ni indigo ni violeta, que es donde cae
     por defecto todo dashboard oscuro. Rojo reservado a "en directo". */
  --accent: #e0a33e;
  --accent-ink: #14100a;
  --live: #f4544f;
  --win: #3fce85;

  /* Espaciado: escala de 4. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;

  --radius: 6px;
  --radius-sm: 4px;

  /* Tipografia: pila de sistema. Ratio 1.125, fijo (no fluido): en UI de
     producto el usuario mira a DPI constante y un h1 elastico empeora. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.125rem;

  --dur: 160ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --hdr-h: 0px; /* lo fija el layout por breakpoint */

  color-scheme: dark;
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.45;
  /* Cifras de ancho fijo: sin esto los marcadores bailan al actualizarse. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--s3);
  top: calc(var(--s3) * -8);
  z-index: 100;
  padding: var(--s2) var(--s3);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}

.skip:focus {
  top: var(--s3);
}

/* --- Cabecera ----------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.hdr-in {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: grid;
  gap: var(--s3);
}

.hdr-top {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  font-weight: 650;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  color: var(--text);
}

.brand svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex: none;
}

/* Frescura: honesta. Se calcula desde meta.generated_at, no desde el reloj
   del navegador, para que la cache no la vuelva mentira. */
.fresh {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

.fresh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
}

.fresh[data-state="live"] .fresh-dot {
  background: var(--win);
}

.fresh[data-state="stale"] {
  color: var(--accent);
}

.fresh[data-state="stale"] .fresh-dot {
  background: var(--accent);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-2);
  flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.icon-btn:hover {
  background: var(--surface-hi);
  color: var(--text);
  border-color: var(--border-hi);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.icon-btn[data-busy="true"] svg {
  animation: spin 720ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Controles ---------------------------------------------------------- */

.tools {
  display: flex;
  gap: var(--s2);
  align-items: center;
}

.search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-3);
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 38px;
  padding: 0 var(--s3) 0 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
  font-size: var(--fs-md);
}

.search input::placeholder {
  color: var(--text-3);
}

.search input:hover {
  border-color: var(--border-hi);
}

.search input::-webkit-search-cancel-button {
  filter: invert(0.6);
}

.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex: none;
}

.seg button {
  padding: 0 var(--s3);
  height: 30px;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--text-3);
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}

.seg button:hover {
  color: var(--text);
}

.seg button[aria-pressed="true"] {
  background: var(--surface-hi);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-hi);
}

/* --- Pestanas ----------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--s1);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-md);
  font-weight: 550;
  color: var(--text-3);
  text-decoration: none;
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.tab:hover {
  color: var(--text);
  background: var(--surface);
}

.tab[aria-selected="true"] {
  color: var(--text);
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 650;
  border-radius: 9px;
  background: var(--surface-hi);
  color: var(--text-2);
}

.tab[data-tab="directo"] .tab-count[data-on="true"] {
  background: var(--live);
  color: #fff;
}

/* --- Aviso -------------------------------------------------------------- */

.banner {
  max-width: 1400px;
  margin: var(--s3) auto 0;
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: var(--radius);
  background: #1c1710;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--text-2);
}

.banner svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--accent);
}

.banner[hidden] {
  display: none;
}

.banner-txt {
  flex: 1 1 auto;
}

.banner button {
  flex: none;
  padding: var(--s1) var(--s3);
  height: 30px;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 550;
  transition: background var(--dur) var(--ease);
}

.banner button:hover {
  background: var(--surface-hi);
}

/* --- Layout principal --------------------------------------------------- */

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s6);
}

[data-panel][hidden] {
  display: none;
}

/* --- Separador de dia --------------------------------------------------- */

.daysep {
  position: sticky;
  top: var(--hdr-h);
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s4) var(--s3) var(--s2);
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    var(--bg) 72%,
    transparent 100%
  );
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.daysep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.daysep[data-today="true"] {
  color: var(--accent);
}

/* --- Fila de partida ---------------------------------------------------- */

.match {
  display: grid;
  align-items: center;
  gap: 0 var(--s3);
  padding: var(--s3);
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background var(--dur) var(--ease);

  /* Movil: metadatos arriba, equipos apilados. Es como resuelven este
     problema las apps de marcadores, y es lo correcto: los nombres de
     equipo son largos y los marcadores tienen que alinearse en columna. */
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta  aside"
    "teamA aside"
    "teamB aside";
}

.match:hover {
  background: var(--surface);
}

.match:last-child {
  border-bottom: 0;
}

/* Barra viva al borde izquierdo, solo en directo. */
.match[data-status="running"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: var(--live);
}

.m-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
  padding-bottom: var(--s2);
}

.m-time {
  color: var(--text-2);
  font-weight: 600;
  flex: none;
}

.m-league {
  color: var(--text-2);
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.m-serie {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

.m-sep {
  flex: none;
  opacity: 0.5;
}

.m-bo {
  flex: none;
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: var(--text-3);
}

.m-team {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  padding: 3px 0;
}

.m-team[data-side="a"] {
  grid-area: teamA;
}

.m-team[data-side="b"] {
  grid-area: teamB;
}

.m-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: none;
  /* Reserva el hueco aunque falle: si el logo desaparece se descuadra todo. */
  background: var(--surface-hi);
  border-radius: 3px;
}

.m-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-md);
  font-weight: 500;
}

.m-score {
  flex: none;
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  min-width: 1ch;
  text-align: right;
}

/* Ganador: peso + marca, NUNCA solo color. El diseno anterior fallaba
   WCAG 1.4.1 justo aqui. */
.m-team[data-outcome="win"] .m-name,
.m-team[data-outcome="win"] .m-score {
  color: var(--text);
  font-weight: 700;
}

.m-team[data-outcome="win"] .m-name::after {
  content: "▲";
  margin-left: 6px;
  font-size: 9px;
  color: var(--win);
  vertical-align: 1px;
}

.m-team[data-outcome="loss"] .m-name,
.m-team[data-outcome="loss"] .m-score {
  color: var(--text-3);
}

.m-team[data-outcome="loss"] .m-logo {
  opacity: 0.55;
}

/* En movil no hay columna central: el guion sobra. Va aqui, antes del
   media query de escritorio, para que aquel pueda sobreescribirlo. */
.m-vs {
  display: none;
}

/* En movil el bloque de liga se disuelve para que liga, separador y serie
   fluyan como hermanos dentro de la linea de metadatos. */
.m-league-wrap {
  display: contents;
}

.m-aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s2);
  flex: none;
}

/* Marcador en vivo y estado */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip-live {
  background: #2a1618;
  background: color-mix(in srgb, var(--live) 16%, transparent);
  color: var(--live);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 35%, transparent);
}

.chip-live .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.chip-off {
  background: var(--surface-hi);
  color: var(--text-3);
  box-shadow: inset 0 0 0 1px var(--border);
}

.m-stream {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px reales de area tactil. El diseno anterior era un glifo de 10px. */
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.m-stream::after {
  content: "";
  position: absolute;
  inset: -5px;
}

.m-stream:hover {
  background: color-mix(in srgb, var(--live) 14%, transparent);
  color: var(--live);
  border-color: color-mix(in srgb, var(--live) 40%, transparent);
}

.m-stream svg {
  width: 14px;
  height: 14px;
}

/* Destello al cambiar un marcador: movimiento que comunica estado, que es
   lo unico que admite una UI de producto. */
@keyframes bump {
  0% {
    background: color-mix(in srgb, var(--accent) 26%, transparent);
  }
  100% {
    background: transparent;
  }
}

.m-score[data-bump="true"] {
  animation: bump 1100ms var(--ease);
  border-radius: 3px;
}

/* --- Skeletons ---------------------------------------------------------- */

.sk {
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  border-bottom: 1px solid var(--border);
}

.sk span {
  display: block;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-hi) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.sk span:nth-child(1) {
  width: 38%;
}
.sk span:nth-child(2) {
  width: 68%;
  height: 13px;
}
.sk span:nth-child(3) {
  width: 54%;
  height: 13px;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* --- Vacios ------------------------------------------------------------- */

.empty {
  padding: var(--s6) var(--s4);
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-md);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin-top: var(--s4);
}

.empty[hidden] {
  display: none;
}

.empty strong {
  display: block;
  color: var(--text-2);
  font-weight: 600;
  margin-bottom: var(--s2);
}

.empty a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}

/* --- Pie ---------------------------------------------------------------- */

footer {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s5) var(--s4);
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
}

footer a {
  color: var(--text-2);
  text-underline-offset: 3px;
}

/* Aviso de Riot: texto largo y obligatorio, en su propia linea. */
.ftr-legal {
  flex-basis: 100%;
}

.noscript {
  margin: var(--s5) auto;
  max-width: 40rem;
  padding: var(--s4);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

/* =========================================================================
   Movil: la barra de pestanas vive abajo, al alcance del pulgar.
   ========================================================================= */

@media (max-width: 767px) {
  :root {
    --hdr-h: 104px;
  }

  .hdr-in {
    padding: var(--s3);
    gap: var(--s2);
  }

  /* Las pestanas salen de la cabecera y se fijan abajo. */
  .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    gap: 0;
    background: var(--bg);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .tab {
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    /* Alto comodo de pulgar. */
    min-height: 52px;
    border-radius: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  .tab:hover {
    background: none;
  }

  .tab[aria-selected="true"] {
    color: var(--accent);
    box-shadow: inset 0 2px 0 var(--accent);
  }

  main {
    padding: var(--s2) var(--s3) 0;
  }

  /* Hueco para que la barra inferior no tape la ultima fila. */
  footer {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .banner {
    margin: var(--s2) var(--s3) 0;
  }

  .daysep {
    padding-top: var(--s4);
  }
}

/* =========================================================================
   Escritorio: la fila se despliega en una sola linea densa.
   La densidad es una funcion del producto, no un defecto.
   ========================================================================= */

@media (min-width: 768px) {
  :root {
    --hdr-h: 108px;
  }

  .hdr-in {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "top   top"
      "tabs  tools";
    align-items: center;
  }

  .hdr-top {
    grid-area: top;
  }
  .tabs {
    grid-area: tabs;
  }
  .tools {
    grid-area: tools;
    justify-self: end;
  }

  .search {
    flex: 0 0 260px;
  }

  /* `display: contents` disuelve el contenedor de equipo para que logo,
     nombre y marcador caigan directamente en la rejilla de la fila. Un solo
     DOM, dos disposiciones, sin ramificar el render en JS. */
  .match {
    grid-template-columns:
      3.5rem                /* hora */
      minmax(6rem, 13rem)   /* liga + serie */
      minmax(0, 1fr)        /* nombre A */
      1.5rem                /* logo A */
      1.75rem               /* marcador A */
      0.75rem               /* separador */
      1.75rem               /* marcador B */
      1.5rem                /* logo B */
      minmax(0, 1fr)        /* nombre B */
      3rem                  /* BO */
      auto;                 /* aside */
    grid-template-areas: "time league nameA logoA scoreA vs scoreB logoB nameB bo aside";
    gap: 0 var(--s2);
    padding: var(--s2) var(--s3);
  }

  .m-meta {
    display: contents;
  }

  .m-time {
    grid-area: time;
    font-size: var(--fs-sm);
  }

  .m-league-wrap {
    grid-area: league;
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
  }

  .m-league {
    font-size: var(--fs-sm);
  }

  .m-serie {
    font-size: 11px;
    color: var(--text-3);
  }

  .m-sep {
    display: none;
  }

  .m-bo {
    grid-area: bo;
    margin: 0;
    justify-self: center;
  }

  .m-team {
    display: contents;
  }

  .m-team[data-side="a"] .m-name {
    grid-area: nameA;
    text-align: right;
  }
  .m-team[data-side="a"] .m-logo {
    grid-area: logoA;
  }
  .m-team[data-side="a"] .m-score {
    grid-area: scoreA;
    text-align: center;
  }

  .m-team[data-side="b"] .m-score {
    grid-area: scoreB;
    text-align: center;
  }
  .m-team[data-side="b"] .m-logo {
    grid-area: logoB;
  }
  .m-team[data-side="b"] .m-name {
    grid-area: nameB;
    text-align: left;
  }

  /* El guion central entre marcadores. */
  .m-vs {
    grid-area: vs;
    display: block;
    text-align: center;
    color: var(--text-3);
    font-size: var(--fs-sm);
  }

  .m-aside {
    grid-area: aside;
    flex-direction: row;
    align-items: center;
    min-width: 7.5rem;
    justify-content: flex-end;
  }

  .m-team[data-outcome="win"] .m-name::after {
    /* En escritorio el nombre A esta alineado a la derecha: la marca va
       al lado del marcador, no colgando del texto. */
    margin-left: 5px;
  }
}

/* Escritorio ancho: mas aire en la columna de liga. */
@media (min-width: 1200px) {
  .match {
    grid-template-columns:
      3.5rem minmax(9rem, 16rem) minmax(0, 1fr) 1.5rem 1.75rem 0.75rem
      1.75rem 1.5rem minmax(0, 1fr) 3rem auto;
  }
}

/* =========================================================================
   Preferencias del usuario
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* El punto de directo deja de parpadear pero sigue siendo rojo y sigue
     teniendo la etiqueta textual "EN VIVO". */
  .chip-live .dot {
    opacity: 1;
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-2: #c4cbd6;
    --text-3: #a8b0bd;
    --border: #3a4250;
    --border-hi: #4b5464;
  }
}

/* =========================================================================
   Enlaces dentro de una fila de partida
   ========================================================================= */

/* Enlace extendido: cubre la fila entera. Los enlaces interiores se elevan por
   encima con z-index para seguir siendo pulsables por separado. */
.m-open {
  position: static;
  font-size: 0;
  color: transparent;
}

.m-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.m-open:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

a.m-league,
a.m-name,
.m-stream {
  position: relative;
  z-index: 1;
  text-decoration: none;
}

a.m-league:hover,
a.m-name:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   Indice de competiciones
   ========================================================================= */

.comps {
  display: grid;
  gap: var(--s4);
  padding-top: var(--s2);
}

.comp-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
}

.comp-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: none;
}

.comp-head h2 {
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.comp-tours {
  display: grid;
}

.comp-tour {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}

.comp-tour:hover {
  background: var(--surface);
}

.comp-tour-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comp-tour-count {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Vista de detalle
   ========================================================================= */

.dv-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) 0 var(--s4);
}

.dv-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 36px;
  padding: 0 var(--s3) 0 var(--s2);
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dv-back:hover {
  background: var(--surface-hi);
  color: var(--text);
}

.dv-back svg {
  width: 16px;
  height: 16px;
}

.dv-title {
  min-width: 0;
  flex: 1 1 auto;
}

.dv-title h1 {
  font-size: var(--fs-xl);
  font-weight: 680;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.dv-title p {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.dv-title p[hidden] {
  display: none;
}

.dv-section {
  margin-bottom: var(--s6);
}

.dv-section h2 {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 var(--s3) var(--s2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s2);
}

.dv-note {
  padding: var(--s3);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.dv-note-quiet {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--border);
  font-size: var(--fs-xs);
}

.dv-retry {
  display: block;
  margin: var(--s3) auto 0;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 550;
}

.dv-retry:hover {
  background: var(--surface-hi);
}

/* =========================================================================
   Clasificacion
   ========================================================================= */

.table-wrap {
  overflow-x: auto;
}

.standings {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.standings th {
  padding: var(--s2) var(--s2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.standings th[data-kind="n"],
.standings th[data-kind="rank"] {
  text-align: center;
}

.standings td {
  padding: var(--s2);
  border-bottom: 1px solid var(--border);
}

.standings tbody tr {
  transition: background var(--dur) var(--ease);
}

.standings tbody tr:hover {
  background: var(--surface);
}

.st-rank {
  width: 2.5rem;
  text-align: center;
  font-weight: 650;
  color: var(--text-3);
}

/* Los tres primeros puestos, que es lo que la gente busca de un vistazo. */
.standings tbody tr:nth-child(-n + 3) .st-rank {
  color: var(--accent);
}

.st-team {
  min-width: 0;
}

.team-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  text-decoration: none;
  font-weight: 500;
  min-height: 32px;
}

.team-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.team-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-n {
  width: 2.75rem;
  text-align: center;
  color: var(--text-2);
}

.st-w {
  color: var(--text);
  font-weight: 600;
}

.st-games {
  width: 4.5rem;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* =========================================================================
   Bracket
   ========================================================================= */

.bk-band-label {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--s4) 0 var(--s2);
}

/* Movil: el cuadro clasico no cabe a lo ancho, asi que las columnas se apilan.
   La regla de cero scroll horizontal en la pagina no se negocia. */
.bracket {
  padding: 0 var(--s3) var(--s4);
}

.bk-headers {
  display: none; /* en vertical las cabeceras de columna no significan nada */
}

.bk-band {
  display: grid;
  gap: var(--s3);
}

.bk-col {
  display: grid;
  gap: var(--s2);
}

.bk-col:empty {
  display: none;
}

.bk-pair {
  display: grid;
  gap: var(--s2);
}

.bk-match {
  position: relative;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* Nada de `overflow: hidden` aqui: recortaria los conectores, que son
   pseudo-elementos que salen fuera de la tarjeta a proposito. Las esquinas se
   redondean fila a fila. */
.bk-team:first-child .bk-score {
  border-top-right-radius: calc(var(--radius-sm) - 1px);
}

.bk-team:last-child .bk-score {
  border-bottom-right-radius: calc(var(--radius-sm) - 1px);
}

.bk-match:hover {
  background: var(--surface-hi);
  border-color: var(--border-hi);
}

.bk-match[data-status="running"] {
  border-color: color-mix(in srgb, var(--live) 55%, var(--border));
}

/* Fila de equipo: logo, nombre y el marcador en su propia celda a la derecha,
   separado por un filete. Es lo que hace legible un cuadro de un vistazo. */
.bk-team {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: var(--s2);
  min-height: 26px;
  padding-left: var(--s2);
  font-size: var(--fs-sm);
}

.bk-team + .bk-team {
  border-top: 1px solid var(--border);
}

.bk-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.bk-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 550;
  color: var(--text-2);
}

.bk-score {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.bk-score[data-pending="true"] {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-3);
}

/* Ganador: color Y peso. Nunca solo color. */
.bk-team[data-outcome="win"] .bk-name,
.bk-team[data-outcome="win"] .bk-score {
  color: var(--accent);
  font-weight: 750;
}

.bk-team[data-outcome="loss"] .bk-name,
.bk-team[data-outcome="loss"] .bk-score {
  color: var(--text-3);
}

.bk-team[data-outcome="loss"] .bk-logo {
  opacity: 0.5;
}

.bk-tbd {
  color: var(--text-3);
  font-style: italic;
  font-weight: 400;
}

/* Sin rival asignado no hay logo, pero la rejilla tiene que seguir cuadrando
   con las filas de al lado o el nombre cae en la columna del logo. */
.bk-slot-empty {
  width: 16px;
  height: 16px;
}

/* =========================================================================
   Plantilla
   ========================================================================= */

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s2);
  padding: 0 var(--s3);
}

.player {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.player-photo {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-hi);
}

.player-info {
  display: grid;
  min-width: 0;
}

.player-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-role {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* =========================================================================
   Partidas de un equipo
   ========================================================================= */

.tm-list {
  display: grid;
}

.tm {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "when   score"
    "rival  score"
    "league score";
  gap: 0 var(--s3);
  align-items: center;
  min-height: 56px;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.tm:hover {
  background: var(--surface);
}

.tm-when {
  grid-area: when;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.tm-rival {
  grid-area: rival;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-league {
  grid-area: league;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.tm-score {
  grid-area: score;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-lg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.tm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-hi);
  color: var(--text-3);
}

.tm[data-result="win"] .tm-badge {
  background: color-mix(in srgb, var(--win) 18%, transparent);
  color: var(--win);
}

.tm[data-result="loss"] .tm-badge {
  background: color-mix(in srgb, var(--live) 15%, transparent);
  color: var(--live);
}

/* =========================================================================
   Detalle de partida
   ========================================================================= */

.md-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--s3);
  padding: var(--s4) var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.md-team {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  text-decoration: none;
  min-width: 0;
}

.md-team:hover .md-name {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--surface-hi);
  border-radius: var(--radius-sm);
}

.md-name {
  font-weight: 600;
  text-align: center;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.md-score {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.md-team[data-outcome="loss"] .md-name,
.md-team[data-outcome="loss"] .md-score {
  color: var(--text-3);
}

.md-team[data-outcome="loss"] .md-logo {
  opacity: 0.55;
}

.md-team[data-outcome="win"] .md-name::after {
  content: " ▲";
  font-size: 9px;
  color: var(--win);
  vertical-align: 2px;
}

.md-sep {
  align-self: center;
  color: var(--text-3);
  font-size: var(--fs-lg);
}

.md-meta {
  padding: var(--s3);
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-align: center;
}

.md-stream {
  display: block;
  width: fit-content;
  margin: 0 auto var(--s5);
  padding: var(--s2) var(--s5);
  min-height: 40px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--live) 16%, transparent);
  color: var(--live);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 40%, transparent);
  font-weight: 600;
  text-decoration: none;
  line-height: 24px;
}

.md-stream:hover {
  background: color-mix(in srgb, var(--live) 24%, transparent);
}

/* --- Mapa: resultado, totales por equipo y jugadores ----------------------- */

.mp-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s3) var(--s2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s2);
}

/* El h2 del mapa comparte fila con su resultado: sin el borde propio de
   .dv-section h2, que ya lo pone la cabecera entera. */
.mp-head h2 {
  padding: 0;
  margin: 0;
  border: 0;
}

.mp-result {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}

/* Ganador marcado con forma, no solo con color (WCAG 1.4.1). */
.mp-result[data-win="true"]::after,
.mp-totals tr[data-win="true"] .mp-team::after {
  content: " ▲";
  font-size: 9px;
  color: var(--win);
  vertical-align: 2px;
}

.mp-result[data-live="true"] {
  color: var(--live);
}

.mp-vod {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--s3);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--border-hi);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.mp-vod:hover {
  background: var(--surface-hi);
}

.mp-totals {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.mp-totals th,
.mp-totals td {
  padding: var(--s2);
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.mp-totals thead th {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
}

.mp-totals thead th:first-child,
.mp-totals tbody th {
  text-align: left;
}

.mp-team {
  font-weight: 650;
}

.mp-side {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 450;
  color: var(--text-3);
}

.mp-players-title {
  padding: var(--s4) var(--s3) var(--s1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}

/* Movil: los objetos bajan a una segunda linea bajo el nombre. Cero scroll
   horizontal a cualquier ancho. */
.mp-player {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "champ who kda cs"
    "champ items items gold";
  column-gap: var(--s3);
  row-gap: var(--s1);
  align-items: center;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
}

.mp-champ {
  grid-area: champ;
  align-self: start;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-hi);
}

.mp-who {
  grid-area: who;
  display: grid;
  min-width: 0;
}

.mp-name,
.mp-champ-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-name {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.mp-champ-name {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.mp-kda {
  grid-area: kda;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mp-cs,
.mp-gold {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mp-cs {
  grid-area: cs;
}

.mp-gold {
  grid-area: gold;
}

.mp-items {
  grid-area: items;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-height: 20px;
}

.mp-items img {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--surface-hi);
}

@media (min-width: 768px) {
  .mp-player {
    grid-template-columns: 32px minmax(8rem, 1fr) 5.5rem 4.5rem 4rem auto;
    grid-template-areas: "champ who kda cs gold items";
  }

  .mp-champ {
    align-self: center;
  }

  .mp-items img {
    width: 22px;
    height: 22px;
  }
}

/* Partidas de un cuadro que aun no tienen rivales: debajo, sin su propio margen. */
.bk-pending {
  margin: var(--s4) 0 0;
}

.bk-pending h3 {
  padding: 0 var(--s3) var(--s2);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* =========================================================================
   Escritorio: el cuadro se despliega en columnas
   ========================================================================= */

@media (min-width: 768px) {
  .roster {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .tm {
    grid-template-columns: 8.5rem 1fr 1fr auto;
    grid-template-areas: "when rival league score";
    min-height: 44px;
  }

  .md-head {
    padding: var(--s5) var(--s6);
  }

  .md-logo {
    width: 64px;
    height: 64px;
  }

  .md-name {
    font-size: var(--fs-lg);
  }

  .md-score {
    font-size: 2.75rem;
  }
}

/* =========================================================================
   Escritorio: el cuadro de verdad
   ========================================================================= */

@media (min-width: 768px) {
  .bracket {
    --bk-col: clamp(9rem, 13vw, 12rem);
    --bk-gap: 2.25rem;
    overflow-x: auto;
    padding: 0 var(--s3) var(--s4);
  }

  /* Cabeceras de ronda como pastillas, compartidas por todas las bandas.
     Misma plantilla de columnas que las bandas, asi que quedan alineadas. */
  .bk-headers {
    display: grid;
    /* auto-flow en vez de repeat(N): el numero de columnas lo fijan los
       propios hijos, asi no hace falta inyectar el conteo por estilo en
       linea, que la CSP prohibe. */
    grid-auto-flow: column;
    grid-auto-columns: var(--bk-col);
    gap: var(--bk-gap);
    margin-bottom: var(--s3);
    min-width: min-content;
  }

  .bk-h {
    padding: var(--s2);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    color: var(--text-2);
    white-space: nowrap;
  }

  .bk-band {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--bk-col);
    gap: var(--bk-gap);
    align-items: stretch;
    min-width: min-content;
  }

  /* La clave de la geometria: `space-around` en dos niveles. La columna
     reparte las parejas y cada pareja reparte sus dos partidas. Con columnas
     de igual altura eso deja cada partida en el punto medio exacto de las dos
     que la alimentan, sin calcular un pixel ni usar estilos en linea. */
  .bk-col,
  .bk-pair {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 0;
  }

  .bk-col:empty {
    display: flex; /* una columna vacia sigue ocupando su hueco */
  }

  .bk-pair {
    flex: 1;
    position: relative;
  }

  /* Margen simetrico en vez de `gap`: en la columna mas alta no sobra espacio
     y `space-around` no separaria nada. El margen simetrico garantiza aire Y
     conserva el centro de cada tarjeta, de lo que dependen los conectores.
     `gap` se reparte antes que el espacio libre y descuadraria la geometria. */
  .bk-match {
    margin: 5px 0;
  }

  /* Conector vertical, en mitad del hueco. Con space-around los centros de las
     dos partidas caen al 25% y al 75% de la pareja: la linea va de uno a otro. */
  .bk-pair[data-n="2"]::after {
    content: "";
    position: absolute;
    left: calc(100% + var(--bk-gap) / 2);
    top: 25%;
    height: 50%;
    border-left: 1px solid var(--border-hi);
  }

  .bk-match[data-feeds]::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: calc(var(--bk-gap) / 2);
    border-top: 1px solid var(--border-hi);
  }

  .bk-match[data-feeders]::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: calc(var(--bk-gap) / 2);
    border-top: 1px solid var(--border-hi);
  }

  .bk-band-label {
    padding: var(--s5) 0 var(--s2);
  }
}


/* =========================================================================
   Superficies del navegador
   Lo que no se dibuja tambien lleva el diseño: seleccion, cursor, casillas y
   barras de desplazamiento salen del sistema, no de los valores del navegador.
   ========================================================================= */

:root {
  accent-color: var(--accent);
}

html {
  scrollbar-color: var(--border-hi) transparent;
}

::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
}

input,
textarea {
  caret-color: var(--accent);
}

/* Safari en iPhone hace zoom al tocar un campo de menos de 16 px. Pasaba ya
   con el buscador; con el campo de correo seria el doble de molesto. */
@media (max-width: 767px) {
  input[type="search"],
  input[type="email"],
  input[type="text"] {
    font-size: 1rem;
  }
}

/* =========================================================================
   Avisos: campana, botón Seguir y panel
   ========================================================================= */

.bell {
  position: relative;
  text-decoration: none;
}

/* Punto cuando este navegador sigue algo: saber de un vistazo que hay avisos. */
.bell[data-on="true"]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg);
}

.dv-actions {
  flex: none;
  margin-left: auto;
}

.dv-actions:empty {
  display: none;
}

.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.follow-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.follow-btn:hover,
.follow-btn[aria-expanded="true"] {
  background: var(--surface-hi);
  border-color: var(--border-hi);
}

.follow-btn[data-on="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.dv-panel {
  margin: 0 0 var(--s5);
}

.dv-panel[hidden] {
  display: none;
}

.fp {
  display: grid;
  gap: var(--s5);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
}

.fp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.fp-head h2 {
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* El foco se lleva al titulo al abrir, para lectores de pantalla; el anillo
   solo tiene sentido si se llega con teclado. */
.fp-head h2:focus:not(:focus-visible) {
  outline: none;
}

.fp-block {
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.fp-block + .fp-block {
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}

.fp-block h3 {
  font-size: var(--fs-md);
  font-weight: 650;
}

.fp-hint {
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}

.fp-legal {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-3);
}

.fp-legal a {
  color: var(--text-2);
  text-underline-offset: 3px;
}

.fp-steps {
  display: grid;
  gap: var(--s2);
  padding-left: 1.25rem;
  list-style: decimal;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.fp-steps li::marker {
  color: var(--accent);
  font-weight: 650;
}

.fp-inline-icon svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  color: var(--accent);
}

/* Casillas de avisos: controles nativos (se ven y se usan como se espera),
   con un area tactil de verdad alrededor. */
.fp-events {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.fp-events legend {
  width: 100%;
  margin-bottom: var(--s2);
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.fp-check {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.fp-check:hover {
  border-color: var(--border-hi);
  color: var(--text);
}

.fp-check:has(input:checked) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.fp-check:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fp-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}

.fp-check input:focus-visible {
  outline: none; /* el anillo lo lleva la etiqueta entera */
}

.fp-check-sm {
  min-height: 34px;
  padding: 0 var(--s2);
  font-size: var(--fs-xs);
}

.fp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* Botones. Hasta ahora la web no tenia accion principal: activar avisos es
   la primera, y lleva el acento, que es para acciones y seleccion. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s4);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  background: var(--surface-hi);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.btn:hover {
  background: color-mix(in srgb, var(--surface-hi) 70%, var(--border-hi));
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, #fff);
}

.btn-quiet {
  background: transparent;
  border-color: var(--border);
  color: var(--text-2);
}

.btn-quiet:hover {
  background: var(--surface-hi);
  border-color: var(--border-hi);
  color: var(--text);
}

/* Segunda pulsacion pendiente: se confirma en el sitio, sin modal. */
.btn-quiet[data-armed="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.btn:disabled {
  cursor: progress;
  opacity: 0.65;
}

.btn[data-busy="true"] {
  color: transparent;
}

.btn[data-busy="true"]::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-color: var(--text-2) var(--text-2) var(--text-2) transparent;
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}

.btn-primary[data-busy="true"]::after {
  border-color: var(--accent-ink) var(--accent-ink) var(--accent-ink) transparent;
}

.fp-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.fp-form[hidden] {
  display: none;
}

.fp-form input {
  flex: 1 1 14rem;
  min-width: 0;
  height: 40px;
  padding: 0 var(--s3);
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  transition: border-color var(--dur) var(--ease);
}

.fp-form input::placeholder {
  color: var(--text-3);
}

.fp-form input:hover {
  border-color: color-mix(in srgb, var(--border-hi) 60%, var(--text-3));
}

.fp-status {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-2);
}

.fp-status:empty {
  display: none;
}

.fp-status svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}

.fp-status[data-tone="ok"] {
  color: var(--text);
}

.fp-status[data-tone="ok"] svg {
  color: var(--win);
}

/* Los errores van en el acento, como el aviso de datos obsoletos: el rojo
   esta reservado para "en directo" (DESIGN.md). */
.fp-status[data-tone="error"] {
  color: var(--accent);
}

/* =========================================================================
   Mis alertas
   ========================================================================= */

.al-list {
  display: grid;
}

.al-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name   remove"
    "events events";
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s3);
  border-bottom: 1px solid var(--border);
}

.al-row:not(:has(.al-events)) {
  grid-template-areas: "name remove";
}

.al-row:last-child {
  border-bottom: 0;
}

.al-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  text-decoration: none;
}

a.al-name:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.al-events {
  grid-area: events;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.al-remove {
  grid-area: remove;
}

.al-remove:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.al-actions {
  padding: var(--s3);
}

.al-done {
  display: grid;
  gap: var(--s3);
  justify-items: center;
}

.al-center {
  justify-content: center;
}

@media (min-width: 768px) {
  .fp {
    padding: var(--s5);
    column-gap: var(--s6);
  }

  /* Dos columnas solo si hay dos canales: sin correo, push ocupa todo. */
  .fp:has(.fp-block + .fp-block) {
    grid-template-columns: 1fr 1fr;
  }

  .fp-head {
    grid-column: 1 / -1;
  }

  /* En escritorio los dos canales van lado a lado: no se separan por filete
     horizontal sino por columna. */
  .fp-block + .fp-block {
    padding-top: 0;
    padding-left: var(--s6);
    border-top: 0;
    border-left: 1px solid var(--border);
  }

  .al-row {
    grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) auto;
    grid-template-areas: "name events remove";
  }

  .al-row:not(:has(.al-events)) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name remove";
  }
}

/* =========================================================================
   Página de texto (privacidad)
   Modo lectura: medida de 65-75 caracteres y mas aire encima de cada titulo
   que debajo, para que el titulo se lea pegado a lo que encabeza.
   ========================================================================= */

.legal {
  max-width: 68ch;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s6);
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--text-2);
}

.legal h1 {
  margin-bottom: var(--s3);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}

.legal-lead {
  font-size: var(--fs-xl);
  color: var(--text);
}

.legal h2 {
  margin: var(--s6) 0 var(--s2);
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}

.legal h3 {
  margin: var(--s5) 0 var(--s1);
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--text);
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: var(--s3);
}

.legal ul {
  display: grid;
  gap: var(--s2);
  padding-left: 1.25rem;
  list-style: disc;
}

.legal li::marker {
  color: var(--accent);
}

.legal strong {
  color: var(--text);
  font-weight: 600;
}

.legal a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.legal-date {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-3);
}