:root {
  --navy: #0B1B33;
  --navy2: #162638;
  --navy3: #1E3A5F;
  --gold: #FCD34D;
  --blue-mid: #2563EB;
  --green: #16A34A;
  --red: #DC2626;
  --amber: #D97706;
  --gray-50: #F8FAFC;
  --gray-200: #E2E8F0;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --white: #FFFFFF;
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--gray-50);
  color: var(--gray-800);
  -webkit-tap-highlight-color: transparent;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Topbar ── */
.topbar {
  background: var(--navy);
  color: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .logo {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.topbar .logo span { color: var(--gold); }
.topbar .salir {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

/* ── Contenido ── */
.contenido {
  flex: 1;
  padding: 24px 20px 40px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.titulo {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.subtitulo {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 8px;
}

/* ── Tarjetas ── */
.card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border: 1px solid var(--gray-200);
}

/* ── Inputs ── */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.campo input {
  padding: 14px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 16px; /* evita zoom automático en iPhone */
  font-family: var(--font);
}
.campo input:focus {
  outline: none;
  border-color: var(--blue-mid);
}

/* ── Botones ── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  border: none;
  cursor: pointer;
  transition: transform .1s, opacity .2s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: var(--gold); }
.btn-entrada { background: var(--green); color: white; }
.btn-salida { background: var(--amber); color: white; }
.btn-secundario { background: white; color: var(--gray-700); border: 1.5px solid var(--gray-200); }

/* ── Estado / feedback ── */
.estado {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.estado.ok { background: #E2F0D9; color: #173B2A; }
.estado.warn { background: #FEF3C7; color: #92400E; }
.estado.error { background: #FEE2E2; color: #B91C1C; }

.error-msg {
  background: #FEE2E2;
  color: #B91C1C;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ── Cámara ── */
.camara-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--navy2);
  border-radius: 16px;
  overflow: hidden;
}
.camara-wrap video, .camara-wrap canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camara-wrap video {
  /* Espejado (como una selfie normal): moverte a tu derecha real mueve tu
     imagen hacia la derecha en pantalla también. Sin esto, es mucho más
     difícil ubicarte dentro del óvalo, porque tu reflejo se mueve al revés
     de lo intuitivo. Esto es solo visual — la foto que se captura y se
     manda al servidor NO sale espejada, se toma del video real. */
  transform: scaleX(-1);
}
.camara-wrap .marco-guia {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  aspect-ratio: 3 / 4;
  border: 3px dashed rgba(252,211,77,.7);
  border-radius: 50% / 45%;
  pointer-events: none;
}
.camara-wrap .marco-ayuda {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11,27,51,.75);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

/* ── Historial ── */
.historial-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200);
}
.historial-item:last-child { border-bottom: none; }
.historial-tipo { font-weight: 700; font-size: 13px; }
.historial-tipo.entrada { color: var(--green); }
.historial-tipo.salida { color: var(--amber); }
.historial-hora { font-size: 12px; color: var(--gray-500); }
.historial-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.historial-badge.match { background: #E2F0D9; color: #173B2A; }
.historial-badge.revision { background: #FEF3C7; color: #92400E; }
.historial-badge.error { background: #FEE2E2; color: #B91C1C; }

/* ── Bottom nav ── */
.bottom-nav {
  display: flex;
  background: white;
  border-top: 1px solid var(--gray-200);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
.bottom-nav button {
  flex: 1;
  background: none;
  border: none;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bottom-nav button.activo { color: var(--navy); }
.bottom-nav .icono { font-size: 18px; }

.spinner {
  width: 18px; height: 18px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.oculto { display: none !important; }