/**
 * PCW Compare v1 — Estilos
 *
 * Alcance: control de la tarjeta (.pcw-cmp), barra flotante (.pcw-cmpbar) y página de
 * comparación (.pcw-cmppage). Todos los valores salen de design-tokens.css: cero hex de
 * identidad nuevos y cero estilos en línea.
 *
 * Contraste (WCAG 2.2 AA):
 *  - Enlace «Ver otras opciones»: --pcw-orange-text #C2410C = 5,18:1 sobre blanco.
 *  - Casilla sin marcar: borde --pcw-text-muted #64748B = 4,76:1 (componente, 1.4.11 ≥3:1).
 *  - Casilla marcada: relleno --pcw-primary #FF6B00 con marca --pcw-brand-dark #0F172A = 6,25:1.
 *    (Marca blanca sobre naranja daría 2,86:1 y se descarta.)
 *  - Botón «Comparar» de la barra: fondo --pcw-brand-dark con texto blanco = 17:1.
 *  - Foco: --pcw-focus #C2410C, 2 px, offset 2 px.
 *
 * Sin !important: se usa la especificidad de Woo+Kadence (body.woocommerce + clases).
 */

/* ─── 1. CONTROL EN LA TARJETA ─────────────────────────────────────────────── */

body.woocommerce ul.products li.product .pcw-cmp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--pcw-space-2, 8px);
    margin: var(--pcw-space-1, 4px) 0 var(--pcw-space-2, 8px);
    font-size: 13px;
    line-height: 1.3;
    color: var(--pcw-text, #334155);
}

body.woocommerce ul.products li.product .pcw-cmp__more {
    min-width: 0;
}

body.woocommerce ul.products li.product .pcw-cmp__more > summary {
    color: var(--pcw-orange-text, #C2410C);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    min-height: 32px;
}

body.woocommerce ul.products li.product .pcw-cmp__more > summary::-webkit-details-marker {
    display: none;
}

body.woocommerce ul.products li.product .pcw-cmp__more > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--pcw-transition-fast, 120ms ease-out);
}

body.woocommerce ul.products li.product .pcw-cmp__more[open] > summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

body.woocommerce ul.products li.product .pcw-cmp__more > summary:focus-visible {
    outline: 2px solid var(--pcw-focus, #C2410C);
    outline-offset: 2px;
    border-radius: var(--pcw-radius-sm, 4px);
}

body.woocommerce ul.products li.product .pcw-cmp__list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
}

body.woocommerce ul.products li.product .pcw-cmp__list a {
    color: var(--pcw-text, #334155);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Interruptor: casilla nativa oculta de forma accesible + caja dibujada. */

body.woocommerce ul.products li.product .pcw-cmp__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-left: auto;
    padding: 0 2px;
    cursor: pointer;
    color: var(--pcw-text, #334155);
    -webkit-user-select: none;
    user-select: none;
}

body.woocommerce ul.products li.product .pcw-cmp__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.woocommerce ul.products li.product .pcw-cmp__box {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pcw-text-muted, #64748B);
    border-radius: var(--pcw-radius-sm, 4px);
    background: var(--pcw-card, #FFFFFF);
    transition: background var(--pcw-transition, 200ms ease-out),
        border-color var(--pcw-transition, 200ms ease-out);
}

body.woocommerce ul.products li.product .pcw-cmp__box::after {
    content: "";
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border-left: 2px solid var(--pcw-brand-dark, #0F172A);
    border-bottom: 2px solid var(--pcw-brand-dark, #0F172A);
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform var(--pcw-transition-fast, 120ms ease-out);
}

body.woocommerce ul.products li.product .pcw-cmp__input:checked + .pcw-cmp__box {
    background: var(--pcw-primary, #FF6B00);
    border-color: var(--pcw-brand-dark, #0F172A);
}

body.woocommerce ul.products li.product .pcw-cmp__input:checked + .pcw-cmp__box::after {
    transform: rotate(-45deg) scale(1);
}

body.woocommerce ul.products li.product .pcw-cmp__input:focus-visible + .pcw-cmp__box {
    outline: 2px solid var(--pcw-focus, #C2410C);
    outline-offset: 2px;
}

/* ─── 2. BARRA FLOTANTE ────────────────────────────────────────────────────── */

.pcw-cmpbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95; /* Sobre el contenido y la barra móvil (80); bajo overlay/offcanvas (9999-10001). */
    display: flex;
    align-items: center;
    gap: var(--pcw-space-3, 12px);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--pcw-card, #FFFFFF);
    border-top: 1px solid var(--pcw-border, #E2E8F0);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.10);
}

.pcw-cmpbar[hidden] {
    display: none;
}

/* El boton de quitar sobresale 8px por arriba de la miniatura (top:-8px) y su area tactil
   ampliada 8px mas. overflow-x:auto obliga a overflow-y:auto, asi que sin este relleno el
   recorte superior cortaba el boton y su anillo de foco (medido: 8px fuera de la caja).
   El margen negativo deja la geometria y el alto de la barra como estaban. */
.pcw-cmpbar__items {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: -18px 0 0;
    padding: 18px 16px 0 0;
    list-style: none;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.pcw-cmpbar__item {
    position: relative;
    flex: 0 0 auto;
}

.pcw-cmpbar__item img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    border: 1px solid var(--pcw-border, #E2E8F0);
    border-radius: var(--pcw-radius-sm, 4px);
    background: var(--pcw-card, #FFFFFF);
}

.pcw-cmpbar__drop {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pcw-border, #E2E8F0);
    border-radius: var(--pcw-radius-full, 9999px);
    background: var(--pcw-card, #FFFFFF);
    color: var(--pcw-text, #334155);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* Area tactil de 40x40 sin tocar el circulo visible de 24px (el borde de 1px obliga a inset -9px).
   Por que 40 y no 44: con miniaturas de 40px y 16px entre ellas, el paso entre botones es 56px;
   una area de 44px tapa mas miniatura y deja solo 12px entre objetivos. 40x40 supera con holgura el
   minimo de WCAG 2.2 AA (2.5.8: 24x24). Sin el hueco de 16px (antes 8px) el lado derecho quedaba
   bajo la miniatura vecina, que se pinta despues (medido con un mapa de elementFromPoint). */
.pcw-cmpbar__drop::after {
    content: "";
    position: absolute;
    inset: -9px;
}

.pcw-cmpbar__drop:hover {
    border-color: var(--pcw-critical, #DC2626);
    color: var(--pcw-critical, #DC2626);
}

/* Foco visible en los tres controles de la barra: 2px #C2410C = 5,18:1 sobre blanco.
   Nota de medicion: .button de Kadence lleva transition:all .2s, asi que el outline parte de
   currentColor (blanco en «Comparar») y una lectura inmediata tras Tab da 3px blanco; a los
   ~200ms ya vale 2px #C2410C. Leer siempre con espera (control con el CSS anterior: identico). */
.pcw-cmpbar__drop:focus-visible,
.pcw-cmpbar__clear:focus-visible,
.pcw-cmpbar__go:focus-visible {
    outline: 2px solid var(--pcw-focus, #C2410C);
    outline-offset: 2px;
}

.pcw-cmpbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.pcw-cmpbar__clear {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--pcw-border, #E2E8F0);
    border-radius: var(--pcw-radius-md, 8px);
    background: var(--pcw-card, #FFFFFF);
    color: var(--pcw-text, #334155);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.pcw-cmpbar__clear:hover {
    border-color: var(--pcw-brand-dark, #0F172A);
}

.pcw-cmpbar__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--pcw-radius-md, 8px);
    background: var(--pcw-brand-dark, #0F172A);
    color: var(--pcw-card, #FFFFFF);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pcw-cmpbar__go[aria-disabled="true"] {
    background: var(--pcw-surface-subdued, #F1F5F9);
    color: var(--pcw-text-muted, #64748B);
    cursor: not-allowed;
}

/* La barra ocupa altura: se compensa para no tapar el final del listado.
   La clase la pone el JS solo tras una acción del usuario (fuera de la ventana de CLS). */
body.pcw-cmpbar-open {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1024px) {
    .joinchat.joinchat--right {
        bottom: 88px !important; /* No tapar la barra de comparación. */
    }
}

@media (max-width: 359px) {
    .pcw-cmpbar__actions {
        gap: 6px;
    }

    .pcw-cmpbar__go,
    .pcw-cmpbar__clear {
        padding: 0 10px;
        font-size: 13px;
    }
}

/* ─── 3. PÁGINA /comparar/ ─────────────────────────────────────────────────── */

.pcw-cmppage {
    margin: 0 0 var(--pcw-space-5, 24px);
}

.pcw-cmppage__lead {
    font-size: 16px;
    color: var(--pcw-brand-dark, #0F172A);
}

.pcw-cmppage__hint {
    font-size: 14px;
    color: var(--pcw-text-subdued, #64748B);
}

.pcw-cmppage__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--pcw-border, #E2E8F0);
    border-radius: var(--pcw-radius-md, 8px);
}

.pcw-cmppage__scroll:focus-visible {
    outline: 2px solid var(--pcw-focus, #C2410C);
    outline-offset: 2px;
}

.pcw-cmppage__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--pcw-card, #FFFFFF);
}

.pcw-cmppage__table th,
.pcw-cmppage__table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--pcw-border, #E2E8F0);
}

.pcw-cmppage__table tbody th {
    width: 180px;
    min-width: 140px;
    font-weight: 600;
    color: var(--pcw-brand-dark, #0F172A);
    background: var(--pcw-surface, #F8F9FA);
    position: sticky;
    left: 0;
    z-index: 1;
}

.pcw-cmppage__corner {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--pcw-card, #FFFFFF);
}

.pcw-cmppage__col {
    min-width: 200px;
    font-weight: 400;
    vertical-align: top;
}

.pcw-cmppage__thumb img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.pcw-cmppage__name {
    display: block;
    margin: 6px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pcw-brand-dark, #0F172A);
    text-decoration: none;
}

.pcw-cmppage__name:hover {
    text-decoration: underline;
}

.pcw-cmppage__remove {
    font-size: 12px;
    color: var(--pcw-orange-text, #C2410C);
    text-decoration: underline;
}

.pcw-cmppage__table .price {
    font-size: 16px;
    font-weight: 700;
    color: var(--pcw-brand-dark, #0F172A);
}

.pcw-cmppage__table .price del {
    font-size: 13px;
    font-weight: 400;
    color: var(--pcw-text-muted, #64748B);
}

.pcw-cmppage__stock {
    font-size: 13px;
    font-weight: 600;
}

.pcw-cmppage__stock.in-stock {
    color: var(--pcw-success, #047857);
}

.pcw-cmppage__stock.out-of-stock {
    color: var(--pcw-critical, #DC2626);
}

.pcw-cmppage__more {
    margin-top: var(--pcw-space-3, 12px);
}

.pcw-cmppage__more > summary {
    cursor: pointer;
    color: var(--pcw-orange-text, #C2410C);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
}

.pcw-cmppage__more > summary:focus-visible {
    outline: 2px solid var(--pcw-focus, #C2410C);
    outline-offset: 2px;
}

.pcw-cmppage__table--extra {
    margin-top: 8px;
}

@media (min-width: 1025px) {
    .pcw-cmppage__table {
        min-width: 0;
    }
}