/* Modern UI for Reservas: glassmorphism + neon accents */
:root {
  --reservas-bg1: #0b1523;
  --reservas-bg2: #0f1f33;
  --reservas-accent: #dc3545;
  --reservas-accent-2: #ff6b6b;
  --reservas-text: #e6eef7;
  --reservas-muted: #9aa8b5;
  --reservas-card: rgba(18, 26, 40, 0.6);
  --reservas-border: rgba(255,255,255,0.12);
  --reservas-shadow: 0 30px 60px rgba(0,0,0,0.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Hero */
.reservas-hero {
  background: radial-gradient(1200px 500px at 10% 10%, rgba(220,53,69,.14), transparent 50%),
              radial-gradient(1200px 500px at 90% 0%, rgba(111,66,193,.18), transparent 50%),
              linear-gradient(180deg, var(--reservas-bg1), var(--reservas-bg2));
  color: var(--reservas-text);
  padding: 72px 0 36px;
}
.reservas-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: .5px;
  text-shadow: 0 8px 26px rgba(0,0,0,.45);
  animation: fadeInUp .6s var(--ease) both;
}
.reservas-hero__subtitle { opacity: .85; animation: fadeInUp .8s var(--ease) both; }

/* Layout */
.reserva-main { background: linear-gradient(180deg, transparent, rgba(11,21,35,.6)); }
.reservas-container { max-width: 1100px; margin: 0 auto; padding: 24px; }

/* Card */
.reserva-card {
  background: var(--reservas-card);
  border: 1px solid var(--reservas-border);
  backdrop-filter: saturate(1.25) blur(10px);
  box-shadow: var(--reservas-shadow);
  border-radius: 16px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.reserva-card:hover { transform: translateY(-2px); box-shadow: 0 40px 80px rgba(0,0,0,.55); }

/* Header + Steps */
.reserva-header__title { color: var(--reservas-text); }
.reserva-header__subtitle { color: var(--reservas-muted); }
.reserva-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.reserva-steps li { position: relative; padding: 10px 12px; border-radius: 999px; text-align: center; color: var(--reservas-muted); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); transition: all .35s var(--ease); }
.reserva-steps li.is-active { color: var(--reservas-text); background: linear-gradient(135deg, rgba(220,53,69,.26), rgba(220,53,69,.12)); border-color: rgba(220,53,69,.35); box-shadow: 0 10px 22px rgba(220,53,69,.25); }
.reserva-steps li.is-complete { color: #8fd19e; border-color: rgba(40,167,69,.35); background: linear-gradient(135deg, rgba(40,167,69,.18), rgba(40,167,69,.08)); }

/* Form */
.input-group .input-label { color: var(--reservas-muted); }
.input-control {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--reservas-text);
  border-radius: 12px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .12s var(--ease);
}
.input-control:focus { outline: none; border-color: rgba(220,53,69,.5); box-shadow: 0 0 0 4px rgba(220,53,69,.18); }
.input-control.has-error { border-color: rgba(220,53,69,.7); box-shadow: 0 0 0 4px rgba(220,53,69,.25); animation: fieldShake .28s ease; }
.input-error { color: #ffb4b4; opacity: .9; transition: opacity .25s var(--ease); }
.input-error.is-visible { opacity: 1; }

/* Horarios */
.reserva-skeleton { display: flex; gap: 8px; padding: 8px 0; }
.skeleton-pill { width: 96px; height: 36px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06)); animation: pulse 1.2s infinite; }
.horarios-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.horario-pill { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: var(--reservas-text); background: rgba(255,255,255,.06); cursor: pointer; transition: all .25s var(--ease); }
.horario-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 16px rgba(220,53,69,.18); border-color: rgba(220,53,69,.45); }
.horario-pill.is-disabled { opacity: .45; cursor: not-allowed; }
.horario-pill.is-active { background: linear-gradient(135deg, rgba(220,53,69,.26), rgba(220,53,69,.12)); border-color: rgba(220,53,69,.45); box-shadow: 0 12px 24px rgba(220,53,69,.28); }

.reserva-empty { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.18); color: var(--reservas-muted); }

/* Buttons */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 10px; border-radius: 12px; padding: 12px 18px; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.btn-primary { background: linear-gradient(135deg, var(--reservas-accent), var(--reservas-accent-2)); color: white; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 24px rgba(220,53,69,.35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(220,53,69,.45); }
.btn-secondary { background: rgba(255,255,255,.08); color: var(--reservas-text); border: 1px solid rgba(255,255,255,.18); }
.btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,.3); border-color: rgba(255,255,255,.28); }

.btn-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.6); border-top-color: transparent; border-radius: 50%; opacity: 0; transform: scale(.8); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.btn-spinner.is-visible { opacity: 1; transform: scale(1); animation: spin .8s linear infinite; }

/* Toasts */
.toast-container { position: fixed; top: 20px; right: 20px; display: grid; gap: 10px; z-index: 9999; }
.toast { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(18,26,40,.8); border: 1px solid rgba(255,255,255,.12); color: var(--reservas-text); border-radius: 12px; backdrop-filter: blur(6px); box-shadow: var(--reservas-shadow); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.toast.is-hide { opacity: 0; transform: translateY(-8px); }
.toast-close { background: transparent; border: none; color: var(--reservas-muted); font-size: 18px; cursor: pointer; }

/* High-contrast text overrides */
.section-head h3 { color: var(--reservas-text); }
.section-head .section-help { color: var(--reservas-muted); }
.reserva-summary .summary-label { color: var(--reservas-muted); }
.reserva-summary .summary-value { color: var(--reservas-text); font-weight: 600; }
.reserva-status { color: var(--reservas-text); }
.reserva-legal { color: var(--reservas-muted); }
.btn-secondary span { color: var(--reservas-text); }

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%{opacity:.7} 50%{opacity:1} 100%{opacity:.7} }
@keyframes fieldShake { 0%{transform:translateX(0)} 25%{transform:translateX(-2px)} 50%{transform:translateX(2px)} 75%{transform:translateX(-2px)} 100%{transform:translateX(0)} }