@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,900&display=swap');

/* Design system de 1950foto aplicado al panel de la base de jugadores.
   Tema "carbón" (superficie de trabajo), celeste como única voz de marca,
   Fraunces 900 solo en titulares/cifras, es-UY. */
:root {
  --fondo:#101418; --superficie:#14181C; --superficie-alt:#232B33;
  --texto:#F5F7F8; --texto-sec:#9DB0BC; --borde:#232B33; --borde-fuerte:#2E3841;
  --acento:#A5DDF3; --acento-hover:#7CC5E8; --acento-ink:#0C2E40;
  --verde:#2F7A45; --rojo:#E24B4A;
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:14px; line-height:1.5;
}
h1,h2,.fraunces { font-family:'Fraunces',Georgia,serif; font-weight:900; letter-spacing:-.01em; }
h1 { font-size:26px; margin:0 0 4px; }
h2 { font-size:17px; margin:24px 0 10px; }
a { color:var(--acento); text-decoration:none; }
a:hover { text-decoration:underline; }

.topbar {
  display:flex; align-items:center; gap:16px;
  padding:14px 22px; background:var(--superficie);
  border-bottom:1px solid var(--borde); position:sticky; top:0; z-index:5;
}
.topbar .brand { font-family:'Fraunces',Georgia,serif; font-weight:900; font-size:16px; color:var(--texto); }
.topbar .brand small { display:block; font-family:inherit; font-weight:400; font-size:11px; color:var(--texto-sec); letter-spacing:0; }
.topbar .spacer { flex:1; }
.topbar .lock { color:var(--acento); font-size:12px; border:1px solid var(--borde-fuerte); border-radius:20px; padding:3px 10px; }

.wrap { max-width:1000px; margin:0 auto; padding:24px 22px 80px; }
.muted { color:var(--texto-sec); font-size:12px; }

table { border-collapse:collapse; width:100%; margin-top:14px; }
th,td { text-align:left; padding:9px 12px; font-size:13px; border-bottom:1px solid var(--borde); }
th { color:var(--texto-sec); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
tbody tr:hover { background:var(--superficie); }

.badge { display:inline-block; padding:1px 8px; border-radius:20px; font-size:11px; background:var(--superficie-alt); color:var(--texto-sec); }
.badge.on { background:var(--acento); color:var(--acento-ink); font-weight:600; }

.btn { background:var(--acento); color:var(--acento-ink); border:none; border-radius:8px; padding:9px 16px; font-weight:600; font-size:13px; cursor:pointer; }
.btn:hover { background:var(--acento-hover); }
.btn-ghost { background:transparent; color:var(--texto-sec); border:1px solid var(--borde-fuerte); }
.btn-ghost:hover { color:var(--texto); }

.input, .select, textarea.input {
  background:var(--superficie-alt); color:var(--texto);
  border:1px solid var(--borde-fuerte); border-radius:8px; padding:9px 11px; font-size:14px; width:100%;
}
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:16px 0; }
.toolbar .input { width:auto; min-width:240px; }

.card { background:var(--superficie); border:1px solid var(--borde); border-radius:14px; padding:18px 20px; margin-bottom:16px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.field label { display:block; font-size:12px; color:var(--texto-sec); margin-bottom:5px; }
.field { margin-bottom:12px; }
.kv { display:flex; flex-wrap:wrap; gap:6px 20px; color:var(--texto-sec); font-size:13px; }
.kv b { color:var(--texto); font-weight:600; }
.ok { color:var(--verde); } .err { color:var(--rojo); }

.login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login .card { width:100%; max-width:360px; }

/* Personas agrupadas por club — tarjetas altas con la foto a lo alto. */
.person-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); gap:10px; }
.pcard { display:flex; align-items:stretch; min-height:98px; background:var(--superficie); border:1px solid var(--borde); border-radius:12px; overflow:hidden; text-decoration:none; color:var(--texto); transition:border-color .15s ease, transform .15s ease, background .15s ease; }
.pcard:hover { border-color:var(--acento); transform:translateY(-2px); background:#171C21; }
.pcard:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }
.pcard .avatar { position:relative; width:84px; flex:none; background:var(--superficie-alt); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pcard .avatar span { font-family:'Fraunces',Georgia,serif; font-weight:900; font-size:22px; color:var(--texto-sec); }
.pcard .avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.pcard .grow { flex:1; min-width:0; padding:10px 12px; display:flex; flex-direction:column; }
.pcard .name { font-family:'Fraunces',Georgia,serif; font-weight:900; font-size:15px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard .sub { color:var(--texto-sec); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard .prow { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; }
.pcard .age { font-family:'Fraunces',Georgia,serif; font-weight:900; font-size:17px; color:var(--texto); white-space:nowrap; }
.pcard .age small { font-family:inherit; font-weight:900; font-size:11px; color:var(--texto-sec); }
.pcard .refline { margin-top:7px; font-size:11.5px; }
.ref.on { color:var(--acento); font-weight:600; }
.ref.off { color:var(--texto-sec); }

/* Grupos por club (replegables con <details>) */
.cgroup { margin-top:22px; }
.ghead { display:flex; align-items:center; gap:12px; cursor:pointer; padding:9px 4px; list-style:none; border-bottom:1px solid var(--borde-fuerte); }
.ghead::-webkit-details-marker { display:none; }
.ghead .crest { width:32px; height:32px; position:relative; border-radius:7px; background:var(--superficie-alt); flex:none; overflow:hidden; }
.ghead .crest img { position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:contain; }
.ghead .gname { font-family:'Fraunces',Georgia,serif; font-weight:900; font-size:19px; }
.ghead .gcount { color:var(--texto-sec); font-size:13px; }
.ghead .gchev { margin-left:auto; color:var(--texto-sec); font-size:12px; transition:transform .15s ease; }
details[open] > .ghead .gchev { transform:rotate(180deg); }
.gbody { padding-top:14px; }
.subdiv { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-sec); margin:16px 0 10px; }

@media (max-width:640px){ .grid2, .person-grid { grid-template-columns:1fr; } }