/* posiciones.v2.css — Dark theme, Roboto everywhere, leader highlight, zebra rows, responsive */
/* Import Roboto once (regular, medium, bold, black) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

/* Base font + dark page */
:root { --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
html, body {
  background: #0b0f1a;
  color: #e9edf3;
  font-family: var(--font-body);
}

/* Card/table container (match resultados look) */
#results .table-container{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Table */
#tbl{ width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-body); }

/* Header (sticky with red gradient) */
#tbl thead th{
  background: linear-gradient(180deg, rgba(255,70,70,.95), rgba(255,70,70,.85));
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  position: sticky; top: 0; z-index: 2;
  padding: 10px 12px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
#tbl thead th.th-left, #tbl thead th[data-k="nombre"]{ text-align: left; }

/* Body cells */
#tbl tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: var(--font-body);
}
#tbl tbody td.c { text-align: center; }
#tbl tbody td.name { text-align: left; }
#tbl tbody td.strong { font-weight: 800; }

/* Zebra stripes */
#tbl tbody tr:nth-child(odd)  td { background: rgba(255,255,255,.04); }
#tbl tbody tr:nth-child(even) td { background: rgba(255,255,255,.06); }

/* Leader highlight (Pos. 1 / mayor Total) */
#tbl tbody tr.leader td{
  background: linear-gradient(90deg, rgba(255,80,80,.55), rgba(255,80,80,.30) 45%, rgba(255,255,255,0) 100%);
  color: #fff;
}
#tbl tbody tr.leader td:first-child{
  position: relative;
  font-weight: 900;
  padding-left: 28px; /* space for trophy */
}
#tbl tbody tr.leader td:first-child::before{
  content: "";
  position: absolute;
  left: 8px;
  transform: translateY(-1px);
}

/* Responsive tweaks for phones */
@media (max-width: 520px){
  #tbl thead th, #tbl tbody td { padding: 8px 10px; }
  #results .results-toolbar{ gap: 8px; flex-wrap: wrap; }
}

/* Meta/credits */
.meta-row{ color:#aab3c1; margin: 8px 2px 10px; font-size: .9rem; }
#creditos{ text-align:center; font-size:12px; margin:18px 0 10px; }
#creditos a{ color:#9aa3ad; text-decoration:none; }