/* ============================================================
   RED ENTRE RIOS · Sistema de Placa en Vivo — Panel Admin
   Identidad: mesa de control de cancha. Negro cálido + dorado,
   tipografía condensada de scoreboard, reglas finas como las
   líneas de una cancha, insignias numeradas como los dorsales.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --bg:        #0E0C0A;
  --bg-panel:  #17140F;
  --bg-raised: #1E1A13;
  --line:      #2C2720;
  --gold:      #C6A15B;
  --gold-hi:   #E3C17E;
  --cream:     #F1ECE3;
  --muted:     #9A9186;
  --danger:    #B23A3A;
  --danger-hi: #D6614F;
  --success:   #5A8F5E;
  --radius:    3px;
  --shadow:    0 8px 24px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:'Barlow', sans-serif;
  font-size:15px;
  line-height:1.45;
}
h1,h2,h3,.display{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--cream);
  margin:0 0 4px;
}
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:var(--gold-hi); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Layout general ---------- */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:230px;
  flex-shrink:0;
  background:var(--bg-panel);
  border-right:1px solid var(--line);
  padding:22px 0;
  display:flex;
  flex-direction:column;
}
.sidebar .brand{
  padding:0 20px 18px;
  border-bottom:1px solid var(--line);
  margin-bottom:14px;
}
.sidebar .brand .club{
  font-family:'Anton', sans-serif;
  font-size:20px;
  color:var(--gold-hi);
  letter-spacing:.03em;
}
.sidebar .brand .sub{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-top:2px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 20px;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  border-left:3px solid transparent;
}
.nav-item .badge-num{
  width:22px; height:22px;
  border-radius:50%;
  border:1.5px solid var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  flex-shrink:0;
}
.nav-item:hover{ color:var(--cream); text-decoration:none; background:rgba(198,161,91,.06); }
.nav-item.active{
  color:var(--gold-hi);
  border-left-color:var(--gold);
  background:rgba(198,161,91,.08);
}
.nav-item.active .badge-num{ border-color:var(--gold); color:var(--gold-hi); }
.sidebar-footer{
  margin-top:auto;
  padding:16px 20px 0;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}
.sidebar-footer form{ margin-top:8px; }

.main{ flex:1; padding:30px 36px 60px; max-width:1200px; }
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:2px solid var(--gold);
  padding-bottom:12px;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:12px;
}
.page-head .eyebrow{
  color:var(--gold);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
}

/* ---------- Tarjetas / paneles ---------- */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:22px;
}
.panel-title{
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

/* ---------- Formularios ---------- */
label{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:600;
  margin-bottom:5px;
}
.field{ margin-bottom:16px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media (max-width:760px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

input[type=text], input[type=number], input[type=date], input[type=password],
input[type=file], select, textarea{
  width:100%;
  background:var(--bg-raised);
  border:1px solid var(--line);
  color:var(--cream);
  padding:10px 12px;
  border-radius:var(--radius);
  font-family:'Barlow', sans-serif;
  font-size:14px;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(198,161,91,.18);
}
input[type=color]{
  width:56px; height:38px; padding:2px;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--gold);
  color:#181410;
  border:none;
  padding:10px 18px;
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-radius:var(--radius);
  cursor:pointer;
}
.btn:hover{ background:var(--gold-hi); text-decoration:none; }
.btn.secondary{
  background:transparent;
  border:1px solid var(--line);
  color:var(--cream);
}
.btn.secondary:hover{ border-color:var(--gold); color:var(--gold-hi); }
.btn.danger{ background:var(--danger); color:#fff; }
.btn.danger:hover{ background:var(--danger-hi); }
.btn.small{ padding:6px 12px; font-size:11px; }

/* ---------- Tablas ---------- */
table{ width:100%; border-collapse:collapse; }
th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  border-bottom:2px solid var(--gold);
  padding:9px 10px;
}
td{
  padding:11px 10px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
tr:hover td{ background:rgba(198,161,91,.05); }
.dorsal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  border:1.5px solid var(--gold);
  color:var(--gold-hi);
  font-family:'JetBrains Mono', monospace;
  font-weight:600;
  font-size:12px;
}
.tag{
  display:inline-block;
  padding:3px 9px;
  font-size:11px;
  border-radius:20px;
  border:1px solid var(--line);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.team-logo-mini{
  width:28px; height:28px; object-fit:cover; border-radius:50%;
  border:1px solid var(--line); vertical-align:middle;
}

/* ---------- Alertas ---------- */
.alert{
  padding:12px 16px;
  border-radius:var(--radius);
  margin-bottom:18px;
  font-size:14px;
  border-left:3px solid var(--gold);
  background:rgba(198,161,91,.08);
}
.alert.error{ border-left-color:var(--danger-hi); background:rgba(178,58,58,.12); }
.alert.success{ border-left-color:var(--success); background:rgba(90,143,94,.12); }

.empty-state{
  text-align:center;
  padding:50px 20px;
  color:var(--muted);
}
.empty-state .num{
  font-family:'Anton', sans-serif;
  font-size:40px;
  color:var(--line);
}

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% -10%, rgba(198,161,91,.10), transparent 60%),
    var(--bg);
}
.login-card{
  width:100%; max-width:380px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  padding:36px 32px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.login-card .display{ font-size:26px; margin-bottom:2px; }
.login-card .sub{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:24px; }

/* ---------- Utilidades ---------- */
.flex-between{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.muted{ color:var(--muted); }
.mt-0{ margin-top:0; }
.actions-cell{ white-space:nowrap; text-align:right; }