/*.apf-compare-wrapper{
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
}*/
:root{
    --primary: #0061AA;
}
.comparador-title{
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 700;
}
/* ============================================================
   Contenedor con scroll horizontal — esencial para mobile
   ============================================================ */
.tienda-comparador-wrapper {
    /*overflow-x: auto;
    -webkit-overflow-scrolling: touch; !* scroll suave en iOS *!
    border: 1px solid #e4e4e4;
    border-radius: 6px;*/
}

.tienda-comparador-tabla {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 700px; /* fuerza el scroll horizontal en pantallas chicas
	                      en vez de aplastar las columnas */
    background: #fff;
    table-layout: fixed; /* CLAVE: hace que el ancho de columna lo defina
	                         el colgroup (o CSS), no el contenido más largo */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
    border: 1px solid #e4e4e4;
    border-radius: 6px;
}


/* ============================================================
   Columna de propiedades — FIJA (sticky) a la izquierda
   ============================================================ */
.tienda-comparador-tabla .col-propiedad {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    font-weight: 700;
    color: #14539a;
    text-align: left;
    white-space: nowrap;

    /* Sombra sutil a la derecha para separar visualmente
       la columna fija del resto al hacer scroll */
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

/* En filas normales (no header), el texto de propiedad es
   más neutro, no azul (el azul es solo para el título general) */
.tienda-comparador-tabla tbody .col-propiedad {
    color: #333;
    font-weight: 600;
}


/* ============================================================
   Celdas generales
   ============================================================ */
.tienda-comparador-tabla th,
.tienda-comparador-tabla td {
    padding: 14px 16px;
    border-bottom: 1px solid #edf1f4;
    text-align: center;
    font-size: 0.9rem;
    color: #444;
    vertical-align: middle;
    overflow-wrap: break-word;
    word-break: break-word;
    border-right: 3px solid #edf1f4;
}

.tienda-comparador-tabla thead th {
    border-bottom: none;
}

/* Filas alternas (zebra), igual que en tu diseño */
.tienda-comparador-tabla tbody tr:nth-child(odd) td {
    background: #f7fafc;
}

/* La columna fija necesita su propio control de fondo,
   independiente del resto de la fila, para que el zebra
   se vea igual dentro y fuera de ella */
.tienda-comparador-tabla tbody tr td.col-propiedad {
    background-color: #fff;
}
.tienda-comparador-tabla tbody tr:nth-child(odd) td.col-propiedad {
    background-color: #f7fafc;
}


/* ============================================================
   Header: imagen como background, llenando toda la celda
   ============================================================ */
.tienda-comparador-tabla thead tr:first-child th.col-producto {
    padding: 0; /* la celda no debe tener padding, la imagen la llena por completo */
}

.tienda-comparador-tabla .col-producto-imagen {
    display: block;
    width: 100%;
    height: 250px; /* ajusta esta altura según el diseño real */
    background-color: #0d0d0d; /* fondo oscuro como en tu diseño, visible
	                               si la imagen tiene transparencia o no
	                               cubre 100% del área */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tienda-comparador-tabla .fila-nombre-producto th {
    padding-top: 10px;
    padding-bottom: 16px;
}

.nombre-producto {
    display: block;
    color: #14539a;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 4px;

    /* Con table-layout:fixed, el texto ya no puede ensanchar la columna,
       así que dejamos que haga wrap normal a varias líneas. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Si prefieres recortar a un máximo de líneas en vez de wrap libre
   (ej. 2 líneas y "..."), descomenta esto: */
/*
.nombre-producto {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
*/

.marca-producto {
    display: block;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}


/* ============================================================
   Footer: checkbox de comparar
   ============================================================ */
.tienda-comparador-tabla tfoot td {
    border-bottom: none;
    border-top: 1px solid #edf1f4;
    background: #fff !important; /* footer sin zebra */
}

.comparar-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
}

.comparar-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.apf-compare-boton-flotante {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);

    display: flex;
    align-items: center;
    gap: 8px;

    background: #1e3a8a;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);

    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;

    z-index: 999;
}

.apf-compare-boton-flotante.visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
    visibility: visible;
    z-index: 1000;
}

.apf-compare-boton-flotante svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.apf-compare-boton-flotante:hover {
    background: #16306b;
}

/* ============================================================
   Ajuste responsivo: en mobile, columna fija un poco más
   angosta para dejar más espacio visible a los productos
   ============================================================ */
@media (max-width: 600px) {
    .tienda-comparador-tabla .col-propiedad {
        min-width: 110px;
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    .tienda-comparador-tabla th,
    .tienda-comparador-tabla td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
}
.apf-compare-wrapper {
    min-width: 0;
    max-width: 100%;
    container-type: inline-size;
    container-name: apf-comparison;
}
.apf-compare-vertical { display: none; }

/* Use the component's available width, including tablet page gutters. */
@container apf-comparison (max-width: 760px) {
    .tienda-comparador-tabla { display: none; }
    .apf-compare-vertical { display: block; }
    .comparador-title { font-size: clamp(1.4rem, 6cqi, 2rem); overflow-wrap: anywhere; }
}
/* Fallback for browsers without container queries. */
@media (max-width: 900px) {
    .apf-compare-wrapper .tienda-comparador-tabla { display: none; }
    .apf-compare-vertical { display: block; }
    .apf-compare-wrapper .comparador-title { font-size: clamp(1.4rem, 6vw, 2rem); overflow-wrap: anywhere; }
}
.apf-compare-vertical,
.apf-compare-vertical * { box-sizing: border-box; min-width: 0; }
.apf-compare-summary {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f4;
}
.apf-compare-summary img { width: 56px; height: 56px; object-fit: contain; }
.apf-compare-summary button {
    min-height: 44px;
    padding: 8px;
    border: 1px solid #e4e4e4;
    background: #fff;
    color: #14539a;
    cursor: pointer;
    font: inherit;
}
.apf-compare-summary button:focus-visible { outline: 2px solid #14539a; outline-offset: 2px; }
.apf-compare-property { margin-top: 24px; border: 1px solid #e4e4e4; border-radius: 6px; }
.apf-compare-property h4 { margin: 0; padding: 14px; background: #f7fafc; color: #14539a; font-size: 1rem; line-height: 1.5; }
.apf-compare-property dl { margin: 0; }
.apf-compare-property dl > div { padding: 14px; border-top: 1px solid #edf1f4; }
.apf-compare-property dt { font-weight: 700; color: #333; }
.apf-compare-single .apf-compare-property dt { display: none; }
.apf-compare-property dd { margin: 4px 0 0; color: #444; }
.apf-compare-vertical :is(h4, dt, dd, a, span) { white-space: normal; overflow-wrap: anywhere; }