/* ═══════════════════════════════════════════════════════════════════════
   COTIZACIÓN — overlay a pantalla completa (#calcQuoteModal)
   ═══════════════════════════════════════════════════════════════════════
   Estas reglas vivían dentro de master-plan.css, que es la hoja de UNA
   página. Al llevar el mismo flujo de cotización a la calculadora del index
   había dos salidas: cargar master-plan.css entera en la portada —con sus
   ~90 reglas .mp-* y sus fondos de página— o sacar el overlay a su propia
   hoja. Se hizo lo segundo: aquí no hay nada específico del Master Plan, así
   que puede cargarse en cualquier página que necesite cotizar.

   Lo consume assets/js/calc-quote.js, que a su vez toma los números de
   window.JoyTree.getCalcQuote() (assets/js/calc.js). Ver el <button
   id="calcQuoteBtn"> de index.html y master-plan.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CALC QUOTE MODAL — .cq-*
   z-index: 1090 (below kineki 1095, above general overlays)
═══════════════════════════════════════════════════════════ */

/* ── Full-screen shell ── */

.cq-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.cq-modal[hidden] { display: none; }

/* ── Dark overlay ── */

.cq-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(6px);
}

/* ── Close button (fixed in viewport, outside scrollable panel) ── */

.cq-close {
  position: fixed;
  top: max(1.2rem, env(safe-area-inset-top, 1.2rem));
  right: max(1.4rem, env(safe-area-inset-right, 1.4rem));
  z-index: 1096;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 1.5px solid rgba(222, 215, 186, 0.32);
  background: rgba(7, 19, 22, 0.95);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.55),
    0 0 0 4px rgba(var(--brand-canopy-rgb), 0.07),
    inset 0 1px 0 rgba(222, 215, 186, 0.06);
  transition: background 180ms, border-color 180ms, transform 120ms;
}

.cq-close:hover {
  background: rgba(var(--brand-canopy-rgb), 0.18);
  border-color: rgba(var(--brand-canopy-rgb), 0.60);
  transform: scale(1.06);
}

.cq-close-icon {
  width: 1.1rem;
  height: 1.1rem;
  color: rgba(222, 215, 186, 0.85);
  flex-shrink: 0;
}

.cq-close-label {
  display: none;
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(222, 215, 186, 0.70);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .cq-close {
    width: auto;
    height: 2.9rem;
    border-radius: 100px;
    flex-direction: row;
    padding: 0 1.3rem 0 1rem;
    gap: 0.45rem;
  }
  .cq-close-label { display: block; }
}

/* ── Slide-in panel (right side on desktop, full-screen on mobile) ── */

.cq-panel {
  position: relative;
  z-index: 1091;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  background: linear-gradient(
    160deg,
    rgba(7, 19, 22, 0.99) 0%,
    rgba(11, 28, 22, 0.99) 100%
  );
  border-left: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cqSlideIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  outline: none;
}

/* ── Scrollable inner ── */

.cq-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 2rem);
}

/* ── Header ── */

.cq-header {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem) 1.25rem;
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cq-header-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cq-logo {
  height: 2.4rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.90;
  flex-shrink: 0;
}

.cq-header-divider {
  width: 1px;
  height: 2rem;
  background: rgba(var(--brand-canopy-rgb), 0.28);
  flex-shrink: 0;
}

.cq-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cq-header-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--brand-canopy);
}

.cq-header-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(240, 234, 210, 0.65);
}

.cq-header-disclaimer {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(240, 234, 210, 0.38);
  margin: 0;
}

/* ── Quote summary ── */

.cq-summary {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
}

.cq-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}

.cq-sum-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cq-sum-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 234, 210, 0.45);
}

.cq-sum-value {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 300;
  color: rgba(240, 234, 210, 0.88);
}

.cq-sum-item--accent .cq-sum-value {
  color: var(--brand-canopy);
}

/* ── Pago de contado: tachado a mano + revelado del nuevo precio ──
   .cq-sum-item es flex column — sus hijos se estiran al ancho completo
   por defecto (align-self:stretch), lo que ensancha este span mucho
   más allá del texto real y deja el SVG del tachado flotando sobre
   espacio vacío. align-self:flex-start lo regresa a su ancho natural. */

.cq-sum-value--strikeable {
  position: relative;
  display: inline-block;
  align-self: flex-start;
}

.cq-sum-value-text {
  position: relative;
  display: inline-block;
  transition: color 380ms ease 360ms;
}

.cq-sum-value--strikeable.is-struck .cq-sum-value-text {
  color: rgba(240, 234, 210, 0.36);
}

.cq-strike-svg {
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 140%;
  overflow: visible;
  pointer-events: none;
}

.cq-strike-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  opacity: 0;
  /* Ver comentario equivalente en .calc-strike-path (sections.css) —
     mismo fix: sin non-scaling-stroke el trazo se deforma/engrosa al
     estirarse el viewBox con preserveAspectRatio="none". */
  vector-effect: non-scaling-stroke;
}

.cq-strike-path-1 {
  stroke: var(--brand-canopy);
  stroke-width: 2;
  filter: drop-shadow(0 0 1.5px rgba(var(--brand-canopy-rgb), 0.6));
}

.cq-strike-path-2 {
  stroke: rgba(255, 246, 216, 0.92);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 1px rgba(var(--brand-canopy-rgb), 0.45));
}

.cq-sum-value--strikeable.is-struck .cq-strike-path-1 {
  animation: cqStrikeDraw1 380ms cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}

.cq-sum-value--strikeable.is-struck .cq-strike-path-2 {
  animation: cqStrikeDraw2 300ms cubic-bezier(0.55, 0.06, 0.68, 0.19) 210ms both;
}

.cq-cash-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms cubic-bezier(0.25, 0.8, 0.25, 1) 260ms;
}

.cq-cash-reveal.is-open {
  grid-template-rows: 1fr;
}

.cq-cash-reveal-inner {
  overflow: hidden;
  min-height: 0;
}

/* ── Banner de contado — bloque de ancho completo, fuera del grid ── */

.cq-cash-banner {
  margin-top: 1.1rem;
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.2rem, 3.5vw, 1.75rem);
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(var(--brand-canopy-rgb), 0.14), rgba(var(--brand-canopy-rgb), 0.04));
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.28);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
}

.cq-cash-reveal.is-open .cq-cash-banner {
  animation: cqCashBannerIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}

.cq-cash-banner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.cq-cash-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border-radius: 2rem;
  background: rgba(var(--brand-canopy-rgb), 0.16);
  color: var(--brand-canopy);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cq-cash-tag svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.cq-cash-badge {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 2rem;
  background: var(--brand-canopy);
  color: var(--brand-ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: rotate(-8deg) scale(0.4);
}

.cq-cash-reveal.is-open .cq-cash-badge {
  animation: cqCashStamp 480ms cubic-bezier(0.34, 1.56, 0.64, 1) 640ms both;
}

.cq-cash-new-price {
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  opacity: 0;
}

.cq-cash-reveal.is-open .cq-cash-new-price {
  animation: cqCashFadeUp 460ms cubic-bezier(0.25, 0.8, 0.25, 1) 480ms both;
}

.cq-cash-new-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.68);
  width: 100%;
}

.cq-cash-new-value {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3.6vw, 1.9rem);
  font-weight: 500;
  background: linear-gradient(100deg,
    var(--brand-canopy) 25%,
    #fff8e2 48%,
    var(--brand-canopy) 68%
  );
  background-size: 240% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brand-canopy);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(var(--brand-canopy-rgb), 0.4);
}

.cq-cash-reveal.is-open .cq-cash-new-value {
  animation:
    cqCashShine 1400ms ease 760ms 1 both,
    cqCashGlow  2100ms ease 880ms 2;
}

.cq-cash-note {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: rgba(240, 234, 210, 0.6);
  opacity: 0;
}

.cq-cash-reveal.is-open .cq-cash-note {
  animation: cqCashFadeUp 440ms cubic-bezier(0.25, 0.8, 0.25, 1) 600ms both;
}

@media (prefers-reduced-motion: reduce) {
  .cq-sum-value--strikeable.is-struck .cq-strike-path-1,
  .cq-sum-value--strikeable.is-struck .cq-strike-path-2,
  .cq-cash-reveal.is-open .cq-cash-banner,
  .cq-cash-reveal.is-open .cq-cash-badge,
  .cq-cash-reveal.is-open .cq-cash-new-price,
  .cq-cash-reveal.is-open .cq-cash-new-value,
  .cq-cash-reveal.is-open .cq-cash-note {
    animation: none;
  }
  .cq-sum-value--strikeable.is-struck .cq-strike-path-1,
  .cq-sum-value--strikeable.is-struck .cq-strike-path-2 {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .cq-cash-reveal.is-open .cq-cash-banner,
  .cq-cash-reveal.is-open .cq-cash-badge,
  .cq-cash-reveal.is-open .cq-cash-new-price,
  .cq-cash-reveal.is-open .cq-cash-note {
    opacity: 1;
    transform: none;
  }
  .cq-cash-reveal { transition-duration: 200ms; transition-delay: 0ms; }
}

/* Monthly payment – full-width highlight row */

.cq-monthly-card {
  padding: 1rem 1.25rem;
  background: rgba(var(--brand-canopy-rgb), 0.08);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.18);
  border-radius: 0.6rem;
}

.cq-monthly-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.cq-sum-monthly-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-canopy);
}

.cq-sum-monthly-value {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 300;
  color: var(--brand-canopy);
  white-space: nowrap;
}

.cq-monthly-card-row--interest {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.14);
}

.cq-monthly-card-row--interest .cq-sum-monthly-label {
  color: rgba(var(--brand-canopy-rgb), 0.65);
  font-size: 0.62rem;
}

.cq-monthly-card-row--interest .cq-sum-monthly-value {
  font-size: 1.15rem;
  color: rgba(var(--brand-canopy-rgb), 0.8);
}

.cq-interest-note {
  margin: 0.65rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(240, 234, 210, 0.42);
  text-align: center;
}

html[data-theme="light"] .cq-interest-note { color: rgba(26, 43, 46, 0.42); }

/* ── Payment schedule ── */

.cq-schedule-wrap {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.10);
}

.cq-section-title {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.70);
  margin: 0 0 1.25rem;
}

.cq-table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.6rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.12);
  max-height: 21rem;
  transition: max-height 420ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cq-table-wrap.is-expanded {
  max-height: 3000px;
}

.cq-table-fade {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.75rem;
  margin-top: -2.75rem;
  background: linear-gradient(to bottom, transparent, rgba(var(--brand-ink-rgb), 0.94));
  pointer-events: none;
  transition: opacity 200ms ease;
}

.cq-table-wrap.is-expanded .cq-table-fade {
  opacity: 0;
}

.cq-table-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.6rem;
  background: transparent;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.22);
  border-radius: 2rem;
  color: var(--brand-canopy);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.cq-table-toggle[hidden] { display: none; }

.cq-table-toggle:hover {
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  background: rgba(var(--brand-canopy-rgb), 0.06);
}

.cq-table-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
}

.cq-table-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.cq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.80rem;
}

.cq-table thead tr {
  background: rgba(var(--brand-canopy-rgb), 0.10);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.15);
}

.cq-table th {
  padding: 0.65rem 0.85rem;
  text-align: left;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--brand-canopy-rgb), 0.75);
  white-space: nowrap;
}

.cq-table td {
  padding: 0.6rem 0.85rem;
  color: rgba(240, 234, 210, 0.72);
  border-bottom: 1px solid rgba(var(--brand-canopy-rgb), 0.06);
}

.cq-table tbody tr:last-child td { border-bottom: none; }

.cq-table tbody tr:hover td {
  background: rgba(var(--brand-canopy-rgb), 0.05);
}

.cq-table .cq-tr-last td {
  color: rgba(240, 234, 210, 0.45);
}

.cq-td-num {
  color: rgba(240, 234, 210, 0.35) !important;
  font-size: 0.70rem;
}

.cq-td-date {
  text-transform: capitalize;
  white-space: nowrap;
}

.cq-td-amount {
  font-family: var(--font-body);
  color: rgba(240, 234, 210, 0.88) !important;
}

.cq-td-saldo {
  font-family: var(--font-body);
  color: rgba(var(--brand-canopy-rgb), 0.65) !important;
}

/* ── Contact form ── */

.cq-form-wrap {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
}

.cq-form-intro {
  font-size: 0.88rem;
  color: rgba(240, 234, 210, 0.55);
  margin-bottom: 1.75rem;
  line-height: 1.55;
}

.cq-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cq-form[hidden] { display: none; }

.cq-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cq-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 234, 210, 0.55);
}

.cq-input {
  background: rgba(var(--brand-canopy-rgb), 0.05);
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.20);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.90rem;
  color: rgba(240, 234, 210, 0.90);
  outline: none;
  transition: border-color 180ms, background 180ms;
  width: 100%;
}

.cq-input::placeholder { color: rgba(240, 234, 210, 0.25); }

.cq-input:focus {
  border-color: rgba(var(--brand-canopy-rgb), 0.60);
  background: rgba(var(--brand-canopy-rgb), 0.09);
}

/* Custom checkbox */

.cq-field-group--check { gap: 0.5rem; }

.cq-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.cq-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cq-check-box {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid rgba(var(--brand-canopy-rgb), 0.35);
  border-radius: 0.25rem;
  background: rgba(var(--brand-canopy-rgb), 0.05);
  margin-top: 0.1rem;
  position: relative;
  transition: border-color 160ms, background 160ms;
}

.cq-check:checked + .cq-check-box {
  background: var(--brand-canopy);
  border-color: var(--brand-canopy);
}

.cq-check:checked + .cq-check-box::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 0.55rem;
  height: 0.35rem;
  border-left: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
}

.cq-check-text {
  font-size: 0.82rem;
  color: rgba(240, 234, 210, 0.60);
  line-height: 1.55;
}

.cq-error {
  font-size: 0.72rem;
  color: #e07070;
  min-height: 1rem;
}

.cq-legal-note {
  font-size: 0.70rem;
  line-height: 1.5;
  color: rgba(240, 234, 210, 0.42);
  border-top: 1px solid rgba(240, 234, 210, 0.10);
  padding-top: 0.75rem;
  margin: 0.25rem 0 0;
}

/* Submit button */

.cq-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  background: var(--brand-canopy);
  color: var(--brand-ink);
  border: none;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  margin-top: 0.5rem;
  transition: opacity 200ms, transform 120ms;
}

.cq-submit-btn:hover { opacity: 0.88; }

.cq-submit-btn:active { transform: scale(0.98); }

.cq-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Spinner */

.cq-spinner {
  width: 1.1rem;
  height: 1.1rem;
  animation: cqSpin 900ms linear infinite;
}

/* Mismo motivo que en .calc-result-row[hidden] de calculadora.css, agravado
   porque aquí el elemento es un <svg>: la regla [hidden]{display:none} del
   agente de usuario está declarada bajo el espacio de nombres XHTML, así que
   ni siquiera alcanza a los elementos SVG. El markup trae el atributo hidden
   y calc-quote.js lo quita al enviar y lo repone al terminar, pero sin esta
   regla el atributo no pintaba nada y la ruedita se veía girando dentro del
   botón "Enviar cotización" desde que se abría la cotización, como si el
   formulario llevara todo el rato enviándose. Todos los demás elementos con
   hidden de esta hoja ya tenían su regla; a este se le había pasado. */
.cq-spinner[hidden] {
  display: none;
}

/* Status message */

.cq-status {
  font-size: 0.80rem;
  color: rgba(240, 234, 210, 0.60);
  min-height: 1.2rem;
  text-align: center;
}

.cq-status--error { color: #e07070; }

/* ── Success state ── */

.cq-success {
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.cq-success[hidden] { display: none; }

.cq-success-icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--brand-canopy);
}

.cq-success-icon svg { width: 100%; height: 100%; }

.cq-success-icon-warn { display: none; }

/* Estado de respaldo — el correo automático falló. Ícono de alerta ámbar
   en vez del check dorado, para que nunca se confunda con un envío real. */

.cq-success.is-fallback .cq-success-icon { color: #d9a441; }

.cq-success.is-fallback .cq-success-icon-ok { display: none; }

.cq-success.is-fallback .cq-success-icon-warn { display: block; }

.cq-success.is-fallback .cq-success-title { color: #d9a441; }

.cq-success-title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 300;
  color: rgba(240, 234, 210, 0.90);
  margin: 0.25rem 0 0;
}

.cq-success-body {
  font-size: 0.90rem;
  color: rgba(240, 234, 210, 0.55);
  max-width: 32ch;
  line-height: 1.6;
  margin: 0;
}

/* WhatsApp button */

.cq-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  background: #25D366;
  color: #fff;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: opacity 200ms, transform 120ms;
  margin-top: 0.5rem;
}

.cq-wa-btn:hover { opacity: 0.88; color: #fff; text-decoration: none; }

.cq-wa-btn:active { transform: scale(0.97); }

.cq-wa-btn svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* ── Botones de acción rápida (PDF + WA en resumen) ── */

.cq-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 1rem;
}

.cq-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 0.9rem;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: opacity 180ms, transform 120ms;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.cq-action-btn svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }

.cq-action-btn:active { transform: scale(0.97); }

.cq-action-btn--pdf {
  background: rgba(var(--brand-canopy-rgb), 0.08);
  border-color: rgba(var(--brand-canopy-rgb), 0.28);
  color: rgba(240, 234, 210, 0.75);
}

.cq-action-btn--pdf:hover {
  background: rgba(var(--brand-canopy-rgb), 0.15);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  color: rgba(240, 234, 210, 0.95);
}

.cq-action-btn--wa {
  background: rgba(37, 211, 102, 0.10);
  border-color: rgba(37, 211, 102, 0.30);
  color: #4ddb7a;
}

.cq-action-btn--wa:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: rgba(37, 211, 102, 0.60);
}

/* ── Success actions row ── */

.cq-success-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 320px;
}

.cq-success-pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: rgba(var(--brand-canopy-rgb), 0.10);
  border: 1.5px solid rgba(var(--brand-canopy-rgb), 0.30);
  border-radius: 100px;
  color: rgba(240, 234, 210, 0.80);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  width: 100%;
  transition: opacity 180ms, background 180ms;
}

.cq-success-pdf-btn svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }

.cq-success-pdf-btn:hover {
  background: rgba(var(--brand-canopy-rgb), 0.18);
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  color: rgba(240, 234, 210, 0.95);
}

.cq-wa-btn { width: 100%; justify-content: center; }

/* ── Responsive ── */

@media (max-width: 479px) {
  .cq-summary-grid { grid-template-columns: 1fr; }
  .cq-action-row { grid-template-columns: 1fr; }
  .cq-sum-monthly-row {
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .cq-panel { max-width: 100%; border-left: none; }
  .cq-table th, .cq-table td { padding: 0.55rem 0.65rem; }
}

/* Prevent outer scroll bleed (same fix as kineki modal) */

.cq-modal { overflow: hidden; }

/* ── Quote modal — light theme ── */

html[data-theme="light"] .cq-panel {
  background: linear-gradient(160deg, #f5f2eb 0%, #ede9dc 100%);
  border-left-color: rgba(0, 0, 0, 0.09);
}

html[data-theme="light"] .cq-close {
  background: rgba(245, 242, 235, 0.97);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.14),
    0 0 0 4px rgba(var(--brand-canopy-rgb), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

html[data-theme="light"] .cq-close:hover {
  background: #fff;
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
}

html[data-theme="light"] .cq-close-icon { color: rgba(26, 43, 46, 0.65); }

html[data-theme="light"] .cq-close-label { color: rgba(26, 43, 46, 0.65); }

html[data-theme="light"] .cq-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .cq-logo {
  filter: brightness(0);
  opacity: 0.82;
}

html[data-theme="light"] .cq-header-divider { background: rgba(0, 0, 0, 0.12); }

html[data-theme="light"] .cq-header-sub { color: rgba(26, 43, 46, 0.52); }

html[data-theme="light"] .cq-header-disclaimer { color: rgba(26, 43, 46, 0.36); }

html[data-theme="light"] .cq-summary { border-bottom-color: rgba(0, 0, 0, 0.07); }

html[data-theme="light"] .cq-sum-label { color: rgba(26, 43, 46, 0.50); }

html[data-theme="light"] .cq-sum-value { color: rgba(26, 43, 46, 0.88); }

html[data-theme="light"] .cq-sum-value--strikeable.is-struck .cq-sum-value-text { color: rgba(26, 43, 46, 0.32); }

html[data-theme="light"] .cq-cash-note { color: rgba(26, 43, 46, 0.55); }

html[data-theme="light"] .cq-schedule-wrap { border-bottom-color: rgba(0, 0, 0, 0.07); }

html[data-theme="light"] .cq-section-title { color: rgba(var(--brand-canopy-rgb), 0.62); }

html[data-theme="light"] .cq-table-wrap { border-color: rgba(0, 0, 0, 0.09); }

html[data-theme="light"] .cq-table-fade { background: linear-gradient(to bottom, transparent, rgba(237, 233, 220, 0.96)); }

html[data-theme="light"] .cq-table thead tr {
  background: rgba(0, 0, 0, 0.04);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .cq-table th { color: rgba(26, 43, 46, 0.52); }

html[data-theme="light"] .cq-table td {
  color: rgba(26, 43, 46, 0.72);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .cq-table tbody tr:hover td { background: rgba(0, 0, 0, 0.03); }

html[data-theme="light"] .cq-table .cq-tr-last td { color: rgba(26, 43, 46, 0.35); }

html[data-theme="light"] .cq-td-num { color: rgba(26, 43, 46, 0.28) !important; }

html[data-theme="light"] .cq-td-amount { color: rgba(26, 43, 46, 0.85) !important; }

html[data-theme="light"] .cq-td-saldo { color: rgba(var(--brand-canopy-rgb), 0.60) !important; }

html[data-theme="light"] .cq-form-intro { color: rgba(26, 43, 46, 0.55); }

html[data-theme="light"] .cq-label { color: rgba(26, 43, 46, 0.55); }

html[data-theme="light"] .cq-input {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(26, 43, 46, 0.90);
}

html[data-theme="light"] .cq-input::placeholder { color: rgba(26, 43, 46, 0.28); }

html[data-theme="light"] .cq-input:focus {
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  background: rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .cq-check-box {
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.70);
}

html[data-theme="light"] .cq-check:checked + .cq-check-box::after {
  border-left-color: #1a2b2e;
  border-bottom-color: #1a2b2e;
}

html[data-theme="light"] .cq-check-text { color: rgba(26, 43, 46, 0.60); }

html[data-theme="light"] .cq-legal-note {
  color: rgba(26, 43, 46, 0.42);
  border-top-color: rgba(26, 43, 46, 0.10);
}

html[data-theme="light"] .cq-submit-btn { color: #1a2b2e; }

html[data-theme="light"] .cq-status { color: rgba(26, 43, 46, 0.58); }

html[data-theme="light"] .cq-success-title { color: rgba(26, 43, 46, 0.90); }

html[data-theme="light"] .cq-success-body { color: rgba(26, 43, 46, 0.55); }

html[data-theme="light"] .cq-success-pdf-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(26, 43, 46, 0.72);
}

html[data-theme="light"] .cq-success-pdf-btn:hover {
  background: rgba(0, 0, 0, 0.09);
  border-color: rgba(var(--brand-canopy-rgb), 0.50);
  color: rgba(26, 43, 46, 0.90);
}

html[data-theme="light"] .cq-action-btn--pdf {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.16);
  color: rgba(26, 43, 46, 0.65);
}

html[data-theme="light"] .cq-action-btn--pdf:hover {
  background: rgba(0, 0, 0, 0.09);
  border-color: rgba(var(--brand-canopy-rgb), 0.50);
  color: rgba(26, 43, 46, 0.88);
}