:root{
  --bg-dark:#000;
  --ink:#111;
  --ink-soft:#222;
  --brand:#ffd000;
  --brand-soft:#fff3a3;
  --field:#fff8cc;
  --border:#111;
  --muted:#6b7280;
}

/* ===== Reset & Layout ===== */
*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--bg-dark);
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
}

/* ===== Stage fijo ===== */
.stage{
  position: relative;
  width: 508px;
  height: 865px;
  background: var(--bg-dark);
  overflow: hidden;
}

/* ===== Fondo invitación ===== */
.invitation{
  position:absolute; inset:0;
  background: url("../img/Invitacion.svg") center/contain no-repeat;
  background-color: var(--bg-dark);
  z-index:1;
}

/* ===== Botón Confirmar portada ===== */
.invitation .btnConfirmar{
  position: absolute;
  right: 50px;
  bottom: 65px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgb(0 0 0 / 35%);
  z-index: 2;
}

/* ===== Backdrop (confirmar.html) ===== */
.backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  z-index: 2;
}

/* ===== Modal formulario (centrado) ===== */
.modal{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 320px);
  max-height: 70%;
  border-radius: 14px;
  overflow-y: auto;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  z-index: 3;
  background: var(--brand);
  border: 3px solid var(--border);
}
.card-stripes{
  height: 40px;
  background: repeating-linear-gradient(-45deg,
              var(--ink) 0 18px, var(--brand) 18px 36px);
  border-bottom: 3px solid var(--border);
}

/* Cabecera modal */
.card-header{ padding: 10px 14px 4px; text-align:center; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--brand);
  font-size: 16px;
  border: 2px solid var(--border);
  box-shadow: 0 4px 0 rgba(0,0,0,.15) inset;
}
.card-title{ font-size: 17px; margin: 6px 0 2px; }
.card-subtitle{ font-size: 11px; color: var(--ink-soft); }

/* Formulario */
.form{ padding: 8px 14px 12px; }
.form-row{ margin-top: 8px; }
label{ display:block; font-weight:700; margin-bottom:6px; }
.req{ color:#b91c1c; }

input[type="text"],
input[type="number"]{
  width: 100%;
  padding: 8px 11px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--field);
  color: var(--ink);
  outline: none;
  font-size: 13px;
  transition: box-shadow .15s, border-color .15s, transform .05s;
}
input::placeholder{ color:#4b5563; }
input:focus{ border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.12); }

/* Campo numérico con steppers */
.number-field{ display:flex; align-items:center; gap: 6px; }
.number-field input{ flex: 1 1 auto; text-align:center; }
.stepper{
  appearance:none;
  border: 2px solid var(--border);
  background: var(--brand-soft);
  color: var(--ink);
  width: 28px; height: 28px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: transform .06s, box-shadow .15s;
}
.stepper:active{ transform: translateY(1px); }

/* Mensajes */
.hint{ display:block; margin-top:5px; font-size:11px; color: var(--muted); }
.error{ display:block; min-height:14px; margin-top:4px; font-size:11px; color:#b91c1c; font-weight:600; }

/* Separador y acciones */
.divider{ height:1px; background: rgba(17,17,17,.25); margin: 12px 0 8px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn{
  cursor:pointer;
  padding: 9px 12px;
  border-radius: 8px;
  border: 2px solid var(--border);
  font-weight: 800;
  font-size: 12px;
}
.btn.primary.dark{ background: var(--ink); color: var(--brand); }
.btn.ghost.dark{ background: transparent; color: var(--ink); }

/* Pie */
.privacy{ margin: 0 14px 10px; font-size: 11px; color: var(--ink-soft); text-align:center; }

/* Animación de error */
@keyframes shake{
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.invalid{
  animation: shake .35s both;
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgba(185,28,28,.15) !important;
}

/* ===== ALERTA PERSONALIZADA ===== */
.custom-alert{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: none;               /* se muestra con JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.custom-alert-box{
  width: min(92%, 320px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--brand);
  border: 3px solid var(--border);
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
}
.custom-alert-stripes{
  height: 36px;
  background: repeating-linear-gradient(-45deg,
              var(--ink) 0 18px, var(--brand) 18px 36px);
  border-bottom: 3px solid var(--border);
}
.custom-alert-body{
  padding: 12px 16px 16px;
  text-align: center;
}
.custom-alert-body h3{
  margin: 6px 0 8px;
  font-size: 18px;
}
.custom-alert-body p{
  white-space: pre-line;
  font-size: 13px;
  margin: 0 0 10px;
}

/* ===== Seguridad: si la ventana es más baja que el stage ===== */
@media (max-height: 865px){
  html, body{ display:block; overflow:auto; }
  .stage{ margin: 0 auto; }
}