:root {
  color-scheme: dark;
  --fondo: #0d0f14;
  --superficie: #14161c;
  --superficie-2: #1c1f27;
  --borde: #262a34;
  --texto: #eef0f4;
  --texto-2: #a3a9b6;
  --tenue: #6b7280;
  --acento: #f97316;
  --si: #3fcf5c;
  --no: #c0392b;
  --push: #6b7280;
  --radio: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* que ningún display de una clase gane a hidden */
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
button, input, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tenue { color: var(--tenue); font-weight: 500; }

.barra {
  position: sticky; top: 0; z-index: 5;
  background: rgba(13, 15, 20, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
  padding: 10px 16px 0;
}
.marca { font-weight: 700; letter-spacing: .2px; }
.logo { color: var(--acento); }
.tabs { display: flex; gap: 4px; margin-top: 8px; }
.tab {
  flex: 1; background: none; border: 0; padding: 10px 0;
  color: var(--texto-2); border-bottom: 2px solid transparent; cursor: pointer;
}
.tab.activa { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }

main { max-width: 760px; margin: 0 auto; padding: 14px 16px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vista[hidden] { display: none; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
}
.vacia { color: var(--texto-2); text-align: center; padding: 40px 14px; }

.buscador input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--borde);
}
.buscador input:focus { outline: 2px solid var(--acento); outline-offset: 0; }

.jugador { display: flex; gap: 14px; align-items: center; }
.foto {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--superficie-2); overflow: hidden;
  display: grid; place-items: center; font-weight: 700; color: var(--texto-2);
}
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.jugador h1 { font-size: 19px; margin: 0; }
.jugador .meta { color: var(--texto-2); font-size: 13px; margin-top: 2px; }
.proximo {
  display: inline-block; margin-top: 6px; font-size: 13px;
  background: var(--superficie-2); border-radius: 8px; padding: 3px 8px;
}

.controles { display: grid; gap: 12px; }
.grupo { display: grid; gap: 6px; }
.etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--tenue); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 14px;
}
.chip.activa { background: var(--acento); border-color: var(--acento); color: #111; font-weight: 600; }
.chip:disabled { opacity: .4; cursor: not-allowed; }

.paso { justify-self: start; display: inline-flex; align-items: stretch; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.paso button { background: var(--superficie-2); border: 0; width: 42px; font-size: 20px; cursor: pointer; }
.paso input {
  width: 80px; text-align: center; background: var(--superficie); border: 0;
  font-size: 18px; font-weight: 700; -moz-appearance: textfield;
}
.paso input::-webkit-inner-spin-button { -webkit-appearance: none; }

.resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.dato { background: var(--superficie-2); border-radius: 10px; padding: 10px; }
.dato .valor { font-size: 22px; font-weight: 700; }
.dato .titulo { font-size: 12px; color: var(--texto-2); }
.dato .nota { font-size: 11px; color: var(--tenue); margin-top: 2px; }

.grafica { position: relative; }
.grafica .desliza { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-left: 34px; }
.grafica svg { display: block; }
.grafica .eje { position: absolute; left: 0; top: 0; pointer-events: none; }
.grafica .sin-datos { color: var(--texto-2); padding: 30px 0; text-align: center; }

.leyenda { font-size: 12px; color: var(--texto-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.muestra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.muestra.si { background: var(--si); }
.muestra.no { background: repeating-linear-gradient(135deg, var(--no) 0 3px, #8f2a20 3px 6px); }
.linea-muestra { width: 18px; border-top: 2px dashed var(--texto); display: inline-block; margin-left: 6px; }

.tabla-juegos { margin-top: 10px; font-size: 13px; }
.tabla-juegos summary { cursor: pointer; color: var(--texto-2); }
.tabla-juegos table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tabla-juegos th, .tabla-juegos td { text-align: right; padding: 5px 6px; border-bottom: 1px solid var(--borde); }
.tabla-juegos th:first-child, .tabla-juegos td:first-child,
.tabla-juegos th:nth-child(2), .tabla-juegos td:nth-child(2) { text-align: left; }
.tabla-juegos th { color: var(--tenue); font-weight: 500; }

textarea {
  width: 100%; margin-top: 8px; resize: vertical; border-radius: 10px; padding: 10px;
  background: var(--superficie-2); border: 1px solid var(--borde);
}
.estado-notas { font-size: 12px; color: var(--tenue); margin: 6px 0 0; min-height: 1em; }

.tooltip {
  position: fixed; z-index: 10; pointer-events: none;
  background: #000; border: 1px solid var(--borde); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; line-height: 1.45; white-space: nowrap;
}
.tooltip b { font-size: 14px; }

.marca { display: flex; align-items: center; gap: 6px; }
.salir { margin-left: auto; background: none; border: 1px solid var(--borde); border-radius: 8px; padding: 3px 10px; color: var(--texto-2); cursor: pointer; font-size: 13px; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: 100%; max-width: 360px; display: grid; gap: 14px; }
.login label { display: grid; gap: 6px; font-size: 13px; color: var(--texto-2); }
.login input { padding: 11px 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borde); }
.boton { background: var(--acento); color: #111; border: 0; border-radius: 10px; padding: 11px; font-weight: 700; cursor: pointer; }
.error { color: #ff8a7a; font-size: 13px; margin: 0; min-height: 1em; }
.ok { color: var(--si); font-size: 13px; margin: 0; }
.boton:disabled { opacity: .6; cursor: wait; }
.boton.chico { padding: 7px 12px; font-size: 13px; }
.aviso { background: #3a1d17; border: 1px solid #7a2e22; color: #ffb4a6; border-radius: 10px; padding: 10px 12px; margin: 0; font-size: 13px; }

.buscador { position: relative; }
.sugerencias {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 4px; border-radius: 12px;
  background: var(--superficie-2); border: 1px solid var(--borde);
}
.sugerencias button { width: 100%; text-align: left; background: none; border: 0; padding: 10px; border-radius: 8px; cursor: pointer; }
.sugerencias button:hover, .sugerencias button:focus { background: var(--borde); }
.sugerencias .sin { padding: 10px; color: var(--texto-2); }

#matchup { display: grid; gap: 12px; }
.tarjeta h2 { font-size: 15px; margin: 0 0 10px; }
.tarjeta h2 .tenue { font-weight: 400; font-size: 13px; }
.partido { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.partido .equipos { font-size: 20px; font-weight: 700; }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-size: 12px; border-radius: 999px; padding: 3px 9px; background: var(--superficie-2); border: 1px solid var(--borde); }
.badge.alerta { background: #3a2a12; border-color: #7a5420; color: #ffcf8a; }
.filas { display: grid; gap: 2px; }
.fila { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 7px 8px; border-radius: 8px; font-size: 14px; }
.fila.resaltada { background: var(--superficie-2); outline: 1px solid var(--acento); }
.fila .num { font-weight: 700; text-align: right; }
.fila .puesto { color: var(--texto-2); font-size: 12px; min-width: 64px; text-align: right; }
.nota-chica { font-size: 12px; color: var(--tenue); margin: 8px 0 0; }
.minutos { display: flex; align-items: flex-end; gap: 4px; height: 70px; margin-top: 8px; }
.minutos div { flex: 1; background: #3b4252; border-radius: 3px 3px 0 0; position: relative; }
.minutos span { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--texto-2); }
.lesiones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lesiones h3 { font-size: 13px; margin: 0 0 6px; color: var(--texto-2); }
.lesion { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.lesion b { font-weight: 600; }
.estado-les { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.estado-les.Out { background: #4a1d18; color: #ff9d8f; }
.estado-les.Doubtful { background: #4a2e18; color: #ffbf8f; }
.estado-les.Questionable { background: #4a4018; color: #ffe08f; }
.estado-les.Probable, .estado-les.Available { background: #1b3a22; color: #9be3a8; }
.lesion .motivo { color: var(--tenue); font-size: 12px; }
@media (max-width: 520px) { .lesiones { grid-template-columns: 1fr; } }

footer { text-align: center; color: var(--tenue); font-size: 12px; padding: 0 16px 20px; }

@media (max-width: 420px) {
  .dato .valor { font-size: 19px; }
}