/* =========================================================
   APP DEL EQUIPO CSC-CR
   Pensada para el telefono primero.
   ========================================================= */
:root{
  --navy-deep:#0a0e1a; --navy-dark:#111827; --navy-mid:#1e293b;
  --navy-light:#334155;
  --accent:#3b82f6; --accent-glow:#60a5fa;
  --green:#10b981; --yellow:#f59e0b; --red:#ef4444;
  --text-bright:#f8fafc; --text-mute:#cbd5e1; --text-dim:#94a3b8;
  --border:#1e293b; --border-hot:#334155;
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--navy-deep); color:var(--text-bright);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:78px;               /* espacio para el menu de abajo */
}
a{color:var(--accent-glow); text-decoration:none;}
.wrap{max-width:760px; margin:0 auto; padding:0 14px;}

/* ---------- barra de arriba ---------- */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px; background:var(--navy-dark);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.topbar img{height:38px; width:auto;}
.topbar .who{margin-left:auto; text-align:right; line-height:1.2;}
.topbar .who .n{font-size:.85rem; font-weight:600;}
.topbar .who .r{font-size:.72rem; color:var(--text-dim);}
.topbar .out{
  margin-left:10px; color:var(--text-dim); font-size:1.15rem;
  padding:6px 9px; border:1px solid var(--border-hot); border-radius:10px;
}

/* ---------- nivel de alerta ---------- */
.nivel{
  margin:14px 0; padding:16px 18px; border-radius:var(--radius);
  border:1px solid var(--border-hot);
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  position:relative; overflow:hidden;
}
.nivel::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--nivel-color, var(--green));
}
.nivel .lbl{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:4px;
}
.nivel .nombre{
  font-size:1.5rem; font-weight:800; letter-spacing:.01em;
  color:var(--nivel-color, var(--green));
  display:flex; align-items:center; gap:10px;
}
.nivel .punto{
  width:12px; height:12px; border-radius:50%;
  background:var(--nivel-color, var(--green));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--nivel-color, #10b981) 25%, transparent);
}
.nivel .det{margin-top:8px; font-size:.88rem; color:var(--text-mute);}
.nivel .meta{margin-top:6px; font-size:.78rem; color:var(--text-dim);}

/* ---------- paneles ---------- */
.card{
  background:var(--navy-dark); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:14px; overflow:hidden;
}
.card > h2{
  margin:0; padding:13px 16px; font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.card .body{padding:14px 16px;}
.vacio{padding:24px 16px; text-align:center; color:var(--text-dim); font-size:.9rem;}

/* ---------- botones de mi estado ---------- */
.estados{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.estados button{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:15px 8px; border-radius:12px; cursor:pointer;
  border:1px solid var(--border-hot); background:var(--navy-mid);
  color:var(--text-mute); font-size:.85rem; font-weight:600;
  font-family:inherit; transition:transform .08s ease;
}
.estados button .em{font-size:1.5rem; line-height:1;}
.estados button:active{transform:scale(.97);}
.estados button.on{
  color:#fff; border-color:var(--c);
  background:color-mix(in srgb, var(--c) 22%, var(--navy-mid));
  box-shadow:0 0 0 1px var(--c) inset;
}

/* ---------- lista de gente ---------- */
.gente{display:flex; flex-direction:column;}
.p{
  display:flex; align-items:center; gap:11px;
  padding:11px 16px; border-bottom:1px solid var(--border);
}
.p:last-child{border-bottom:none;}
.p .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
.p .nom{font-weight:600; font-size:.93rem;}
.p .sub{font-size:.75rem; color:var(--text-dim);}
.p .est{margin-left:auto; font-size:.8rem; text-align:right; white-space:nowrap;}
.p.yo{background:rgba(59,130,246,.10);}

/* ---------- resumen de disponibilidad ---------- */
.resumen{display:flex; gap:8px; flex-wrap:wrap; padding:14px 16px 4px;}
.pill{
  padding:5px 11px; border-radius:999px; font-size:.78rem; font-weight:700;
  border:1px solid var(--border-hot); background:var(--navy-mid);
}

/* ---------- entrenos ---------- */
.ent{padding:14px 16px; border-bottom:1px solid var(--border);}
.ent:last-child{border-bottom:none;}
.ent .top{display:flex; align-items:flex-start; gap:11px;}
.ent .fecha{
  flex:0 0 auto; width:54px; text-align:center; border-radius:10px;
  background:var(--navy-mid); border:1px solid var(--border-hot); padding:6px 0;
}
.ent .fecha .d{font-size:1.25rem; font-weight:800; line-height:1;}
.ent .fecha .m{font-size:.66rem; text-transform:uppercase; color:var(--text-dim);
               letter-spacing:.08em; margin-top:2px;}
.ent .tit{font-weight:700; font-size:.98rem;}
.ent .sub{font-size:.8rem; color:var(--text-dim); margin-top:2px;}
.tag{
  display:inline-block; padding:2px 8px; border-radius:6px; font-size:.68rem;
  font-weight:800; letter-spacing:.06em; margin-right:6px;
  background:var(--tc,#334155); color:#fff;
}
.ent .acciones{display:flex; gap:8px; margin-top:11px;}
.ent .acciones button{
  flex:1; padding:9px; border-radius:10px; cursor:pointer; font-family:inherit;
  border:1px solid var(--border-hot); background:var(--navy-mid);
  color:var(--text-mute); font-size:.85rem; font-weight:600;
}
.ent .acciones button.si.on{background:rgba(16,185,129,.22); border-color:var(--green); color:#fff;}
.ent .acciones button.no.on{background:rgba(239,68,68,.22); border-color:var(--red); color:#fff;}
.ent .conteo{margin-top:8px; font-size:.76rem; color:var(--text-dim);}

/* ---------- porcentajes ---------- */
.pct{display:flex; align-items:center; gap:10px; padding:11px 16px;
     border-bottom:1px solid var(--border);}
.pct:last-child{border-bottom:none;}
.pct .bar{flex:1; height:8px; border-radius:999px; background:var(--navy-mid); overflow:hidden;}
.pct .bar span{display:block; height:100%; border-radius:999px;}
.pct .num{width:46px; text-align:right; font-weight:800; font-size:.9rem;}
.pct .quien{width:88px; font-size:.85rem; font-weight:600;}

/* ---------- noticias ---------- */
.not{padding:14px 16px; border-bottom:1px solid var(--border);}
.not:last-child{border-bottom:none;}
.not .tit{font-weight:700; font-size:1rem;}
.not .meta{font-size:.74rem; color:var(--text-dim); margin:3px 0 8px;}
.not .txt{font-size:.9rem; color:var(--text-mute); white-space:pre-line;}
.not.fija{background:rgba(59,130,246,.07);}

/* ---------- menu de abajo ---------- */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:var(--navy-dark);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs a{
  flex:1; text-align:center; padding:10px 4px 12px;
  color:var(--text-dim); font-size:.68rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.tabs a .ic{display:block; font-size:1.25rem; margin-bottom:3px;}
.tabs a.on{color:var(--accent-glow);}

/* ---------- avisos ---------- */
.flash{
  margin:12px 0; padding:11px 14px; border-radius:12px; font-size:.88rem;
  background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.45);
  color:#a7f3d0;
}
.flash.mal{background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.45); color:#fecaca;}

@media (min-width:560px){
  .estados{grid-template-columns:repeat(4,1fr);}
}

/* ===== v2 pantalla unica ===== */
body{ padding-bottom:28px; }
.tabs{ display:none !important; }

.grande{ display:flex; align-items:baseline; gap:10px; }
.grande .n{ font-size:2.4rem; font-weight:800; line-height:1; }
.grande .t{ font-size:.85rem; color:var(--text-dim); }

.codigos{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.cod{
  background:rgba(148,163,184,.10);
  border:1px solid var(--border-hot);
  background:color-mix(in srgb, var(--c) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  color:var(--c);
  border-radius:8px; padding:6px 11px;
  font-size:.95rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}

details.plega{
  margin:0 0 12px; background:var(--navy-dark);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
details.plega > summary{
  display:flex; align-items:center; gap:10px; padding:15px 14px;
  cursor:pointer; list-style:none; user-select:none;
}
details.plega > summary::-webkit-details-marker{ display:none; }
details.plega .ic{ font-size:1.05rem; }
details.plega .tit{ font-size:.95rem; font-weight:700; color:var(--text-bright); }
details.plega .nota{ margin-left:auto; font-size:.78rem; color:var(--text-dim); }
details.plega .chev{ color:var(--text-dim); font-size:.8rem; transition:transform .18s ease; }
details.plega[open] .chev{ transform:rotate(90deg); }
details.plega .cont{ border-top:1px solid var(--border); padding:4px 0 10px; }

.sub-tit{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim); padding:16px 16px 4px; border-top:1px solid var(--border); margin-top:10px;
}
.nota-chica{ padding:10px 16px 4px; font-size:.75rem; color:var(--text-dim); line-height:1.5; }
.pie{ text-align:center; font-size:.7rem; color:#475569; padding:6px 0 4px; letter-spacing:.1em; }

/* ===== v3 Face ID ===== */

.boton-cara{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px; border-radius:12px; border:1px solid var(--accent);
  background:rgba(59,130,246,.14); color:#dbeafe;
  font-size:1rem; font-weight:700; font-family:inherit; cursor:pointer;
}
.boton-cara:disabled{ opacity:.5; }
.boton-cara .cara{ font-size:1.15rem; }
.boton-cara.chico{ padding:11px; font-size:.92rem; }

.o-bien{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 14px; color:var(--text-dim); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.o-bien::before, .o-bien::after{
  content:''; flex:1; height:1px; background:var(--border-hot);
}

.pk-pie{ padding:12px 16px 4px; }

.apara{
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-top:1px solid var(--border);
}
.apara .nom{ font-size:.92rem; color:var(--text-bright); font-weight:600; }
.apara .fec{ margin-left:auto; font-size:.72rem; color:var(--text-dim); }
.apara .quitar{
  background:transparent; border:1px solid var(--border-hot); color:var(--text-dim);
  border-radius:8px; padding:5px 10px; font-size:.75rem; font-family:inherit; cursor:pointer;
}
.apara .quitar:hover{ border-color:var(--red); color:#fca5a5; }

/* pantalla de bloqueo */
body.pantalla-bloqueo{
  padding-bottom:0; display:flex; align-items:center; min-height:100vh;
}
.caja-bloqueo{
  max-width:380px; margin:0 auto; padding:26px 22px 30px; width:100%; text-align:center;
}
.caja-bloqueo .logo{ display:block; margin:0 auto 16px; height:88px; }
.caja-bloqueo h1{ font-size:1.4rem; margin:0; letter-spacing:.02em; }
.quien-bloqueo{
  color:var(--text-dim); font-size:.82rem; margin:4px 0 26px;
  letter-spacing:.1em; text-transform:uppercase;
}
.salir-link{
  display:inline-block; margin-top:18px; color:var(--text-dim);
  font-size:.82rem; text-decoration:none; border-bottom:1px solid var(--border-hot);
  padding-bottom:2px;
}
.flash.bien{
  background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.45); color:#a7f3d0;
}