/* Panel de administración de Virtual Padel Tour.
   Hereda los colores de web/vpt/estilo.css, que a su vez salen de
   VPTPalette.cs, para que esto no parezca de otro proyecto. */

:root {
  --fondo: #1C1B19;
  --fondo-alto: #23221F;
  --tarjeta: #2A2926;
  --borde: rgba(244, 241, 236, 0.10);
  --cian: #43D4EB;
  --lima: #D8E86E;
  --rojo: #E8736E;
  --texto: #F4F1EC;
  --texto-suave: #A8A39B;
  --texto-tenue: #7D786F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.suave { color: var(--texto-suave); }
.tenue { color: var(--texto-tenue); font-size: .88rem; }
[hidden] { display: none !important; }

header {
  border-bottom: 1px solid var(--borde);
  background: var(--fondo-alto);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
header .marca { font-weight: 700; }
header .hueco { flex: 1; }

main { max-width: 1040px; margin: 0 auto; padding: 24px 20px 80px; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

button {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--borde);
  background: var(--fondo-alto);
  color: var(--texto);
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--cian); }
button:disabled { opacity: .45; cursor: default; }
button.principal { background: var(--cian); color: #10312F; border-color: transparent; }
button.peligro { color: var(--rojo); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], select {
  font: inherit;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 9px 12px;
  width: 100%;
}
label { display: block; margin-bottom: 12px; }
label span { display: block; font-size: .85rem; color: var(--texto-suave); margin-bottom: 4px; }

.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Interruptor general ────────────────────────────────────────────── */

.mando {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--borde); background: var(--fondo-alto);
}
.mando.encendido { border-color: var(--lima); }
.mando b { display: block; }

/* ── Listas de colecciones ──────────────────────────────────────────── */

.lista {
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--fondo);
}
.lista .item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--borde);
}
.lista .item:last-child { border-bottom: none; }
.lista .item .nombre { flex: 1; }
.lista .item .codigo { color: var(--texto-tenue); font-size: .82rem; font-variant-numeric: tabular-nums; }
.lista .item.retirada { background: rgba(232, 115, 110, .07); }
.lista .item.retirada .nombre { text-decoration: line-through; color: var(--texto-suave); }

.gama {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borde);
  color: var(--texto-suave);
}
.gama.Limitada { color: var(--lima); }
.gama.Especial { color: var(--cian); }

/* ── Huecos de las destacadas y los sueltos ─────────────────────────── */

.huecos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.hueco { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--fondo); }
.hueco .titulo { font-size: .78rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .05em; }

/* ── Avisos ─────────────────────────────────────────────────────────── */

.aviso { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--borde); }
.aviso.mal { border-color: var(--rojo); color: var(--rojo); }
.aviso.bien { border-color: var(--lima); color: var(--lima); }

.entrada { max-width: 380px; margin: 60px auto; }

/* ── Tabla de jugadores ─────────────────────────────────────────────── */

nav { display: flex; gap: 8px; }

.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-tenue); font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; background: var(--fondo);
}
.tabla th.num, .tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--fondo-alto); }
.tabla tbody tr:last-child td { border-bottom: none; }