/* ══════════════════════════════════════════════════════════
   RESERVA — hoja propia, no toca style.css
   Todo con prefijo .rsv- para no chocar con nada.
   ══════════════════════════════════════════════════════════ */

.rsv {
  --oro: #E0B96A;          /* más luminoso que el de la web, para que resalte */
  --oro-suave: #F0D9A6;
  --panel: #1C1C1E;
  --panel-alto: #26262A;
  --linea: rgba(224,185,106,0.18);
  --error: #E8705F;
  --tinta: #F6F2EA;
  --tinta-media: #BCB3A6;

  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 1.5rem 6rem;
}

/* ─── La tarjeta ─── */
.rsv-tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 2.25rem 2.25rem 2.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.rsv-intro {
  color: var(--tinta-media);
  font-size: 1.06rem;
  line-height: 1.7;
  margin-bottom: 2.25rem;
  text-align: center;
}

/* ─── Paso ─── */
.rsv-paso { margin-bottom: 2.25rem; transition: opacity 0.4s ease; }
.rsv-paso[data-bloqueado] { opacity: 0.35; pointer-events: none; }

.rsv-paso-cabecera {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}
.rsv-num {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--panel-alto);
  color: var(--oro);
  font-size: 0.78rem;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.35s, color 0.35s;
}
.rsv-paso:not([data-bloqueado]) .rsv-num.hecho {
  background: var(--oro);
  color: #16160F;
}
.rsv-paso-titulo {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--tinta);
  letter-spacing: 0.01em;
}

/* ─── 01 · Duración ─── */
.rsv-duraciones {
  display: grid;
  /* se reparte solo segun cuantas duraciones haya en config.py */
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 0.7rem;
}
.rsv-dur {
  background: var(--panel-alto);
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--tinta);
  font-family: var(--sans);
  padding: 1.1rem 0.4rem 1rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.25s, background 0.25s, transform 0.15s;
}
.rsv-dur:hover { background: #303036; transform: translateY(-2px); }
.rsv-dur-tiempo {
  font-size: 1.24rem;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.2;
  color: var(--tinta);
}
.rsv-dur-precio {
  font-size: 1.06rem;
  font-weight: 400;
  color: var(--oro);
  margin-top: 0.35rem;
}
.rsv-dur[aria-pressed="true"] {
  background: var(--oro);
  border-color: var(--oro);
}
.rsv-dur[aria-pressed="true"] .rsv-dur-tiempo,
.rsv-dur[aria-pressed="true"] .rsv-dur-precio { color: #16160F; }
.rsv-dur[aria-pressed="true"] .rsv-dur-precio { font-weight: 500; }

/* ─── 02 · Días ─── */
.rsv-dias {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(224,185,106,0.35) transparent;
}
.rsv-dias::-webkit-scrollbar { height: 4px; }
.rsv-dias::-webkit-scrollbar-thumb {
  background: rgba(224,185,106,0.35); border-radius: 2px;
}
.rsv-dia {
  background: var(--panel-alto);
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--tinta-media);
  font-family: var(--sans);
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 4.4rem;
  text-align: center;
  transition: background 0.25s, color 0.25s;
}
.rsv-dia:hover { background: #303036; color: var(--tinta); }
.rsv-dia-sem { font-size: 0.8rem; text-transform: capitalize; }
.rsv-dia-num {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tinta);
}
.rsv-dia-mes { font-size: 0.78rem; opacity: 0.75; }
.rsv-dia[aria-pressed="true"] {
  background: var(--oro);
  border-color: var(--oro);
  color: #16160F;
}
.rsv-dia[aria-pressed="true"] .rsv-dia-num { color: #16160F; }

/* ─── Horas ─── */
.rsv-franjas { margin-top: 1.5rem; }
.rsv-franja + .rsv-franja { margin-top: 1.35rem; }
.rsv-franja-nombre {
  font-size: 0.94rem;
  color: var(--tinta-media);
  margin-bottom: 0.65rem;
}
.rsv-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.9rem, 1fr));
  gap: 0.45rem;
}
.rsv-hora {
  background: var(--panel-alto);
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 400;
  padding: 0.68rem 0.5rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.rsv-hora:hover { background: #303036; border-color: rgba(224,185,106,0.5); }
.rsv-hora[aria-pressed="true"] {
  background: var(--oro);
  border-color: var(--oro);
  color: #16160F;
  font-weight: 500;
}

/* ─── Resumen ─── */
.rsv-resumen {
  background: var(--panel-alto);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
}
.rsv-resumen-titulo {
  font-size: 1.02rem;
  color: var(--tinta-media);
  text-align: center;
  margin-bottom: 0.9rem;
}
.rsv-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.46rem 0;
  font-size: 1.06rem;
}
.rsv-fila + .rsv-fila { border-top: 1px solid rgba(255,255,255,0.07); }
.rsv-fila span:first-child { color: var(--tinta-media); }
.rsv-fila span:last-child { color: var(--tinta); font-weight: 500; text-align: right; }
.rsv-fila--precio span:last-child { color: var(--oro); font-size: 1.15rem; }

/* ─── 03 · Datos ─── */
.rsv-campo { margin-bottom: 1.15rem; }
.rsv-campo label {
  display: block;
  font-size: 1.02rem;
  color: var(--tinta-media);
  margin-bottom: 0.45rem;
}
.rsv-campo input,
.rsv-campo textarea {
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 400;
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color 0.25s, background 0.25s;
  width: 100%;
}
.rsv-campo textarea { resize: vertical; min-height: 4.5rem; line-height: 1.65; }
.rsv-campo input:focus,
.rsv-campo textarea:focus { border-color: var(--oro); background: #2C2C31; }
.rsv-campo input::placeholder,
.rsv-campo textarea::placeholder { color: #857D72; }
.rsv-opcional { color: #857D72; font-size: 0.92rem; }

.rsv-trampa { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ─── Contador de caracteres ─── */
.rsv-etiqueta-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.rsv-etiqueta-fila label { margin-bottom: 0.45rem; }

.rsv-contador {
  font-size: 0.85rem;
  color: #6E675E;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: color 0.25s;
}
.rsv-contador.poco { color: var(--error); }

/* ─── Campos obligatorios y errores ─── */
.rsv-obl {
  color: var(--error);
  margin-left: 0.2rem;
  font-weight: 500;
}
.rsv-obligatorios {
  font-size: 0.92rem;
  color: var(--tinta-media);
  margin: 0.2rem 0 1rem;
}

.rsv-fallo {
  display: none;
  font-size: 0.92rem;
  color: var(--error);
  margin-top: 0.4rem;
}
.rsv-campo.mal .rsv-fallo { display: block; }

.rsv-campo.mal input,
.rsv-campo.mal textarea {
  border-color: var(--error);
  background: rgba(232,112,95,0.07);
}
.rsv-campo.mal input:focus,
.rsv-campo.mal textarea:focus { border-color: var(--error); }
.rsv-campo.mal .rsv-pais { border-color: var(--error); }

/* Aviso breve al marcar el campo, para que se note */
.rsv-campo.mal input,
.rsv-campo.mal .rsv-pais { animation: rsv-tiritar 0.3s ease; }
@keyframes rsv-tiritar {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ─── Paso del código SMS ─── */
.rsv-codigo { margin-top: 1.5rem; }
.rsv-codigo[hidden] { display: none; }

.rsv-codigo-etiqueta {
  display: block;
  font-size: 1.02rem;
  color: var(--tinta-media);
  margin-bottom: 0.8rem;
}
.rsv-codigo-campo {
  width: 100%;
  max-width: 11rem;
  margin: 0 auto;
  display: block;
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-indent: 0.5em;          /* compensa el espaciado del último dígito */
  text-align: center;
  padding: 0.8rem 0.5rem;
  outline: none;
  transition: border-color 0.25s, background 0.25s;
}
.rsv-codigo-campo:focus { border-color: var(--oro); background: #2C2C31; }
.rsv-codigo-campo::placeholder { color: #4E4A44; }
.rsv-codigo.mal .rsv-codigo-campo {
  border-color: var(--error);
  background: rgba(232,112,95,0.07);
  animation: rsv-tiritar 0.3s ease;
}
.rsv-codigo.mal .rsv-fallo { display: block; }

.rsv-reenviar {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--tinta-media);
  font-family: var(--sans);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.9rem 0.5rem 0.2rem;
  cursor: pointer;
  transition: color 0.25s;
}
.rsv-reenviar:hover:not(:disabled) { color: var(--oro); }
.rsv-reenviar:disabled {
  color: #6E675E;
  cursor: default;
  text-decoration: none;
}

/* ─── Botón ─── */
.rsv-btn {
  width: 100%;
  background: var(--oro);
  color: #16160F;
  border: none;
  border-radius: 12px;
  padding: 1.05rem 1.5rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: 0.6rem;
  transition: filter 0.25s, transform 0.15s;
}
.rsv-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rsv-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.rsv-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.97rem;
  color: var(--tinta-media);
  text-align: center;
  line-height: 1.6;
}
.rsv-pie svg { width: 1rem; height: 1rem; stroke: var(--oro); fill: none; stroke-width: 1.6; flex-shrink: 0; }

/* ─── Teléfono con prefijo ─── */
.rsv-tel { position: relative; display: flex; gap: 0.5rem; }

.rsv-pais {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  background: var(--panel-alto);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.02rem;
  padding: 0.85rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.rsv-pais:hover { background: #303036; }
.rsv-pais[aria-expanded="true"] { border-color: var(--oro); }
.rsv-bandera {
  width: 1.5rem; height: 1rem;
  border-radius: 2px;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}
.rsv-bandera img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rsv-prefijo { font-variant-numeric: tabular-nums; }
.rsv-flecha {
  width: 0.7rem; height: 0.5rem;
  stroke: var(--tinta-media); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s;
}
.rsv-pais[aria-expanded="true"] .rsv-flecha { transform: rotate(180deg); }

.rsv-tel input { flex: 1; min-width: 0; }

.rsv-paises {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 40;
  width: min(21rem, 100%);
  background: #202024;
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  overflow: hidden;
}
.rsv-buscar {
  width: 100%;
  background: #2A2A2F;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  outline: none;
}
.rsv-buscar::placeholder { color: #6E675E; }
.rsv-paises-lista { max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; }
.rsv-paises-lista::-webkit-scrollbar { width: 5px; }
.rsv-paises-lista::-webkit-scrollbar-thumb {
  background: rgba(224,185,106,0.35); border-radius: 3px;
}
.rsv-opcion {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  background: none;
  border: none;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.04rem;
  text-align: left;
  padding: 0.62rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.rsv-opcion:hover, .rsv-opcion.resaltada { background: #2E2E34; }
.rsv-opcion[aria-selected="true"] { color: var(--oro); }
.rsv-opcion-nombre { flex: 1; }
.rsv-opcion-pre { color: var(--tinta-media); font-variant-numeric: tabular-nums; }
.rsv-sin-resultado {
  padding: 0.9rem 1rem;
  color: var(--tinta-media);
  font-size: 0.95rem;
}

/* ─── Avisos ─── */
.rsv-aviso {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: rgba(224,185,106,0.1);
  border: 1px solid rgba(224,185,106,0.3);
  font-size: 0.98rem;
  color: var(--tinta);
  line-height: 1.6;
}
.rsv-vacio {
  color: var(--tinta-media);
  font-size: 1rem;
  padding: 1.25rem 0;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════
   CONFIRMACIÓN — el anillo de los 15 minutos
   ══════════════════════════════════════════════════════════ */
.rsv-final { display: none; text-align: center; }
.rsv-final.visible { display: block; animation: rsv-entrar 0.6s ease both; }
@keyframes rsv-entrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.rsv-anillo { position: relative; width: 168px; height: 168px; margin: 0.5rem auto 1.75rem; }
.rsv-anillo > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rsv-anillo circle { fill: none; stroke-width: 3; }
.rsv-anillo .pista { stroke: rgba(255,255,255,0.07); }
.rsv-anillo .avance {
  stroke: var(--oro);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.rsv-cuenta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.25rem;
}
.rsv-cuenta-cifra {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--oro);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rsv-cuenta-texto { font-size: 0.92rem; color: var(--tinta-media); }

.rsv-final h2 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--tinta);
  margin-bottom: 0.75rem;
}
.rsv-final h2 em { font-style: italic; color: var(--oro); }
.rsv-final-texto {
  font-size: 1.06rem;
  color: var(--tinta-media);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}
.rsv-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  background: #25D366;
  color: #0B2E18;
  text-decoration: none;
  padding: 1.05rem 1.5rem;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 500;
  margin-top: 1.5rem;
  transition: filter 0.25s, transform 0.15s;
}
.rsv-wa:hover { filter: brightness(1.06); transform: translateY(-1px); }
.rsv-wa svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
/* Confirmada: el anillo se completa y aparece la marca */
.rsv-marca {
  display: none;              /* el atributo hidden no funciona en SVG */
  width: 2.9rem; height: 2.9rem;
  stroke: var(--oro); fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 32; stroke-dashoffset: 32;
}
.rsv-confirmada .rsv-marca {
  display: block;
  animation: rsv-trazo 0.55s 0.15s ease forwards;
}
.rsv-confirmada .rsv-cuenta { gap: 0.5rem; }
@keyframes rsv-trazo { to { stroke-dashoffset: 0; } }
.rsv-confirmada .avance { stroke: var(--oro); }

.rsv-caducado .rsv-cuenta-cifra,
.rsv-caducado .avance { color: var(--tinta-media); stroke: rgba(255,255,255,0.15); }

/* ─── Botón de Telegram ─── */
.rsv-tg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  background: #2AABEE;
  color: #08283A;
  text-decoration: none;
  padding: 1.05rem 1.5rem;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 500;
  margin-top: 0.7rem;
  transition: filter 0.25s, transform 0.15s;
}
.rsv-tg[hidden] { display: none; }
.rsv-wa[hidden] { display: none; }
.rsv-tg:hover { filter: brightness(1.06); transform: translateY(-1px); }
.rsv-tg svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }

/* ─── Botón de correo ─── */
.rsv-mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--linea);
  color: var(--tinta);
  text-decoration: none;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 400;
  margin-top: 0.7rem;
  transition: border-color 0.25s, background 0.25s, transform 0.15s;
}
.rsv-mail[hidden] { display: none; }
.rsv-mail:hover {
  border-color: var(--oro);
  background: rgba(224,185,106,0.07);
  transform: translateY(-1px);
}
.rsv-mail svg { width: 1.3rem; height: 1.3rem; fill: var(--oro); }

/* ─── Accesibilidad ─── */
.rsv :focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .rsv *, .rsv *::before, .rsv *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Móvil ─── */
@media (max-width: 700px) {
  .rsv { padding: 0.5rem 1rem 3.5rem; }
  .rsv-tarjeta { padding: 1.5rem 1.25rem 1.75rem; border-radius: 14px; }
  .rsv-duraciones { grid-template-columns: 1fr 1fr; }
  .rsv-dur {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem; text-align: left;
  }
  .rsv-dur-tiempo { font-size: 1.2rem; }
  .rsv-dur-precio { margin-top: 0; }
  .rsv-horas { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
  .rsv-dias { margin: 0 -1.25rem; padding: 0 1.25rem 0.5rem; }
  .rsv-anillo { width: 145px; height: 145px; }
  .rsv-final h2 { font-size: 1.6rem; }
}