/* ══════════════════════════════════════════════════════════════════════════
   candado.css · la pantalla del candado de los 35 días
   Los colores salen de `tokens.css`. Ninguno suelto. Es la misma tarjeta
   que la de «Sesión cerrada» (volver-a-la-puerta.css): una cosa en el
   medio, un texto que dice qué hacer, y lo que hay que tocar.
   ══════════════════════════════════════════════════════════════════════════ */
.candado-cuerpo {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-6);
  background: var(--fondo);
  color: var(--texto);
}
.candado-tarjeta {
  width: min(100%, 420px);
  text-align: center;
}
.candado-icono { font-size: 2.4rem; margin-bottom: var(--e-3); }
.candado-titulo {
  margin: 0 0 var(--e-3);
  font-family: var(--letra-titulo);
  font-size: var(--txt-xl);
}
.candado-texto {
  margin: 0 0 var(--e-6);
  font-size: var(--txt-sm);
  line-height: 1.5;
  color: var(--texto-2);
}
.candado-recuadro {
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  text-align: left;
}
.candado-pregunta { margin: 0 0 var(--e-3); font-size: var(--txt-sm); color: var(--texto-2); }
.candado-id-rotulo { margin: 0 0 var(--e-1); font-size: var(--txt-xs); color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }
.candado-id {
  margin-bottom: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio);
  background: var(--fondo);
  font-family: var(--letra-num);
  font-size: var(--txt-sm);
  word-break: break-all;
  user-select: all;
}
.candado-campo {
  display: block;
  width: 100%;
  min-height: var(--toque-min);
  margin-bottom: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-family: var(--letra-num);
}
.candado-campo:focus-visible { outline: none; box-shadow: var(--foco); border-color: var(--acento); }
.candado-boton {
  width: 100%;
  min-height: var(--toque-min);
  border: none;
  border-radius: var(--radio);
  background: var(--acento);
  color: var(--sobre-acento);
  font: inherit;
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}
.candado-boton:hover { filter: brightness(1.08); }
.candado-boton:focus-visible { outline: none; box-shadow: var(--foco); }
.candado-estado { min-height: 1.4em; margin: var(--e-3) 0 0; font-size: var(--txt-sm); color: var(--texto-2); }
.candado-estado.mal  { color: var(--error); }
.candado-estado.bien { color: var(--ok); }

/* «Volver a intentar» (18/09, la tercera regla del encabezado de
   candado-de-los-35-dias.js): un botón de borde, no el dorado, porque lo
   que se toca primero es conectarse. Se esconde con `hidden` mientras se
   pregunta, y hay que decirlo: el display de la clase le gana al atributo. */
.candado-reintentar {
  display: inline-block;
  min-height: var(--toque-min);
  margin: 0 0 var(--e-6);
  padding: var(--e-2) var(--e-5);
  border: 1px solid var(--borde-acento);
  border-radius: var(--radio);
  background: transparent;
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
.candado-reintentar:hover { border-color: var(--acento); color: var(--acento-texto); }
.candado-reintentar:focus-visible { outline: none; box-shadow: var(--foco); }
.candado-reintentar[hidden], .candado-recuadro[hidden] { display: none; }

/* EL AVISO DEL CALENDARIO (U3, 20/10): desde el día 2 sin haberse conectado en
   el mes, una franja arriba de todo en cada pantalla. No bloquea: avisa que el
   día 5 sí. Va antes que el resto del cuerpo, así que empuja y no tapa. */
.candado-aviso {
  padding: var(--e-2) var(--e-4);
  border-bottom: 1px solid var(--error);
  background: var(--error-fondo);
  color: var(--texto);
  font-size: var(--txt-sm);
  line-height: 1.4;
  text-align: center;
}