/* TINTIN — Mantenimiento integral 05: Checkout */
body:has(.ck-body) {
  --ck-surface: var(--tt-surface, #fff);
  --ck-page: var(--tt-page-bg, #FDECF2);
  --ck-text: var(--tt-text, #352b2f);
  --ck-muted: var(--tt-text-muted, #75666c);
  --ck-accent: var(--tt-accent, var(--color-brand-primary, #F8AACA));
  --ck-accent-soft: var(--tt-accent-soft, #f9e8ef);
  --ck-border: var(--tt-border, #edcbd7);
  background: var(--ck-page) !important;
  color: var(--ck-text) !important;
}

body:has(.ck-body) .ck-back-row,
body:has(.ck-body) .ck-steps,
body:has(.ck-body) .ck-body,
body:has(.ck-body) .ck-panel,
body:has(.ck-body) .ck-panel-head,
body:has(.ck-body) .ck-panel-body,
body:has(.ck-body) .ck-item,
body:has(.ck-body) .ck-ship-info,
body:has(.ck-body) .ck-ship-reminder,
body:has(.ck-body) .ck-map-wrap,
body:has(.ck-body) .ck-bank-details,
body:has(.ck-body) .ck-pay-note,
body:has(.ck-body) #ck-post-confirm > div {
  background-color: var(--ck-surface) !important;
  background-image: none !important;
}

body:has(.ck-body) .ck-panel,
body:has(.ck-body) .ck-item,
body:has(.ck-body) .ck-ship-info,
body:has(.ck-body) .ck-ship-reminder,
body:has(.ck-body) .ck-map-wrap,
body:has(.ck-body) .ck-pay-label,
body:has(.ck-body) .ck-bank-details,
body:has(.ck-body) .ck-pay-note {
  border-color: var(--ck-border) !important;
}

body:has(.ck-body) .ck-panel-title,
body:has(.ck-body) .ck-item-name,
body:has(.ck-body) .ck-pay-title,
body:has(.ck-body) .ck-label,
body:has(.ck-body) .ck-subtotal-val,
body:has(.ck-body) .ck-confirm-title {
  color: var(--ck-text) !important;
}

body:has(.ck-body) .ck-panel-sub,
body:has(.ck-body) .ck-item-cat,
body:has(.ck-body) .ck-pay-desc,
body:has(.ck-body) .ck-confirm-sub,
body:has(.ck-body) .ck-map-tip-steps,
body:has(.ck-body) .ck-trust-item {
  color: var(--ck-muted) !important;
}

body:has(.ck-body) .ck-input,
body:has(.ck-body) .ck-select,
body:has(.ck-body) .ck-textarea,
body:has(.ck-body) .ck-map-search-results,
body:has(.ck-body) .ck-map-search-result {
  background: var(--ck-surface) !important;
  color: var(--ck-text) !important;
  border-color: var(--ck-border) !important;
}

body:has(.ck-body) .ck-input::placeholder,
body:has(.ck-body) .ck-textarea::placeholder {
  color: var(--ck-muted) !important;
  opacity: .8;
}

body:has(.ck-body) .ck-btn,
body:has(.ck-body) #ck-confirm-btn {
  min-height: 48px;
  background: var(--ck-accent) !important;
  color:#222222 !important;
  border: 1px solid var(--ck-accent) !important;
}

body:has(.ck-body) .ck-btn-back,
body:has(.ck-body) .ck-header-back,
body:has(.ck-body) .ck-saved-location-hint button {
  color:var(--color-text-primary,#222222) !important;
}

body:has(.ck-body) .ck-step-num,
body:has(.ck-body) .ck-product-status,
body:has(.ck-body) .ck-map-coords {
  background: var(--ck-accent-soft) !important;
  color:var(--color-text-primary,#222222) !important;
}

body:has(.ck-body) .ck-step.active .ck-step-num,
body:has(.ck-body) .ck-step.done .ck-step-num {
  background: var(--ck-accent) !important;
  color:#222222 !important;
}

body:has(.ck-body) .ck-item-img,
body:has(.ck-body) .ck-item-img-placeholder,
body:has(.ck-body) #ck-map,
body:has(.ck-body) .leaflet-container {
  background-color: var(--ck-surface) !important;
}

body:has(.ck-body) :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ck-accent) 35%, transparent) !important;
  outline-offset: 2px;
}

body:has(.ck-body) .ck-error.show,
body:has(.ck-body) .ck-map-coords-missing {
  color:var(--color-text-primary,#222222) !important;
  background: #fff0f3 !important;
  border-color: #e9a8b6 !important;
}

body:has(.ck-body).tt-checkout-offline .ck-btn:not(.ck-btn-back),
body:has(.ck-body).tt-checkout-submitting #ck-confirm-btn {
  cursor: wait;
}

body:has(.ck-body).tt-checkout-submitting #ck-confirm-btn {
  opacity: .68;
  pointer-events: none;
}

/* Confirmación: información corta, ordenada y reutilizable en los tres
   tamaños. Las acciones ya no dependen de estilos inline. */
body:has(.ck-body) .ck-confirm-check { padding:8px 0 24px; }
body:has(.ck-body) .ck-confirm-icon { width:60px; height:60px; margin-bottom:14px; box-shadow:none; }
body:has(.ck-body) .ck-confirm-title { font-size:clamp(1.35rem,3vw,1.65rem); }
body:has(.ck-body) .ck-confirm-sub { max-width:470px; line-height:1.6; }
body:has(.ck-body) .ck-confirm-next {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  max-width:620px; margin:20px auto 0; padding:0; list-style:none; counter-reset:step;
}
body:has(.ck-body) .ck-confirm-next li {
  min-width:0; padding:11px 10px; border:1px solid var(--ck-border); border-radius:12px;
  color:var(--ck-muted); font-size:.72rem; line-height:1.4; text-align:left;
}
body:has(.ck-body) .ck-confirm-next li::before { counter-increment:step; content:counter(step); display:inline-grid; place-items:center; width:18px; height:18px; margin:0 6px 4px 0; border-radius:50%; background:var(--ck-accent-soft); color:var(--color-text-primary,#222222); font-size:.68rem; font-weight:800; }
body:has(.ck-body) .ck-post-confirm { margin-top:18px; text-align:center; }
body:has(.ck-body) .ck-post-confirm-card { padding:16px; border:1px solid var(--ck-border); border-radius:16px; background:var(--ck-surface); }
body:has(.ck-body) .ck-post-confirm-card p { margin:0 0 8px; color:var(--ck-muted); font-size:.78rem; }
body:has(.ck-body) .ck-post-confirm-card a { color:#267a41!important; font-size:.82rem; font-weight:750; text-decoration:none; }
body:has(.ck-body) .ck-post-confirm-card a:hover,.ck-post-confirm-back a:hover { text-decoration:underline; }
body:has(.ck-body) .ck-post-confirm-back { margin-top:16px; }
body:has(.ck-body) .ck-post-confirm-back a { color:var(--ck-muted)!important; font-size:.78rem; font-weight:650; text-decoration:none; }
@media (max-width:560px) { body:has(.ck-body) .ck-confirm-next { grid-template-columns:1fr; gap:6px; } body:has(.ck-body) .ck-confirm-next li { padding:10px 12px; } }

@media (min-width: 1440px) {
  body:has(.ck-body) .ck-body,
  body:has(.ck-body) .ck-steps { width: min(860px, calc(100% - 64px)); }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  body:has(.ck-body) .ck-body,
  body:has(.ck-body) .ck-steps { width: min(780px, calc(100% - 48px)); }
}

@media (min-width: 769px) and (max-width: 1024px) {
  body:has(.ck-body) .ck-body,
  body:has(.ck-body) .ck-steps { width: min(720px, calc(100% - 32px)); }
  body:has(.ck-body) .ck-panel-body { padding-inline: 28px; }
}

@media (max-width: 768px) {
  body:has(.ck-body) { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  body:has(.ck-body) .ck-back-row,
  body:has(.ck-body) .ck-body,
  body:has(.ck-body) .ck-steps { width: calc(100% - 24px); }
  body:has(.ck-body) .ck-steps { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  body:has(.ck-body) .ck-step { min-width: 0; flex: 1 1 0; }
  body:has(.ck-body) .ck-panel-body { padding: 20px 16px; }
  body:has(.ck-body) .ck-item { grid-template-columns: 72px minmax(0,1fr); }
  body:has(.ck-body) .ck-item-controls { grid-column: 1 / -1; justify-content: flex-end; }
  body:has(.ck-body) .ck-trust-bar { grid-template-columns: 1fr; }
  body:has(.ck-body) .ck-btn,
  body:has(.ck-body) .ck-btn-back { width: 100%; }
}

@media (max-width: 420px) {
  body:has(.ck-body) .ck-back-row,
  body:has(.ck-body) .ck-body,
  body:has(.ck-body) .ck-steps { width: calc(100% - 16px); }
  body:has(.ck-body) .ck-panel-head { padding-inline: 14px; }
  body:has(.ck-body) .ck-panel-title { font-size: 1.05rem; }
  body:has(.ck-body) .ck-item { grid-template-columns: 60px minmax(0,1fr); gap: 10px; }
  body:has(.ck-body) #ck-phone-country { flex-basis: 112px !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* #tt-loader queda afuera: su spinner es estado del sistema, no una
     animación decorativa — apagarlo lo deja congelado en vez de sobrio. */
  body:has(.ck-body) *:not(#tt-loader):not(#tt-loader *),
  body:has(.ck-body) *::before,
  body:has(.ck-body) *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }

  body:has(.ck-body) #tt-loader .tt-loader-spinner::before,
  body:has(.ck-body) #tt-loader .tt-loader-spinner::after {
    animation: tt-loader-spinner-ring 1.6s infinite linear !important;
  }
}

/* Tus datos conserva una lectura vertical y controles completos, también en 320px. */
body:has(.ck-body) #panel-2 .ck-panel-body {
  width: min(100%, 640px);
  margin-inline: auto;
  box-sizing: border-box;
}
body:has(.ck-body) .ck-field { min-width: 0; }
body:has(.ck-body) :is(.ck-input, .ck-select, .ck-textarea) {
  min-width: 0;
  box-sizing: border-box;
  font-size: 16px;
}

/* Facturación progresiva y referencia de entrega. */
body:has(.ck-body) #ck-wants-invoice-row { display:flex; align-items:center; gap:14px; min-height:64px; padding:16px; border:1px solid var(--border); border-radius:12px; cursor:pointer; }
body:has(.ck-body) #ck-wants-invoice-row:has(input:checked) { border-color:var(--pink-dark); background:#fff; }
body:has(.ck-body) #ck-wants-invoice { width:24px; height:24px; flex:0 0 24px; accent-color:var(--pink-dark); }
body:has(.ck-body) #ck-wants-invoice-row small { display:block; margin-top:4px; line-height:1.5; }
body:has(.ck-body) .ck-field-help { margin:4px 0 0; font-size:13px; line-height:1.5; }
body:has(.ck-body) .ck-ship-reminder { border-left-width:2px; }
body:has(.ck-body) .ck-body { margin-bottom:32px; }

html body:has(.ck-body) :is(.ck-back-row,.ck-steps) { background:transparent !important; box-shadow:none !important; border:0 !important; }
html body:has(.ck-body) .ck-back-row { padding-top:16px !important; padding-bottom:8px !important; }
/* Tablet ya reserva sus 84px en body (paneles.css); escritorio reserva el
   header aquí. El difuminado compartido también debe acabar antes del enlace,
   para que ni la acción ni los pasos queden bajo su backdrop-filter. Móvil
   no tiene cabecera superior fija y conserva su separación de 16px. */
@media (min-width: 768px) {
  html body:has(.ck-body) .ck-back-row {
    padding-top:calc(clamp(32px, 4vw, 56px) + 16px) !important;
  }
}
@media (min-width: 1025px) {
  html body:has(.ck-body) .ck-back-row {
    padding-top:calc(var(--header-h, 88px) + clamp(32px, 4vw, 56px) + 16px) !important;
  }
}
html body:has(.ck-body) .ck-steps { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.6fr); width:min(700px,calc(100% - 24px)) !important; box-sizing:border-box; padding:12px 0 !important; gap:0; overflow:visible; }
html body:has(.ck-body) .ck-step { min-width:0; }
html body:has(.ck-body) .ck-step-label {
  display:block;
  color:#74636b !important;
  background:transparent !important;
  border-radius:0;
  padding:0;
  margin:4px 0 0;
  white-space:nowrap !important;
  word-break:normal !important;
  font-size:clamp(10px,2.5vw,12px) !important;
  font-weight:500;
  text-transform:none;
  letter-spacing:0 !important;
  line-height:1.4;
}
html body:has(.ck-body) .ck-step.active .ck-step-label,
html body:has(.ck-body) .ck-step.done .ck-step-label { color:#222222 !important; font-weight:600; }