/* Piezas nuevas de Flecos y Barbas. Todo lo demás (fondo, calendario, hero,
   botones, tipografía) viene tal cual de Días que Cuentan — este archivo no
   cambia nada de aquello, solo agrega lo que allá no existía. */

/* ---------- Caja del identificador: flecos.mx/[ juan ] ----------
   Un solo cuadro blanco, con el dominio en gris a la izquierda y el campo
   pegado a la derecha. Mismo alto y mismo radio que los inputs del
   calendario, para que se lea como un campo más. */
.handle-box {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  background: #fff;
  text-align: left;
  transition: box-shadow 0.15s ease;
}

.handle-box.is-ok    { box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.55); }
.handle-box.is-error { box-shadow: 0 0 0 2.5px #FFB3B3; }

.handle-prefix {
  flex: 0 0 auto;
  color: rgba(27, 42, 74, 0.45);
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
  user-select: none;
}

/* Gana en especificidad al input blanco de .calendar-dialog: aquí el cuadro
   blanco es la caja de afuera, el campo va transparente y sin marco. */
.calendar-dialog .handle-box input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 14px 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
}

.calendar-dialog .handle-box input::placeholder {
  color: rgba(27, 42, 74, 0.28);
  font-weight: 400;
}

/* ---------- Línea de estado (✅ disponible / ya existe) ---------- */
.calendar-dialog .handle-status {
  min-height: 1.35em;
  margin: 9px 0 12px;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgb(var(--tinta));
  text-align: center;
}

.handle-status.is-ok    { color: #DFF7E4; }
.handle-status.is-error { color: #FFD9D9; }
.handle-status .fa-check,
.handle-status i { margin-right: 6px; }

/* Botón principal apagado mientras no hay un identificador válido y libre. */
.calendar-dialog .btn-primary:disabled {
  opacity: 0.4;
  box-shadow: none;
  cursor: default;
}

/* ---------- Paso 2 ---------- */

/* La dirección que acaba de elegir, para que no se le olvide qué está
   guardando mientras decide con cuál cuenta entrar. */
.calendar-dialog .handle-echo {
  margin: -4px 0 16px;
  font-size: 1.02rem;
  font-weight: 500;
  color: rgb(var(--tinta));
  text-align: center;
  overflow-wrap: anywhere;
}

/* Los botones de proveedor son .welcome-option (de Días que Cuentan); solo
   se alinea el icono de marca a un ancho fijo para que los textos empiecen
   en la misma columna. */
.welcome-option .fa-brands {
  width: 22px;
  text-align: center;
}

/* Un pelo más chico para que cada botón quepa en UNA línea y los dos se lean
   como una misma lista. */
[data-step="2"] .welcome-option {
  font-size: 0.97rem;
  white-space: nowrap;
}

.handle-back {
  margin-top: 4px;
  padding: 10px 8px;
  border: none;
  background: none;
  color: rgb(var(--tinta) / 0.75);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
}
.handle-back:active { color: rgb(var(--tinta)); }
.handle-back i { margin-right: 5px; }

/* ---------- Listo ---------- */
.calendar-dialog .share-box {
  background: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  text-align: center;
}

.calendar-dialog .handle-note {
  margin: 14px 0 0;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.4;
  color: rgb(var(--tinta) / 0.8);
  text-align: center;
}

/* Aviso de que la identidad es de mentiras (AUTH_MODE=demo). Solo aparece
   cuando el servidor lo dice; en producción no existe. */
.demo-flag {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 300;
  color: rgb(var(--tinta) / 0.62);
  text-align: center;
}

/* ---------- Prueba de referencia decorada ----------
   Se activa únicamente con `?decorated=1` y solo en la pantalla final. La
   capa es arte transparente; texto, botones y comportamiento siguen en HTML. */
.decoracion-floral { display: none; }

body.is-decorated.is-complete .calendar-dialog {
  margin-top: 4px;
}

body.is-decorated.is-complete .calendar-mid {
  min-height: 390px;
  padding-top: 68px;
}

body.is-decorated.is-complete .decoracion-floral {
  display: block;
  position: absolute;
  inset: 1% -1% -2% -1%;
  z-index: 4;
  background: url('/decorations/flecos-floral-frame.png') center / 100% 100% no-repeat;
  pointer-events: none;
}

body.is-decorated.is-complete .palomita {
  z-index: 5;
  width: 31%;
  right: -16px;
  bottom: -22px;
}

body.is-decorated.is-complete [data-step="3"] .big-emoji {
  font-size: 2.45rem;
  margin-bottom: 2px;
}

body.is-decorated.is-complete [data-step="3"] .step-prompt {
  font-size: 1.55rem;
  font-weight: 600;
  margin-bottom: 26px;
}

body.is-decorated.is-complete [data-step="3"] .share-box {
  position: relative;
  z-index: 5;
  padding: 20px 14px;
  border-radius: 18px;
  font-size: 1.08rem;
}

body.is-decorated.is-complete [data-step="3"] .handle-note {
  position: relative;
  z-index: 5;
  margin-top: 28px;
  font-size: 1rem;
}