/* Página del PIN del modo red local (la sirve server.js sin sesión) */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: #0B0C0E;
  color: #F3F4F6;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.pin {
  max-width: 440px;
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pin-marca {
  margin: 0 0 18px;
  font-family: 'Saira Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
}

.pin-marca span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #FF5A6E;
}

h1 {
  margin: 0;
  font-family: 'Saira Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
}

.pin-texto,
.pin-nota { margin: 0; color: #A9B0B9; }

.pin-nota { font-size: 13px; color: #8C939D; }

.pin-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #1A0F12;
  border: 1px solid #D4142F;
  color: #FFFFFF;
}

.pin-form { display: flex; flex-direction: column; gap: 10px; }

label {
  font-family: 'Saira Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A9B0B9;
}

input {
  height: 56px;
  padding: 0 16px;
  background: #15171A;
  border: 1px solid #2E3238;
  border-radius: 10px;
  color: #F3F4F6;
  font-family: 'Saira Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-size: 26px;
  letter-spacing: 0.4em;
}

button {
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: #D4142F;
  color: #FFFFFF;
  font-family: 'Saira Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

input:focus-visible,
button:focus-visible {
  outline: 3px solid #FF5A6E;
  outline-offset: 2px;
}