:root{
  --bg: #0B1120;
  --surface: #131B2E;
  --surface-2: #1B2540;
  --surface-3: #232F52;
  --border: #2B3559;
  --text: #EDF1F7;
  --text-dim: #8D97B8;
  --text-faint: #5D6789;
  --accent: #1AA5A0;
  --accent-dim: #0F3A38;
  --ok: #34D399;
  --ok-bg: #0F2E28;
  --bad: #F76B6B;
  --bad-bg: #331A1F;
  --rest: #8D97B8;
  --rest-bg: #1B2540;
  --warn: #F5B759;
  --warn-bg: #332A14;
  --radius: 14px;
  --font-ui: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(circle at 50% -10%, #172448 0%, var(--bg) 55%);
  color: var(--text);
  font-family: var(--font-ui);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
.app{
  max-width: 460px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 20px calc(env(safe-area-inset-bottom) + 20px);
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 22px 2px 18px;
}
.badge-mark{
  width:38px; height:38px;
  border-radius:10px;
  background: #fff;
  object-fit: cover;
  flex-shrink:0;
  box-shadow: 0 4px 16px -4px rgba(26,165,160,0.45);
}
.topbar-text{ display:flex; flex-direction:column; line-height:1.25; }
.topbar-title{ font-size:13px; font-weight:700; letter-spacing:0.06em; }
.topbar-sub{ font-size:12px; color:var(--text-dim); }

main{ flex:1; display:flex; flex-direction:column; }

/* Footer clock */
.footer-note{
  text-align:center;
  font-family: var(--font-mono);
  font-size:12px;
  color: var(--text-faint);
  padding-top: 18px;
  letter-spacing:0.02em;
}
.dot-sep{ margin: 0 6px; }

/* ---- Login screen (numero) ---- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.stage{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.stage h1{
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.stage p.lead{
  color: var(--text-dim);
  font-size: 14px;
  margin: 0 0 22px;
  line-height:1.5;
}
label.field-label{
  display:block;
  font-size:12px;
  font-weight:600;
  color: var(--text-dim);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:10px;
}
input.numero-input{
  width:100%;
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight:600;
  letter-spacing: 0.08em;
  text-align:center;
  padding: 16px 10px;
  outline:none;
  transition: border-color .15s;
}
input.numero-input:focus{ border-color: var(--accent); }
.btn{
  display:block;
  width:100%;
  border:none;
  border-radius:10px;
  padding:16px;
  font-family: var(--font-ui);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition: transform .1s, opacity .15s, background .15s;
}
.btn:active{ transform: scale(0.98); }
.btn:disabled{ opacity:0.5; cursor:default; transform:none; }
.btn-primary{ background: var(--accent); color:#fff; margin-top:16px; }
.btn-primary:not(:disabled):hover{ background:#178F8A; }
.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color: var(--text-dim);
  margin-top:10px;
}
.error-msg{
  color: var(--bad);
  font-size:13px;
  margin-top:12px;
  min-height:16px;
}

/* ---- Perfil / confirmación screen ---- */
.id-card{
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  overflow:hidden;
}
.id-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--accent), #7CA2FF);
}
.id-eyebrow{
  font-family: var(--font-mono);
  font-size:11px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform:uppercase;
  margin-bottom: 6px;
}
.id-name{
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 2px;
  letter-spacing:-0.01em;
}
.id-num{
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size:13px;
  margin-bottom: 18px;
}
.id-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.id-row:first-of-type{ border-top:1px solid var(--border); margin-top:4px; }
.id-row-label{ font-size:13px; color: var(--text-dim); }
.id-row-value{ font-size:13px; font-weight:600; text-align:right; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 12px;
  border-radius:100px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.02em;
}
.pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill-asistio{ background: var(--ok-bg); color: var(--ok); }
.pill-descanso{ background: var(--rest-bg); color: var(--rest); }
.pill-otro{ background: var(--warn-bg); color: var(--warn); }

.foto-box{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.foto-box .btn{ margin-top:0; }
.foto-preview{
  width:100%;
  max-width:220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius:12px;
  border:1px solid var(--border);
}

.tipo-toggle{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.tipo-btn{
  flex:1;
  background: var(--surface-2);
  border:1px solid var(--border);
  color: var(--text-dim);
  border-radius:10px;
  padding: 12px 8px;
  font-family: var(--font-ui);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tipo-btn.is-active{
  background: var(--accent-dim);
  border-color: var(--accent);
  color: #fff;
}

.select-servicio{
  width:100%;
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 13px 10px;
  outline:none;
  transition: border-color .15s;
}
.select-servicio:focus{ border-color: var(--accent); }

.gps-line{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color: var(--text-dim);
  margin: 18px 0 4px;
  font-family: var(--font-mono);
}
.gps-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--text-faint);
  flex-shrink:0;
}
.gps-dot.ok{ background: var(--ok); }
.gps-dot.pulse{ background: var(--warn); animation: pulse 1s infinite; }
.gps-dot.bad{ background: var(--bad); }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.actions{ margin-top: 20px; }

/* ---- Confirmación exitosa ---- */
.success-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 6px;
  padding: 8px 0 4px;
}
.stamp{
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--ok-bg);
  border: 2px solid var(--ok);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
  animation: stampIn .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes stampIn{
  0%{ transform: scale(0.4) rotate(-15deg); opacity:0; }
  100%{ transform: scale(1) rotate(0); opacity:1; }
}
.stamp svg{ width:38px; height:38px; }
.success-title{ font-size:19px; font-weight:800; margin:0; }
.success-time{
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight:600;
  color: var(--accent);
  margin: 8px 0 2px;
  letter-spacing: 0.02em;
}
.success-sub{ color: var(--text-dim); font-size:13.5px; margin-bottom: 6px; }

.spinner{
  width:18px; height:18px;
  border-radius:50%;
  border: 2.5px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  display:inline-block;
  animation: spin .7s linear infinite;
  vertical-align: -3px;
  margin-right: 8px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.helper-text{
  text-align:center;
  font-size:12.5px;
  color: var(--text-faint);
  margin-top: 14px;
  line-height:1.5;
}

/* ---- Lista de checadas (entrada / comida / salida) ---- */
.checadas-lista{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.checada-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.checada-nom{
  font-size:15px;
  font-weight:600;
}
.btn-mini{
  width:auto;
  min-width:96px;
  padding:9px 16px;
  font-size:14px;
  margin:0;
}

/* Crédito SEDER en el pie */
.seder-credit{ color: var(--accent); font-weight:500; letter-spacing:.02em; }
.seder-credit b{ font-weight:700; }

/* el atributo hidden debe ganarle al display:flex (si no, el modal no se cierra) */