/* Atletismo · estética del HTML original (navy / turquesa / magenta, Lexend) */
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fuentes/lexend-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fuentes/lexend-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --navy:#0D1E36; --navy-2:#15304F; --navy-3:#1C3C60;
  --magenta:#FF4C86; --turquoise:#2FD9C6; --amarillo:#FFC857;
  --text:#F3F7FB; --muted:#93A9C4; --line:rgba(255,255,255,.09);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --tab:64px;
}
*{box-sizing:border-box;}
html{background:var(--navy); -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0; min-height:100vh; min-height:100dvh; background:var(--navy); color:var(--text);
  font-family:'Lexend',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none;
  padding-left:var(--sal); padding-right:var(--sar);
}
button,input,select,textarea{font:inherit; color:inherit;}
a{color:var(--turquoise);}

/* ---------- cabecera fija (como el HTML) ---------- */
header.cab{
  position:sticky; top:0; z-index:5;
  padding:calc(14px + var(--sat)) 18px 12px;
  background:linear-gradient(180deg,var(--navy) 70%,rgba(13,30,54,.94));
  border-bottom:1px solid var(--line);
}
h1{margin:0 0 2px; font-size:20px; font-weight:700; letter-spacing:.2px;}
h2{font-size:17px; font-weight:600; margin:22px 0 10px;}
.sub{color:var(--muted); font-size:13px; margin-bottom:12px;}
.datebar{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.datebar button{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  background:var(--navy-2); color:var(--text); font-size:20px; cursor:pointer;
}
.datebar button:disabled{opacity:.35;}
.datebar .day{flex:1; text-align:center; font-size:14px; font-weight:600; text-transform:capitalize;}
.stats{display:flex; align-items:baseline; gap:6px; margin-bottom:10px;}
.stats b{font-size:26px; color:var(--turquoise);}
.stats span{color:var(--muted); font-size:13px;}
.chips{display:flex; gap:8px; overflow-x:auto; margin:0 -18px 10px; padding:0 18px; scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none; padding:9px 14px; min-height:40px; border-radius:20px; border:1px solid var(--line);
  background:var(--navy-2); font-size:14px; cursor:pointer; white-space:nowrap;}
.chip.on{background:var(--turquoise); color:var(--navy); border-color:var(--turquoise); font-weight:600;}

input[type="search"],input[type="text"],input[type="password"],input[type="date"],input[type="time"],
input[type="month"],input[type="number"],input[type="tel"],select,textarea{
  width:100%; padding:12px 14px; min-height:48px; border-radius:12px; border:1px solid var(--line);
  background:var(--navy-2); color:var(--text); font-size:16px; /* 16px: iOS no hace zoom */
  outline:none; -webkit-appearance:none; appearance:none;
}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px;}
textarea{min-height:90px; resize:vertical;}
input::placeholder,textarea::placeholder{color:var(--muted);}
input:focus,select:focus,textarea:focus{border-color:var(--turquoise);}
label.campo{display:block; margin:12px 0 0; font-size:13px; color:var(--muted);}
label.campo > input,label.campo > select,label.campo > textarea{margin-top:5px;}

main{padding:6px 18px calc(var(--tab) + var(--sab) + 30px);}

/* ---------- filas de alumnos (como el HTML) ---------- */
.row{border-bottom:1px solid var(--line); padding:12px 0;}
.row-top{display:flex; align-items:center; gap:12px; cursor:pointer; min-height:48px;}
.bib{
  width:38px; height:38px; min-width:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:var(--navy);
}
.bib.a{background:var(--turquoise);}
.bib.b{background:var(--magenta);}
.bib.gris{background:var(--muted);}
.name{flex:1; min-width:0;}
.name .n{font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.name .a{font-size:12px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.marca{font-size:11px; padding:1px 7px; border-radius:8px; font-weight:600;}
.marca.med{background:rgba(255,76,134,.18); color:var(--magenta);}
.marca.falta{background:rgba(255,200,87,.18); color:var(--amarillo);}
.marca.baja{background:rgba(147,169,196,.18); color:var(--muted);}
.check{
  width:46px; height:46px; min-width:46px; border-radius:50%;
  border:2px solid rgba(255,255,255,.22); background:transparent; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.check svg{opacity:0; transition:opacity .15s ease; width:20px; height:20px;}
.check.on{background:var(--turquoise); border-color:var(--turquoise); transform:scale(1.06);}
.check.on svg{opacity:1;}
.check:disabled{opacity:.4;}
.details{display:none; font-size:14px; color:var(--muted); padding:10px 0 2px 50px;}
.details.open{display:block;}
.details .med{background:rgba(255,76,134,.12); border:1px solid rgba(255,76,134,.35); color:var(--text);
  border-radius:10px; padding:8px 10px; margin-bottom:8px; white-space:pre-wrap;}
.tel{display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 12px; margin-bottom:8px;
  border-radius:12px; background:var(--navy-2); border:1px solid var(--line); color:var(--text); text-decoration:none;}
.tel .ico{width:36px; height:36px; min-width:36px; border-radius:50%; background:var(--turquoise); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:17px;}
.tel .t1{font-size:14px; font-weight:500;}
.tel .t2{font-size:13px; color:var(--turquoise);}
.quien{font-size:12px; color:var(--muted); margin:2px 0 6px;}

.empty{text-align:center; color:var(--muted); padding:40px 0; font-size:14px;}
.banner{
  background:var(--navy-3); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:13px; color:var(--muted); margin-bottom:10px;
}
.banner.aviso{border-color:rgba(255,200,87,.45); color:var(--amarillo); cursor:pointer;}
.banner.ok{border-color:rgba(47,217,198,.4); color:var(--turquoise);}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 18px;
  border-radius:12px; border:1px solid var(--line); background:var(--navy-2); color:var(--text);
  font-size:15px; font-weight:600; cursor:pointer; text-decoration:none;}
.btn.pri{background:var(--turquoise); color:var(--navy); border-color:var(--turquoise);}
.btn.mag{background:var(--magenta); color:#fff; border-color:var(--magenta);}
.btn.ancho{width:100%;}
.btn:disabled{opacity:.5;}
.btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.btns .btn{flex:1;}

.tarjeta{background:var(--navy-2); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px;}
.tarjeta h3{margin:0 0 6px; font-size:15px;}
.tarjeta .mut{color:var(--muted); font-size:13px;}
.item{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); min-height:56px; cursor:pointer;}
.item:last-child{border-bottom:0;}
.item .mut{color:var(--muted); font-size:12px;}
.flecha{color:var(--muted); font-size:20px;}
.dias{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
.dias label{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:var(--navy); cursor:pointer; font-weight:600;}
.dias input{display:none;}
.dias label.on{background:var(--turquoise); color:var(--navy); border-color:var(--turquoise);}
.casilla{display:flex; align-items:center; gap:10px; min-height:44px; font-size:15px; cursor:pointer;}
.casilla input{width:22px; height:22px; accent-color:var(--turquoise);}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.clave-temp{font-size:22px; font-weight:700; letter-spacing:1px; color:var(--turquoise); user-select:all; -webkit-user-select:all;
  background:var(--navy); border-radius:10px; padding:10px; text-align:center; margin:8px 0;}

/* tablas (informe y registro) */
.tabla-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -18px; padding:0 18px;}
table{border-collapse:collapse; font-size:12.5px; min-width:100%;}
th,td{padding:7px 6px; border-bottom:1px solid var(--line); text-align:center; white-space:nowrap;}
th{color:var(--muted); font-weight:500; position:sticky; top:0; background:var(--navy);}
td.nom{text-align:left; max-width:170px; overflow:hidden; text-overflow:ellipsis;}
td.P{color:var(--turquoise); font-weight:700;}
td.F{color:var(--magenta);}
.reg{padding:10px 0; border-bottom:1px solid var(--line); font-size:13px;}
.reg .r1{display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px;}
.reg .r2{margin-top:3px;}
.reg .r3{color:var(--muted); margin-top:3px; word-break:break-word;}

/* ---------- barra de abajo ---------- */
nav.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:flex; background:rgba(13,30,54,.97); border-top:1px solid var(--line);
  padding:0 var(--sar) var(--sab) var(--sal);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
nav.tabs a{flex:1; height:var(--tab); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--muted); text-decoration:none; font-size:11px; position:relative;}
nav.tabs a .i{font-size:21px; line-height:1;}
nav.tabs a.on{color:var(--turquoise);}
nav.tabs .punto{position:absolute; top:9px; left:calc(50% + 8px); min-width:17px; height:17px; border-radius:9px;
  background:var(--magenta); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px;}

/* login */
.login{max-width:380px; margin:0 auto; padding:calc(40px + var(--sat)) 22px calc(30px + var(--sab));}
.login img{width:84px; height:84px; border-radius:20px; display:block; margin:0 auto 14px;}
.login h1{text-align:center;}
.login .sub{text-align:center;}
.error{color:var(--magenta); font-size:14px; margin-top:10px; min-height:20px;}

#toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--tab) + var(--sab) + 14px); z-index:20;
  background:var(--navy-3); border:1px solid var(--line); color:var(--text); padding:10px 16px; border-radius:12px;
  font-size:14px; opacity:0; transition:opacity .2s; pointer-events:none; max-width:90vw; text-align:center;}
#toast.on{opacity:1;}
.oculto{display:none !important;}
.dos > *{min-width:0;}
input,select,textarea{min-width:0; max-width:100%;}
input[type="date"],input[type="time"],input[type="month"]{display:block;}
.chip.otro{opacity:.7; border-style:dashed;}
.chip.otro.on{opacity:1; border-style:solid;}
.marca.otro{background:rgba(47,217,198,.16); color:var(--turquoise);}
.check.fuera{border-color:var(--turquoise); border-style:dashed;}
details.seccion{margin-bottom:10px;}
details.seccion > summary{list-style:none; cursor:pointer; min-height:52px; display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-radius:12px; background:var(--navy-3); border:1px solid var(--line); font-size:16px; font-weight:600;}
details.seccion > summary::-webkit-details-marker, details.plegable > summary::-webkit-details-marker{display:none;}
details.seccion > summary::before, details.plegable > summary::before{content:'›'; display:inline-block; transition:transform .15s; color:var(--turquoise); font-size:20px; width:14px;}
details[open].seccion > summary::before, details[open].plegable > summary::before{transform:rotate(90deg);}
details.seccion[open] > summary{margin-bottom:10px;}
details.plegable{padding:0 14px;}
details.plegable > summary{list-style:none; cursor:pointer; min-height:52px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 0;}
details.plegable[open]{padding-bottom:14px;}