:root{
  --bg:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --primary:#4f46e5;
  --primary-ink:#ffffff;
  --border:#e5e7eb;
}

/* Base */
*{ box-sizing:border-box; }

html, body { height: 100%; }               /* necesario para centrar con 100dvh */
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}
/* Bloquear scroll solo en HOME (se aplica con .no-scroll desde JS) */
body.no-scroll{
  height:100dvh;           /* viewport real en móviles */
  overflow:hidden;
}

h1,h2,h3{ margin:0 0 .5rem; }
h2{ font-size:1.5rem; }
h3{ font-size:1.125rem; }
.hint{ color:var(--muted); font-size:.9rem; }

/* Header */
header{
  position:sticky; top:0;
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  background:#fff;
}
header.hide{ display:none; }
#btnHome{
  border:1px solid var(--border);
  background:#fff;
  border-radius:.75rem;
  padding:.4rem .6rem;
  cursor:pointer;
}
#headerTitle{ font-weight:600; }

/* Vistas (por defecto ocultas) */
.view{
  display:none;
  padding:1rem;
  max-width:480px;
  margin:0 auto;
}
.view.active{ display:block; }

/* HOME centrado total solo cuando está activo */
#view-home.view.active{
  min-height:100dvh;       /* ocupa todo el alto disponible */
  display:grid;            /* ¡solo cuando está activo! */
  place-content:center;    /* centra vertical y horizontal */
  padding:0;
  text-align:center;
}
#view-home .stack{
  width:100%;
  max-width:340px;
  margin:1rem auto 0;
}
#view-home h2{ margin-bottom:.75rem; }

/* ÉXITO centrado (opcional para que combine con el mockup) */
#view-success.view.active{
  min-height:100dvh;
  display:grid;
  place-content:center;
  padding:0;
  text-align:center;
}

/* Utilidades */
.stack{ display:flex; flex-direction:column; gap:.75rem; max-width:360px; margin:1rem auto; }
.row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.nowrap{ white-space:nowrap; }

/* Controles */
button, select, input{
  font:inherit;
  padding:.65rem .9rem;
  border:1px solid var(--border);
  border-radius:.75rem;
  background:#fff;
}
button{ cursor:pointer; }
button.primary{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }
button.small{ padding:.4rem .6rem; font-size:.9rem; }
button.danger{ border-color:#fecaca; background:#fee2e2; }
button:disabled{ opacity:.6; cursor:not-allowed; }
input[type="number"]{ width:100%; }

/* Cámara */
video{
  width:100%;
  aspect-ratio: 3/4;
  background:#eef2ff;
  border-radius:1rem;
  border:1px solid var(--border);
  margin:.75rem 0;
}

/* Tablas */
.table{ width:100%; border-collapse:collapse; margin-top:.75rem; }
.table th, .table td{
  border:1px solid var(--border);
  padding:.5rem;
  font-size:.95rem;
  text-align:left;
}