:root{
  --bg:#0d1017; --card:#161a23; --card2:#151a25; --line:#252b38; --txt:#e8ecf3; --dim:#93a0b5;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --wa:#25d366; --brand:#3b82f6;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1000px 520px at 20% -10%, #1b2233, #0d1017 60%);
  color:var(--txt); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.4;
}
a{color:var(--brand); text-decoration:none}
.env{max-width:680px; margin:0 auto; padding:14px 14px 90px; min-height:100%}

/* cabecera */
.cab{display:flex; align-items:center; gap:10px; margin:6px 0 14px}
.cab .logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(180deg,#34d970,#17a34a); color:#04120a; font-weight:900; font-size:18px}
.cab .quien{flex:1; min-width:0}
.cab .quien b{display:block; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cab .quien span{font-size:12px; color:var(--dim)}
.cab a.salir{font-size:12.5px; color:var(--dim); border:1px solid var(--line); padding:8px 12px; border-radius:10px}

/* tarjetas */
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; margin-bottom:13px}
.card h2{font-size:15px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim)}
.card.pad0{padding:0; overflow:hidden}

/* avisos */
.aviso{border-radius:12px; padding:11px 13px; margin-bottom:12px; font-size:14px; border:1px solid}
.aviso.ok{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4); color:#bdffd4}
.aviso.mal{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:#ffd0d0}

/* botones */
.btn{border:0; border-radius:14px; padding:15px; font-size:16px; font-weight:800; color:#04120a;
  background:linear-gradient(180deg,#34d970,#17a34a); width:100%; letter-spacing:.02em; cursor:pointer}
.btn:disabled{opacity:.45}
.btn.azul{background:linear-gradient(180deg,#60a5fa,#2563eb); color:#04101f}
.btn.rojo{background:linear-gradient(180deg,#f87171,#dc2626); color:#1b0505}
.btn.gris{background:#1d2331; color:var(--txt); border:1px solid var(--line)}
.btn.mini{padding:9px 13px; font-size:13px; width:auto; border-radius:10px}
.fila-btn{display:flex; gap:9px; flex-wrap:wrap}

/* marca de la app */
.marca{text-align:center; margin:14px 0 18px}
.marca .t{font-size:26px; font-weight:900; letter-spacing:.02em}
.marca small{display:block; font-size:11px; font-weight:700; color:var(--dim); letter-spacing:.18em; margin-top:5px}

/* reloj */
.reloj{text-align:center; margin:4px 0 6px}
.reloj b{display:block; font-size:46px; font-weight:900; letter-spacing:.01em; line-height:1.05}
.reloj span{font-size:12.5px; color:var(--dim); font-weight:700; letter-spacing:.08em}

/* campos */
.campo{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:11px 13px; font-size:15px; color:var(--txt); width:100%}
label.eti{display:block; font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.07em; margin:12px 0 5px}
input.campo[type=time],input.campo[type=date]{font-size:16px}

/* nombres para entrar */
.nombres{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.nombre{background:var(--card2); border:1.5px solid var(--line); border-radius:14px; padding:16px 10px; text-align:center;
  font-weight:800; font-size:15px; cursor:pointer; color:var(--txt)}
.nombre.sel{border-color:var(--ok); background:rgba(34,197,94,.12)}

/* teclado del PIN */
.pin-puntos{display:flex; gap:12px; justify-content:center; margin:16px 0}
.pin-puntos i{width:16px; height:16px; border-radius:50%; background:#222a39; display:block}
.pin-puntos i.on{background:var(--ok)}
.teclado{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:270px; margin:0 auto}
.teclado button{background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:14px;
  padding:16px 0; font-size:22px; font-weight:800; cursor:pointer}
.teclado button:active{background:#202838}

/* camara */
.camara{position:relative; width:100%; aspect-ratio:3/4; max-height:52vh; background:#0a0d13; border:1.5px dashed #33405a;
  border-radius:18px; overflow:hidden; display:grid; place-items:center; margin-bottom:12px}
.camara video,.camara img,.camara canvas{width:100%; height:100%; object-fit:cover; display:block}
.camara .pista{color:var(--dim); font-size:13px; text-align:center; padding:18px}

/* estado */
.estado{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim); margin:8px 0}
.estado.aviso{background:rgba(255,180,137,.12); border:1px solid rgba(255,180,137,.45); border-radius:12px;
  padding:12px 13px; color:#ffe0c4; font-size:13.5px; line-height:1.45;
  flex-direction:column; align-items:flex-start; gap:6px}
.estado.falla{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.45); border-radius:12px;
  padding:12px 13px; color:#ffd0d0; font-size:13.5px; line-height:1.45;
  flex-direction:column; align-items:flex-start; gap:6px}
.punto{width:9px; height:9px; border-radius:50%; background:var(--bad); flex:none}
.punto.ok{background:var(--ok)}
.punto.mid{background:var(--warn)}

/* listas */
.lis{display:flex; flex-direction:column}
.item{display:flex; align-items:center; gap:11px; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--txt)}
.item:last-child{border-bottom:0}
.item .avatar{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:14px;
  background:#202838; color:var(--dim); flex:none}
.item .avatar.g{background:rgba(34,197,94,.18); color:#7ff0a8}
.item .avatar.a{background:rgba(245,158,11,.18); color:#ffd489}
.item .avatar.r{background:rgba(239,68,68,.18); color:#ffb4b4}
.item .cuerpo{flex:1; min-width:0}
.item .cuerpo b{display:block; font-size:15px}
.item .cuerpo span{font-size:12.5px; color:var(--dim)}
.item .der{text-align:right; font-size:12.5px; color:var(--dim); white-space:nowrap}
.item .der b{display:block; color:var(--txt); font-size:15px}

.insignia{display:inline-block; font-size:11px; font-weight:800; border-radius:999px; padding:3px 9px; letter-spacing:.04em}
.insignia.g{background:rgba(34,197,94,.18); color:#7ff0a8}
.insignia.a{background:rgba(245,158,11,.18); color:#ffd489}
.insignia.r{background:rgba(239,68,68,.18); color:#ffb4b4}
.insignia.n{background:#202838; color:var(--dim)}

.dato{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.dato:last-child{border-bottom:0}
.dato span{color:var(--dim)}
.dato b{font-weight:700}

.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:13px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:13px}
.kpi span{font-size:11.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; display:block}
.kpi b{font-size:24px; font-weight:900}

.nota{font-size:12.5px; color:var(--dim); line-height:1.5}
.titulo-sec{font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); margin:16px 0 8px}

/* confirmacion (pantalla completa) */
.velo{position:fixed; inset:0; background:rgba(6,9,14,.92); display:none; place-items:center; z-index:50; padding:22px}
.velo.ver{display:grid}
.velo .caja{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px 20px; width:100%; max-width:380px; text-align:center}
.velo .icono{width:74px; height:74px; border-radius:50%; display:grid; place-items:center; font-size:38px; margin:0 auto 14px;
  background:rgba(34,197,94,.16)}
.velo .icono.mal{background:rgba(239,68,68,.16)}
.velo h3{margin:0 0 6px; font-size:23px}
.velo .hora{font-size:34px; font-weight:900; margin:6px 0 12px}
.velo .mini{font-size:13px; color:var(--dim); margin-bottom:16px}

.fotos{display:flex; gap:8px; flex-wrap:wrap}
.fotos img{width:74px; height:98px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}
.pie{margin-top:22px; text-align:center; font-size:11.5px; color:#5d6982}
@media (max-width:420px){ .reloj b{font-size:40px} }