/* Namespaced: no pisa Divi */
.cpf-card{
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  margin: 0 0 var(--cpf-gap, 40px) 0;
  font-family: inherit;
}
.cpf-card:last-child{margin-bottom:0;}

.cpf-card__header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.cpf-eyebrow{
  font-size:12px;
  color:#6b7280;
  margin-bottom:4px;
}
.cpf-title{
  margin:0;
  font-size:20px;
  line-height:1.2;
}
.cpf-meta{
  margin-top:6px;
  font-size:13px;
  color:#6b7280;
}
.cpf-price__value{
  font-size:18px;
  font-weight:700;
}
.cpf-card__body{ margin-top:14px; display:grid; gap:12px; }
.cpf-block{ border-top:1px solid #f3f4f6; padding-top:12px; }
.cpf-block__title{ font-weight:700; margin-bottom:6px; }
.cpf-mono{
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  background:#f9fafb;
  border:1px solid #f3f4f6;
  padding:10px;
  border-radius:10px;
}
.cpf-muted{ color:#6b7280; font-size:13px; }
@media (max-width: 700px){
  .cpf-card__header{ flex-direction:column; align-items:stretch; }
}
.cpf-pf{border:1px solid #e5e7eb;border-radius:14px;padding:18px;background:#fff}
.cpf-pf__badge{font-size:12px;color:#6b7280;margin-bottom:6px}
.cpf-pf__title{font-size:28px;font-weight:700;margin:0 0 6px}
.cpf-pf__meta{font-size:13px;color:#6b7280;display:flex;gap:12px;flex-wrap:wrap}
.cpf-pf__price{font-size:20px;font-weight:700;margin-top:14px}
.cpf-pf__section-title{font-weight:700;margin:18px 0 8px}
.cpf-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:12px;white-space:pre-wrap;background:#f9fafb;border:1px solid #eef2f7;border-radius:10px;padding:12px}
.cpf-pf__hint{color:#6b7280;font-size:13px}

.cpf-pf{border:1px solid #e5e7eb;border-radius:16px;padding:18px;background:#fff}
.cpf-pf__badge{font-size:12px;color:#6b7280;margin-bottom:6px}
.cpf-pf__title{font-size:26px;font-weight:750;margin:0 0 6px;line-height:1.2}
.cpf-pf__meta{font-size:13px;color:#6b7280;display:flex;gap:12px;flex-wrap:wrap}
.cpf-pf__price{font-size:20px;font-weight:750;margin-top:14px}

.cpf-pf__components{margin-top:16px;display:flex;flex-direction:column;gap:12px}

.cpf-price{font-size:22px;font-weight:800}

.cpf-specs{display:flex;flex-direction:column;gap:8px}
.cpf-spec{display:flex;justify-content:space-between;gap:12px}
.cpf-spec__k{font-size:13px;color:#6b7280}
.cpf-spec__v{font-size:13px;color:#111827;text-align:right}

.cpf-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:12px 14px;border-radius:12px;text-decoration:none;font-weight:800}
.cpf-btn--primary{background:#111827;color:#fff}
.cpf-help{margin-top:8px;font-size:12px;color:#6b7280}
/* ============== CPF Product Framework (frontend) ============== */
.cpf-pf {
  --cpf-bg: #fff;
  --cpf-text: #1f2937;
  --cpf-muted: #6b7280;
  --cpf-border: #e5e7eb;
  --cpf-soft: #f9fafb;
  --cpf-accent: #3a3971; /* luego lo haremos configurable por web */
  --cpf-radius: 14px;
  --cpf-gap: 14px;

  /* Variables legacy (para replicar responsive del framework original) */
  --color-blanco: #ffffff;
  --color-primario: var(--cpf-accent);
  --color-secundario: #e69130;
  --color-borde: #dee2e6;
  --color-texto-principal: var(--cpf-text);
  --color-texto-secundario: var(--cpf-muted);
  --padding-base: 14px;
  --border-radius-std: 12px;
  --color-sombra-suave: rgba(0,0,0,.08);
  --color-sombra-media: rgba(0,0,0,.15);

  color: var(--cpf-text);
  font-size: 14px;
  line-height: 1.45;
}

.cpf-pf * { box-sizing: border-box; }

.cpf-card {
  background: var(--cpf-bg);
  border: 1px solid var(--cpf-border);
  border-radius: var(--cpf-radius);
  padding: 20px;
}

.cpf-pf__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cpf-muted);
  margin-bottom: 10px;
}

.cpf-pf__title {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 8px;
}

.cpf-pf__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: var(--cpf-muted);
  font-size: 13px;
}

.cpf-pf__price {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--cpf-text);
}

.cpf-components {
  margin-top: 18px;
  display: block;
}

.cpf-comp__title {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 10px;
}

.cpf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cpf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--cpf-border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--cpf-text);
  white-space: nowrap;   /* evita que el texto de la chip se parta */
  flex-shrink: 0;        /* evita que la chip se encoja */
}

@media (max-width: 767px) {
  .cpf-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox: oculta scrollbar */
    padding-bottom: 2px;            /* espacio para que no se corte la sombra del borde */
  }
  .cpf-chips::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari: oculta scrollbar */
  }
}

.cpf-muted { color: var(--cpf-muted); }

.cpf-details {
  margin-top: 10px;
  border-top: 1px dashed var(--cpf-border);
  padding-top: 10px;
}

.cpf-details summary {
  cursor: pointer;
  color: var(--cpf-accent);
  font-weight: 600;
  list-style: none;
}

.cpf-details summary::-webkit-details-marker { display: none; }

@media (max-width: 767px) {
  .cpf-pf__title { font-size: 22px; }
  .cpf-card { padding: 16px; }
}
/* Wrapper de componente (sin card) */
.cpf-comp{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.cpf-comp + .cpf-comp{
  margin-top: 16px !important;
}
.cpf-block-text { color: var(--cpf-text); font-size: 14px; }
.cpf-list { margin: 0; padding-left: 18px; color: var(--cpf-text); }
.cpf-list li { margin: 6px 0; color: var(--cpf-text); }

/* Divider: línea separadora */
.cpf-comp--divider {
  padding: 0 !important;
}
.cpf-divider {
  border: none;
  border-top: 1px solid var(--cpf-border, #e5e7eb);
  margin: 0;
}

/* Payments: iconos de métodos de pago */
.cpf-comp--payments .cpf-payments-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 0;
}

@media (min-width: 768px){
  .cpf-comp--payments .cpf-payments-icons{ flex-wrap:nowrap; }
}

@media (max-width: 767px) {
  .cpf-comp--payments .cpf-payments-icons {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .cpf-comp--payments .cpf-payments-icons::-webkit-scrollbar {
    display: none;
  }
}

.cpf-comp--payments .cpf-payments-icon-card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width: 64px;
  height: 40px;
  padding: 7px 8px;
  border: 1px solid var(--cpf-border);
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.cpf-comp--payments .cpf-payments-icon,
.cpf-comp--payments .cpf-payments-icon-card picture {
  display: block;
  width: 100%;
  height: 100%;
}

.cpf-comp--payments .cpf-payments-icon-card picture img,
.cpf-comp--payments .cpf-payments-icon:not(picture) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.cpf-link {
  color: var(--cpf-accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cpf-link:hover { text-decoration: underline; }

.cpf-field { margin-top: 10px; }
.cpf-label { display:block; font-weight:600; margin-bottom:6px; }
.cpf-select {
  width:100%;
  padding: 10px 12px;
  border: 1px solid #3a3971;  /* Borde más fino (1px) */
  border-radius: 10px;
  background:#fff;
  font-size: 14px;
  font-weight: 500;
  color: #3a3971;  /* Texto en color corporativo */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cpf-select:hover {
  border-color: #2e2d5b;  /* Color más oscuro al hover */
}

.cpf-select:focus {
  outline: none;
  border-color: #3a3971;
  box-shadow: 0 0 0 3px rgba(58, 57, 113, 0.1);
}

/* === ESTILOS DESKTOP === */
@media (min-width: 768px) {
  /* Wrapper de variaciones: centrado y ancho limitado */
  .cpf-variations {
    max-width: 500px;  /* Ancho máximo */
    margin: 0 auto;    /* Centrado */
  }
  
  /* Labels alineados a la izquierda (default) */
  .cpf-variations .cpf-label {
    text-align: left;
  }
}

/* ============================================================
 * Price Reference Table (Tabla de precios) — look & feel legacy
 * Scoped to the component wrapper: .cpf-comp--price_reference_table
 * ============================================================ */
.cpf-comp--price_reference_table .cpf-price-ref{
  margin-top: 6px;
}

.cpf-comp--price_reference_table .cpf-price-ref__table{
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  border: 1px solid var(--cpf-price-ref-border, #dee2e6);
  border-radius: var(--cpf-price-ref-radius, 6px);
  overflow: hidden;
}

.cpf-comp--price_reference_table .cpf-price-ref__table thead th{
  background-color: rgba(58, 57, 114, .07);
  color: var(--cpf-accent, #3a3971);
  padding: 10px 15px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--cpf-accent, #3a3971);
  white-space: nowrap;
}

.cpf-comp--price_reference_table .cpf-price-ref__table tbody td{
  border-bottom: 1px solid var(--cpf-price-ref-border, #dee2e6);
  padding: 10px 15px;
  text-align: left;
  
  vertical-align: middle;
}

.cpf-comp--price_reference_table .cpf-price-ref__table tbody tr:last-child td{
  border-bottom: none;
}

.cpf-comp--price_reference_table .cpf-price-ref__table tbody tr:nth-child(even) td{
  background-color: rgba(58, 57, 114, .02);
}

.cpf-comp--price_reference_table .cpf-price-ref__table tbody tr:hover td{
  background-color: rgba(58, 57, 114, .04);
}

.cpf-comp--price_reference_table .cpf-price-ref__format{
  font-weight: 600;
  color: var(--cpf-accent, #3a3971);
}

.cpf-comp--price_reference_table .cpf-price-ref__content{
  font-size: .85rem;
}

.cpf-comp--price_reference_table .cpf-price-ref__price strong{
  font-weight: 600;
  color: var(--cpf-price-ref-secondary, #e69130);
}

.cpf-comp--price_reference_table .cpf-price-ref__unit{
  font-size: .8rem;
  display: block;
  color: var(--cpf-price-ref-text, #52518c);
}

.cpf-comp--price_reference_table .cpf-price-ref__obs{
  font-size: .85rem;
}

.cpf-comp--price_reference_table .cpf-price-ref__obs--save{
  color: var(--cpf-price-ref-danger, #dc3545);
  font-weight: 500;
}

/* Mobile: allow horizontal scroll instead of breaking the layout */
@media (max-width: 767px){
  .cpf-comp--price_reference_table .cpf-price-ref{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cpf-comp--price_reference_table .cpf-price-ref__table{
    min-width: 560px;
  }
}

/* ============================================================
 * Price Reference Table — Mobile accordion (legacy)
 * ============================================================ */
.cpf-comp--price_reference_table #listadoPreciosReferenciaMovil{display:none;}

@media (max-width: 767px){
  .cpf-comp--price_reference_table #tablaPreciosReferencia{display:none;}
  .cpf-comp--price_reference_table #listadoPreciosReferenciaMovil{display:grid;gap:var(--padding-base);}

  .cpf-comp--price_reference_table .calc-precio-item-ref{background-color:var(--color-blanco);border:1px solid var(--color-borde);border-left:4px solid var(--color-primario);border-radius:var(--border-radius-std);box-shadow:0 2px 4px var(--color-sombra-suave)}
  .cpf-comp--price_reference_table .resumen-precio-ref{width:100%;text-align:left;padding:var(--padding-base);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;background:transparent;border:0;transition:background-color .2s ease}
  .cpf-comp--price_reference_table .calc-precio-item-ref.abierto .resumen-precio-ref{background-color:rgba(58,57,114,.03)}
  .cpf-comp--price_reference_table .resumen-precio-ref .formato-nombre-ref{font-size:1.1rem;font-weight:600;color:var(--color-primario);flex-grow:1}
  .cpf-comp--price_reference_table .resumen-precio-ref .precio-info-ref{display:flex;flex-direction:column;align-items:flex-end;margin-left:var(--padding-base)}
  .cpf-comp--price_reference_table .resumen-precio-ref .precio-resumen-valor-ref{font-size:1.2rem;font-weight:700;color:var(--color-secundario);white-space:nowrap}
  .cpf-comp--price_reference_table .resumen-precio-ref .unidad-precio-ref{font-size:.8em;color:var(--color-texto-secundario);margin-left:3px}
  .cpf-comp--price_reference_table .resumen-precio-ref .unidades-formato-ref{font-size:.8rem;color:var(--color-texto-secundario);white-space:nowrap}
  .cpf-comp--price_reference_table .resumen-precio-ref .icono-desplegar-ref{font-size:1rem;color:var(--color-primario);margin-left:var(--padding-base);transition:transform .3s ease;flex-shrink:0}
  .cpf-comp--price_reference_table .calc-precio-item-ref.abierto .icono-desplegar-ref{transform:rotate(180deg)}

  .cpf-comp--price_reference_table .detalles-expandibles-ref{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.25,.1,.25,1),padding .4s cubic-bezier(.25,.1,.25,1);padding:0 var(--padding-base);border-top:1px solid transparent}
  .cpf-comp--price_reference_table .calc-precio-item-ref.abierto .detalles-expandibles-ref{max-height:500px;padding:var(--padding-base);border-top-color:var(--color-borde)}
  .cpf-comp--price_reference_table .detalles-expandibles-ref .detalle-linea-ref{font-size:.9rem;color:var(--color-texto-secundario);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .cpf-comp--price_reference_table .detalles-expandibles-ref .etiqueta-ref{font-weight:500;color:var(--color-texto-principal)}
  .cpf-comp--price_reference_table .detalles-expandibles-ref .valor-ref{font-weight:500;color:var(--color-texto-principal);text-align:right}
  .cpf-comp--price_reference_table .detalles-expandibles-ref .obs_rojo{color:#dc3545;font-weight:700}

  /* Extra touch from original */
  .cpf-comp--price_reference_table #listadoPreciosReferenciaMovil .calc-precio-item-ref{position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.08)}
  .cpf-comp--price_reference_table #listadoPreciosReferenciaMovil .calc-precio-item-ref::before{content:"";position:absolute;inset:0 0 auto 0;height:36px;background-color:rgba(58,57,114,.05);opacity:1;pointer-events:none}
  .cpf-comp--price_reference_table #listadoPreciosReferenciaMovil .calc-precio-item-ref .resumen-precio-ref{padding-top:46px}
  .cpf-comp--price_reference_table #listadoPreciosReferenciaMovil .resumen-precio-ref .precio-resumen-valor-ref{color:var(--color-secundario);font-weight:800;text-shadow:0 1px 0 rgba(0,0,0,.05)}
  .cpf-comp--price_reference_table #listadoPreciosReferenciaMovil .calc-precio-item-ref.abierto .detalles-expandibles-ref{background:linear-gradient(180deg,#fff 0%,#f8f9fa 100%);border-top-color:#e9ecef}
}

/* ============================================================
 * Mobile floating buy bar (legacy)
 * ============================================================ */
#calc-flotante-wrapper{position:fixed;bottom:0;left:0;width:100%;background-color:var(--color-blanco);padding:var(--padding-base);padding-bottom:calc(var(--padding-base) + env(safe-area-inset-bottom));border-top:1px solid var(--color-borde);box-shadow:0 -3px 10px var(--color-sombra-media);z-index:10000;display:flex;align-items:center;box-sizing:border-box;opacity:0;transform:translateY(100%);transition:opacity .3s ease-out,transform .3s ease-out}
#calc-flotante-wrapper.visible{opacity:1;transform:translateY(0)}
.calc-flotante-estado-inicial,.calc-flotante-estado-resultado{display:flex;width:100%;align-items:center;gap:10px}

/* Para productos simples y variables: layout horizontal con precio a la izquierda y botón a la derecha */
.cpf-floatbar--simple .calc-flotante-estado-resultado{
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.cpf-floatbar--simple .resumen-calc-flotante{
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}

.cpf-floatbar--simple .calc-boton-flotante{
  flex: 1 1 auto;
  max-width: 280px;
    
}
.calc-input-m2-flotante{flex-grow:1;padding:12px;border:1px solid var(--color-borde);border-radius:4px;font-size:1rem;min-width:80px}
.calc-boton-flotante{padding:12px 16px;border:none;border-radius:4px;cursor:pointer;font-size:.95rem;font-weight:600;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--color-blanco);flex-shrink:0}
.calc-boton-principal-flotante{background-color:var(--color-secundario)}
.calc-boton-principal-flotante:hover{background-color:#c67d25}
.calc-flotante-estado-resultado{justify-content:space-between}
.precio-info-flotante{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.precio-total-flotante{font-size:1.25rem;font-weight:700;color:var(--color-primario)}
.calc-boton-modificar-flotante{background:none;border:none;color:var(--color-primario);text-decoration:underline;font-size:.8rem;padding:2px 0;cursor:pointer;opacity:.8}
.calc-boton-modificar-flotante:hover{opacity:1}
.accion-comprar-flotante-btn{background-color:var(--color-primario);flex-grow:1;max-width:60%}
.cpf-cta-btn--inline{width:100%;max-width:100%!important;box-sizing:border-box}
.accion-comprar-flotante-btn:hover{background-color:#2e2d5b}
@media (min-width:768px){
  #calc-flotante-wrapper{max-width:800px;left:50%;transform:translateX(-50%) translateY(100%);border-radius:var(--border-radius-std) var(--border-radius-std) 0 0}
  #calc-flotante-wrapper.visible{transform:translateX(-50%) translateY(0)}
  .accion-comprar-flotante-btn{max-width:280px}
}
.cpf-variation-price .price { font-size: 16px; font-weight: 700; }
.cpf-alert{
  border: 1px solid var(--cpf-border);
  background: var(--cpf-soft);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
}
.cpf-grouped-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--cpf-border);
}
.cpf-grouped-row:last-child{ border-bottom:0; }
.cpf-grouped-row__name{ font-weight:600; }
.cpf-grouped-row__price .price{ font-weight:700; }
.cpf-grouped-row__qty{ width:90px; }
.cpf-input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--cpf-border);
  border-radius:10px;
  background:#fff;
}

/* Quantity picker (simple/variable) - estilo rectangular (corporativo) */
.cpf-qty-picker{
  display:flex;
  align-items:stretch;
  width:100%;
  border:1px solid #3a3a72;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

/* Desktop: no ocupar todo el ancho (más limpio). Centrado.
   Mobile: sigue a 100% por defecto. */
@media (min-width: 768px){
  .cpf-qty-picker{
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}
.cpf-qty-btn{
  width:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:#3a3a72;
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
.cpf-qty-btn:active{ transform:translateY(1px); }
.cpf-qty-picker__input{
  border:0 !important;
  border-left:1px solid #3a3a72 !important;
  border-right:1px solid #3a3a72 !important;
  border-radius:0 !important;
  text-align:center;
  padding:10px 12px;
  background:#fff;
}
/* Quitar spinners del number (más limpio) */
.cpf-qty-picker__input::-webkit-outer-spin-button,
.cpf-qty-picker__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cpf-qty-picker__input{ -moz-appearance:textfield; }

/* En móvil, que no quede "demasiado alto" */
@media (max-width: 520px){
  .cpf-qty-btn{ width:52px; }
}
/* =========================
   CPF Fixed Buy Bar (F2-05)
   ========================= */



.cpf-fixedbar__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.cpf-fixedbar__price {
  font-weight: 700;
}

.cpf-fixedbar__btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

.cpf-fixedbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99999;
  padding: 10px 12px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);

  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}

.cpf-fixedbar.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


.cpf-fixedbar[aria-hidden="true"]{
  display: none;
}

.cpf-fixedbar__inner{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* NUEVO: Fixedbar visible tanto en mobile como en desktop */
/* Se removió la regla @media (min-width: 768px) que lo ocultaba en desktop */

/* ====================================
   F4: Add-to-Cart Messages & States
   ==================================== */

/* Messages Container */
.cpf-messages {
    margin-bottom: 15px;
}

.cpf-message {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success Message */
.cpf-message--success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

/* Error Message */
.cpf-message--error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Loading State */
.cpf-btn.cpf-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.cpf-btn.cpf-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Disabled State */
.cpf-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* CTA pendiente de selección de variación: apariencia gris + cursor de scroll */
[data-cpf-cta="add_to_cart"][data-cpf-pending="1"],
[data-cpf-fixedbar-btn][data-cpf-pending="1"] {
    background: #9ca3af !important;
    color: #fff !important;
    cursor: pointer !important;
    opacity: 1 !important;
    box-shadow: none !important;
    filter: none !important;
}
[data-cpf-cta="add_to_cart"][data-cpf-pending="1"]:hover,
[data-cpf-fixedbar-btn][data-cpf-pending="1"]:hover {
    background: #6b7280 !important;
}

/* Cart Count Badge (opcional) */
.cpf-cart-count {
    display: inline-block;
    min-width: 20px;
    padding: 2px 6px;
    background: #dc2626;
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

/* No ocultamos el minicarrito durante add-to-cart
   La prevención de apertura automática la gestiona JS via preventMiniCartOpen */

/* ========================================
   CALCULATOR STYLES
   ======================================== */

.cpf-calculator {
    margin-bottom: 20px;
}

.cpf-calc-input-section {
    margin-bottom: 15px;
}

.cpf-calc-quantity-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 1.1rem;
    transition: border-color 0.2s;
}

.cpf-calc-quantity-input:focus {
    outline: none;
    border-color: var(--cpf-primary-color, #3a3971);
    box-shadow: 0 0 0 3px rgba(0, 122, 175, 0.1);
}

.cpf-calc-error {
    color: #dc3545;
    font-size: 0.9rem;
    margin-top: 5px;
}

.cpf-calc-button,
.cpf-calc-sample-button,
.cpf-calc-add-to-cart {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cpf-calc-button {
    background-color: #e69130;
    color: #fff;
}

.cpf-calc-button:hover {
    background-color: #d68025;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cpf-calc-sample-button {
    background-color: #6c757d;
    color: white;
}

.cpf-calc-sample-button:hover {
    background-color: #5a6268;
}

.cpf-calc-results-placeholder {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border-radius: 6px;
    margin-top: 20px;
}

.cpf-calc-results-placeholder i {
    font-size: 2rem;
    color: #6c757d;
    margin-bottom: 10px;
}

.cpf-calc-results-placeholder p {
    color: #6c757d;
    margin: 0;
}

.cpf-calc-results {
    margin-top: 20px;
}

.cpf-calc-results-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--cpf-primary-color, #3a3971);
    text-align: center;
}

.cpf-calc-results-breakdown {
    margin-bottom: 15px;
}

.cpf-calc-result-item {
    background-color: #ffffff;
    border-left: 4px solid var(--cpf-primary-color, #3a3971);
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.cpf-calc-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cpf-calc-result-name {
    font-weight: 600;
    color: var(--cpf-primary-color, #3a3971);
    font-size: 1.05rem;
    line-height: 1.35;
}

.cpf-calc-result-count {
    background-color: var(--cpf-primary-color, #3a3971);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.cpf-calc-result-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #666;
}

/* Desglose extendido (mismo look, más info como tabla de precios) */
.cpf-calc-result-lines {
    display: block;
}

.cpf-calc-result-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

.cpf-calc-result-line:not(:last-child) {
    border-bottom: 1px dashed rgba(0,0,0,.08);
}

.cpf-calc-result-label {
    color: #666;
}

.cpf-calc-result-value {
    font-weight: 600;
    color: #333;
}

.cpf-calc-result-value--qty {
    color: var(--cpf-secondary-color, #e69130);
}

.cpf-calc-result-value--subtotal {
    color: var(--cpf-primary-color, #3a3971);
}

.cpf-calc-result-saving {
    margin-top: 6px;
    text-align: right;
    color: #dc3545;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
}

.cpf-calc-result-price {
    font-weight: 600;
    color: #333;
}

.cpf-calc-alert {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cpf-calc-alert i {
    font-size: 1.2rem;
    margin-top: 2px;
}

.cpf-calc-alert--savings {
    /* Tarjeta naranja estilo legacy (sugerencia ahorro) */
    background: var(--cpf-secondary-color, #e69130);
    border-left: 0;
    color: #fff;
    border-radius: 6px;
    padding: 18px 18px;
}

.cpf-calc-alert--savings i {
    color: rgba(255,255,255,.95);
}

/* Botón dentro de las alertas (naranja / roja) */
.cpf-calc-alert .cpf-calc-alert__btn {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    border: 2px solid rgba(255,255,255,.7);
    background: transparent;
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.cpf-calc-alert .cpf-calc-alert__btn:hover {
    background: rgba(255,255,255,.16);
}

/* Verde: envío gratis */
.cpf-calc-alert--shipping-free {
    background: #1b8545;
    border-left: 0;
    color: #fff;
    border-radius: 6px;
    padding: 16px 18px;
}
.cpf-calc-alert--shipping-free i { color: #fff; }

/* Rojo: envío no incluido + CTA */
.cpf-calc-alert--shipping-missing {
    background: #d63a4a;
    border-left: 0;
    color: #fff;
    border-radius: 6px;
    padding: 16px 18px;
}
.cpf-calc-alert--shipping-missing i { color: #fff; }

/* Azul: descuento por volumen desbloqueado */
.cpf-calc-alert--discount {
    background: #f6f8ff;
    border: 2px solid #d7dfff;
    border-left: 6px solid #3A3971;
    color: #3A3971;
    border-radius: 6px;
    padding: 16px 18px;
}
.cpf-calc-alert--discount i {
    color: #3A3971;
}

/* Variante azul: descuento aplicado ✔ */
.cpf-calc-alert--discount-applied {
    background: #f4f8fb;
    border: 1px solid #cbdaeb;
    border-left: 6px solid var(--cpf-primary-color, #3a3972);
    color: #333;
    border-radius: 6px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.cpf-calc-discount-check {
    font-size: 1.5rem;
    color: var(--cpf-primary-color, #3a3972);
    margin-top: 2px;
    flex-shrink: 0;
}
.cpf-calc-alert--discount-applied .cpf-calc-alert__title {
    display: block;
    color: var(--cpf-primary-color, #3a3972);
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.cpf-calc-discount-price-box {
    display: inline-block;
    margin-top: 8px;
    font-size: 1em;
    font-weight: 500;
    background: rgba(255,255,255,0.7);
    padding: 8px 14px;
    border-radius: 5px;
    border: 1px dashed var(--cpf-primary-color, #3a3972);
    color: #333;
}

/* Variante amarilla: eliminada — no se muestra alert de sugerencia */

/* Estructura interna legacy */
.cpf-calc-alert .cpf-calc-alert__content {
    width: 100%;
}
.cpf-calc-alert .cpf-calc-alert__title {
    display: block;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.cpf-calc-alert .cpf-calc-alert__text {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}
.cpf-calc-alert--discount .cpf-calc-alert__text { font-weight: 700; }

/* En mobile, botones de sugerencia a ancho completo */
@media (max-width: 768px) {
  .cpf-calc-alert .cpf-calc-alert__btn {
    width: 100%;
  }
}

.cpf-calc-alert--success {
    background-color: #d4edda;
    border-left: 4px solid #28a745;
    color: #155724;
}

.cpf-calc-alert--success i {
    color: #28a745;
}

.cpf-calc-alert--warning {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
}

.cpf-calc-alert--warning i {
    color: #ffc107;
}

.cpf-calc-alert strong {
    font-weight: 600;
}

.cpf-calc-alert p {
    margin: 5px 0 0 0;
}

.cpf-calc-total {
   background: linear-gradient(180deg, #fff3e6 0%, #ffe6cc 100%) !important;
    color: #2e2d5b !important;
    border: 2px solid #e69130 !important;
    box-shadow: 0 10px 22px rgba(230, 145, 48, .18), 0 0 0 2px rgba(230, 145, 48, .15) inset !important;
    text-shadow: none !important;
    font-weight: initial;
    font-size: initial;
    padding: 15px 20px;
    margin-bottom: 20px;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.1;
}

.cpf-calc-total-top {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    line-height: 1.1;
}

.cpf-calc-total-value {
    font-size: 25px;
    font-weight: 750;
    color: var(--cpf-primary-color, #3a3971);
    letter-spacing: 0.2px;
}

.cpf-calc-total-currency {
    font-size: 22px;
    font-weight: 800;
    color: var(--cpf-primary-color, #3a3971);
}

.cpf-calc-total-iva {
    font-size: 14px;
    color: #6c757d;
    margin-left: 6px;
}

.cpf-calc-total-bottom {
    margin-top: 10px;
    font-size: 15px;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cpf-calc-total-bottom-text strong,
.cpf-calc-total-qty {
    color: var(--cpf-primary-color, #3a3971);
    font-weight: 700;
}

.cpf-calc-total-sep {
    color: #6c757d;
}

/* Compatibilidad: reglas legacy (ya no se usan, pero evitamos layout raro si queda HTML antiguo cacheado) */
.cpf-calc-total-label,
.cpf-calc-total-detail {
    display: none !important;
}

.cpf-calc-add-to-cart {
    background-color: var(--cpf-secondary-color, #e69130);
    color: white;
}

.cpf-calc-add-to-cart:hover {
    background-color: var(--cpf-secondary-hover, #c67d25);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Tabla de precios referencia */
.cpf-calc-price-table .cpf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cpf-calc-price-table .cpf-table th {
    background-color: #f8f9fa;
    padding: 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--cpf-primary-color, #3a3971);
}

.cpf-calc-price-table .cpf-table td {
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
}

.cpf-calc-price-table .cpf-table tr:last-child td {
    border-bottom: none;
}

.cpf-calc-price-table .cpf-table tr:hover {
    background-color: #f8f9fa;
}

/* Observaciones "Ahorro" en rojo */
.cpf-calc-price-table .cpf-obs-save{
    color: var(--cpf-price-ref-danger, #dc3545);
    font-weight: 500;
}

/* --- Calculator: selector de cantidades (reemplaza grouped nativo) --- */
.cpf-calc-qty .cpf-calc-qty-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cpf-calc-qty .cpf-calc-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #e9ecef;
    gap: 12px;
}

.cpf-calc-qty .cpf-calc-qty-row:last-child {
    border-bottom: none;
}

.cpf-calc-qty .cpf-calc-qty-name {
    font-weight: 700;
}

.cpf-calc-qty .cpf-calc-qty-price {
    font-size: 0.95rem;
    color: #495057;
}

.cpf-calc-qty .cpf-calc-qty-price-sub {
    margin-left: 6px;
    color: #6c757d;
}

.cpf-calc-qty .cpf-calc-qty-input {
    min-width: 90px;
    display: flex;
    justify-content: flex-end;
}

.cpf-calc-qty .cpf-calc-qty-input .cpf-input {
    width: 90px;
    text-align: center;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cpf-calc-total {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .cpf-calc-total-detail {
        text-align: left;
    }
    
    .cpf-calc-price-table .cpf-table {
        font-size: 0.85rem;
    }
    
    .cpf-calc-price-table .cpf-table th,
    .cpf-calc-price-table .cpf-table td {
        padding: 8px 5px;
    }

    .cpf-calc-qty .cpf-calc-qty-row {
        padding: 12px 0;
    }
    .cpf-calc-qty .cpf-calc-qty-input {
        min-width: 70px;
    }
    .cpf-calc-qty .cpf-calc-qty-input .cpf-input {
        width: 70px;
    }
}

/* Nota especial para el caso de 1m² */
.cpf-calc-special-note {
    background-color: #e7f3ff;
    border-left: 4px solid #3a3971;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cpf-calc-special-note i {
    font-size: 1.2rem;
    color: #3a3971;
    margin-top: 2px;
}

.cpf-calc-special-note strong {
    font-weight: 600;
    color: #005f8e;
}

.cpf-calc-special-note p {
    margin: 5px 0 0 0;
    font-size: 0.9rem;
    color: #333;
}

/* Nota especial - variante éxito (producto específico Un Metro) */
.cpf-calc-special-note--success {
    background-color: #d4edda;
    border-left-color: #28a745;
}

.cpf-calc-special-note--success i {
    color: #28a745;
}

.cpf-calc-special-note--success strong {
    color: #155724;
}

/* =========================================================
   PRICE TABLE (Tabla de Precios)
   ========================================================= */
.cpf-price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.cpf-price-table thead th {
    background-color: rgba(58,57,114,0.07);
    color: #3a3971;
    padding: 10px 15px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #3a3971;
}

.cpf-price-table tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
    color: #52518c;
}

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

.cpf-price-table tbody tr:nth-child(even) {
    background-color: rgba(58,57,114,0.02);
}

.cpf-price-table tbody tr:hover {
    background-color: rgba(58,57,114,0.04);
}

/* =========================================================
   PRICE REFERENCE TABLE - NOTE ROW (DESCUENTOS...)
   ========================================================= */
.cpf-price-ref__note{display:flex; align-items:flex-start; gap:10px; padding:14px 16px; margin-top:12px; background:#fff8e8; border-top:1px solid rgba(242,165,36,.35); border-radius:8px;}
.cpf-price-ref__note-icon{font-size:16px; line-height:1.2; margin-top:2px;}
.cpf-price-ref__note-title{font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#f28a00; font-size:13px;}
.cpf-price-ref__note-text{color:#6b6b6b; margin-top:2px;}

/* =========================================================
   SPECS - FEATURE CHIPS (Características)
   ========================================================= */
/* Ocultar TODOS los checkboxes dentro de características CPF */
.cpf-comp--specs input[type="checkbox"],
.cpf-feature-chips input[type="checkbox"],
.cpf-feature-chip input[type="checkbox"]{display:none !important; visibility:hidden !important; opacity:0 !important; position:absolute !important; left:-9999px !important;}

/* Contenedor principal */
.cpf-feature-chips{display:flex !important; flex-wrap:wrap !important; gap:12px 16px !important; padding-top:6px !important; list-style:none !important; margin:0 !important;}

/* Pills/Chips individuales */
.cpf-feature-chip{position:relative !important; display:inline-flex !important; align-items:center !important; gap:8px !important; padding:8px 12px !important; background:#f8f9fa !important; border:1px solid #dee2e6 !important; border-radius:20px !important; color:#495057 !important; cursor:default !important; opacity:0; transform:translateY(10px); animation:cpfFadeInChip 0.4s ease forwards !important; transition:transform 0.2s ease, box-shadow 0.2s ease !important; list-style:none !important; margin:0 !important;}
.cpf-feature-chip:hover{transform:translateY(-2px) !important; box-shadow:0 4px 8px rgba(0,0,0,.05) !important;}

/* Iconos - CRÍTICO: Forzar visualización de SVG */
.cpf-feature-chip__icon{display:inline-flex !important; align-items:center !important; justify-content:center !important; width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; color:#3a3971 !important; flex-shrink:0 !important; overflow:visible !important;}
.cpf-feature-chip__icon svg{display:block !important; width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; fill:#3a3971 !important; stroke:none !important; overflow:visible !important; vertical-align:middle !important;}
.cpf-feature-chip__icon svg *{fill:inherit !important;}
.cpf-feature-chip__icon svg path,.cpf-feature-chip__icon svg circle,.cpf-feature-chip__icon svg rect,.cpf-feature-chip__icon svg polygon{fill:#3a3971 !important;}
.cpf-feature-chip__dot{display:inline-block !important; width:12px !important; height:12px !important; border:2px solid #3a3971 !important; border-radius:3px !important; flex-shrink:0 !important;}

/* Texto */
.cpf-feature-chip__text{font-size:0.9em !important; line-height:1.2 !important; color:#495057 !important; white-space:nowrap !important; font-weight:500 !important;}

/* ---------------------------------------------
   Chips (Specs) - mejor orden visual en mobile
   - Sin cambiar el texto, solo layout
   - Evita filas irregulares cuando hay chips largos
---------------------------------------------- */

@media (max-width: 768px){
  /* Scroll horizontal en una sola fila */
  .cpf-feature-chips{flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; gap:8px !important; padding-bottom:4px !important;}
  .cpf-feature-chips::-webkit-scrollbar{display:none !important;}
  .cpf-feature-chip{flex:0 0 auto !important; max-width:none !important;}
  .cpf-feature-chip__text{white-space:nowrap !important;}
}

@media (max-width: 520px){
  /* Anular full-width */
  .cpf-feature-chip{flex-basis:auto !important;}
}

/* Animación de entrada */
@keyframes cpfFadeInChip{to{opacity:1; transform:translateY(0);}}

/* Tooltip (hover y táctil) */
.cpf-feature-chip__body{display:flex !important; flex-direction:column !important; gap:1px !important; min-width:0 !important;}
.cpf-feature-chip__label{font-size:0.72em !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:0.04em !important; color:#3a3971 !important; line-height:1.1 !important; white-space:nowrap !important;}

/* Soporte táctil: clase para mostrar tooltip en click */


/* =========================================================
   NOTICE BOX (Avisos)
   ========================================================= */
.cpf-notice{display:flex; gap:12px; align-items:flex-start; background:rgba(58,57,114,0.06); border-left:4px solid #3a3971; padding:14px 16px; border-radius:8px;}
.cpf-notice__icon{color:#3a3971; margin-top:1px;}
.cpf-notice__i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid currentColor;border-radius:50%;font-size:12px;font-weight:700;line-height:1;}
.cpf-notice__icon svg{width:18px; height:18px; display:block;}
.cpf-notice__text{color:#5a598f;}
.cpf-notice--orange{background:#fff3e6; border-left-color:#e69130;}
.cpf-notice--orange .cpf-notice__icon{color:#e69130;}
.cpf-notice--orange .cpf-notice__text{color:#7a4a10;}
.cpf-variation-accordion{border:1px solid #e0dff5; border-radius:8px; overflow:hidden;}
.cpf-variation-accordion__btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; background:#f4f4fb; border:none; cursor:pointer; font-size:0.875rem; font-weight:600; color:#3a3971; text-align:left; transition:background 0.15s;}
.cpf-variation-accordion__btn:hover{background:#ebebf8;}
.cpf-variation-accordion__body{font-size:0.875rem; color:#444; line-height:1.65;}
.cpf-variation-accordion__body>*:first-child{margin-top:0;}
.cpf-variation-accordion__body>*:last-child{margin-bottom:0;}
.cpf-variation-accordion__body h1,.cpf-variation-accordion__body h2,.cpf-variation-accordion__body h3,.cpf-variation-accordion__body h4{font-size:1rem; font-weight:700; color:#3a3971; margin:12px 0 6px;}
.cpf-variation-accordion__body ul{margin:4px 0 10px 18px; padding:0;}
.cpf-variation-accordion__body li{margin-bottom:3px;}


/* === CPF: sin wrappers blancos === */
.cpf-pf{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
}
.cpf-card{
  border:0 !important;
  background:transparent !important;
  padding:0px 0px !important;
  margin:0 0 20px 0 !important;
  box-shadow:none !important;
}


/* === Layout spacing between components (global) === */
.cpf-components .cpf-comp {
  margin-top: 40px;
}
.cpf-pf .cpf-components > .cpf-comp {
  display:block;
  margin-top: 40px;
}
.cpf-components .cpf-comp:first-child {
  margin-top: 0;
}

/* Separator line at end of Specs section */
.cpf-section-separator{
  margin-top: 18px;
  border-top: 1px solid #e5e7eb;
}


.cpf-section-separator--tight{margin:10px 0 14px 0;border-top:1px solid #e5e7eb;}

.cpf-comp--specs .cpf-comp__title{color:#2b2a68;font-weight:600;}

/* =========================================================
   DELIVERY INFO (Entrega Estimada)
   ========================================================= */
.cpf-delivery-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background-color: #f4f6f9;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #52518c;
  margin-bottom: 20px;
}

.cpf-delivery-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #3a3971;
}

.cpf-delivery-text {
  flex-grow: 1;
  line-height: 1.4;
}

.cpf-delivery-text strong {
  color: #3a3971;
  font-weight: 600;
}

.cpf-delivery-loading {
  opacity: 0.7;
  font-style: italic;
}

/* Responsive */
@media (max-width: 600px) {
  .cpf-delivery-info {
    font-size: 0.85rem;
    padding: 12px;
  }
  
  .cpf-delivery-icon {
    width: 20px;
    height: 20px;
  }
}

/* Variante para mostrar dentro de resultados calculados */
.cpf-delivery-info.cpf-delivery-info-calculada {
  margin-top: 10px;
  margin-bottom: 0;
}

/* =========================================================
   BOTONES ADICIONALES: SOLICITAR MUESTRA + CONSULTAR STOCK
   (replica legacy calc-boton-adicional)
   ========================================================= */

/* Contenedor (1 o 2 botones) */
.cpf-pf .cpf-comp--additional_actions{
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.cpf-pf .cpf-additional-actions{
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
}

.cpf-pf .cpf-additional-actions .calc-boton-adicional{
  flex: 1 1 0;
  min-width: 0;
}

/* Cuando hay 2 botones contiguos, proporción 65/35 (muestra/stock) */
.cpf-pf .cpf-additional-actions[data-cpf-aa-count="2"] #botonMuestra.calc-boton-adicional,
.cpf-pf .cpf-additional-actions[data-cpf-aa-count="2"] #botonMuestraUrl.calc-boton-adicional{
  flex: 0 0 65%;
}
.cpf-pf .cpf-additional-actions[data-cpf-aa-count="2"] #contact-ayuda-button.calc-boton-adicional{
  flex: 0 0 35%;
}

/* Stock (editable): misma proporción que el stock original */
.cpf-pf .cpf-additional-actions[data-cpf-aa-count="2"] .cpf-aa-btn-stock-editable.calc-boton-adicional{
  flex: 0 0 35%;
}

/* Si solo hay 1 botón, que ocupe el 100% (sin quedar a 50%) */
.cpf-pf .cpf-additional-actions[data-cpf-aa-count="1"] .calc-boton-adicional{
  flex: 0 0 100%;
}

/* Botones legacy */
.cpf-pf .calc-boton-adicional{
  height: 45.4px;
  padding: 10px 15px;
  font-size: 14.4px;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 600;
  border-radius: 6px;
  border: 2px solid #007AAF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform .06s ease, opacity .12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpf-pf .calc-boton-adicional:active{ transform: translateY(1px); }

/* Solicitar muestra (blanco con texto azul) */
.cpf-pf #botonMuestra.calc-boton-adicional,
.cpf-pf #botonMuestraUrl.calc-boton-adicional{
  background: #ffffff;
  color: #007AAF;
}

/* Consultar stock (azul con texto blanco) */
.cpf-pf #contact-ayuda-button.calc-boton-adicional{
  background: #007AAF;
  color: #ffffff !important;
}

/* Consultar stock (editable):
   - Desktop: azul corporativo (#3a3972)
   - Mobile: se sobreescribe en el media query a verde WhatsApp
*/
.cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional{
  background: #007AAF;
  border-color: #007AAF;
  color: #ffffff !important;
}

.cpf-pf #contact-ayuda-button.calc-boton-adicional:hover{
  opacity: 0.95;
}



/* Hover botones de muestra: fondo azul, texto e icono blancos */
.cpf-pf #botonMuestra.calc-boton-adicional:hover,
.cpf-pf #botonMuestraUrl.calc-boton-adicional:hover{
  background: #007AAF;
  border-color: #007AAF;
  color: #ffffff !important;
  opacity: 1;
}

/* Asegurar que el icono hereda el color del texto */
.cpf-pf #botonMuestra.calc-boton-adicional i,
.cpf-pf #botonMuestraUrl.calc-boton-adicional i{
  color: currentColor !important;
}

/* Estado normal del botón URL: texto azul igual que el borde */
.cpf-pf #botonMuestraUrl.calc-boton-adicional{
  color: #007AAF !important;
}


/* En móvil, si solo 1 botón -> ya ocupa todo el ancho por flex */

/* =========================================================
   MODALES LEGACY (MUESTRA / STOCK)
   ========================================================= */

.calc-modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 99999;
  padding: 18px;
}

.calc-modal-overlay.active{ display: flex; }

.calc-modal-contenido{
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 10px;
  padding: 28px 28px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
  /* Centrar contenido del modal (excepto bloques específicos como la franja de precio) */
  text-align: center;
}

.calc-modal-contenido h2{
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.calc-modal-contenido p{ margin: 0 0 12px; color: #5f6470; }

.calc-input-m2{
  width: 100%;
  height: 52px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e2e5ea;
  background: #fff;
  font-size: 14.5px;
  margin-bottom: 12px !important;
  box-sizing: border-box;
}

.calc-mensaje-error{ display:block; min-height: 18px; color:#dc3545; }

.calc-modal-botones-grupo{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}

.calc-boton-modal-confirmar,
.calc-boton-modal-cancelar{
  flex: 1 1 0;
  height: 44px;
  border-radius: 6px;
  border: 0;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.calc-boton-modal-confirmar{ background: #007AAF; color:#fff; }
.calc-boton-modal-cancelar{ background: #f1f3f5; color:#343a40; }

/* Botón confirmar del modal Stock Editable: verde WhatsApp */
#modalConfirmarStockEditable.calc-boton-modal-confirmar{
  background: #007AAF;
  color: #ffffff;
}
#modalConfirmarStockEditable.calc-boton-modal-confirmar:hover{
  background: #007AAF;
}

/* En mobile: botón confirmar del modal Stock → verde WhatsApp */
@media (max-width: 767px) {
  #modalConfirmarStockEditable.calc-boton-modal-confirmar {
    background: #25D366;
    color: #ffffff;
  }
  #modalConfirmarStockEditable.calc-boton-modal-confirmar:hover {
    background: #1ebe57;
  }
}


/* =========================================================
   ADDITIONAL ACTIONS MODALS - EXTRA STYLES
   ========================================================= */

/* Tooltip de Reembolso */
.calc-reembolso-tooltip-wrapper {
  position: relative;
  text-align: center;
  margin: 15px 0;
  padding: 10px;
  background-color: #f4f6f9;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #52518c;
  font-size: 0.95rem;
}

#infoReembolsoIcon {
  color: #3a3971;
  cursor: pointer;
  font-size: 1.1rem;
}

.calc-reembolso-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 20px);
  max-width: 400px;
  background-color: #3a3971;
  color: #fff;
  border-radius: 6px;
  padding: 15px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.calc-reembolso-tooltip.active {
  display: block;
}

.calc-reembolso-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #3a3971 transparent transparent transparent;
}

.calc-reembolso-enlace,
.calc-reembolso-enlace:visited {
  color: #fff !important;
  text-decoration: underline;
  font-weight: 600;
}

.calc-reembolso-enlace:hover,
.calc-reembolso-enlace:focus {
  text-decoration: underline;
  opacity: 0.9;
}

.calc-reembolso-tooltip h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
}

.calc-reembolso-tooltip ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}

.calc-reembolso-tooltip li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.calc-reembolso-tooltip li .fa-check {
  color: #e69130;
  margin-right: 10px;
  margin-top: 4px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.calc-reembolso-tooltip .reembolso-email-info {
  font-size: 0.85rem;
  text-align: center;
  margin: 15px 0 0 0;
  font-style: italic;
  color: #fff;
}

/* Modal Lead (Formulario) */
.modal-global-close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.modal-global-close:hover {
  color: #333;
}

.phone-input-container {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.phone-input-container input[type="text"] {
  flex: 0 0 70px;
  text-align: center;
  margin-bottom: 0;
}

.phone-input-container input[type="tel"] {
  flex-grow: 1;
  margin-bottom: 0;
}

/* Detalle producto en modal */
.calc-modal-detalle-producto {
  background-color: #f4f6f9;
  border-left: 4px solid #3a3971;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
}

/* Responsive */
@media (max-width: 600px) {
  .calc-reembolso-tooltip {
    width: calc(100vw - 40px);
    max-width: none;
  }
  
  .calc-modal-contenido {
    padding: 15px;
  }
  
  .modal-global-close {
    top: 10px;
    right: 10px;
  }
}


/* Gift icon bounce on hover (ball-like, but not too slow) */
@keyframes cpf-gift-bounce{
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  50% { transform: translateY(-6px); }
  70% { transform: translateY(-2px); }
}

.cpf-pf #botonMuestra i.fa-gift,
.cpf-pf #botonMuestraUrl i.fa-gift{
  transition: transform 0.25s ease;
  will-change: transform;
}

.cpf-pf #botonMuestra:hover i.fa-gift,
.cpf-pf #botonMuestraUrl:hover i.fa-gift{
  animation: cpf-gift-bounce 1.15s ease-in-out infinite;
}

/* =========================================================
   MOBILE: Botones adicionales + Tabla de precios
   ========================================================= */

/* Desktop: Mostrar icono paper-plane, ocultar WhatsApp */
.cpf-pf #contact-ayuda-button .cpf-icon-mobile {
  display: none !important;
}

.cpf-pf .cpf-aa-btn-stock-editable .cpf-icon-mobile {
  display: none !important;
}

.cpf-pf #contact-ayuda-button .cpf-icon-desktop {
  display: inline !important;
}

.cpf-pf .cpf-aa-btn-stock-editable .cpf-icon-desktop {
  display: inline !important;
}

.cpf-pf .cpf-aa-btn-stock-editable .cpf-icon-desktop {
  display: inline !important;
}

@media (max-width: 767px) {
  /* Mobile: Mostrar icono WhatsApp, ocultar paper-plane */
  .cpf-pf #contact-ayuda-button .cpf-icon-mobile {
    display: inline;
  }

  .cpf-pf .cpf-aa-btn-stock-editable .cpf-icon-mobile {
    display: inline;
  }

  .cpf-pf .cpf-aa-btn-stock-editable .cpf-icon-mobile {
    display: inline;
  }

  .cpf-pf #contact-ayuda-button .cpf-icon-desktop {
    display: none;
  }

  .cpf-pf .cpf-aa-btn-stock-editable .cpf-icon-desktop {
    display: none;
  }

  .cpf-pf .cpf-aa-btn-stock-editable .cpf-icon-desktop {
    display: none;
  }

  .cpf-pf .cpf-aa-btn-stock-editable .cpf-icon-desktop {
    display: none;
  }

  /* Botones adicionales en columna (muestra arriba, stock abajo) */
  .cpf-pf .cpf-additional-actions {
    flex-direction: column;
    gap: 12px;
  }

  /* Todos los botones al 100% de ancho en mobile */
  .cpf-pf .cpf-additional-actions .calc-boton-adicional {
    flex: 0 0 100%;
    width: 100%;
  }

  /* Orden: Solicitar Muestra primero, Consultar Stock segundo */
  .cpf-pf #botonMuestra,
  .cpf-pf #botonMuestraUrl {
    order: 1;
  }

  .cpf-pf #contact-ayuda-button {
    order: 2;
  }

  /* Botón Consultar Stock: Verde WhatsApp en mobile (no-editable y editable) */
  .cpf-pf #contact-ayuda-button.calc-boton-adicional,
  .cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #ffffff !important;
  }

  .cpf-pf #contact-ayuda-button.calc-boton-adicional:hover,
  .cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional:hover {
    background: #1DA851 !important;
    border-color: #1DA851 !important;
  }

  /* Icono de WhatsApp */
  .cpf-pf #contact-ayuda-button.calc-boton-adicional i,
  .cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional i {
    color: #ffffff !important;
  }

  /* Tabla de Precios: Fila extra al principio en mobile */
  .cpf-price-ref__table tbody tr.cpf-price-ref__extra-row {
    order: -1;
  }

  /* Forzar display flex en tbody para que order funcione */
  .cpf-price-ref__table tbody {
    display: flex;
    flex-direction: column;
  }

  .cpf-price-ref__table tbody tr {
    display: table;
    width: 100%;
  }
}

/* =========================================
   CPF — PPOM Text Field (estilo igual a .cpf-select)
   ========================================= */

/* Título/pregunta: azul corporativo como los títulos del framework */
.cpf-comp--ppom_text_field label.form-control-label{
  display: block;
  margin: 0 0 6px 0;
  font-weight: 600;
  color: #3a3971;
}

/* Subtítulo debajo (PPOM suele usar .ppom-input-desc o .show_description) */
.cpf-comp--ppom_text_field .ppom-input-desc,
.cpf-comp--ppom_text_field .show_description{
  display: block;
  margin: 6px 0 10px 0;
  color: #7a7a7a;
  font-weight: 400;
  line-height: 1.35;
}

/* Por si PPOM mete la desc dentro del label: forzamos salto */
.cpf-comp--ppom_text_field label.form-control-label .ppom-input-desc,
.cpf-comp--ppom_text_field label.form-control-label .show_description{
  display: block;
  margin-top: 6px;
}

/* Input: CLON exacto de .cpf-select */
.cpf-comp--ppom_text_field input[type="text"]{
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #3a3971;
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #3a3971;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  box-shadow: none;
}

/* Focus similar al select (si tu select tiene focus específico, lo igualamos) */
.cpf-comp--ppom_text_field input[type="text"]:focus{
  border-color: #3a3971;
  box-shadow: 0 0 0 3px rgba(58, 57, 113, 0.15);
}

/* Asterisco requerido */
.cpf-comp--ppom_text_field .show_required{
  color: #e00000;
  margin-left: 4px;
  font-weight: 700;
}

/* =====================
 * Returns (Devoluciones) - línea + modal
 * ===================== */
.cpf-returns-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px dashed rgba(58,57,114,0.25);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

.cpf-returns-line:focus{
  outline:2px solid rgba(58,57,114,0.25);
  outline-offset:2px;
}

.cpf-returns-line__text{
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.35;
}

.cpf-returns-line__title{
  font-size:15px;
  font-weight:600;
  color:#3a3972;
}

.cpf-returns-line__subtitle{
  font-size:13px;
  font-weight:400;
  color:#52518c;
}

.cpf-returns-line__icon{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(58,57,114,0.2);
  background:#fff;
  color:#3a3972;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  cursor:pointer;
}

.cpf-returns-line__icon:hover{
  background:rgba(58,57,114,0.06);
}

.cpf-f-modal-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.45);
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.cpf-f-modal{
  width:min(660px, 100%);
  background:#fff;
  border-radius:20px;
  box-shadow:0 8px 40px rgba(0,0,0,0.18);
  position:relative;
  padding:36px 40px 40px 40px;
  box-sizing:border-box;
}

.cpf-f-modal__header{
  font-size:21px;
  font-weight:600;
  color:#111;
  margin:0 0 16px 0;
  padding-right:32px;
  line-height:1.25;
}

.cpf-f-modal__close{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.15);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
  color:#444;
  transition:background 0.15s ease;
}

.cpf-f-modal__close:hover{
  background:#f5f5f5;
}

.cpf-f-modal__body{
  font-size:15px;
  line-height:1.65;
  color:#222;
}

.cpf-f-modal__body p{
  margin:0 0 20px 0;
}

.cpf-f-modal__body a{
  color:#2563eb;
  font-weight:400;
  text-decoration:underline;
  text-underline-offset:2px;
}

.cpf-f-modal__body a:hover{
  color:#1d4ed8;
}

/* ============================================================
   BRAND — Componente Marca
   ============================================================ */

.cpf-comp--brand {
  display: flex !important;
  align-items: flex-start;
}

.cpf-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #eef0f8;
  border: 1px solid #c8cce8;
  border-radius: 6px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(58,57,113,0.07);
}

.cpf-brand__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cpf-brand__prefix {
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cpf-accent, #3a3971);
  opacity: 0.7;
  line-height: 1;
  white-space: nowrap;
}

.cpf-brand__name,
.cpf-brand__name-link {
  font-weight: 700;
  font-size: 10px;
  color: var(--cpf-accent, #3a3971);
  text-decoration: none;
  line-height: 1.3;
  white-space: nowrap;
}

.cpf-brand__name-link:hover {
  color: #2a2958;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cpf-brand__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  padding: 2px;
}

.cpf-brand__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.15s ease;
}

.cpf-brand__logo-link:hover {
  opacity: 0.8;
}

.cpf-brand__logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

@media (max-width: 600px) {
  .cpf-brand {
    padding: 3px 7px;
    gap: 5px;
  }
  .cpf-brand__logo-wrap {
    width: 22px;
    height: 22px;
  }
}


/* =========================================================================
   SOLUCIÓN GOOGLE MERCHANT CENTER
   El botón "Añadir al carrito" NUNCA puede tener display:none.
   Google Merchant necesita verlo en el DOM para validar la cuenta.
   Se oculta visualmente con esta clase cuando no debe ser clicable.
   ========================================================================= */

.cpf-gmc-atc-hidden {
  display: block !important;       /* Google necesita ver display block */
  visibility: visible !important;  /* Google necesita visibility visible */
  opacity: 0 !important;           /* Invisible al ojo humano */
  position: absolute !important;   /* Fuera del flujo normal */
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

/* =========================================================================
   FIN SOLUCIÓN GOOGLE MERCHANT CENTER
   ========================================================================= */

/* =========================================================================
   AVISOS DE ADMIN — Componentes sin contenido
   Solo visibles para administradores. Usuarios normales no ven nada.
   ========================================================================= */

.cpf-comp--admin-notice {
  border: 2px dashed #f59e0b !important;
  background: #fffbeb !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
}

.cpf-comp--admin-notice .cpf-comp__title {
  color: #b45309 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.cpf-comp--admin-notice .cpf-muted {
  color: #92400e !important;
  font-size: 12px !important;
}

/* =========================================================================
   FIN AVISOS DE ADMIN
   ========================================================================= */

/* =============================================================================
   CPF Unit Estimator
   ============================================================================= */

/* ── Acordeón toggle ─────────────────────────────────────────────────────── */
.cpf-unit-estimator {
    margin-bottom: 0;
}

.cpf-ue-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 15px;
    background-color: var(--cpf-bg, #fff);
    color: var(--cpf-primary-color, #3a3972);
    border: 2px solid var(--cpf-primary-color, #3a3972);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    outline: none;
    transition: background-color .25s;
}

.cpf-ue-toggle:hover,
.cpf-ue-toggle--open {
    background-color: rgba(58, 57, 114, 0.04);
}

.cpf-ue-toggle__chevron {
    font-size: .9rem;
    color: var(--cpf-primary-color, #3a3972);
    transition: transform .25s;
    margin-left: 10px;
    flex-shrink: 0;
}

.cpf-ue-toggle--open .cpf-ue-toggle__chevron {
    transform: rotate(180deg);
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.cpf-ue-panel {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    margin-bottom: 20px;
}

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.cpf-ue-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.cpf-ue-tab {
    flex: 1;
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    padding: 8px 10px;
    transition: background-color .25s, color .25s, border-color .25s;
    background-color: #f4f6f9;
    color: #52518c;
}

.cpf-ue-tab:hover {
    background-color: #e9ecef;
}

.cpf-ue-tab--active {
    background-color: var(--cpf-primary-color, #3a3972);
    color: #fff !important;
    border-color: var(--cpf-primary-color, #3a3972);
    font-weight: 600;
}

/* ── Paneles de tab ──────────────────────────────────────────────────────── */
.cpf-ue-panel-tab {
    margin-bottom: 10px;
}

/* ── Filas y columnas ────────────────────────────────────────────────────── */
.cpf-ue-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.cpf-ue-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (max-width: 520px) {
    .cpf-ue-row {
        flex-direction: column;
        gap: 10px;
    }
}

/* ── Etiquetas e inputs ──────────────────────────────────────────────────── */
.cpf-ue-label {
    font-weight: 500;
    margin-bottom: 6px;
    font-size: .9rem;
    color: var(--cpf-primary-color, #3a3972);
}

.cpf-ue-input,
.cpf-ue-select {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: .95rem;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .25s;
    font-family: inherit;
    background: #fff;
}

.cpf-ue-input:focus,
.cpf-ue-select:focus {
    border-color: var(--cpf-primary-color, #3a3972);
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(58, 57, 114, .2);
}

.cpf-ue-select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: .7;
}

/* ── CTA Calcular ────────────────────────────────────────────────────────── */
.cpf-ue-cta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.cpf-ue-calc-btn {
    /* hereda .cpf-btn .cpf-btn--outline ya definidos en el plugin */
    background: rgba(58, 57, 114, .06);
    border: 1px solid var(--cpf-primary-color, #3a3972);
    color: var(--cpf-primary-color, #3a3972) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
    font-size: .95rem;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    transition: background .2s;
}

.cpf-ue-calc-btn:hover {
    background: rgba(58, 57, 114, .1);
}

.cpf-ue-hint {
    color: #6c757d;
    font-size: .8rem;
    line-height: 1.3;
}

/* ── Resultado ───────────────────────────────────────────────────────────── */
.cpf-ue-result {
    margin-top: 15px;
    padding: 15px;
    background-color: #e9f5ff;
    border-left: 4px solid #007bff;
    border-radius: 6px;
    font-size: .95rem;
}

.cpf-ue-result p {
    margin: 0 0 8px;
}

.cpf-ue-result strong {
    color: var(--cpf-primary-color, #3a3972);
}

.cpf-ue-result__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.cpf-ue-result-btn {
    flex: 1 1 200px;
    font-size: .9rem;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 500;
    border: 1px solid var(--cpf-primary-color, #3a3972);
    transition: background .2s;
}

/* Botón "sin extra" → outline */
.cpf-ue-result-btn[data-cpf-ue-apply]:first-of-type {
    background: rgba(58, 57, 114, .06);
    color: var(--cpf-primary-color, #3a3972) !important;
}

.cpf-ue-result-btn[data-cpf-ue-apply]:first-of-type:hover {
    background: rgba(58, 57, 114, .13);
}

/* Botón "con extra + Calcular" → sólido */
.cpf-ue-result-btn[data-cpf-ue-apply]:last-of-type {
    background: var(--cpf-primary-color, #3a3972);
    color: #fff !important;
    border-color: var(--cpf-primary-color, #3a3972);
}

.cpf-ue-result-btn[data-cpf-ue-apply]:last-of-type:hover {
    background: #2d2c5e;
}

/* ── CPF: Botón CTA inline (simples/variables) ────────────────────────────── */
.cpf-cta {
    position: relative;
}

/* ── CPF: Botón CTA grouped inline dentro de la calculadora ──────────────── */
.cpf-calc-cta-wrapper {
    margin-top: 16px;
    position: relative;
}

/* El botón inline grouped ocupa el ancho completo */
.cpf-grouped-add-btn--inline {
    width: 100% !important;
    max-width: 100% !important;
    flex-grow: 1;
    box-sizing: border-box;
}

/* Estado desactivado: gris */
[data-cpf-grouped-add]:disabled,
[data-cpf-grouped-add].cpf-grouped-add-btn--disabled,
[data-cpf-grouped-float-btn]:disabled {
    background-color: #b0b0b0 !important;
    border-color: #b0b0b0 !important;
    color: #fff !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Estado activo: igual que el botón flotante estándar (azul) */
[data-cpf-grouped-add]:not(:disabled),
[data-cpf-grouped-float-btn]:not(:disabled) {
    cursor: pointer;
}

/* ── Barra flotante grouped (calculadora) ──────────────────────────────────── */
.cpf-floatbar--grouped {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-blanco, #fff);
    padding: 15px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-borde, #dee2e6);
    box-shadow: 0 -3px 10px rgba(0,0,0,.1);
    z-index: 10000;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .3s ease-out, transform .3s ease-out;
    pointer-events: none;
}
.cpf-floatbar--grouped.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Inner layout: precio a la izquierda, botón a la derecha en la misma fila */
.cpf-floatbar--grouped .calc-flotante-estado-resultado {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
}
.cpf-floatbar--grouped .resumen-calc-flotante {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
}
.cpf-calc-inline-total {
    display: none;
    background: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.13);
    padding: 12px 16px 16px;
    text-align: center;
    margin-bottom: -4px;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
}
.cpf-calc-inline-total--visible {
    display: flex;
}
.cpf-calc-inline-total__price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primario, #3a3972);
    white-space: nowrap;
}
.cpf-calc-inline-total__iva,
.cpf-float-iva {
    font-size: 0.78rem;
    color: var(--color-gris, #888);
    white-space: nowrap;
}

.cpf-floatbar--grouped .precio-total-flotante {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primario, #3a3972);
    white-space: nowrap;
}
.cpf-floatbar--grouped .cpf-float-iva {
    font-size: 0.78rem;
    color: var(--color-gris, #888);
}
.cpf-float-left {
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Botón Modificar */
.cpf-grouped-float-modificar {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    color: #888;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    line-height: 1;
    text-align: left;
}
.cpf-grouped-float-modificar:hover {
    color: var(--color-primario, #3a3972);
}
.cpf-floatbar--grouped .accion-comprar-flotante-btn {
    flex-grow: 1;
    max-width: 60%;
}

/* ── Mobile: flotante en fila (precio + botón en la misma línea) ───────────── */
@media (max-width: 767px) {
    /* Simple / variable */
    .cpf-floatbar--simple .calc-flotante-estado-resultado {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .cpf-floatbar--simple .resumen-calc-flotante {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        justify-content: flex-start;
    }
    .cpf-floatbar--simple .calc-boton-flotante {
        flex: 0 0 auto;
        max-width: none;
        white-space: nowrap;
    }
    /* Grouped: flex row entre .cpf-float-left (precio) y el botón */
    .cpf-floatbar--grouped .calc-flotante-estado-resultado {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    /* .cpf-float-left contiene precio + modificar, ocupa el espacio disponible */
    .cpf-floatbar--grouped .cpf-float-left {
        flex: 1 1 0;
        min-width: 0;
        align-items: flex-start;
        overflow: hidden;
    }
    /* El precio se trunca si no cabe */
    .cpf-floatbar--grouped .precio-total-flotante {
        font-size: 1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
    }
    .cpf-floatbar--grouped .cpf-float-iva {
        font-size: 0.7rem !important;
        white-space: nowrap;
    }
    /* El botón no se estira, ocupa lo que necesita */
    .cpf-floatbar--grouped .accion-comprar-flotante-btn {
        flex: 0 0 auto;
        max-width: none;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .cpf-floatbar--grouped {
        max-width: 800px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        border-radius: 6px 6px 0 0;
    }
    .cpf-floatbar--grouped.visible {
        transform: translateX(-50%) translateY(0);
    }
    .cpf-floatbar--grouped .accion-comprar-flotante-btn {
        max-width: 280px;
    }
}

/* ── PPOM Color Proxy ─────────────────────────────────────────── */
.cpf-ppom-color-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--color-texto-principal, #333);
}

/* Error de campo requerido */
.csw-grid.csw-required-error {
    outline: 2px solid #dc3545;
    border-radius: 12px;
    animation: csw-shake 0.35s ease;
}

@keyframes csw-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-6px); }
    75%       { transform: translateX(6px); }
}

/* ── Barra flotante grouped: estado inicial (input + Calcular) ─────────────── */
.cpf-grouped-float-inicial {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}
.cpf-grouped-float-inicial .calc-input-m2-flotante {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid var(--color-borde, #dee2e6);
    border-radius: var(--border-radius-std, 6px);
    font-size: 1rem;
    min-width: 80px;
    -moz-appearance: textfield;
}
.cpf-grouped-float-inicial .calc-input-m2-flotante::-webkit-inner-spin-button,
.cpf-grouped-float-inicial .calc-input-m2-flotante::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.calc-boton-principal-flotante {
    background-color: var(--color-secundario, #d48e2a);
    color: var(--color-blanco, #fff);
    padding: 12px 16px;
    border: none;
    border-radius: var(--border-radius-std, 6px);
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color .2s;
}
.calc-boton-principal-flotante:hover {
    background-color: #c67d25;
}

/* ── Barra flotante variable: estado inicial ────────────────────────────────── */
.cpf-variable-float-inicial {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
}

/* Labels de atributos (desktop only) */
.cpf-variable-float-labels {
    display: none; /* oculto en mobile */
    align-items: center;
    gap: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.cpf-vfl-item {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primario, #3a3972);
    white-space: nowrap;
}
.cpf-vfl-sep {
    font-size: 1rem;
    color: var(--color-borde, #dee2e6);
    padding: 0 8px;
    font-weight: 400;
}

/* Botón */
.cpf-variable-float-inicial .calc-boton-principal-flotante {
    width: auto;
    flex-shrink: 0;
    justify-content: center;
    font-size: 1rem;
    border-radius: 4px;
}

/* Mobile: botón centrado, sin labels */
@media (max-width: 767px) {
    .cpf-variable-float-inicial {
        justify-content: center;
    }
    .cpf-variable-float-inicial .calc-boton-principal-flotante {
        margin-left: 0;
        width: auto;
        max-width: 80%;
    }
}

/* Desktop: mostrar labels */
@media (min-width: 768px) {
    .cpf-variable-float-labels {
        display: flex;
    }
    .cpf-variable-float-inicial .calc-boton-principal-flotante {
        margin-left: auto;
    }
}

/* ── Barra flotante simple/variable: ocultar estado resultado cuando no toca ── */
.cpf-floatbar--simple .calc-flotante-estado-resultado {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ── Estado oculto para los estados del flotante (mayor especificidad que reglas genéricas) ── */
.cpf-floatbar .cpf-state--hidden {
    display: none !important;
}

/* ── Botón Calcular flotante grouped: esquinas estándar (menos redondeadas) ── */
.cpf-grouped-float-inicial .calc-boton-principal-flotante {
    border-radius: 4px;
}

/* ── Alert de stock agotado en la calculadora ──────────────────────────────── */
.cpf-calc-alert--stock {
    background-color: #fff0f0;
    border: 1px solid #f5c2c2;
    color: #c0392b;
}
.cpf-calc-alert--stock i {
    color: #c0392b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Venta conjunta — .cpf-bundle
   ═══════════════════════════════════════════════════════════════════════════ */
.cpf-bundle {
    padding: 0;
}
.cpf-bundle__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Item ──────────────────────────────────────────────────────────────── */
.cpf-bundle-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid var(--color-borde, #dee2e6);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    flex-wrap: nowrap;
    min-height: 80px;
}
.cpf-bundle-item:hover {
    border-color: var(--color-primario, #3a3972);
    background: #f8f8fc;
}
.cpf-bundle-item--selected {
    border-color: var(--color-primario, #3a3972);
    background: #f4f4fb;
}
.cpf-bundle-item--outofstock {
    opacity: 0.55;
    cursor: default;
}
.cpf-bundle-item--outofstock:hover {
    border-color: var(--color-borde, #dee2e6);
    background: transparent;
}

/* Qty hidden by default, shown only when checked */
.cpf-bundle-item__qty {
    display: none;
}
.cpf-bundle-item--selected .cpf-bundle-item__qty {
    display: flex;
}
.cpf-bundle-item--selected .cpf-bundle-qty-btn {
    background: var(--color-primario, #3a3972);
    color: #fff;
}
.cpf-bundle-item--selected .cpf-bundle-qty-btn:hover:not(:disabled) {
    background: #2e2d5b;
}

/* Mobile: 2 rows via grid */
@media (max-width: 767px) {
    .cpf-bundle-item {
        display: grid;
        grid-template-columns: 22px 56px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "check img info"
            ".     qty  qty ";
        align-items: center;
        column-gap: 10px;
        row-gap: 10px;
        padding: 12px 14px;
        min-height: unset;
    }
    .cpf-bundle-item__check {
        grid-area: check;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cpf-bundle-item__img {
        grid-area: img;
        width: 56px;
        height: 56px;
    }
    .cpf-bundle-item__info {
        grid-area: info;
        min-width: 0;
    }
    .cpf-bundle-item__qty {
        grid-area: qty;
        width: 114px;
        margin-left: auto;
    }
}

/* Checkbox */
.cpf-bundle-item__check {
    flex-shrink: 0;
}
.cpf-bundle-item__check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primario, #3a3972);
    cursor: pointer;
}

/* Imagen */
.cpf-bundle-item__img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}
.cpf-bundle-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cpf-bundle-item__img-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: #e8e8e8;
}

/* Info */
.cpf-bundle-item__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cpf-bundle-item__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-texto, #1a1a2e);
    line-height: 1.3;
    /* Limitar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cpf-bundle-item__price {
    font-size: 0.82rem;
    color: var(--color-primario, #3a3972);
    font-weight: 600;
}
.cpf-bundle-item__price .woocommerce-Price-amount {
    font-size: inherit;
}

/* Qty picker — borde/botones morado, fondo gris claro */
.cpf-bundle-item__qty {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-primario, #3a3972);
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f8;
    width: 114px;
}
.cpf-bundle-qty-btn {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--color-primario, #3a3972);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
    padding: 0;
}
.cpf-bundle-qty-btn:hover:not(:disabled) { background: #eaeaf5; }
.cpf-bundle-qty-btn:active { transform: translateY(1px); }
.cpf-bundle-qty-btn:disabled { opacity: 0.3; cursor: default; }
.cpf-bundle-qty-input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    border-left: 1px solid var(--color-primario, #3a3972) !important;
    border-right: 1px solid var(--color-primario, #3a3972) !important;
    border-radius: 0 !important;
    text-align: center;
    padding: 6px 2px;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-primario, #3a3972);
    -moz-appearance: textfield;
}
.cpf-bundle-qty-input::-webkit-outer-spin-button,
.cpf-bundle-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cpf-bundle-qty-input:disabled { opacity: 0.3; }

/* Hint */
.cpf-bundle__hint {
    margin: 12px 0 0;
    font-size: 0.78rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cpf-bundle__hint i {
    color: #aaa;
}

/* ── Bundle embebido dentro de la calculadora (coexistencia calc + bundle) ── */
.cpf-bundle--embedded {
    margin-top: 0 !important;
    border-top: 1px solid var(--color-borde, #dee2e6) !important;
    border-radius: 0;
    box-shadow: none;
}

/* ── Mobile: precio (summary naranja) + CTA en la misma fila ─────────────── */
/* El padre común recibe la clase cpf-price-cta-row via JS cuando el precio es visible */
@media (max-width: 768px) {
    .cpf-price-cta-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    /* El summary naranja se adapta al contenido */
    .cpf-price-cta-row .cpf-comp--variation_selector {
        flex: 0 1 auto;
        min-width: 0;
    }

    .cpf-price-cta-row .cpf-variation-summary {
        margin-top: 0 !important;
        height: 100%;
        display: flex !important;
        align-items: center !important;
    }

    /* El CTA ocupa el resto */
    .cpf-price-cta-row .cpf-comp--primary_cta {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cpf-price-cta-row .cpf-cta-btn--inline {
        width: 100% !important;
        max-width: none !important;
        height: 100%;
        white-space: nowrap;
    }
}