:root {
  --verde: #047857;
  --rojo: #b91c1c;
  --azul: #0b3d91;
  --texto: #111827;
  --suave: #6b7280;
  --fondo: #f3f4f6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  display: flex; flex-direction: column; align-items: center;
}

/* Banda de estado: lo primero que ve el personal de puerta */
.banda {
  width: 100%; color: #fff; text-align: center;
  padding: calc(env(safe-area-inset-top) + 22px) 16px 64px;
  background: var(--rojo);
}
.vista-vigente .banda { background: var(--verde); }
.icono {
  width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%;
  background: rgba(255,255,255,.2); font-size: 38px; line-height: 64px; font-weight: 700;
}
.estado { font-size: 40px; font-weight: 900; letter-spacing: .06em; line-height: 1.1; }
.frase  { font-size: 16px; opacity: .95; margin-top: 4px; }

.tarjeta {
  width: calc(100% - 32px); max-width: 420px; margin-top: -44px;
  background: #fff; border-radius: 18px; padding: 24px 20px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08); text-align: center;
}
.foto {
  width: 180px; height: 180px; object-fit: cover; border-radius: 14px;
  background: #e5e7eb; display: block; margin: 0 auto 14px;
  border: 4px solid var(--rojo);
}
.vista-vigente .foto { border-color: var(--verde); }
.vista-anulada .foto, .vista-vencida .foto { filter: grayscale(.6); }

.nombre { margin: 0 0 14px; line-height: 1.15; }
.nombres   { display: block; font-size: 24px; font-weight: 700; }
.apellidos { display: block; font-size: 24px; font-weight: 800; text-transform: uppercase; }

.datos { margin: 0; text-align: left; border-top: 1px solid #e5e7eb; }
.datos div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #e5e7eb; }
.datos dt { color: var(--suave); font-size: 14px; flex-shrink: 0; }
.datos dd { margin: 0; font-weight: 600; text-align: right; }
.rojo { color: var(--rojo); }

.no-existe { font-size: 17px; margin: 4px 0 8px; }

.consulta {
  margin-top: 16px; padding: 12px; border-radius: 10px; background: var(--fondo);
  font-size: 14px; color: var(--texto);
}
.reloj { color: var(--suave); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pulso {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px;
  background: var(--rojo); vertical-align: 1px; animation: pulso 1.2s infinite;
}
.vista-vigente .pulso { background: var(--verde); }
@keyframes pulso { 50% { opacity: .2; } }

.pie { color: var(--suave); font-size: 12px; padding: 20px 16px calc(env(safe-area-inset-bottom) + 20px); }

/* Inicio y límite de consultas */
.mensaje { max-width: 420px; padding: 18vh 24px 0; text-align: center; }
.mensaje .marca { color: var(--azul); font-weight: 900; letter-spacing: .12em; margin-bottom: 18px; }
.mensaje h1 { font-size: 24px; margin: 0 0 10px; }
.mensaje p { color: var(--suave); }

/* Tipo de acceso: grande y con su color, para leerlo de un vistazo */
.acceso {
  background: var(--color-acceso, #374151); color: #fff; border-radius: 14px;
  padding: 14px 12px; margin: 0 0 14px; text-align: center;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18);
}
.acceso small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.acceso b { display: block; font-size: 30px; font-weight: 900; letter-spacing: .05em; line-height: 1.15; }
.acceso span { display: block; font-size: 14px; margin-top: 2px; opacity: .95; }