:root {
  --qt-content-max: min(640px, 100%);
  --qt-surface: color-mix(in srgb, rgba(11,47,31,0.94) 80%, rgba(0,0,0,0.5) 20%);
  --qt-surface-soft: color-mix(in srgb, rgba(14,58,37,0.86) 85%, rgba(0,0,0,0.32) 15%);
  --qt-panel: color-mix(in srgb, rgba(15,63,41,0.9) 82%, rgba(0,0,0,0.28) 18%);
  --qt-panel-alt: color-mix(in srgb, rgba(10,41,27,0.92) 75%, rgba(0,0,0,0.42) 25%);
  --qt-border: color-mix(in srgb, rgba(44,138,92,0.75) 70%, rgba(0,0,0,0.45) 30%);
  --qt-border-soft: color-mix(in srgb, rgba(32,102,68,0.65) 72%, rgba(0,0,0,0.42) 28%);
  --qt-border-ghost: color-mix(in srgb, rgba(23,74,49,0.6) 70%, rgba(0,0,0,0.35) 30%);
  --qt-shadow: 0 28px 72px rgba(0,0,0,0.45);
  --qt-text: var(--brand-ink, #f2fff7);
  --qt-muted: color-mix(in srgb, var(--qt-text) 62%, rgba(169,223,193,0.7) 38%);
  --qt-soft-muted: color-mix(in srgb, var(--qt-text) 38%, rgba(133,192,156,0.45) 62%);
  --qt-highlight: var(--bugambilia, #e85c9e);
  --qt-accent: var(--brand-primary, #25a56b);
  --qt-focus: color-mix(in srgb, var(--qt-highlight) 45%, transparent);
  --qt-surface-glow: radial-gradient(680px 520px at 85% -40%, rgba(232,92,158,0.16), transparent 70%);
}

.cotz-card {
  position: relative;
  padding: 32px clamp(24px, 4vw, 36px) 34px !important;
  border-radius: 28px !important;
  background: var(--qt-panel) !important;
  border: 1px solid var(--qt-border) !important;
  box-shadow: var(--qt-shadow) !important;
  overflow: hidden;
  max-width: min(980px, 96vw);
  margin: clamp(24px, 4vw, 48px) auto;
}

.cotz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--qt-surface-glow),
    linear-gradient(145deg, rgba(27,98,66,0.4), rgba(7,29,19,0.85));
  opacity: 0.92;
  pointer-events: none;
}

.cotz-card > * {
  position: relative;
  z-index: 1;
}

.cotz-form {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4vw, 34px);
}

.cotz-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.cotz-head__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cotz-head__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--qt-muted) 80%, rgba(255,255,255,0.65) 20%);
}

.cotz-head .h2 {
  font-size: clamp(1.5rem, 1.8vw, 2rem);
  color: var(--qt-text) !important;
}

.chip-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, rgba(18,82,54,0.85) 78%, rgba(0,0,0,0.45) 22%);
  border: 1px solid color-mix(in srgb, var(--qt-border) 70%, rgba(0,0,0,0.35) 30%);
  color: var(--qt-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cotz-panel {
  padding: 24px clamp(20px, 3vw, 28px);
  border-radius: 22px;
  background: color-mix(in srgb, var(--qt-panel-alt) 88%, rgba(0,0,0,0.38) 12%);
  border: 1px solid var(--qt-border-soft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
  width: 100%;
  align-items: stretch;
}

.cotz-panel[hidden] {
  display: none !important;
}

.cotz-panel + .cotz-panel {
  margin-top: clamp(18px, 3vw, 28px);
}

.step-chip {
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, rgba(15,63,41,0.9) 78%, rgba(0,0,0,0.35) 22%);
  border: 1px solid color-mix(in srgb, var(--qt-border) 70%, rgba(0,0,0,0.4) 30%);
  color: color-mix(in srgb, #f8fffb 92%, #c2f7de 8%);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}

.quote-block {
  background: color-mix(in srgb, rgba(12,52,34,0.82) 80%, rgba(0,0,0,0.32) 20%);
  border: 1px solid var(--qt-border-ghost);
  border-radius: 20px;
  padding: 22px 22px 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.quote-block--calendar {
  padding: clamp(24px, 3vw, 32px);
  gap: clamp(18px, 3vw, 26px);
  align-items: stretch;
  width: 100%;
  max-width: var(--qt-content-max);
  margin: 0 auto;
}

.quote-calendar__surface {
  background: color-mix(in srgb, rgba(9,39,25,0.92) 78%, rgba(0,0,0,0.38) 22%);
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--qt-border) 78%, rgba(0,0,0,0.48) 22%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 18px 42px rgba(0,0,0,0.35);
  padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2.2vw, 24px) clamp(20px, 2.6vw, 28px);
  width: 100%;
  max-width: var(--qt-content-max);
  margin: 0 auto;
}

.quote-block--calendar .quote-note,
.quote-block--calendar .selected-feedback {
  width: 100%;
  max-width: var(--qt-content-max);
  margin-left: auto;
  margin-right: auto;
}

.quote-block--form {
  padding: clamp(20px, 3vw, 26px);
  gap: clamp(18px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  align-self: center;
  width: var(--qt-content-max);
  max-width: var(--qt-content-max);
  margin: 0 auto;
}

.quote-block--form .input-block,
.quote-block--form .input-control--with-popover {
  max-width: min(540px, 100%);
  width: 100%;
  margin: 0 auto;
}

.event-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 3vw, 28px);
  width: 100%;
}

.event-details-col {
  background: color-mix(in srgb, rgba(12,50,33,0.84) 80%, rgba(0,0,0,0.34) 20%);
  border: 1px solid color-mix(in srgb, var(--qt-border-ghost) 75%, rgba(0,0,0,0.42) 25%);
  border-radius: 18px;
  padding: clamp(18px, 2.6vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.event-details-col .input-block {
  margin: 0;
  width: 100%;
}

.event-details-col .input-hint {
  margin-top: -4px;
}

@media (max-width: 540px) {
  .event-details-grid {
    grid-template-columns: 1fr;
  }
}

.quote-note,
.section-sub,
.input-hint,
.helptext {
  font-size: 0.88rem;
  color: var(--qt-muted) !important;
  margin: 0;
}

.selected-feedback {
  background: color-mix(in srgb, var(--qt-highlight) 16%, rgba(10,44,30,0.92) 84%);
  border-radius: 14px;
  padding: 10px 14px;
  color: color-mix(in srgb, #ffe8f4 82%, #2c0f1d 18%);
  font-weight: 600;
  margin: 0 12px 0 12px; /* respect mobile gutters */
  box-shadow: 0 10px 24px rgba(232,92,158,0.18);
}

.cal-header {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: clamp(12px, 2vw, 16px);
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--qt-border) 65%, rgba(0,0,0,0.35) 35%);
  background: color-mix(in srgb, rgba(13,53,34,0.88) 80%, rgba(0,0,0,0.42) 20%);
  color: var(--qt-text);
  font-size: 18px;
  transition: background 0.2s ease, transform 0.12s ease;
}

.cal-nav:hover {
  background: color-mix(in srgb, var(--qt-accent) 28%, rgba(13,53,34,0.9) 72%);
  transform: translateY(-1px);
}

.cal-nav:focus-visible {
  outline: 2px solid var(--qt-focus);
  outline-offset: 3px;
}

.cal-title {
  text-align: center;
  color: var(--qt-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cal-title-month {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--qt-highlight) 24%, rgba(11,44,30,0.85) 76%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qt-highlight) 45%, rgba(11,44,30,0.8) 55%);
  color: #fff;
}

.cal-title-year {
  font-size: 0.9rem;
  color: #fefbff;
  display: inline-block;
  align-self: center;
  padding: 3px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--qt-highlight) 18%, rgba(11,44,30,0.82) 82%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qt-highlight) 35%, rgba(11,44,30,0.78) 65%);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(10px, 1.2vw, 14px);
  margin: clamp(16px, 2.5vw, 22px) 0 clamp(12px, 2vw, 18px);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--qt-muted) 82%, rgba(255,255,255,0.6) 18%);
  text-align: center;
}

.cal-days {
  --cal-offset: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}

.cal-days > *:first-child {
  grid-column-start: var(--cal-offset);
}

.cal-day {
  border-radius: clamp(18px, 4vw, 24px);
  border: 1px solid color-mix(in srgb, var(--qt-border) 60%, rgba(0,0,0,0.32) 40%);
  background: color-mix(in srgb, rgba(14,58,37,0.82) 80%, rgba(0,0,0,0.32) 20%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--qt-text);
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.2s ease, color 0.2s ease;
  isolation: isolate;
}

.cal-day:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px rgba(0,0,0,0.35);
  border-color: color-mix(in srgb, var(--qt-accent) 45%, rgba(0,0,0,0.3) 55%);
}

.cal-day.is-selected {
  background: color-mix(in srgb, var(--qt-highlight) 35%, rgba(11,44,30,0.8) 65%);
  border-color: color-mix(in srgb, var(--qt-highlight) 55%, rgba(15,63,41,0.95) 45%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--qt-highlight) 25%, transparent), 0 22px 48px rgba(232,92,158,0.28);
  color: #fff;
}

.cal-day--today:not(.is-selected),
.cal-day.is-today:not(.is-selected) {
  border-color: color-mix(in srgb, var(--qt-accent) 65%, rgba(0,0,0,0.32) 35%);
  background: color-mix(in srgb, var(--qt-accent) 20%, rgba(15,63,41,0.9) 80%);
}

.cal-day.is-disabled {
  cursor: not-allowed;
  background: color-mix(in srgb, rgba(7,29,19,0.9) 80%, rgba(0,0,0,0.32) 20%);
  border-style: dashed;
  border-color: color-mix(in srgb, rgba(37,122,79,0.6) 70%, rgba(0,0,0,0.28) 30%);
  color: color-mix(in srgb, #d7ffec 80%, rgba(132,189,158,0.55) 20%);
  transform: none;
  box-shadow: none;
}

.cal-day.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

@media (max-width: 720px) {
  .cal-weekdays {
    gap: 10px;
    font-size: 0.72rem;
  }
  .cal-days {
    gap: 10px;
  }
}

.input-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.q-section-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
  display: block;
  color: var(--qt-text);
}

.input-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--qt-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.input-block .inp,
.input-control {
  background: color-mix(in srgb, rgba(12,52,34,0.88) 80%, rgba(0,0,0,0.32) 20%) !important;
  border: 1px solid color-mix(in srgb, var(--qt-border) 65%, rgba(0,0,0,0.32) 35%) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  color: var(--qt-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.input-block .inp:focus,
.input-control:focus {
  outline: 2px solid var(--qt-focus) !important;
  outline-offset: 2px !important;
  border-color: color-mix(in srgb, var(--qt-highlight) 55%, rgba(15,63,41,0.9) 45%) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qt-highlight) 18%, transparent) inset !important;
}

.inp::placeholder {
  color: color-mix(in srgb, var(--qt-text) 45%, rgba(165,214,187,0.6) 55%) !important;
  opacity: 0.85;
}

/* Keep inputs green even when filled, focused or browser-autofilled */
/* This prevents some mobile/desktop browsers from painting a white background */
input.inp,
textarea.inp,
select.inp,
.input-control .inp {
  background: color-mix(in srgb, rgba(12,52,34,0.88) 80%, rgba(0,0,0,0.32) 20%) !important;
  color: var(--qt-text) !important;
  -webkit-text-fill-color: var(--qt-text) !important;
}

/* When the input has a value, keep the same background */
input.inp:not(:placeholder-shown),
textarea.inp:not(:placeholder-shown),
select.inp:not([value=""]) {
  background: color-mix(in srgb, rgba(12,52,34,0.88) 80%, rgba(0,0,0,0.32) 20%) !important;
  color: var(--qt-text) !important;
}

/* Focus/active states should also remain green */
input.inp:focus,
textarea.inp:focus,
select.inp:focus,
.input-control:focus-within {
  background: color-mix(in srgb, rgba(12,52,34,0.92) 82%, rgba(0,0,0,0.28) 18%) !important;
  color: var(--qt-text) !important;
  -webkit-text-fill-color: var(--qt-text) !important;
}

/* Vendor-specific: override webkit autofill (Chrome, Safari) which applies a yellow/white fill */
input.inp:-webkit-autofill,
textarea.inp:-webkit-autofill,
select.inp:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px color-mix(in srgb, rgba(12,52,34,0.88) 80%, rgba(0,0,0,0.32) 20%) inset !important;
  box-shadow: 0 0 0px 1000px color-mix(in srgb, rgba(12,52,34,0.88) 80%, rgba(0,0,0,0.32) 20%) inset !important;
  -webkit-text-fill-color: var(--qt-text) !important;
}

/* Also handle Firefox's autofill pseudo-class (if applicable) */
input.inp:-moz-autofill,
textarea.inp:-moz-autofill {
  box-shadow: 0 0 0px 1000px color-mix(in srgb, rgba(12,52,34,0.88) 80%, rgba(0,0,0,0.32) 20%) inset !important;
  -moz-text-fill-color: var(--qt-text) !important;
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "▾";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--qt-text) 70%, rgba(132,189,158,0.65) 30%);
  pointer-events: none;
  font-size: 1rem;
}

select.inp {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px !important;
  cursor: pointer;
}

.input-control--with-popover {
  position: relative;
}

.picker-popover {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  max-width: 360px;
  padding: 12px;
  border-radius: 18px;
  background: color-mix(in srgb, rgba(9,39,25,0.94) 78%, rgba(0,0,0,0.45) 22%) !important;
  border: 1px solid var(--qt-border-soft) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.4) !important;
  z-index: 20;
}

/* Compact stage layout */
.stepper__stage { gap: 8px; padding: 6px 8px; }

/* Slightly reduce heading size on very small phones so it doesn't push panels */
.cotz-head .h2 { font-size: clamp(1.4rem, 5.6vw, 1.9rem); line-height:1.05; }

/* Calendar: reduce cell sizes and spacing so grid fits without overflow */
.quote-calendar__surface { padding: 10px; border-radius: 10px; }
.quote-calendar__surface .cal-day { min-width: 34px; min-height: 34px; border-radius: 6px; font-size: 0.92rem; }
.cal-days { gap: 6px; }

/* Increase vertical rhythm between panels and elements */
.cotz-form { gap: 36px; }
.cotz-panel + .cotz-panel { margin-top: 30px; }

/* Panels: less radius and softer shadow to avoid stacked rounded visuals */
.cotz-panel { border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); }

/* Make bottom actions visually lighter and avoid covering content: semi-transparent background and smaller shadow */
.cotz-actions {
  background: linear-gradient(180deg, rgba(6,18,12,0.0), rgba(6,18,12,0.08));
  padding: 8px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.cotz-actions .btn { height: 54px; }

/* Extra padding on very small screens to avoid keyboard overlap */
@media (max-width: 360px) {
  .main-container, .cotz-card { padding-bottom: 64px !important; }
  .cotz-actions .btn { height: 52px; }
}
/* When inputs are focused or keyboard appears, hide bottom actions to prevent overlap */
body.actions-hidden .cotz-actions {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  /* keep pointer events enabled so users can still interact with the actions
     (some environments keep focus or don't trigger focusout; making the
     buttons non-interactable caused the bug where neither Prev nor Next worked) */
  pointer-events: auto;
  visibility: visible !important;
}
body.actions-hidden .cotz-actions .btn { box-shadow: none; }

.qcal-month-pop button:hover,
.qcal-year-pop button:hover {
  background: color-mix(in srgb, var(--qt-accent) 28%, rgba(13,53,34,0.9) 72%) !important;
}

.qcal-month-pop button.is-active,
.qcal-year-pop button.is-active {
  background: color-mix(in srgb, var(--qt-highlight) 35%, rgba(11,44,30,0.8) 65%) !important;
  border-color: color-mix(in srgb, var(--qt-highlight) 45%, rgba(11,44,30,0.8) 55%) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(232,92,158,0.28) !important;
}

.qcal-year-pop input[data-role="year"],
.qcal-year-pop .inp {
  background: color-mix(in srgb, rgba(13,53,34,0.88) 82%, rgba(0,0,0,0.32) 18%) !important;
  border: 1px solid var(--qt-border-soft) !important;
  color: var(--qt-text) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

.qcal-year-pop input[data-role="year"]::placeholder {
  color: color-mix(in srgb, var(--qt-text) 55%, rgba(132,189,158,0.6) 45%) !important;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: var(--qt-content-max);
  width: var(--qt-content-max);
  margin: 0 auto;
}

.section-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--qt-text);
  margin: 0;
}

.section-grid {
  display: grid;
  gap: 18px;
  width: 100%;
}

.section-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--qt-content-max);
  margin: 0 auto;
}

@media (max-width: 860px) {
  .section-grid--two {
    grid-template-columns: 1fr;
  }
}

.file-block .input-block {
  gap: 10px;
}

.file-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-control input[type="file"] {
  padding: 10px 14px !important;
}

.file-control a {
  color: color-mix(in srgb, var(--qt-highlight) 70%, #ffffff 30%);
  text-decoration: underline;
}

#legend-mobiliario {
  margin: 2px 0 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, rgba(15,63,41,0.85) 80%, rgba(0,0,0,0.35) 20%);
  border: 1px solid var(--qt-border-soft);
  color: var(--qt-muted) !important;
  font-size: 0.9rem;
}

.legend-mobiliario {
  display: block;
}

.cotz-actions-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.cotz-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  max-width: var(--qt-content-max);
  margin: 0 auto;
  align-self: stretch;
}

.cotz-actions .btn {
  min-width: 150px;
}

.q-actions {
  margin-top: 16px;
}

.q-actions + * {
  /* restore flow after legacy missing brace */
  gap: 12px;
  flex-wrap: wrap;
}

.q-actions {
  margin-top: 16px;
}

.svc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.svc-toolbar .select-wrap,
.svc-toolbar input {
  flex: 1 1 220px;
}

.svc-count {
  font-weight: 600;
  color: var(--qt-muted);
  margin-top: 4px;
}

#svc-list {
  margin-top: 12px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  max-height: 560px;
  overflow: auto;
  padding-right: 6px;
}

#svc-list::-webkit-scrollbar {
  width: 10px;
}

#svc-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, rgba(232,92,158,0.45) 45%, rgba(12,52,34,0.85) 55%);
  border-radius: 12px;
  border: 2px solid rgba(6,23,15,0.9);
}

#svc-list::-webkit-scrollbar-track {
  background: rgba(6,23,15,0.65);
  border-radius: 12px;
}

#svc-list .svc-item {
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--qt-border-soft) 80%, rgba(0,0,0,0.32) 20%) !important;
  background: color-mix(in srgb, rgba(13,53,34,0.88) 82%, rgba(0,0,0,0.32) 18%) !important;
  padding: 18px 18px 20px !important;
  gap: 8px !important;
  transition: transform 0.18s ease, box-shadow 0.22s ease !important;
}

#svc-list .svc-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.4);
}

#svc-list .svc-item.is-selected {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--qt-highlight) 45%, transparent) !important;
}

#svc-list .svc-provider {
  background: color-mix(in srgb, rgba(255,255,255,0.12) 70%, rgba(232,92,158,0.25) 30%) !important;
}

#svc-list .pill {
  background: color-mix(in srgb, rgba(232,92,158,0.18) 45%, rgba(18,82,54,0.72) 55%) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.04em;
}

.btn-admin-edit--sm {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--qt-border-soft);
  background: color-mix(in srgb, rgba(13,53,34,0.88) 82%, rgba(0,0,0,0.32) 18%);
  color: var(--qt-text);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.85rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: background 0.2s ease;
}

.btn-admin-edit--sm:hover {
  background: color-mix(in srgb, var(--qt-accent) 26%, rgba(13,53,34,0.9) 74%);
}

/* FullCalendar cosmetics for legacy admin widgets */
.fc .fc-scrollgrid,
.fc .fc-scrollgrid table {
  border: none !important;
  background: transparent !important;
}

.fc .fc-daygrid-day-frame {
  border-radius: 14px;
  overflow: hidden;
}

.fc-theme-standard td,
.fc-theme-standard th {
  border: none;
}

.fc .fc-daygrid-day {
  padding: 3px;
}

.fc .fc-col-header-cell-cushion {
  padding: 8px 0;
  font-weight: 600;
  color: color-mix(in srgb, var(--qt-muted) 85%, rgba(255,255,255,0.65) 15%);
  letter-spacing: 0.08em;
}

.fc .fc-daygrid-day-number {
  color: var(--qt-text);
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 12px;
}

.fc .fc-day-today .fc-daygrid-day-number {
  background: color-mix(in srgb, var(--qt-highlight) 15%, rgba(14,58,37,0.82) 85%);
  color: #fff;
}

.fc .fc-daygrid-day-frame:hover {
  background: color-mix(in srgb, rgba(18,82,54,0.45) 65%, rgba(0,0,0,0.35) 35%);
}

.fc .fc-highlight {
  background: color-mix(in srgb, var(--qt-highlight) 18%, rgba(15,63,41,0.85) 82%);
}

.fc .fc-day-other {
  visibility: hidden !important;
  pointer-events: none !important;
}

.fc .fc-daygrid-dot-event {
  background: color-mix(in srgb, rgba(23,74,49,0.35) 70%, rgba(232,92,158,0.18) 30%);
  border-radius: 8px;
  padding: 3px 6px;
  color: var(--qt-text);
}

.qtr-card {
  background: color-mix(in srgb, rgba(12,52,34,0.88) 82%, rgba(0,0,0,0.32) 18%);
  border: 1px solid var(--qt-border-soft);
  border-radius: 18px;
  padding: 16px 18px 14px;
  box-shadow: 0 20px 38px rgba(0,0,0,0.35);
}

.qtr-cal-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.qtr-cal-title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: var(--qt-text);
  text-transform: capitalize;
}

.qtr-cal-btn {
  border: 1px solid var(--qt-border-soft);
  background: color-mix(in srgb, rgba(11,44,29,0.9) 80%, rgba(0,0,0,0.3) 20%);
  border-radius: 12px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  color: var(--qt-text);
  cursor: pointer;
  transition: background 0.2s ease;
}

.qtr-cal-btn:hover {
  background: color-mix(in srgb, var(--qt-accent) 26%, rgba(11,44,29,0.9) 74%);
}

.mini-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 44px;
  gap: 6px;
  min-height: calc(44px * 6 + 6px * 5);
  padding: 10px 8px;
  border-radius: 14px;
  background: color-mix(in srgb, rgba(10,41,27,0.92) 82%, rgba(0,0,0,0.3) 18%);
  border: 1px solid var(--qt-border-ghost);
}

.mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--qt-muted);
  font-weight: 600;
}

.mini-cal-nav {
  display: flex;
  gap: 6px;
}

.mini-cal-nav button {
  border: 1px solid var(--qt-border-soft);
  background: color-mix(in srgb, rgba(12,52,34,0.9) 82%, rgba(0,0,0,0.32) 18%);
  color: var(--qt-text);
  border-radius: 10px;
  padding: 6px 10px;
  transition: background 0.2s ease;
}

.mini-cal-nav button:hover {
  background: color-mix(in srgb, var(--qt-accent) 22%, rgba(12,52,34,0.9) 78%);
}

.mini-cal__cell {
  border: 1px solid var(--qt-border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, rgba(12,52,34,0.9) 80%, rgba(0,0,0,0.32) 20%);
  cursor: pointer;
  font-weight: 600;
  color: var(--qt-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.05s ease, background 0.2s ease;
}

.mini-cal__cell:hover {
  transform: translateY(-1px);
}

.mini-cal__cell.is-selected {
  outline: 2px solid var(--qt-highlight);
  background: color-mix(in srgb, var(--qt-highlight) 20%, rgba(12,52,34,0.9) 80%);
}

.mini-cal__cell.is-out {
  opacity: 0.45;
  cursor: default;
}

.legend-mobiliario::before {
  content: "" !important;
  display: none !important;
}

/* Countdown styles (cotizador & evento, both layouts) */
.client-phone,
.client-whatsapp,
a.whatsapp-link {
  color: var(--bugambilia, #e85c9e) !important;
  font-weight: 600;
  text-decoration: none;
}
a.whatsapp-link:hover,
a.whatsapp-link:focus {
  text-decoration: underline;
}
.countdown-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bugambilia, #e85c9e) 88%, #ff8bc5 12%), color-mix(in srgb, var(--bugambilia, #e85c9e) 65%, #310b1f 35%)) !important;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px -8px rgba(232,92,158,0.18);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.countdown-days {
  background: #fff;
  color: #5a3a44;
  font-size: 2.6rem;
  font-weight: 700;
  border-radius: 16px;
  padding: 12px 24px;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.18);
  display: inline-block;
}

/* === Responsive layout adjustments for handheld devices === */
@media (max-width: 820px) {
  .cotz-card {
    padding: 28px 22px 72px !important;
    border-radius: 24px !important;
    margin: 22px 18px;
    overflow: visible;
  }

  .cotz-head {
    align-items: flex-start;
    gap: 14px;
  }

  .cotz-head__title {
    width: 100%;
  }

  .chip-help {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .cotz-panel {
    padding: 20px 18px;
    border-radius: 20px;
    gap: 22px;
  }

  .quote-block {
    padding: 20px 18px 24px;
    border-radius: 18px;
    gap: 22px;
  }

  .quote-block--calendar,
  .quote-block--form,
  .quote-calendar__surface,
  .section-head,
  .section-grid--two,
  .cotz-actions-wrapper,
  .cotz-actions {
    max-width: 100%;
    width: 100%;
  }

  .quote-block--form .input-block,
  .quote-block--form .input-control--with-popover {
    max-width: 100%;
  }

  .section-head {
    gap: 10px;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .section-sub {
    font-size: 1rem;
    line-height: 1.55;
  }
}

@media (max-width: 640px) {
  /* Allow details content to expand fully on mobile (prevent clipping) */
  .card.mt-12 { overflow: visible !important; }

  /* Collapsible details base: closed state hides content, JS will set max-height when opened to avoid clipping */
  .event-details-collapsible .event-meta-row {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 260ms ease, opacity 180ms ease;
  }
  .event-details-collapsible[open] .event-meta-row {
    opacity: 1;
  }
  /* Mobile: remove excess gutters and nested rounded layers */
  .cotz-card::before { display: none !important; }

  /* Use the full viewport width on mobile: remove outer margins so components can expand horizontally */
  .cotz-card {
    margin: 0 !important;
    padding: 18px 12px 160px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    max-width: 100vw !important;
  }

  /* When inside the cotizador page we want full-bleed (no outer gutters) */
  .cotizador-page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Compact stepper; progress bar fixed to top viewport */
  .stepper { margin: 4px 0 6px; padding: 4px 6px; background: transparent; box-shadow: none; }
  .stepper__stages { padding: 4px 6px; border-radius: 8px; gap: 6px; }
  .stepper__stage { padding: 4px 6px; font-size: 0.98rem; }
  .stepper__bar { position: fixed; top: calc(env(safe-area-inset-top, 6px) + 6px); left: 8px; right: 8px; height: 6px; z-index: 280; border-radius: 999px; }

  /* Panels: flatten panels so the page background becomes the margin between fields */
  .cotz-panel {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    width: 100%;
  }
  .cotz-panel + .cotz-panel { margin-top: 0 !important; }

  /* Calendar adjustments: expand to full width and reduce inner padding/gaps so grid fits */
  .quote-block--calendar { margin: 0; width: 100%; max-width: 100%; }
  /* Use percentage-based widths so the calendar never overflows the parent/card gutters */
  .quote-calendar__surface {
    padding: 6px 6px 8px;
    border-radius: 8px;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden; /* prevent any child from overflowing the rounded corners */
  }
  .quote-calendar__surface .cal-day { min-width: 30px; min-height: 30px; border-radius: 6px; font-size: 0.9rem; padding: 4px; }
  .cal-days { gap: 6px; }

  /* Flatten nested cotz-panel wrappers inside the calendar so the calendar sits cleanly
     (layout-only: remove extra rounded frames and inner shadows that create stacked cards) */
  .quote-block--calendar .cotz-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .quote-block--calendar .cotz-panel + .cotz-panel {
    margin-top: 0 !important;
  }
  .quote-block--calendar .step-chip { display: none; }

  /* Reduce vertical gaps so modules fit without scrolling; inputs become the visual surfaces */
  .cotz-form { gap: 10px; }

  /* Inputs: keep pill-like surfaces but be full width so background acts as gutter */
  .input-block .inp,
  .input-control {
    background: color-mix(in srgb, rgba(12,52,34,0.88) 80%, rgba(0,0,0,0.32) 20%) !important;
    border: 1px solid color-mix(in srgb, var(--qt-border) 65%, rgba(0,0,0,0.32) 35%) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 1rem !important;
    color: var(--qt-text) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    width: 100%;
    display: block;
  }

  /* Fixed bottom actions — keep Siguiente visible and unobtrusive */
  .cotz-actions { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 300; display:flex; justify-content:center; padding: 6px; background: linear-gradient(180deg, rgba(6,18,12,0), rgba(6,18,12,0.06)); border-radius: 999px; }
  .cotz-actions .btn { height: 48px; min-width: 120px; font-size: 1rem; }

  @media (max-width: 360px) {
  .main-container, .cotz-card { padding-bottom: 64px !important; }
    .cotz-actions .btn { height: 44px; }
  }
}

  @media (max-width: 480px) {
  .cotz-card {
    padding: 22px 12px 86px !important;
    border-radius: 16px !important;
    margin: 14px 8px;
  }

  /* Remove negative margins and large padding from the stepper to prevent overlap */
  .stepper {
    margin: 6px -14px 18px;
    padding: 10px 12px 12px;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
  }

  .stepper__stage {
    font-size: 1.12rem;
  }

  .stepper__dot {
    width: 34px;
    height: 34px;
    font-size: 1.15rem;
  }

  .chip-help {
    font-size: 0.95rem;
    padding: 10px 16px;
  }

  .quote-block {
    padding: 18px;
  }

  .quote-calendar__surface {
    padding: 14px;
    border-radius: 16px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .quote-calendar__surface .cal-day,
  .quote-calendar__surface .cal-weekdays,
  .quote-calendar__surface .cal-chip {
    font-size: 1.1rem;
  }

  /* Ensure selects show full text inside the styled control on small screens */
  .select-wrap { display:block; width:100%; }
  /* Let select controls show their full text on mobile and avoid clipping.
     Native selects will still open with the OS dropdown, but styled selects
     and custom popovers should not be truncated. */
  .select-wrap select.inp {
    padding-left: 18px !important;
    padding-right: 40px !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    line-height: 1.35 !important;
    font-size: 1rem !important;
    height: auto !important;
  }

  .event-details-col {
    gap: 14px;
  }

  .input-block .inp,
  .input-control {
    font-size: 1.18rem !important;
    padding: 15px 18px !important;
  }

  .picker-popover {
    left: 50%;
    transform: translateX(-50%);
    min-width: 0;
    width: min(320px, 90vw);
    font-size: 1.05rem;
  }

  /* On small screens, keep popovers anchored to their control so they match its width
     instead of centering fixed in the viewport. The JS that creates/shows the popover
     will insert it inside the control or nearby; these rules make them drop down.
  */
  .select-wrap { position: relative; }
  .input-control { position: relative; }
  @media (max-width: 640px) {
    /* Allow popovers to escape card clipping on mobile */
    .cotz-card,
    .cotz-panel,
    .quote-block,
    .quote-block--form,
    .quote-block--calendar { overflow: visible !important; }
    .select-wrap .picker-popover,
    .input-control .picker-popover,
    .picker-popover.card {
      position: absolute !important;
      left: 0 !important;
      top: calc(100% + 8px) !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      z-index: 200000 !important;
      display: none; /* shown by JS when needed */
      max-height: 48vh !important;
      overflow: auto !important;
      -webkit-overflow-scrolling: touch !important;
      background: color-mix(in srgb, rgba(9,39,25,0.96) 92%, rgba(0,0,0,0.5) 8%) !important;
      padding: 8px !important;
      border-radius: 12px !important;
    }
    /* If JS toggles inline display or a class, ensure it becomes visible */
    .select-wrap .picker-popover[style*="display: block"],
    .input-control .picker-popover[style*="display: block"],
    .select-wrap .picker-popover.open,
    .input-control .picker-popover.open { display: block !important; }
  }

  .banq-times-opts {
    --banq-pill-min: 150px;
  }

  .banq-times-opts label {
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.98rem;
  }

  #svc-list .svc-item {
    padding: 22px !important;
    font-size: 1.15rem;
  }

  #svc-list .svc-item .svc-title {
    font-size: 1.25rem;
  }

  #svc-list .svc-item .svc-desc {
    font-size: 1.05rem;
  }

  .brand-group__header {
    font-size: 1.08rem;
    gap: 12px;
  }

  .brand-group__header .count {
    font-size: 0.92rem;
    padding: 4px 14px;
  }

  .cotz-actions {
    gap: 16px;
    padding: 16px 18px 22px;
    align-items:center;
  }
  .q-actions { gap:16px; }
}

/* Strong overrides for cotizador pages on small screens: remove any remaining gutters */
@media (max-width: 820px) {
  .cotizador-page,
  .cotizador-page .main-container {
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep a small horizontal gutter to match the mobile mock (12px each side) */
  .cotizador-page .cotz-card {
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding: 12px 12px 160px !important;
    border-radius: 12px !important;
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    box-shadow: none !important;
  }

  .cotizador-page .quote-block,
  .cotizador-page .quote-block--calendar {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep the calendar surface constrained to its container (avoid using viewport units) */
  .cotizador-page .quote-calendar__surface {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 8px !important; /* small fillet on corners */
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Remove any unintended bottom spacing under the calendar so the next panel sits flush */
  .cotizador-page .quote-block--calendar + .quote-block {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* === Mobile gutter + progress visibility overrides ===
   Keep a consistent small horizontal gutter on narrow viewports so
   all form fields and calendar cells sit inside the yellow guides
   shown in the mock. Also increase stepper visibility. */
@media (max-width: 640px) {
  /* Keep comfortable side gutters so fields don't go full-bleed */
  .cotz-card {
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* Ensure the page and container respect the card gutters */
  .cotizador-page,
  .cotizador-page .main-container {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep calendar and form blocks within the same horizontal gutters */
  .quote-block--calendar,
  .quote-block--form {
    max-width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .quote-calendar__surface {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* Inputs should fill the available inner gutter and never overflow */
  .input-block .inp,
  .input-control {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Bottom actions respect the same gutters */
  .cotz-actions {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 300 !important;
    /* Use a two-column grid: left button natural width, right button fills remaining space */
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    /* keep vertical padding only; remove lateral padding so edges align with gutters */
    padding: 6px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: linear-gradient(180deg, rgba(6,18,12,0), rgba(6,18,12,0.06));
    border-radius: 999px !important;
    box-sizing: border-box !important;
    /* force the container width to match the 12px side gutters and center it */
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
  }

  /* Make the stepper/progress bar clearly visible and constrained by gutters */
  .stepper__bar {
    left: 12px !important;
    right: 12px !important;
    top: calc(env(safe-area-inset-top, 6px) + 6px) !important;
    height: 6px !important;
    border-radius: 999px !important;
    z-index: 99999 !important;
    background: rgba(0,0,0,0.06) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  /* Solid pink fill */
  .stepper__bar .fill { background: var(--bugambilia, #e85c9e) !important; box-shadow:0 0 12px rgba(232,92,158,.35) !important; }

  /* Ensure stepper stages are on top but don't block interactions */
  .stepper,
  .stepper__stages {
    position: relative !important;
    z-index: 99998 !important;
  }

  /* Tighten calendar grid to fit inside gutters */
  .cal-days { gap: 6px !important; }
  .quote-calendar__surface .cal-day { min-width: 34px !important; min-height: 34px !important; border-radius: 6px !important; }

  /* Selected date feedback should respect the same 12px gutters as inputs */
  .selected-feedback {
    display: block !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    background: color-mix(in srgb, rgba(10,41,27,0.7) 84%, rgba(0,0,0,0.28) 16%) !important;
    color: var(--qt-text) !important;
    font-weight: 600 !important;
  }

  /* Ensure action buttons distribute evenly and never overflow the container */
  /* Prev should keep its natural size; Next should fill the remaining space */
  .cotz-actions .btn { box-sizing: border-box !important; width: 100% !important; height: 48px !important; min-width: 0 !important; }
  .cotz-actions .btn--ghost { width: auto !important; min-width: 72px !important; padding-left:12px !important; padding-right:12px !important; justify-self: start !important; }
  .cotz-actions .btn--accent { width: 100% !important; min-width: 0 !important; padding-left:12px !important; padding-right:12px !important; border-radius:12px !important; justify-self: stretch !important; }
  /* remove extra adjacent margin — use gap only so buttons align to gutters */
  .cotz-actions .btn + .btn { margin-left: 0 !important; }

  /* Make sure actions stay on top and are clickable */
  .cotz-actions { z-index: 999999 !important; }

  /* Hide submit by default; show only when .cotz-actions.is-final (set by JS) */
  #btn-submit { display: none !important; }
  .cotz-actions.is-final #btn-submit { display: inline-flex !important; }

  /* Ensure the accent button reaches to the right gutter without visual inset */
  .cotz-actions .btn--accent { margin: 0 !important; border-radius: 12px !important; }
  .cotz-actions .btn--ghost { margin: 0 !important; }

  /* Remove outer padding from actions container so the buttons' outer edges align exactly with the 12px gutters */
  .cotz-actions { padding-left: 0 !important; padding-right: 0 !important; }

  /* Avoid inner shadow on the accent button so its visual outer edge sits flush with gutter */
  .cotz-actions .btn--accent { box-shadow: none !important; }

  /* Overlay sits above the native select to intercept taps only on mobile */
  .select-wrap .custom-select-overlay { display:block; }
  /* Hide overlay on larger screens (desktop) */
  @media (min-width: 641px) { .select-wrap .custom-select-overlay { display:none !important; } }

  /* When the custom select popover is open, keep actions visible (avoid being hidden by keyboard heuristics) */
  body.cotz-pop-open .cotz-actions { opacity: 1 !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; visibility: visible !important; }

  /* Small screens: increase vertical spacing to avoid overlap with fixed bar/actions */
  .cotz-form { gap: 18px !important; }
  .cotz-panel + .cotz-panel { margin-top: 12px !important; }
}

/* Custom select popover styles */
.select-wrap { position: relative; }
.custom-select-popover { font-size: 1rem; color: var(--qt-text); position: absolute; left:0; top:100%; width:100%; box-sizing:border-box; background: var(--qt-panel-alt); border-radius:12px; overflow:auto; max-height:48vh; -webkit-overflow-scrolling: touch; }
.custom-select-popover .custom-select-item:hover { background: rgba(255,255,255,0.03); }
.custom-select-popover .custom-select-item { border-bottom: 1px solid rgba(255,255,255,0.02); padding:10px 12px; }
.custom-select-popover .custom-select-item:last-child { border-bottom: none; }

/* Mobile: hide the 'Modelo' column in the quote table to save horizontal space */
@media (max-width: 640px) {
  /* target the second column of any .tbl table used in cotizaciones */
  .tbl thead th:nth-child(2),
  .tbl tbody td:nth-child(2) {
    display: none !important;
  }
  /* shrink padding so table fits better on small screens */
  .tbl td, .tbl th { padding: 6px 8px !important; }
}

/* Simplified quote view styles */
.quote-card { max-width: 880px; margin: 18px auto; }
.quote-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.quote-header { position: relative; padding-bottom: 8px; flex-wrap: wrap; }
.quote-title { margin:0; font-size:1.25rem; color:var(--qt-text); }
.folio-badge { margin-top:6px; display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,0.02); padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.03); font-weight:700; color:var(--qt-soft-muted); }
.folio-badge .folio-val { margin-left:6px; background: rgba(0,0,0,0.14); padding:4px 8px; border-radius:8px; color:var(--qt-text); font-weight:800; }

/* Prominent folio shown in header (moved to top-right) */
.folio-prominent {
  display:inline-flex;
  margin-left: auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 900;
  color: #ffffff;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 26px rgba(0,0,0,0.32);
  z-index: 95;
}
.folio-prominent .folio-val { background: rgba(0,0,0,0.16); padding:4px 8px; border-radius:8px; margin-left:8px; color: var(--qt-text); }
.contact-inline { margin-top:8px; }
.meta-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:10px; }
.meta-item { background: transparent; padding:6px 8px; border-radius:8px; }
.meta-label { font-size:0.75rem; color:var(--qt-soft-muted); }
.meta-value { font-weight:700; font-size:1rem; color:var(--qt-text); }
.quote-table thead th { text-align:left; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.04); }
.quote-table tbody td { padding:10px 12px; }
/* Event metadata row integrated into the quote table (old layout) */
.quote-event-meta td {
  background: transparent;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.quote-event-meta td[colspan] {
  background: color-mix(in srgb, rgba(14,58,37,0.94) 88%, rgba(0,0,0,0.12) 12%);
  border-radius: 10px;
  margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  padding: 14px 16px !important;
}
.quote-event-meta td[colspan] .muted.small { color: var(--qt-muted); }

/* Collapsible event details inside the table */
.event-details-collapsible {
  background: transparent;
  border-radius: 8px;
  position: relative;
  overflow: visible;
}
.event-details-collapsible summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, rgba(11,47,31,0.85) 88%, rgba(0,0,0,0.06) 12%);
  color: var(--qt-text);
  display: block;
}
.event-details-collapsible summary { display:flex; align-items:center; justify-content:center; position:relative; text-align:center; }
.event-details-collapsible summary::after {
  content: '▾';
  font-size: 1rem;
  transition: transform 180ms ease;
  position: absolute;
  right: 12px;
  opacity: 0.95;
}
.event-details-collapsible[open] summary::after { transform: rotate(180deg); }
.event-details-collapsible summary { -webkit-tap-highlight-color: transparent; }
.event-details-collapsible[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.event-details-collapsible .event-meta-row { padding: 12px 10px; }
.include-list { padding-left: 18px; margin: 6px 0 0 0; }
.include-list li { margin-bottom: 8px; color: var(--qt-soft-muted); }

/* Price column extra right padding on narrow screens so numbers don't touch the edge */
@media (max-width: 640px) {
  .quote-table tbody td:nth-child(3),
  .quote-table thead th:nth-child(3) {
    padding-right: 18px !important;
  }
}

/* Mobile spacing adjustments to keep modules compact and aligned */
@media (max-width: 480px) {
  /* tighter mobile spacing */
  .client-box { margin-top: 6px; padding: 10px !important; border-radius: 10px; box-shadow: none; }
  .quote-card { padding: 10px !important; }
  .card.mt-12 { margin-top: 8px !important; }
  .quote-table tbody td { padding: 8px 8px !important; }
  .quote-table tbody tr + tr td { padding-top: 6px !important; }
  .event-details-collapsible summary { padding: 8px 10px; font-size: 1rem; }
  .event-details-collapsible .event-meta-row { padding: 8px 6px; }
  .include-list li { font-size: 0.95rem; margin-bottom:6px; }
  .folio-prominent { right: 12px; top: 8px; font-size: 0.9rem; }
  /* reduce vertical gaps between modules */
  .client-card, .card, .totals-row, .q-actions { margin-top: 6px !important; }
  /* enforce side gutters so no content touches the screen edges */
  .quote-table-wrap { padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box; }
  .quote-table { width: 100% !important; margin: 0 auto; }
  /* add breathing room so header/folio won't visually overlap the table */
  .quote-table-wrap { margin-top: 8px; }
  /* make the summary occupy the central area and center its inline text */
  .event-details-collapsible summary { display:block; width:100%; box-sizing:border-box; text-align:center; justify-content:center; padding:10px 18px; border-radius:8px; background: color-mix(in srgb, rgba(11,47,31,0.92) 88%, rgba(0,0,0,0.06) 12%); position:relative; z-index:2; }
  /* caret/hit area positioned absolutely on the right within the summary */
  .event-details-collapsible summary::after { right: 18px; position:absolute; top:50%; transform:translateY(-50%); }
  /* make sure the caret has a larger tap target */
  .event-details-collapsible summary::after { padding-left:6px; padding-right:6px; }
  /* prevent table cells from clipping the expanded details on mobile */
  .quote-table tbody td { overflow: visible !important; }
  .event-details-collapsible .event-meta-row { max-height: 2000px !important; }
  /* ensure the details content is visually separated from the summary */
  .event-details-collapsible[open] .event-meta-row { margin-top:8px; }
  /* keep q-actions layout as-is; provide small horizontal spacing for wrapped buttons */
  .q-actions .btn { margin-left: 6px; margin-right: 6px; }
}
.quote-event-meta td .muted.small { color: var(--qt-soft-muted); }
.quote-event-meta td > div { line-height: 1.35; }
.quote-event-meta .muted.small div { margin: 2px 0; }
.quote-event-meta td:first-child { width: 100%; }
.quote-event-meta td:nth-child(2), .quote-event-meta td:nth-child(3) { text-align: right; vertical-align: middle; }
.service-link { color:var(--qt-accent); text-decoration:none; font-weight:600; }
.service-link:hover { text-decoration:underline; }
.client-card {
  /* Desktop: keep inline/compact appearance; visual card only on small screens */
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-top: 8px;
  max-width: 520px;
  width: auto;
}
.client-card__title { font-size:0.82rem; color:var(--qt-soft-muted); }
.client-card__name { font-weight:800; color:var(--qt-text); margin-top:6px; }
.client-card__info { margin-top:6px; color:var(--qt-soft-muted); }

/* Highlighted client box to make client data stand out */
.client-box {
  background: color-mix(in srgb, rgba(12,52,34,0.92) 86%, rgba(0,0,0,0.16) 14%);
  border: 1px solid rgba(255,255,255,0.03);
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  max-width: 520px;
  box-sizing: border-box;
}
.client-box .client-card__title { color: var(--qt-soft-muted); }

@media (max-width: 640px) {
  .folio-prominent { position: static; display:flex; justify-content:flex-end; margin-top:8px; box-shadow:none; background:transparent; border:none; }
  .client-box { width: 100% !important; box-shadow: none; border: 1px solid var(--qt-border-soft); }
  /* ensure symmetric left/right margins for client data box on mobile */
  .client-box { margin-left: 12px !important; margin-right: 12px !important; width: calc(100% - 24px) !important; max-width: none !important; }
  /* ensure client text inside respects same inner padding as table rows */
  .client-box .client-card__name,
  .client-box .client-card__info { padding-left: 6px; padding-right: 6px; }
}

.event-card {
  /* Desktop: compact inline event meta; visual card only on small screens */
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-top: 8px;
  max-width: 520px;
  width: auto;
}
.event-card__row { display:flex; justify-content:space-between; width:50%; padding:6px 8px; }
.event-card__row .meta-label { color:var(--qt-soft-muted); font-size:0.82rem; }
.event-card__row .meta-value { color:var(--qt-text); font-weight:700; }

/* Make the cards full-width on narrow screens and increase separation */
/* Mobile-only: make client and event data appear as distinct cards stacked vertically */
@media (max-width: 640px) {
  .client-card,
  .event-card {
    background: color-mix(in srgb, rgba(14,58,37,0.92) 88%, rgba(0,0,0,0.22) 12%);
    border: 1px solid var(--qt-border-soft);
    padding: 12px 14px;
    border-radius: 12px;
    margin-top: 10px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    max-width: 100% !important;
    width: 100% !important;
  }
  .event-card__row { width: 100%; padding: 8px 6px; }
  .client-card__name { font-size: 1rem; }
}

/* Remove model/unit small text from concepts - already removed in template but ensure spacing */
.quote-table tbody td:nth-child(1) .muted.small { display:none !important; }
.totals-row { display:flex; justify-content:space-between; align-items:stretch; gap:16px; margin-top:18px; }
.totals-box { width:260px; background:transparent; padding:10px 12px; border-radius:10px; }
.totals-line { display:flex; justify-content:space-between; padding:6px 0; color:var(--qt-text); }
.totals-line--total { font-size:1.15rem; font-weight:800; border-top:1px dashed rgba(255,255,255,0.04); padding-top:10px; margin-top:6px; }
.muted.small { font-size:0.82rem; color:var(--qt-soft-muted); }

@media (max-width: 720px) {
  .meta-grid { grid-template-columns: repeat(2, 1fr); }
  .totals-box { width: 48%; }
  /* Ensure folio badge and contact inline shrink on mobile to avoid wrapping too much */
  .folio-badge { font-size:0.9rem; padding:5px 8px; }
  .contact-inline { font-size:0.92rem; }
}

@media (max-width: 480px) {
  .meta-grid { grid-template-columns: 1fr; }
  /* On narrow screens keep contact in the header and make totals full width block below */
  .quote-header { flex-direction:column; align-items:flex-start; gap:8px; }
  .totals-row { flex-direction:column-reverse; gap:10px; }
  .totals-box { width:100%; }
}

/* Desktop: align totals to the right of the container */
@media (min-width: 641px) {
  .totals-row { justify-content: flex-end; }
  .totals-box { width: 320px; }
  /* Ensure totals align right on desktop even if other rules exist */
  .totals-row { justify-content: flex-end !important; }
  .totals-box { margin-left: auto; }
  /* Keep folio inline-right without overlapping table */
  .quote-header { flex-wrap: nowrap; }
  .folio-prominent { margin-left: auto; }
}