:root {
  --fondo: #faf6f0;
  --texto: #2b2622;
  --suave: #7a7068;
  --borde: #e4dcd1;
  --verde: #1f9d55;
  --verde-osc: #17804a;
  --rojo: #d64545;
  --rojo-osc: #b53636;
  --blanco: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}

.vista {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.vista[hidden] { display: none; }

/* ── Login ── */
.login {
  margin: auto;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login h1 {
  text-align: center;
  font-size: 2.4rem;
  margin: 0 0 8px;
}

.login label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}

.login input {
  font: inherit;
  font-size: 1.15rem;
  padding: 14px;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--blanco);
}

.login input:focus { outline: none; border-color: var(--verde); }

.btn-login {
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--verde);
  color: var(--blanco);
  cursor: pointer;
}

.btn-login:disabled { opacity: .6; }

.error { color: var(--rojo); min-height: 1.2em; margin: 0; text-align: center; }

/* ── Principal ── */
.barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  color: var(--suave);
}

.nombre { font-weight: 600; }

.link {
  font: inherit;
  background: none;
  border: 0;
  color: var(--suave);
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 0;
}

.estado {
  margin: 24px 0 0;
  text-align: center;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 800;
  color: var(--verde);
  min-height: 1.3em;
}

.centro {
  flex: 1;
  display: grid;
  place-items: center;
  padding-bottom: 12vh;
}

.btn-marcar {
  width: min(70vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  color: var(--blanco);
  font: inherit;
  font-size: clamp(2.6rem, 12vw, 3.6rem);
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgb(0 0 0 / .18);
  transition: transform .1s, background-color .2s;
}

.btn-marcar:active { transform: scale(.96); }
.btn-marcar:disabled { opacity: .7; }

.btn-marcar.hola { background: var(--verde); }
.btn-marcar.hola:hover { background: var(--verde-osc); }
.btn-marcar.chau { background: var(--rojo); }
.btn-marcar.chau:hover { background: var(--rojo-osc); }

/* ── Red no permitida ── */
.bloqueo { margin: auto; max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.bloqueo h1 { font-size: 2rem; color: var(--rojo); margin: 0; }
.bloqueo p { font-size: 1.1rem; line-height: 1.5; margin: 0; }
.bloqueo .bloqueo-ip { color: var(--suave); font-size: .95rem; }

/* ── Cartel ── */
.cartel-fondo {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / .45);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 10;
}

.cartel-fondo[hidden] { display: none; }

.cartel {
  background: var(--blanco);
  border-radius: 20px;
  padding: 32px 24px 24px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  animation: aparecer .18s ease-out;
}

.cartel-texto {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 24px;
}

.cartel-texto.hola { color: var(--verde); }
.cartel-texto.chau { color: var(--rojo); }

.btn-ok {
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--texto);
  color: var(--blanco);
  cursor: pointer;
}

@keyframes aparecer {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}