/* Panel de atletas — yuyu.com.mx */

:root{
  --fondo:#0f1115; --caja:#171a21; --borde:#262b36; --linea:#20242e;
  --texto:#e8e8ea; --suave:#8b93a3; --tenue:#5f6775;
  --azul:#4a7cff; --verde:#22b07d; --naranja:#e8912a; --rojo:#e05252;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom,0);
}
a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------- barra */
.barra{
  position:sticky; top:0; z-index:10; background:#12151c;
  border-bottom:1px solid var(--borde);
  padding-top:env(safe-area-inset-top,0);
}
.barra-in{
  max-width:1180px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.marca{font-weight:650; font-size:15px; line-height:1.2}
.marca span{display:block; font-size:11px; color:var(--tenue); font-weight:400}
.barra-der{display:flex; align-items:center; gap:12px}
.quien{color:var(--suave); font-size:13px}

.envoltorio{max-width:1180px; margin:0 auto; padding:24px 16px}
.pie{
  max-width:1180px; margin:0 auto; padding:28px 16px 40px;
  color:var(--tenue); font-size:12px; text-align:center;
}

/* --------------------------------------------------------- botones */
button,.boton{
  background:var(--azul); color:#fff; border:0; border-radius:8px;
  padding:9px 16px; font:inherit; font-weight:600; cursor:pointer;
  display:inline-block;
}
button:hover,.boton:hover{background:#3d6ae8}
.boton-sec{
  border:1px solid var(--borde); border-radius:8px; padding:8px 14px;
  color:var(--suave); font-size:13px;
}
.boton-sec:hover{color:var(--texto); border-color:#39404f}

input,select{
  background:#0f1115; color:var(--texto); border:1px solid #2d3340;
  border-radius:8px; padding:9px 11px; font:inherit; min-width:0;
}
input:focus,select:focus{outline:2px solid var(--azul); outline-offset:1px}

/* ----------------------------------------------------------- login */
.caja-login{
  width:min(92vw,380px); margin:14vh auto 0; padding:30px;
  background:var(--caja); border:1px solid var(--borde); border-radius:14px;
}
.caja-login h1{margin:0 0 2px; font-size:19px}
.caja-login .sub{margin:0 0 22px; color:var(--tenue); font-size:13px}
.caja-login label{display:block; font-size:13px; color:var(--suave); margin:14px 0 6px}
.caja-login input{width:100%}
.caja-login button{width:100%; margin-top:18px; padding:11px}
.error{
  margin:0 0 14px; padding:10px 12px; border-radius:8px;
  background:#3a1d1d; border:1px solid #5c2b2b; color:#ffb4b4; font-size:13px;
}

/* --------------------------------------------------------- resumen */
.resumen{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px}
.dato{
  flex:1 1 120px; background:var(--caja); border:1px solid var(--borde);
  border-radius:10px; padding:12px 14px;
}
.dato b{display:block; font-size:22px; line-height:1.1}
.dato span{font-size:12px; color:var(--suave)}
.dato.alerta b{color:var(--naranja)}
.dato.aviso-col b{color:var(--rojo)}

/* --------------------------------------------------------- filtros */
.filtros{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.filtros input[type=search]{flex:1 1 220px}
.filtros .num{width:120px; flex:0 0 auto}
.cuenta{margin:0 0 14px; color:var(--tenue); font-size:13px}

/* -------------------------------------------------------- rejilla */
.rejilla{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.tarjeta{
  background:var(--caja); border:1px solid var(--borde); border-radius:12px;
  padding:14px; display:block; transition:border-color .12s,transform .12s;
}
.tarjeta:hover{border-color:#39404f; transform:translateY(-1px)}
.t-cab{display:flex; gap:10px; align-items:flex-start}
.t-cab h2{margin:0; font-size:15px; font-weight:600; line-height:1.25}
.t-sub{margin:2px 0 0; font-size:12px; color:var(--suave)}
.punto{
  width:9px; height:9px; border-radius:50%; background:var(--tenue);
  margin-top:6px; flex:0 0 auto;
}
.punto.verde{background:var(--verde)}
.punto.naranja{background:var(--naranja)}
.punto.rojo{background:var(--rojo)}

.t-datos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin:12px 0 10px; padding-top:10px; border-top:1px solid var(--linea);
}
.t-datos b{display:block; font-size:15px; font-variant-numeric:tabular-nums}
.t-datos span{font-size:10px; color:var(--tenue); letter-spacing:.04em}
.t-datos .malo b{color:var(--naranja)}

.t-lista{
  display:grid; grid-template-columns:auto 1fr; gap:4px 12px;
  margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--linea);
  font-size:12px;
}
.t-lista dt{color:var(--tenue)}
.t-lista dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.t-lista .correo{
  font-variant-numeric:normal; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; direction:rtl;
}
.t-lista .cumple-cerca{color:#5fd5a8}
.t-lista .cumple-hoy{
  color:#0f1115; background:var(--verde); font-weight:700;
  border-radius:20px; padding:1px 9px; display:inline-block;
}

.t-pie{margin:0; font-size:12px; color:var(--tenue)}

/* ----------------------------------------------------------- ficha */
.volver{margin:0 0 14px; font-size:13px}
.volver a{color:var(--suave)}
.volver a:hover{color:var(--texto)}

.cabecera{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  align-items:flex-start; margin-bottom:20px;
}
.cabecera h1{margin:0; font-size:23px}
.meta{margin:4px 0 0; color:var(--suave); font-size:13px}
.etiquetas{margin:10px 0 0; display:flex; gap:6px; flex-wrap:wrap}
.etq{
  background:#1f2530; border:1px solid var(--borde); border-radius:20px;
  padding:2px 10px; font-size:11px; color:var(--suave);
}
.estado-caja{text-align:right}
.chip{
  display:inline-block; border-radius:20px; padding:4px 12px;
  font-size:12px; font-weight:600;
}
.chip.verde{background:#12332a; color:#5fd5a8; border:1px solid #1d4d3d}
.chip.naranja{background:#3a2a13; color:#f0b35f; border:1px solid #5c431e}
.chip.rojo{background:#3a1d1d; color:#ffb4b4; border:1px solid #5c2b2b}
.frescura{margin:8px 0 0; font-size:11px; color:var(--tenue)}

.bloques{
  display:grid; gap:12px; margin-bottom:12px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.bloque,.panel{
  background:var(--caja); border:1px solid var(--borde); border-radius:12px;
  padding:16px;
}
.panel{margin-bottom:12px}
.bloque h3,.panel h3{
  margin:0 0 12px; font-size:12px; font-weight:650; color:var(--suave);
  letter-spacing:.06em; text-transform:uppercase;
}
dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px}
dt{color:var(--suave); font-size:13px}
dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.malo{color:var(--naranja)}

/* ---------------------------------------------------------- tablas */
.tabla{width:100%; border-collapse:collapse; font-size:13px; margin-top:4px}
.tabla th{
  text-align:left; font-weight:600; color:var(--suave); font-size:11px;
  text-transform:uppercase; letter-spacing:.05em;
  padding:6px 8px; border-bottom:1px solid var(--borde);
}
.tabla td{
  padding:7px 8px; border-bottom:1px solid var(--linea);
  font-variant-numeric:tabular-nums;
}
.tabla tr:last-child td{border-bottom:0}
.tabla .nombre{
  font-variant-numeric:normal; max-width:220px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.panel{overflow-x:auto}

/* --------------------------------------------------------- barras */
.barras{
  display:flex; align-items:flex-end; gap:6px; height:150px;
  margin:6px 0 18px; padding-bottom:26px; position:relative;
}
.barra{flex:1; height:100%; display:flex; flex-direction:column;
       justify-content:flex-end; align-items:center; position:relative; min-width:0}
.col{width:100%; background:var(--azul); border-radius:4px 4px 0 0; min-height:2px}
.val{position:absolute; top:-2px; font-size:10px; color:var(--suave)}
.eje{position:absolute; bottom:-22px; font-size:10px; color:var(--tenue)}

/* ---------------------------------------------------------- varios */
.aviso{
  max-width:520px; margin:12vh auto 0; text-align:center;
  background:var(--caja); border:1px solid var(--borde);
  border-radius:14px; padding:32px;
}
.aviso h1{margin:0 0 8px; font-size:20px}
.detalle{
  text-align:left; background:#0f1115; border:1px solid var(--borde);
  border-radius:8px; padding:10px; font-size:12px; overflow-x:auto;
}
.vacio{color:var(--tenue); font-size:13px; margin:0}

@media (max-width:520px){
  .t-datos{grid-template-columns:repeat(2,1fr); gap:10px}
  .cabecera{flex-direction:column}
  .estado-caja{text-align:left}
  .barras{height:120px}
  .eje{display:none}
}