:root{
  --bg0:#06101d;
  --bg1:#071425;

  --glass: rgba(255,255,255,.06);
  --glass2: rgba(0,0,0,.18);
  --line: rgba(255,255,255,.10);

  --txt:#eaf2ff;
  --mut:#9bb0c9;

  --blue:#2f6bff;
  --green:#27d17f;
  --red:#ff4d4d;
  --gray:#7c8aa6;

  --radius:18px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--txt);
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(47,107,255,.25) 0%, transparent 55%),
    radial-gradient(900px 600px at 85% 25%, rgba(39,209,127,.12) 0%, transparent 60%),
    radial-gradient(900px 600px at 65% 85%, rgba(255,77,77,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* =========================
   TOPBAR
   ========================= */
.topbar{
  max-width:1200px;
  margin:18px auto 0;
  padding:0 16px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:14px;
  align-items:center;
}

.back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--txt);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.2px;
  transition: transform .15s ease, filter .15s ease;
}
.back:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.back:active{ transform:translateY(0); }

.brand-title{
  font-size:30px;
  font-weight:950;
  letter-spacing:.2px;
  line-height:1.1;
}
.brand-sub{
  margin-top:6px;
  color:var(--mut);
  font-size:13px;
  line-height:1.35;
}

.legend{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  color:var(--mut);
  font-size:13px;
}
.legItem{ white-space:nowrap; }

.dot{
  display:inline-block;
  width:10px;height:10px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
  border:1px solid rgba(255,255,255,.18);
}
.dot-free{ background:var(--green); }
.dot-booked{ background:var(--red); }
.dot-past{ background:var(--gray); }

/* =========================
   LAYOUT
   ========================= */
.wrap{
  max-width:1200px;
  margin:14px auto 0;
  padding:0 16px 26px;
}

.grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:16px;
  align-items:start;
}

/* =========================
   CARD
   ========================= */
.card{
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(47,107,255,.10), transparent 60%),
    radial-gradient(900px 520px at 90% 35%, rgba(39,209,127,.08), transparent 60%),
    rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(10px);
}

.cardHead{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.06));
}

.cardBody{
  padding:14px 16px 16px;
}

.card h2{
  margin:0;
  font-size:20px;
  letter-spacing:.2px;
}
.sub{
  margin:6px 0 0;
  color:var(--mut);
  font-size:12px;
  line-height:1.35;
}

/* =========================
   FORM
   ========================= */
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.field{
  display:grid;
  gap:6px;
}
.field span{
  font-size:12px;
  color:var(--mut);
}

.span2{ grid-column: span 2; }

input,select{
  width:100%;
  height:44px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color:var(--txt);
  outline:none;
  transition: border-color .15s ease, filter .15s ease, background .15s ease;
}
input::placeholder{ color:rgba(155,176,201,.65); }

input:focus, select:focus{
  border-color: rgba(47,107,255,.55);
  filter: brightness(1.04);
  background: rgba(0,0,0,.28);
}

/* =========================
   PRICE BOX
   ========================= */
.priceBox{
  margin-top:8px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(47,107,255,.18);
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(47,107,255,.16), transparent 60%),
    radial-gradient(600px 300px at 80% 40%, rgba(39,209,127,.10), transparent 60%),
    rgba(0,0,0,.18);
}

.priceRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 0;
  font-size:14px;
  color: rgba(232,238,247,.92);
}
.priceRow.total{
  margin-top:4px;
  font-size:16px;
}
.priceRow b{ font-weight:950; }

.priceHint{
  margin-top:8px;
  color: rgba(232,238,247,.75);
  font-size:12px;
  line-height:1.35;
}

/* =========================
   BUTTON + MSG
   ========================= */
.btnPrimary{
  margin-top:10px;
  width:100%;
  height:48px;
  border:none;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(47,107,255,1), rgba(47,107,255,.72));
  color:#fff;
  font-weight:950;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btnPrimary:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btnPrimary:active{ transform:translateY(0); }
.btnPrimary:disabled{ opacity:.65; cursor:not-allowed; transform:none; }

.msg{
  margin-top:10px;
  min-height:18px;
  color:#ffd180;
  font-size:13px;
  line-height:1.35;
}

.footnote{
  margin-top:12px;
  color:var(--mut);
  font-size:12px;
}

/* =========================
   AVAILABILITY
   ========================= */
.availability{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}

.calPanel{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 420px at 20% 15%, rgba(47,107,255,.14), transparent 60%),
    radial-gradient(700px 420px at 90% 30%, rgba(39,209,127,.10), transparent 60%),
    rgba(0,0,0,.16);
  padding:12px;
}

.calPanelHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.calTitle{ font-weight:950; font-size:13px; letter-spacing:.2px; color:rgba(232,238,247,.95); }
.calHint{ font-size:12px; color:var(--mut); }

.listPanel{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding:12px;
  min-height: 320px;
}

.listPanelHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.listTitle{ font-weight:950; font-size:13px; letter-spacing:.2px; color:rgba(232,238,247,.95); }
.listHint{ font-size:12px; color:var(--mut); }

.list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.list li{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(500px 260px at 20% 20%, rgba(255,77,77,.10), transparent 60%),
    rgba(0,0,0,.18);
  padding:12px;
}
.list li b{
  display:block;
  font-size:14px;
  margin-bottom:6px;
}
.muted{ color:var(--mut); font-size:12px; }

/* =========================================================
   FLATPICKR - TEMA OSCURO PARA INLINE + POPUP (LOS DOS)
   ========================================================= */

/* El popup debe quedar arriba de todo */
.flatpickr-calendar{
  z-index: 99999 !important;
}

/* Estilo global del calendario (popup y inline) */
.flatpickr-calendar{
  background: rgba(10,20,35,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(10px);
}

.flatpickr-calendar:before,
.flatpickr-calendar:after{
  border-bottom-color: rgba(10,20,35,.92) !important; /* triangulito */
}

/* Mes */
.flatpickr-months{
  padding:8px 10px 10px !important;
}
.flatpickr-current-month{
  color: rgba(232,238,247,.95) !important;
  font-weight: 950 !important;
  font-size: 14px !important;
}
.flatpickr-monthDropdown-months,
.numInputWrapper{
  color: rgba(232,238,247,.95) !important;
}

/* Flechas */
.flatpickr-prev-month,
.flatpickr-next-month{
  color: rgba(232,238,247,.90) !important;
  fill: rgba(232,238,247,.90) !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover{
  color:#fff !important;
  fill:#fff !important;
}

/* Weekdays */
.flatpickr-weekdays{
  padding:0 10px 8px !important;
}
span.flatpickr-weekday{
  color: rgba(155,176,201,.85) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}

/* Grid */
.flatpickr-days,
.dayContainer{
  padding: 0 10px 10px !important;
}

/* Días base */
.flatpickr-day{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(232,238,247,.92) !important;
  font-weight: 900 !important;
  height: 42px !important;
  line-height: 42px !important;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.flatpickr-day:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* Tus clases (las que agrega tu JS en onDayCreate) */
.flatpickr-day.day-past{
  background: rgba(124,138,166,.14) !important;
  border-color: rgba(255,255,255,.06) !important;
  color: rgba(232,238,247,.45) !important;
  cursor: not-allowed !important;
}
.flatpickr-day.day-booked{
  background: rgba(255,77,77,.24) !important;
  border-color: rgba(255,77,77,.62) !important;
  color: #ffe7e7 !important;
  cursor: not-allowed !important;
}
.flatpickr-day.day-free{
  background: rgba(39,209,127,.10) !important;
  border-color: rgba(39,209,127,.30) !important;
}

/* Selected + range */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background: rgba(47,107,255,.42) !important;
  border-color: rgba(47,107,255,.85) !important;
  color: #fff !important;
}
.flatpickr-day.inRange{
  background: rgba(47,107,255,.16) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Disabled nativo */
.flatpickr-day.flatpickr-disabled{
  opacity:.55 !important;
}

/* Inline: lo integramos al panel (sin “cajita” propia) */
#calInline .flatpickr-calendar.inline{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#calInline .flatpickr-days,
#calInline .dayContainer{
  padding: 0 6px 8px !important;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1100px){
  .grid{ grid-template-columns: 1fr; }
  .availability{ grid-template-columns: 1fr; }
  .listPanel{ min-height: auto; }
}

@media (max-width: 980px){
  .topbar{
    grid-template-columns: 1fr;
    justify-items:start;
  }
  .legend{ justify-content:flex-start; }
}

@media (max-width: 600px){
  .brand-title{ font-size:22px; }
  .brand-sub{ font-size:12px; }

  .formGrid{ grid-template-columns: 1fr; }
  .span2{ grid-column: auto; }

  .flatpickr-day{
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 12px !important;
  }
}