/* ============================================
   Reservas Custom – Frontend CSS
   ============================================ */

:root {
  --rc-bg:           #FAF7F4;
  --rc-bar-bg:       #FFFFFF;
  --rc-border:       #DDD5CC;
  --rc-btn-bg:       #8B1A1A;
  --rc-btn-text:     #FFFFFF;
  --rc-title:        #1C1917;
  --rc-text:         #1C1917;
  --rc-muted:        #78716C;
  --rc-green:        #25D366;
  --rc-input-radius: 6px;
  --rc-btn-radius:   0px;
  --rc-wrap-radius:  12px;
  --rc-font:         Georgia, serif;
}

/* ---- Wrapper ---- */
.rc-wrapper {
  font-family: var(--rc-font);
  background:  var(--rc-bg);
  padding:     32px 28px 36px;
  border-radius: var(--rc-wrap-radius);
  max-width:   940px;
  margin:      0 auto 40px;
  color:       var(--rc-text);
  position:    relative;
}

.rc-title {
  font-size:    1.5rem;
  font-weight:  700;
  color:        var(--rc-title);
  margin:       0 0 22px;
  font-family:  var(--rc-font);
  letter-spacing: -.3px;
}

/* ============================================
   LAYOUT: BAR (default)
   ============================================ */
.rc-layout--bar .rc-bar {
  display:       flex;
  align-items:   stretch;
  background:    var(--rc-bar-bg);
  border:        1.5px solid var(--rc-border);
  border-radius: var(--rc-input-radius);
  overflow:      hidden;
  margin-bottom: 14px;
}

.rc-layout--bar .rc-field {
  flex:          1;
  border-right:  1.5px solid var(--rc-border);
  display:       flex;
  flex-direction: column;
  padding:       10px 14px;
  min-width:     0;
}

.rc-layout--bar .rc-field:last-of-type { border-right: none; }

/* ============================================
   LAYOUT: STACKED
   ============================================ */
.rc-layout--stacked .rc-bar {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap:                   10px;
  margin-bottom:         14px;
  align-items:           start;
}

.rc-layout--stacked .rc-field {
  background:    var(--rc-bar-bg);
  border:        1.5px solid var(--rc-border);
  border-radius: var(--rc-input-radius);
  padding:       10px 14px;
  display:       flex;
  flex-direction: column;
}

/* ============================================
   LAYOUT: CARD
   ============================================ */
.rc-layout--card .rc-bar {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   12px;
  margin-bottom:         14px;
}

.rc-layout--card .rc-field {
  background:    var(--rc-bar-bg);
  border:        1.5px solid var(--rc-border);
  border-radius: var(--rc-input-radius);
  padding:       12px 14px;
  display:       flex;
  flex-direction: column;
}

.rc-layout--card .rc-btn-submit {
  grid-column: 1 / -1;
}

/* ============================================
   SHARED FIELD STYLES
   ============================================ */
.rc-label {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:       var(--rc-muted);
  margin-bottom: 4px;
}

.rc-icon { font-size: 1rem; line-height: 1; }

.rc-field input,
.rc-field select,
.rc-field textarea {
  border:       none;
  outline:      none;
  background:   transparent;
  font-family:  var(--rc-font);
  font-size:    .95rem;
  color:        var(--rc-text);
  padding:      0;
  width:        100%;
  appearance:   none;
  -webkit-appearance: none;
}

.rc-field input::placeholder { color: var(--rc-muted); }
.rc-field input[type="number"] { -moz-appearance: textfield; }
.rc-field input[type="number"]::-webkit-outer-spin-button,
.rc-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---- Submit button ---- */
.rc-btn-submit {
  background:   var(--rc-btn-bg);
  color:        var(--rc-btn-text);
  border:       none;
  border-radius: var(--rc-btn-radius);
  padding:      0 28px;
  font-family:  var(--rc-font);
  font-size:    .82rem;
  font-weight:  700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor:       pointer;
  transition:   filter .2s, transform .15s;
  white-space:  nowrap;
  min-height:   52px;
  align-self:   stretch;
}

.rc-btn-submit:hover  { filter: brightness(1.12); }
.rc-btn-submit:active { transform: scale(.98); }

/* ---- Personal fields ---- */
.rc-personal {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   10px;
}

.rc-pfield {
  background:    var(--rc-bar-bg);
  border:        1.5px solid var(--rc-border);
  border-radius: var(--rc-input-radius);
  overflow:      hidden;
}

.rc-pfield--full { grid-column: 1 / -1; }

.rc-pfield input,
.rc-pfield textarea {
  width:       100%;
  border:      none;
  outline:     none;
  background:  transparent;
  font-family: var(--rc-font);
  font-size:   .92rem;
  color:       var(--rc-text);
  padding:     12px 14px;
  box-sizing:  border-box;
  resize:      none;
}

.rc-pfield input::placeholder,
.rc-pfield textarea::placeholder { color: var(--rc-muted); }

/* ---- Error ---- */
.rc-error {
  margin-top:  14px;
  background:  #fef2f2;
  border:      1px solid #fca5a5;
  color:       #991b1b;
  padding:     12px 16px;
  border-radius: var(--rc-input-radius);
  font-size:   .9rem;
}

/* ---- Modal ---- */
.rc-modal {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.5);
  display:    flex;
  align-items: center;
  justify-content: center;
  z-index:    99999;
  padding:    16px;
}

.rc-modal__box {
  background:    #fff;
  border-radius: 14px;
  padding:       40px 36px;
  max-width:     440px;
  width:         100%;
  text-align:    center;
  box-shadow:    0 20px 60px rgba(0,0,0,.2);
  animation:     rc-pop .25s cubic-bezier(.34,1.56,.64,1);
  font-family:   var(--rc-font);
}

@keyframes rc-pop {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.rc-modal__icon  { font-size: 3rem; margin-bottom: 12px; }
.rc-modal__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 10px; color: #1C1917; font-family: var(--rc-font); }
.rc-modal__msg   { color: #78716C; margin-bottom: 8px; font-size: .95rem; }
.rc-modal__sub   { color: #1C1917; margin-bottom: 20px; font-size: .9rem; }

.rc-btn-wa {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      #25D366;
  color:           #fff;
  text-decoration: none;
  font-family:     var(--rc-font);
  font-size:       .95rem;
  font-weight:     700;
  padding:         13px 28px;
  border-radius:   50px;
  transition:      background .2s, transform .15s;
  margin-bottom:   14px;
}
.rc-btn-wa:hover { background: #1ebe5d; transform: translateY(-1px); }

.rc-btn-close {
  display:       block;
  width:         100%;
  background:    transparent;
  border:        1.5px solid #DDD5CC;
  border-radius: 50px;
  padding:       10px;
  font-family:   var(--rc-font);
  font-size:     .9rem;
  color:         #78716C;
  cursor:        pointer;
  transition:    border-color .2s;
}
.rc-btn-close:hover { border-color: var(--rc-btn-bg); color: var(--rc-btn-bg); }

/* ---- Responsive ---- */
@media (max-width: 680px) {
  .rc-layout--bar .rc-bar,
  .rc-layout--stacked .rc-bar { flex-direction: column; grid-template-columns: 1fr; }
  .rc-layout--card .rc-bar    { grid-template-columns: 1fr; }
  .rc-personal                { grid-template-columns: 1fr; }
  .rc-pfield--full            { grid-column: 1; }
  .rc-btn-submit              { min-height: 48px; }
}