/* =============================================================
   reserva.css — Página pública de reservas (Navaja & Co.)
   ============================================================= */

/* === TOKENS PROPIOS DE RESERVA === */
:root {
  --ink:     #1a1410;
  --ink-2:   #2c241d;
  --copper:  #b8552c;
  --gold:    #c9a961;
  --success: #5a7a4a;
  --wa:      #25d366;
}

/* === BODY DE RESERVA === */
html, body {
  color:       var(--ink);
  font-size:   14.5px;
  min-height:  100vh;
}

body {
  background-image:
    radial-gradient(circle at 15% 5%, rgba(184,85,44,0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 95%, rgba(92,31,26,0.06) 0%, transparent 50%);
}

/* === LAYOUT === */
.wrap {
  max-width: 540px;
  margin:    0 auto;
  padding:   0 20px 40px;
  position:  relative;
  z-index:   2;
}

/* ============ HERO ============ */
.hero {
  padding:       36px 4px 28px;
  text-align:    left;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
  position:      relative;
}

.brand-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 22px;
}

.brand-mark {
  font-family:    var(--font-serif);
  font-style:     italic;
  font-size:      24px;
  font-weight:    400;
  letter-spacing: -0.02em;
  color:          var(--ink);
  line-height:    1;
}

.brand-mark span { color: var(--copper); font-style: normal; font-weight: 600; }

.back-link {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   12.5px;
  color:       var(--ink-soft);
  text-decoration: none;
  transition:  color 0.15s;
  margin-right: auto;
}
.back-link:hover { color: var(--ink); }

.verified {
  background:     var(--ink);
  color:          var(--cream);
  font-size:      9.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding:        4px 10px;
  border-radius:  12px;
  font-weight:    500;
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
}

.verified::before {
  content:       "";
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #6fbf5e;
  box-shadow:    0 0 0 2px rgba(111,191,94,0.3);
}

h1.hero-title {
  font-family:    var(--font-serif);
  font-size:      46px;
  font-weight:    300;
  line-height:    1;
  letter-spacing: -0.03em;
  color:          var(--ink);
  margin-bottom:  14px;
}

h1.hero-title em { font-style: italic; color: var(--copper); font-weight: 400; }

.hero-meta {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  color:          var(--ink-soft);
  font-size:      13.5px;
  margin-top:     8px;
}

.hero-meta-row { display: flex; align-items: center; gap: 9px; }
.hero-meta-row svg { color: var(--copper); flex-shrink: 0; }

/* WhatsApp FAB */
.wa-fab {
  position:      fixed;
  bottom:        22px;
  right:         22px;
  background:    var(--wa);
  color:         white;
  width:         54px;
  height:        54px;
  border-radius: 50%;
  display:       grid;
  place-items:   center;
  cursor:        pointer;
  box-shadow:
    0 14px 30px -8px rgba(37,211,102,0.5),
    0 0 0 4px rgba(37,211,102,0.15);
  z-index:    50;
  border:     none;
  transition: all 0.25s;
  animation:  pulse 2.5s ease-in-out infinite;
}

.wa-fab:hover { transform: scale(1.08); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 14px 30px -8px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.4); }
  50%       { box-shadow: 0 14px 30px -8px rgba(37,211,102,0.5), 0 0 0 14px rgba(37,211,102,0); }
}

/* ============ STEPPER ============ */
.stepper {
  display:       flex;
  align-items:   center;
  margin-bottom: 28px;
  padding:       0 4px;
}

.step {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex:        1;
  position:    relative;
}

.step-num {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  border:        1.5px solid var(--line);
  background:    var(--cream);
  color:         var(--ink-soft);
  display:       grid;
  place-items:   center;
  font-family:   var(--font-mono);
  font-size:     12px;
  font-weight:   600;
  flex-shrink:   0;
  transition:    all 0.3s;
  z-index:       2;
}

.step.done   .step-num { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.step.active .step-num { background: var(--copper); border-color: var(--copper); color: white; box-shadow: 0 0 0 4px rgba(184,85,44,0.18); }

.step-label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color:          var(--ink-soft);
  font-weight:    500;
}

.step.active .step-label { color: var(--ink); font-weight: 600; }

.step-line {
  flex:       1;
  height:     1.5px;
  background: var(--line);
  margin:     0 8px;
  position:   relative;
}

.step-line.done { background: var(--ink); }

/* ============ PANEL ============ */
.panel {
  background:    white;
  border:        1px solid var(--line-soft);
  border-radius: 12px;
  padding:       26px 24px;
  box-shadow:    0 8px 30px -12px rgba(26,20,16,0.1);
  margin-bottom: 18px;
}

.panel-title {
  font-family:    var(--font-serif);
  font-size:      26px;
  font-weight:    400;
  letter-spacing: -0.02em;
  line-height:    1;
  margin-bottom:  6px;
}

.panel-title em { font-style: italic; color: var(--copper); }

.panel-sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 22px; }

.stage         { display: none; }
.stage.active  { display: block; animation: slideIn 0.35s ease; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ PASO 1: SERVICIOS ============ */
.svc-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.svc-pick {
  border:        1.5px solid var(--line);
  border-radius: 10px;
  padding:       16px 18px;
  cursor:        pointer;
  transition:    all 0.18s;
  display:       flex;
  align-items:   center;
  gap:           14px;
  background:    white;
}

.svc-pick:hover    { border-color: var(--copper); transform: translateY(-1px); }
.svc-pick.selected { border-color: var(--copper); background: rgba(184,85,44,0.05); box-shadow: 0 0 0 3px rgba(184,85,44,0.1); }

.svc-pick-icon {
  width:         42px;
  height:        42px;
  border-radius: 50%;
  background:    var(--ink);
  color:         var(--copper);
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
}

.svc-pick-icon svg { width: 18px; height: 18px; }
.svc-pick.selected .svc-pick-icon { background: var(--copper); color: var(--cream); }

.svc-pick-info { flex: 1; min-width: 0; }

.svc-pick-name {
  font-size:     15px;
  font-weight:   500;
  color:         var(--ink);
  margin-bottom: 3px;
}

.svc-pick-meta {
  font-size:   12px;
  color:       var(--ink-soft);
  font-family: var(--font-mono);
  display:     flex;
  gap:         10px;
  align-items: center;
}

.svc-pick-meta::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); display: none;
}

.svc-pick-price {
  font-family: var(--font-serif);
  font-size:   22px;
  font-weight: 400;
  color:       var(--copper);
  flex-shrink: 0;
  line-height: 1;
}

/* ============ PASO 1: BARBEROS ============ */
.barber-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
}

.barber-pick {
  border:        1.5px solid var(--line);
  border-radius: 10px;
  padding:       16px 8px;
  cursor:        pointer;
  transition:    all 0.2s;
  text-align:    center;
  background:    white;
}

.barber-pick:hover    { border-color: var(--copper); }
.barber-pick.selected { border-color: var(--copper); background: rgba(184,85,44,0.06); box-shadow: 0 0 0 3px rgba(184,85,44,0.1); }

.barber-avatar {
  width:         54px;
  height:        54px;
  border-radius: 50%;
  margin:        0 auto 10px;
  background:    linear-gradient(135deg, var(--copper), var(--burgundy));
  display:       grid;
  place-items:   center;
  color:         var(--cream);
  font-family:   var(--font-serif);
  font-size:     22px;
  font-weight:   400;
}

.barber-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.barber-tag  { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-top: 3px; }

/* ============ PASO 2: FECHA Y HORA ============ */
.date-strip {
  display:          flex;
  gap:              8px;
  overflow-x:       auto;
  padding:          4px 2px 12px;
  margin:           0 -4px 18px;
  scroll-padding:   4px;
  scrollbar-width:  thin;
  scrollbar-color:  var(--line) transparent;
}

.date-strip::-webkit-scrollbar       { height: 6px; }
.date-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.date-card {
  flex:          0 0 auto;
  min-width:     64px;
  padding:       12px 8px;
  border:        1.5px solid var(--line);
  border-radius: 10px;
  background:    white;
  cursor:        pointer;
  text-align:    center;
  transition:    all 0.18s;
}

.date-card:hover    { border-color: var(--copper); }
.date-card.selected { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.date-card.disabled { opacity: 0.35; cursor: not-allowed; background: var(--cream-2); }

.date-day   { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.7; margin-bottom: 4px; }
.date-num   { font-family: var(--font-serif); font-size: 22px; line-height: 1; font-weight: 400; }
.date-month { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; opacity: 0.55; font-family: var(--font-mono); }

.date-card.selected .date-month,
.date-card.selected .date-day { opacity: 0.85; }

.slots-label {
  font-size:       11px;
  text-transform:  uppercase;
  letter-spacing:  0.18em;
  color:           var(--ink-soft);
  font-weight:     500;
  margin-bottom:   12px;
  margin-top:      4px;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.slots-label .available {
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          var(--success);
  text-transform: none;
  letter-spacing: 0;
}

.slots-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   7px;
}

.slot-btn {
  padding:       10px 6px;
  border:        1.5px solid var(--line);
  border-radius: 8px;
  background:    white;
  cursor:        pointer;
  font-family:   var(--font-mono);
  font-size:     12.5px;
  font-weight:   500;
  color:         var(--ink);
  transition:    all 0.15s;
}

.slot-btn:hover    { border-color: var(--copper); }
.slot-btn.selected { background: var(--copper); border-color: var(--copper); color: white; transform: scale(1.04); }
.slot-btn.taken    { opacity: 0.3; cursor: not-allowed; background: var(--cream-2); text-decoration: line-through; }

.slot-btn-blocked {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           5px;
  opacity:       0.55;
  cursor:        not-allowed;
  background:    rgba(156,42,31,0.07);
  border:        1.5px solid rgba(156,42,31,0.25);
  border-radius: 8px;
  color:         var(--danger, #9c2a1f);
  font-size:     11.5px;
  text-decoration: none;
}

/* ============ PASO 3: DATOS DEL CLIENTE ============ */
.field { margin-bottom: 14px; }

.field-label {
  font-size:      10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          var(--ink-soft);
  margin-bottom:  6px;
  display:        block;
  font-weight:    500;
}

.input {
  width:       100%;
  padding:     12px 14px;
  border:      1.5px solid var(--line);
  border-radius: 8px;
  background:  white;
  font-family: inherit;
  font-size:   14.5px;
  color:       var(--ink);
  transition:  all 0.15s;
}

.input:focus {
  outline:    none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(184,85,44,0.12);
}

.input-prefix { position: relative; }
.input-prefix .input { padding-left: 68px; }

.input-prefix-text {
  position:      absolute;
  left:          13px;
  top:           1px;
  bottom:        1px;
  display:       flex;
  align-items:   center;
  font-family:   var(--font-mono);
  color:         var(--ink-soft);
  font-size:     14px;
  border-right:  1px solid var(--line);
  padding-right: 9px;
}

/* ============ BIRTHDAY FIELD ============ */
.birthday-wrap {
  position: relative;
}
.birthday-icon {
  position:    absolute;
  left:        13px;
  top:         50%;
  transform:   translateY(-50%);
  width:       17px; height: 17px;
  color:       var(--copper);
  pointer-events: none;
  flex-shrink: 0;
}
.birthday-input {
  padding-left: 42px !important;
  cursor:       pointer;
}
.birthday-input:not([value=""]) { color: var(--ink); }

.field-hint {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  7px;
  font-size:   11.5px;
  color:       var(--copper);
  line-height: 1.4;
  font-style:  italic;
}
.field-hint svg { flex-shrink: 0; color: var(--copper); opacity: 0.7; }

/* ── Flatpickr theme override (fp-navaja) ── */
.fp-navaja.flatpickr-calendar {
  border:      1.5px solid var(--line);
  border-radius: 12px;
  box-shadow:  0 16px 40px -12px rgba(26,20,16,0.2);
  font-family: inherit;
  font-size:   13px;
}
.fp-navaja .flatpickr-months {
  padding: 8px 4px 4px;
  align-items: center;
}
.fp-navaja .flatpickr-month { height: 36px; }
.fp-navaja .flatpickr-current-month {
  font-family: var(--font-serif);
  font-size:   18px;
  font-weight: 400;
  color:       var(--ink);
}
.fp-navaja .flatpickr-current-month .numInputWrapper input,
.fp-navaja .flatpickr-current-month select {
  font-family: inherit;
  color:       var(--ink);
}
.fp-navaja .flatpickr-prev-month svg,
.fp-navaja .flatpickr-next-month svg { fill: var(--ink-soft); }
.fp-navaja .flatpickr-prev-month:hover svg,
.fp-navaja .flatpickr-next-month:hover svg { fill: var(--copper); }
.fp-navaja .flatpickr-weekday {
  font-family: var(--font-mono);
  font-size:   9.5px;
  color:       var(--ink-soft);
  text-transform: uppercase;
}
.fp-navaja .flatpickr-day {
  border-radius: 8px;
  color:         var(--ink);
  font-size:     13px;
}
.fp-navaja .flatpickr-day:hover {
  background:   rgba(184,85,44,0.1);
  border-color: rgba(184,85,44,0.3);
}
.fp-navaja .flatpickr-day.today {
  border-color: var(--copper);
  color:        var(--copper);
  font-weight:  600;
}
.fp-navaja .flatpickr-day.selected,
.fp-navaja .flatpickr-day.selected:hover {
  background:   var(--copper);
  border-color: var(--copper);
  color:        white;
  font-weight:  600;
}

/* ============ PASO 4: RESUMEN ============ */
.summary {
  background: var(--ink);
  color:      var(--cream);
  border-radius: 12px;
  padding:    22px 24px;
  margin-bottom: 18px;
  position:   relative;
  overflow:   hidden;
}

.summary::before {
  content:        "";
  position:       absolute;
  top: -40px; right: -40px;
  width:          160px;
  height:         160px;
  background:     radial-gradient(circle, rgba(184,85,44,0.3) 0%, transparent 65%);
  pointer-events: none;
}

.summary-title {
  font-family:    var(--font-serif);
  font-size:      18px;
  font-weight:    400;
  margin-bottom:  16px;
  color:          var(--cream);
  letter-spacing: -0.01em;
}

.summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         9px 0;
  border-bottom:   1px solid rgba(244,237,226,0.1);
  font-size:       13.5px;
}

.summary-row:last-of-type { border-bottom: none; }
.summary-label { color: rgba(244,237,226,0.65); }
.summary-value { color: var(--cream); font-weight: 500; }

.summary-total {
  margin-top:      12px;
  padding-top:     14px;
  border-top:      1.5px solid rgba(244,237,226,0.2);
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
}

.summary-total-label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          rgba(244,237,226,0.55);
}

.summary-total-amount {
  font-family:    var(--font-serif);
  font-size:      32px;
  font-weight:    300;
  color:          var(--gold);
  letter-spacing: -0.02em;
  line-height:    1;
}

/* Opciones de pago */
.pay-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-bottom:         6px;
}

.pay-pick {
  border:        1.5px solid var(--line);
  border-radius: 10px;
  padding:       16px 14px;
  background:    white;
  cursor:        pointer;
  transition:    all 0.18s;
  text-align:    center;
}

.pay-pick:hover    { border-color: var(--copper); }
.pay-pick.selected { border-color: var(--copper); background: rgba(184,85,44,0.05); box-shadow: 0 0 0 3px rgba(184,85,44,0.1); }

.pay-pick-logo {
  width:         44px;
  height:        44px;
  border-radius: 10px;
  margin:        0 auto 10px;
  display:       grid;
  place-items:   center;
  color:         white;
}

.pay-pick.mp   .pay-pick-logo { background: linear-gradient(135deg, #00b1ea, #0077a8); }
.pay-pick.cash .pay-pick-logo { background: var(--ink); color: var(--gold); }

.pay-pick-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.pay-pick-sub  { font-size: 10.5px; color: var(--ink-soft); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ============ BOTONES DE NAVEGACIÓN ============ */
.nav-row { display: flex; gap: 10px; margin-top: 22px; }

.btn {
  border:        1.5px solid var(--ink);
  background:    var(--ink);
  color:         var(--cream);
  padding:       14px 22px;
  border-radius: 8px;
  font-family:   inherit;
  font-size:     14px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all 0.2s;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           8px;
  flex:          1;
  letter-spacing: 0.01em;
}

.btn:hover         { background: var(--copper-deep); border-color: var(--copper-deep); }
.btn:disabled      { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--ink); border-color: var(--ink); }

.btn.ghost         { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover   { background: white; border-color: var(--ink); color: var(--ink); }
.btn.copper        { background: var(--copper); border-color: var(--copper); }
.btn.copper:hover  { background: var(--copper-deep); border-color: var(--copper-deep); }

/* ============ PANTALLA DE ÉXITO ============ */
.success-wrap { text-align: center; padding: 30px 10px 20px; }

.success-icon {
  width:         84px;
  height:        84px;
  border-radius: 50%;
  background:    var(--ink);
  margin:        0 auto 22px;
  display:       grid;
  place-items:   center;
  color:         var(--gold);
  position:      relative;
  animation:     pop 0.6s cubic-bezier(.2,.9,.3,1.4);
}

@keyframes pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.success-icon::after {
  content:       "";
  position:      absolute;
  inset:         -6px;
  border-radius: 50%;
  border:        1.5px solid var(--copper);
  opacity:       0.4;
}

.success-title {
  font-family:    var(--font-serif);
  font-size:      38px;
  font-weight:    300;
  line-height:    1.05;
  letter-spacing: -0.02em;
  margin-bottom:  8px;
}

.success-title em { font-style: italic; color: var(--copper); }

.success-sub {
  color:        var(--ink-soft);
  font-size:    14px;
  margin-bottom: 26px;
  max-width:    360px;
  margin-left:  auto;
  margin-right: auto;
}

.receipt {
  background:    var(--cream);
  border:        1px dashed var(--line);
  border-radius: 10px;
  padding:       20px 22px;
  text-align:    left;
  margin-bottom: 22px;
}

.receipt-row {
  display:         flex;
  justify-content: space-between;
  padding:         7px 0;
  font-size:       13px;
  color:           var(--ink-soft);
  border-bottom:   1px dotted var(--line);
}

.receipt-row:last-child          { border: none; }
.receipt-row strong              { color: var(--ink); font-weight: 500; }
.receipt-row.code strong         { font-family: var(--font-mono); color: var(--copper); }

/* ============ RESPONSIVE ============ */
@media (max-width: 480px) {
  .wrap                          { padding: 0 16px 90px; }
  h1.hero-title                  { font-size: 38px; }
  .panel                         { padding: 22px 18px; }
  .barber-grid                   { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .slots-grid                    { grid-template-columns: repeat(3, 1fr); }
  .step-label                    { display: none; }
  .stepper .step                 { flex: 0 0 auto; }
  .stepper .step-line            { flex: 1; }
  .success-title                 { font-size: 30px; }
  .summary-total-amount          { font-size: 28px; }
  .panel-title                   { font-size: 22px; }
  .svc-pick-price                { font-size: 19px; }
}

/* ============ TOAST DE AVISO ============ */
.rsv-toast {
  position:        fixed;
  left:            50%;
  bottom:          28px;
  transform:       translateX(-50%) translateY(20px);
  display:         flex;
  align-items:     center;
  gap:             10px;
  max-width:       min(92vw, 420px);
  background:      var(--ink, #1a1410);
  color:           #fff;
  border-left:     3px solid var(--danger, #9c2a1f);
  border-radius:   10px;
  padding:         13px 18px;
  font-size:       14px;
  line-height:     1.35;
  box-shadow:      0 14px 40px -10px rgba(0,0,0,.45);
  opacity:         0;
  pointer-events:  none;
  z-index:         200;
  transition:      opacity .25s, transform .25s;
}
.rsv-toast.show {
  opacity:    1;
  transform:  translateX(-50%) translateY(0);
}
.rsv-toast svg { flex-shrink: 0; color: #e06a4f; }

/* ============ BUSCAR TURNO POR CÓDIGO ============ */
.lookup-box {
  background:    var(--cream-2, #efe7d8);
  border:        1px solid var(--line);
  border-radius: 12px;
  padding:       14px 16px;
  margin-bottom: 22px;
}
.lookup-text {
  display:       flex;
  align-items:   center;
  gap:           9px;
  font-size:     13px;
  color:         var(--ink-soft);
  margin-bottom: 10px;
  line-height:   1.35;
}
.lookup-text svg { flex-shrink: 0; color: var(--copper); }
.lookup-row {
  display: flex;
  gap:     8px;
}
.lookup-input {
  flex:           1;
  min-width:      0;
  padding:        11px 13px;
  border:         1px solid var(--line);
  border-radius:  9px;
  background:     white;
  font-family:    var(--font-mono);
  font-size:      14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--ink);
}
.lookup-input:focus { outline: none; border-color: var(--copper); }
.lookup-row .btn { flex-shrink: 0; }

/* ============ MODAL VER / CANCELAR TURNO ============ */
.rsv-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(26,20,16,0.55);
  backdrop-filter: blur(4px);
  z-index:         220;
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}
.rsv-modal-overlay.show { display: flex; }
.rsv-modal {
  position:      relative;
  background:    var(--cream, #f7f1e6);
  border:        1px solid var(--line);
  border-radius: 14px;
  width:         100%;
  max-width:     420px;
  max-height:    calc(100vh - 40px);
  overflow-y:    auto;
  box-shadow:    0 30px 80px -20px rgba(26,20,16,0.5);
  padding:       24px;
}
.rsv-modal-close {
  position:   absolute;
  top:        14px;
  right:      16px;
  background: transparent;
  border:     0;
  font-size:  24px;
  line-height:1;
  cursor:     pointer;
  color:      var(--ink-soft);
}
.rsv-modal-close:hover { color: var(--ink); }
.rsv-modal-head { margin-bottom: 16px; }
.rsv-modal-badge {
  display:        inline-block;
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          #1a6e3c;
  background:     rgba(26,110,60,.12);
  border:         1px solid rgba(26,110,60,.25);
  border-radius:  5px;
  padding:        3px 8px;
  margin-bottom:  8px;
}
.rsv-modal-badge.cancelado {
  color:      var(--danger, #9c2a1f);
  background: rgba(156,42,31,.1);
  border-color: rgba(156,42,31,.25);
}
.rsv-modal-title { font-family: var(--font-serif); font-size: 26px; font-weight: 400; }
.rsv-modal-title em { font-style: italic; color: var(--copper); }
.rsv-modal-body {
  border-top:    1px solid var(--line);
  margin-top:    4px;
  padding-top:   8px;
}
.rm-row {
  display:         flex;
  justify-content: space-between;
  gap:             14px;
  padding:         9px 0;
  border-bottom:   1px solid var(--line-soft, rgba(0,0,0,.08));
  font-size:       14px;
}
.rm-row:last-child { border-bottom: none; }
.rm-row span   { color: var(--ink-soft); }
.rm-row strong { color: var(--ink); font-weight: 600; text-align: right; }
.rsv-modal-foot {
  display:         flex;
  gap:             10px;
  justify-content: flex-end;
  margin-top:      18px;
}
.btn.rm-cancel {
  background:   var(--danger, #9c2a1f);
  border-color: var(--danger, #9c2a1f);
  color:        #fff;
}
.btn.rm-cancel:hover { background: #7a1a12; border-color: #7a1a12; }
.rsv-modal-confirm {
  margin-top:    16px;
  padding-top:   16px;
  border-top:    1px solid var(--line);
}
.rsv-modal-confirm p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; margin: 0 0 14px; }
.rm-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }