/* ============================================================
   PERSONALIZADOR (paso 2 del flujo de compra) - portado 1:1 del
   prototipo aprobado (pages/04-personalizador.html + css/pages.css y
   components.css del prototipo). Paleta "transaccional" (fondo claro,
   acento naranja) a proposito distinta al resto del sitio (oscuro/
   dorado) - asi lo define el Manual Maestro para Personalizador/
   Checkout, para sentirse mas cercano a una app y no competir
   visualmente con el momento de decision de compra.
   ============================================================ */

/* El Stepper (.flow-head, .flow-steps, .flow-secure, etc.) se movio a
   components.css - lo comparten de verdad todas las pantallas del flujo
   de compra (Personalizador, Envio, y las que faltan de Pago/
   Confirmacion), asi que vive en el CSS que se carga siempre, no aqui. */

/* ===== Composicion de pagina (fondo claro, tokens locales "--lu-*") ===== */
  .pz-page{
    --lu-bg:#f6f2e8; --lu-card:#ffffff; --lu-border:#e5ddc9; --lu-border-2:#d8cfb8;
    --lu-text:#17140d; --lu-muted:#8b8370; --lu-black:#17140d; --lu-success:#2f9e5c;
    background:var(--lu-bg);min-height:100vh;
  }
  .pz-wrap{padding:44px 0 88px;}
  .pz-grid{display:grid;grid-template-columns:290px 1fr;gap:36px;align-items:start;}

  /* Acento naranja de la capa transaccional aplicado a botones/precio */
  .pz-page .btn-solid{background:var(--flow-orange);border-color:var(--flow-orange);}
  .pz-page .btn-solid:hover{background:var(--flow-orange-dark);border-color:var(--flow-orange-dark);}
  .pz-page .price,
  .pz-page .pz-total .n{color:var(--flow-orange);}

/* ===== Sidebar (resumen del combo) ===== */
  .pz-side{position:sticky;top:80px;border:1px solid var(--lu-border);background:var(--lu-card);border-radius:6px;overflow:hidden;}
  .pz-side .thumb{overflow:hidden;border-bottom:1px solid var(--lu-border);}
  .pz-side .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .pz-gallery-main{aspect-ratio:1/1;overflow:hidden;}
  .pz-gallery-thumbs{display:flex;gap:8px;padding:10px;border-top:1px solid var(--lu-border);}
  .pz-gallery-thumb{width:48px;height:48px;border:1.5px solid var(--lu-border-2);border-radius:4px;overflow:hidden;cursor:pointer;flex-shrink:0;}
  .pz-gallery-thumb.active{border-color:var(--flow-orange);}
  .pz-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .pz-side .info{padding:20px;}
  .pz-side .info h3{font-family:'Anton';font-size:19px;margin-bottom:4px;color:var(--lu-black);}
  .pz-side .info .price{font-family:'Anton';font-size:20px;margin-bottom:18px;}
  /* Resumen de la Descripcion real (o "Incluye: ..." para combos sin
     descripcion) - ver tf_child_get_personalizador_short_description() en
     inc/woocommerce.php. Reemplaza el boton "Escribir por WhatsApp" que
     vivia aqui antes (pedido del cliente el 2026-08-06: la compra se
     completa en la tienda). */
  /* "white-space:pre-line": el texto que arma tf_child_get_combo_contents_list()
     (inc/woocommerce.php) trae saltos de linea reales ("\n") para el
     formato de lista con guiones - sin esto, HTML los ignora y todo se ve
     en una sola linea corrida. */
  .pz-short-desc{font-size:13px;line-height:1.6;color:var(--lu-muted);margin:0 0 18px;white-space:pre-line;}
  .pz-checklist{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:12px;}
  .pz-checklist li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--lu-muted);}
  .pz-checklist .b{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--lu-border-2);display:flex;align-items:center;justify-content:center;font-family:'Oswald';font-size:10px;font-weight:600;flex-shrink:0;color:var(--lu-muted);}
  .pz-note{background:#f4ead0;border:1px solid #e8d9ab;border-radius:4px;padding:14px 16px;font-size:12px;color:#6b5a2a;margin-bottom:14px;display:flex;gap:10px;}
  .pz-note svg{width:18px;height:18px;stroke:#9c7f2e;fill:none;stroke-width:1.4;flex-shrink:0;}
  .pz-total{background:var(--lu-black);padding:16px 20px;display:flex;justify-content:space-between;align-items:baseline;}
  .pz-total .l{font-family:'Oswald';font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a89f88;}
  .pz-total .n{font-family:'Anton';font-size:22px;}

/* ===== Bloque por item (contenedor propio, ver .pz-main mas abajo) ===== */
  .pz-item{border:1px solid var(--lu-border);background:var(--lu-card);border-radius:6px;padding:24px 26px;margin-bottom:16px;}
  .pz-item-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
  .pz-icon-box{width:34px;height:34px;border-radius:6px;background:#f4f0e4;border:1px solid var(--lu-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pz-icon-box svg{width:18px;height:18px;stroke:#8b8370;fill:none;stroke-width:1.5;}
  .pz-item-head h4{font-family:'Oswald';font-weight:600;font-size:14.5px;letter-spacing:.03em;text-transform:uppercase;flex-grow:1;color:var(--lu-black);margin:0;}
  .pz-item-head .req{font-family:'Oswald';font-size:9.5px;color:var(--lu-muted);letter-spacing:.05em;text-transform:uppercase;}
  .pz-row-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .pz-sub{font-family:'Oswald';font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lu-muted);}
  .pz-cta-row{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap;}
  .pz-secure{display:flex;align-items:center;gap:6px;font-family:'Oswald';font-size:11px;color:var(--lu-muted);text-transform:uppercase;letter-spacing:.03em;}
  .pz-secure svg{width:13px;height:13px;stroke:var(--lu-muted);fill:none;stroke-width:1.6;}

/* ===== Restilo de "WooCommerce Product Options" (plugin real, Barn2) =====
   Este plugin es quien de verdad dibuja y guarda los colores/tallas -
   aqui solo se le cambia el aspecto (fondo claro, tarjeta redondeada,
   acento naranja) para que se vea parecido al resto del Personalizador,
   sin tocar su HTML/JS interno. ".wpo-field" es la unica clase que Barn2
   documenta publicamente; el resto (inputs, imagenes, labels) se
   escopea de forma generica porque su estructura interna exacta no esta
   documentada - si al verlo en vivo un detalle no calza exacto con el
   prototipo, es aqui donde se ajusta.
   ".tf-wpo-card" (no "--lu-*", que solo existe dentro de ".pz-page") se
   usa para que este MISMO restilo tambien se pueda aplicar en la pagina
   de un producto individual (single-product.php, fondo oscuro del
   resto del sitio) - ahi el cliente tambien elige un color, y hay que
   verlo igual de prolijo aunque el resto de esa pagina sea oscura. Los
   colores van escritos literales (no var(--lu-*)) para que funcione
   igual en los dos contextos. */
  .tf-wpo-card{max-width:none;}
  .tf-wpo-card .wpo-field{
    border:1px solid #e5ddc9;background:#ffffff;border-radius:6px;
    padding:22px 26px;margin-bottom:16px;
  }
  .tf-wpo-card .wpo-field > label,
  .tf-wpo-card .wpo-field .wpo-field-title{
    font-family:'Oswald';font-weight:600;font-size:14.5px;letter-spacing:.03em;
    text-transform:uppercase;color:#17140d;
  }
  .tf-wpo-card .wpo-field input[type="radio"],
  .tf-wpo-card .wpo-field input[type="checkbox"]{accent-color:var(--flow-orange);width:18px;height:18px;}
  .tf-wpo-card .wpo-field img{border-radius:5px;display:block;}
  .tf-wpo-card .wpo-field select,
  .tf-wpo-card .wpo-field input[type="text"],
  .tf-wpo-card .wpo-field input[type="number"],
  .tf-wpo-card .wpo-field textarea{
    background:#fff;border:1px solid #d8cfb8;border-radius:3px;color:#17140d;
    padding:12px 14px;font-family:'Barlow';font-size:14px;
  }
  .tf-wpo-card button[type="submit"],
  .tf-wpo-card .single_add_to_cart_button{
    background:var(--flow-orange) !important;border-color:var(--flow-orange) !important;color:#fff !important;
    font-family:'Oswald' !important;font-weight:600 !important;letter-spacing:.05em !important;text-transform:uppercase !important;
  }
  .tf-wpo-card button[type="submit"]:hover,
  .tf-wpo-card .single_add_to_cart_button:hover{background:var(--flow-orange-dark) !important;border-color:var(--flow-orange-dark) !important;}

  /* Descripcion breve de cada producto (material/caracteristicas) -
     Barn2 ya trae su propio mecanismo de "descripcion" por campo
     (".wpo-field-description", el mismo que usa el campo de Tallas para
     su texto de ayuda, que se queda visible normal). Aqui, SOLO para los
     campos de color de cada producto (image_buttons), se esconde esa
     descripcion detras de un icono "i" en globo/tooltip corto (ver
     .tf-desc-bubble y personalizador.js) - el cliente la pide con un
     clic en vez de verla siempre. */
  .tf-wpo-card .wpo-field[data-type="image_buttons"] .wpo-field-description{display:none;}
  .tf-wpo-card .wpo-option-name{justify-content:space-between;position:relative;}
  .tf-wpo-card .tf-desc-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;background:transparent;border:none;border-radius:50%;
    color:#8b8370;cursor:pointer;padding:0;flex-shrink:0;
  }
  .tf-wpo-card .tf-desc-btn:hover,
  .tf-wpo-card .tf-desc-btn.is-active{color:var(--flow-orange);background:#f4f0e4;}
  .tf-wpo-card .tf-desc-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;flex-shrink:0;}
  .tf-wpo-card .tf-desc-bubble{
    display:none;position:absolute;top:28px;right:0;z-index:5;width:220px;
    border:1px solid #e5ddc9;background:#ffffff;border-radius:6px;box-shadow:0 6px 18px rgba(23,20,13,.14);
    padding:12px 14px;font-family:'Barlow';font-size:12.5px;line-height:1.4;color:#17140d;
    text-transform:none;letter-spacing:normal;font-weight:400;
  }
  .tf-wpo-card .tf-desc-bubble.is-open{display:block;}

  /* Casillas cuadradas para tallas (campos tipo "radio" de Barn2 - ej.
     TALLAS) en vez de circulos de radio sueltos, tipo tienda de
     zapatillas: cada talla en su propio recuadro, resaltado al elegirla.
     Se reusa el propio mecanismo de Barn2 (input:checked + span) para
     el resaltado, solo se le cambian los colores/tamano. */
  .tf-wpo-card .wpo-radios{display:flex !important;flex-wrap:wrap;gap:8px;}
  .tf-wpo-card label.wpo-radio{
    width:46px;height:46px;margin:0 !important;position:relative;
    align-items:center;justify-content:center;
  }
  .tf-wpo-card label.wpo-radio span.wpo-radio-inner{
    position:absolute;inset:0;width:100% !important;height:100% !important;margin:0 !important;
    border-radius:10px !important;border:1.5px solid #d8cfb8;background:#ffffff !important;
  }
  .tf-wpo-card label.wpo-radio span.wpo-radio-dot{display:none;}
  .tf-wpo-card label.wpo-radio input:checked + span.wpo-radio-inner{
    border-color:var(--flow-orange) !important;background:#fdf1e3 !important;
  }
  .tf-wpo-card label.wpo-radio div{
    position:relative;z-index:1;padding-left:0 !important;font-family:'Oswald';font-weight:600;font-size:13px;color:#17140d;
  }
  .tf-wpo-card label.wpo-radio input:checked ~ div{color:var(--flow-orange);}

  /* "Guia de Tallas" (campo tipo "text_labels" de Barn2) - tercer
     reporte del cliente, texto seguia desbordandose pese a 2 intentos
     previos. Root cause encontrada en vivo el 2026-08-06 inspeccionando
     el DOM real: Barn2 fija "height:36px" en el propio SPAN interno
     (".wpo-text-labels label.wpo-text-label .wpo-text-label-inner",
     wpo-frontend-fields.css) con MAS especificidad que la regla anterior
     de este archivo (".tf-wpo-card .wpo-text-label-inner", que solo
     tocaba white-space/line-height, nunca "height") - los 2 intentos
     previos agrandaron el contenedor exterior (".wpo-text-labels"/
     ".wpo-text-label") pero el SPAN interno, que es quien de verdad
     recorta el texto, seguia fijo en 36px. Confirmado en vivo: con
     "height:auto" en el span interno, scrollHeight y el alto real
     quedan iguales en los 3 niveles (span/label/wrapper) - ya no hay
     texto cortado. */
  .tf-wpo-card .wpo-text-labels{height:auto !important;min-height:40px;}
  .tf-wpo-card .wpo-text-label{height:auto !important;padding:10px 12px !important;}
  .tf-wpo-card .wpo-text-label-inner{height:auto !important;min-height:36px;white-space:normal;line-height:1.4;}

/* ===== Franja debajo del grid principal (descripcion, valorizacion,
   envio, resenas, confianza) - ancho completo, separada del formulario
   de compra para no competirle visualmente. ===== */
  .pz-below{padding-top:8px;}
  .pz-below .pz-item{margin-bottom:20px;}
  .pz-below .pz-item:last-child{margin-bottom:0;}
  .pz-block-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
  .pz-block-icon{width:30px;height:30px;border-radius:6px;background:#f4f0e4;border:1px solid var(--lu-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pz-block-icon svg{width:16px;height:16px;stroke:var(--flow-orange);fill:none;stroke-width:1.6;}
  .pz-block-head h3{font-family:'Anton';font-size:17px;color:var(--lu-black);margin:0;}
  .pz-below p{margin:0 0 12px;font-family:'Barlow';font-size:14px;line-height:1.6;color:var(--lu-black);}
  .pz-below p:last-child{margin-bottom:0;}

  /* 1. Descripcion + Por que elegir Todo Futbol */
  .pz-below-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

  .pz-why-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .pz-why-list li{display:flex;align-items:center;gap:10px;font-family:'Barlow';font-size:14px;color:var(--lu-black);}
  .pz-why-list svg{width:18px;height:18px;stroke:var(--lu-success);fill:none;stroke-width:2;flex-shrink:0;}

  /* 2. Valorizacion del combo */
  .pz-value-grid{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:start;}
  .pz-value-list{list-style:none;margin:0 0 12px;padding:0;}
  .pz-value-list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--lu-border);font-family:'Barlow';font-size:13.5px;color:var(--lu-black);}
  .pz-value-list li:last-child{border-bottom:none;}
  .pz-value-separate{display:flex;justify-content:space-between;padding-top:10px;border-top:1.5px solid var(--lu-black);font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--lu-black);}
  .pz-value-separate .pz-strike{text-decoration:line-through;color:var(--lu-muted);font-family:'Barlow';font-weight:400;text-transform:none;letter-spacing:normal;}
  .pz-value-highlight{border-radius:6px;overflow:hidden;border:1px solid var(--lu-border);}
  .pz-value-price-box{background:#17140d;color:#fff;padding:18px 20px;}
  .pz-value-label{display:block;font-family:'Oswald';font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#a89f88;margin-bottom:6px;}
  .pz-value-price{font-family:'Anton';font-size:26px;color:var(--flow-orange);}
  .pz-value-savings{background:#fdf1e3;padding:16px 20px;display:flex;gap:10px;}
  .pz-value-savings strong{display:block;font-family:'Oswald';font-size:14px;color:#8a5a1a;margin-bottom:2px;}
  .pz-value-savings span{font-family:'Barlow';font-size:12.5px;color:#8a5a1a;}
  .pz-value-star{flex-shrink:0;}
  .pz-value-star svg{width:22px;height:22px;stroke:var(--flow-orange);fill:var(--flow-orange);}
  .pz-value-shipping-note{display:flex;align-items:center;gap:8px;padding:10px 20px;border-top:1px solid var(--lu-border);font-family:'Barlow';font-size:12px;color:var(--lu-muted);}
  .pz-value-shipping-note svg{width:16px;height:16px;stroke:var(--lu-muted);fill:none;stroke-width:1.6;flex-shrink:0;}

  /* 3. Cuando recibiras tu pedido */
  .pz-ship-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  .pz-ship-card{border:1px solid var(--lu-border);border-radius:6px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;}
  .pz-ship-logo{height:26px;max-width:80px;object-fit:contain;margin-bottom:4px;}
  .pz-ship-icon{display:flex;margin-bottom:4px;}
  .pz-ship-icon svg{width:26px;height:26px;stroke:var(--lu-black);fill:none;stroke-width:1.5;}
  .pz-ship-label{font-family:'Oswald';font-weight:600;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--lu-black);}
  .pz-ship-time{font-family:'Anton';font-size:18px;color:var(--flow-orange);}
  .pz-ship-note{font-family:'Barlow';font-size:11px;color:var(--lu-muted);line-height:1.3;}
  .pz-ship-disclaimer{font-family:'Barlow';font-size:11.5px;color:var(--lu-muted);text-align:center;margin:14px 0 0;}

  /* 4. Resenas en carrusel */
  .pz-reviews-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
  .pz-reviews-head .pz-block-head{margin-bottom:0;}
  .pz-reviews-head a{font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--flow-orange);text-decoration:none;}
  .pz-review-viewport{display:flex;align-items:center;gap:14px;}
  .pz-review-arrow{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--lu-border-2);background:#fff;color:var(--lu-black);font-size:20px;line-height:1;cursor:pointer;}
  .pz-review-arrow:hover{border-color:var(--flow-orange);color:var(--flow-orange);}
  .pz-review-track{flex-grow:1;position:relative;min-height:110px;}
  .pz-review-slide{display:none;gap:16px;}
  .pz-review-slide.active{display:flex;}
  .pz-review-slide img.avatar{border-radius:50%;flex-shrink:0;width:56px;height:56px;object-fit:cover;}
  .pz-review-stars{display:flex;align-items:center;gap:2px;margin-bottom:6px;}
  .pz-review-stars svg{width:14px;height:14px;stroke:var(--lu-border-2);fill:none;}
  .pz-review-stars svg.is-filled{stroke:var(--flow-orange);fill:var(--flow-orange);}
  .pz-review-stars span{margin-left:6px;font-family:'Oswald';font-size:11px;color:var(--lu-muted);}
  .pz-review-author{font-family:'Oswald';font-weight:600;font-size:12.5px;color:var(--lu-black);margin:0 0 4px;}
  .pz-review-text{font-family:'Barlow';font-size:13.5px;color:var(--lu-black);margin:0;}
  .pz-review-dots{display:flex;justify-content:center;gap:6px;margin-top:16px;}
  .pz-review-dot{width:7px;height:7px;border-radius:50%;background:var(--lu-border-2);cursor:pointer;}
  .pz-review-dot.active{background:var(--flow-orange);}

  /* 5. Franja final de confianza */
  .pz-trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .pz-trust-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
  .pz-trust-icon{width:32px;height:32px;border-radius:50%;background:#f4f0e4;display:flex;align-items:center;justify-content:center;}
  .pz-trust-icon svg{width:17px;height:17px;stroke:var(--flow-orange);fill:none;stroke-width:1.6;}
  .pz-trust-col strong{display:block;font-family:'Oswald';font-weight:600;font-size:13.5px;color:var(--lu-black);}
  .pz-trust-col span{font-family:'Barlow';font-size:12.5px;color:var(--lu-muted);}
  .pz-trust-logos{display:flex;align-items:center;gap:10px;margin-top:4px;}
  .pz-trust-logos img{height:18px;width:auto;object-fit:contain;}
  .pz-trust-wa{margin-top:4px;font-family:'Oswald';font-weight:600;font-size:12.5px;color:var(--flow-orange);text-decoration:none;}

  @media (max-width:900px){
    .pz-grid{grid-template-columns:1fr;}
    .pz-side{position:static;}
    .flow-step span.lbl{display:none;}
    .flow-sep{width:14px;}
    .pz-below-grid{grid-template-columns:1fr;}
    .pz-value-grid{grid-template-columns:1fr;}
    .pz-ship-grid{grid-template-columns:1fr 1fr;}
    .pz-trust-strip{grid-template-columns:1fr;gap:20px;}
  }

  /* Bug real (no es Android vs iOS, es puro ancho de pantalla) -
     confirmado en vivo el 2026-08-05: los colores de Barn2 (".wpo-image-buttons")
     usan una grilla de 2 columnas de 118px + 10px de espacio (~246px
     minimo). El padding de ".pz-item" (26px) + ".wpo-field" (26px) sumado
     al de ".wrap" (28px) - los 3 a cada lado - dejaba muy poco ancho
     disponible en pantallas angostas (~192px en un telefono de 360px),
     asi que la grilla de Barn2 colapsaba sola a 1 columna. Se confirmo
     midiendo pixel por pixel: a 430px (iPhone Pro Max) SI entraban 2
     columnas con el padding de siempre, a 412px (Samsung tipico) no - el
     "iPhone se ve bien, Samsung no" del cliente era en realidad "pantalla
     grande se ve bien, pantalla chica no", y la mayoria de Android
     (incluidos casi todos los Samsung) caen en el rango chico. Se
     recorta el padding lateral de estos 2 contenedores SOLO en telefonos
     angostos (nunca en tablet/desktop) para liberar el ancho que Barn2
     necesita - verificado en vivo que esto si arma las 2 columnas de
     nuevo incluso a 360px. */
  @media (max-width:480px){
    .pz-item{padding-left:12px;padding-right:12px;}
    .tf-wpo-card .wpo-field{padding-left:12px;padding-right:12px;}
  }