/* =====================================================================
   Comparador de productos (modulo_productos_extends_ci/class-comparador.php y js/comparador.js)
   El color de la tienda se hereda con la clase "main-color" + currentColor.
   ===================================================================== */

.comparador-oculto{display:none !important;}

/* ---------- Botón "Comparar" ---------- */
.comparar-producto{
    display:inline-flex;align-items:center;gap:6px;
    margin:0;padding:2px 4px;border:0;background:none;box-shadow:none;
    font-family:'Lato',sans-serif;font-size:12px;font-weight:400;line-height:16px;color:#575756;
    cursor:pointer;white-space:nowrap;text-transform:none;
}
.comparar-producto:hover .comparar-producto-texto{text-decoration:underline;}
.comparar-producto:focus-visible{outline:2px solid #4a4a4a;outline-offset:2px;}
.comparar-producto-check{
    position:relative;flex:0 0 auto;width:14px;height:14px;
    border:1px solid #9a9a9a;border-radius:2px;background:#fff;box-sizing:border-box;
}
.comparar-producto.comparar-activo .comparar-producto-check{background:#4a4a4a;border-color:#4a4a4a;}
.comparar-producto.comparar-activo .comparar-producto-check:after{
    content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.comparar-producto.comparar-activo{color:#4a4a4a;font-weight:700;}

/* Cuadrícula, carrusel y comparador: justo debajo de "Añadir" y centrada con él
   (va dentro del bloque .button-compra-container-familia, ver template-producto-simple.html) */
.product .comparar-producto-simple{display:flex;width:-moz-fit-content;width:fit-content;margin:10px auto 0;}
/* Cuadrícula: las tarjetas tienen alto fijo y van flotando en filas. Se les da a TODAS (también a las
   agrupaciones, que no llevan casilla) el mismo espacio extra abajo para que las filas sigan cuadrando.
   Es relleno y no un alto nuevo, así respeta el alto que tenga cada tienda en su CSS */
.product, .product-group{padding-bottom:26px;}
/* Carrusel: tarjetas sin alto fijo; todas (productos y agrupaciones) a la altura de la más alta */
.carrusel-productos .product, .carrusel-productos .product-group{padding-bottom:8px;}
.carrusel-productos .owl-stage{display:flex;}
.carrusel-productos .owl-item{display:flex;float:none;flex-shrink:0;}
.carrusel-productos .owl-item > .product, .carrusel-productos .owl-item > .product-group{width:100%;height:auto;}
/* Móvil: una tarjeta por fila, así que pueden crecer lo que necesiten */
@media (max-width:480px){
    .product, .product-group{height:auto;min-height:410px;padding-bottom:10px;}
}

/* Lista: debajo de "Ver detalles" / comprar */
.actions-product-list .comparar-producto-lista{display:flex;margin:2px auto 0;line-height:16px;}

/* Ficha de producto */
.comparar-ficha{margin:10px 0;clear:both;}
.comparar-producto-completo{font-size:14px;padding:4px 0;}
.comparar-producto-completo .comparar-producto-check{width:16px;height:16px;}
.comparar-producto-completo.comparar-activo .comparar-producto-check:after{left:5px;top:1px;}

/* ---------- Barra flotante ---------- */
.comparador-barra{
    position:fixed;left:0;right:0;bottom:0;z-index:9990;
    background:#fff;border-top:1px solid #d0d0d0;box-shadow:0 -4px 16px rgba(0,0,0,0.12);
    font-family:'Lato',sans-serif;color:#4a4a4a;
}
body.con-comparador{padding-bottom:120px;}
.comparador-barra-interior{max-width:1170px;margin:0 auto;padding:0 16px;box-sizing:border-box;}
.comparador-barra-plegar{
    display:flex;align-items:center;gap:6px;width:100%;margin:0;padding:8px 0;border:0;background:none;
    font-family:'Montserrat',sans-serif;font-size:14px;color:#4a4a4a;cursor:pointer;text-align:left;
}
.comparador-barra-contador{color:#8a8a8a;font-weight:400;}
.comparador-barra-flecha{margin-left:auto;font-size:10px;color:#8a8a8a;}
.comparador-barra.plegada .comparador-barra-contenido{display:none;}
.comparador-barra-contenido{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding-bottom:12px;}
.comparador-barra-lista{display:flex;flex:1 1 auto;gap:10px;margin:0;padding:0;list-style:none;min-width:0;}
.comparador-barra-item{
    position:relative;display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;max-width:230px;height:56px;
    padding:4px 26px 4px 4px;border:1px solid #e0e0e0;border-radius:4px;box-sizing:border-box;background:#fff;
}
.comparador-barra-item img{flex:0 0 auto;width:46px;height:46px;object-fit:contain;}
.comparador-barra-nombre{
    font-size:12px;line-height:15px;color:#575756;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.comparador-barra-quitar{
    position:absolute;top:2px;right:2px;width:22px;height:22px;margin:0;padding:0;border:0;border-radius:50%;
    background:none;color:#8a8a8a;font-size:18px;line-height:20px;cursor:pointer;
}
.comparador-barra-quitar:hover{background:#f0f0f0;color:#4a4a4a;}
.comparador-barra-item.vacio{justify-content:center;padding:4px;border-style:dashed;background:#fafafa;}
.comparador-barra-hueco{font-size:20px;color:#c4c4c4;}
.comparador-barra-acciones{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.comparador-barra-comparar{
    display:inline-block;padding:10px 20px;border-radius:3px;background:currentColor;
    font-family:'Montserrat',sans-serif;font-size:14px;text-decoration:none !important;cursor:pointer;
}
.comparador-barra-comparar span{color:#fff;}
.comparador-barra-comparar:hover{opacity:0.88;}
.comparador-barra-comparar.deshabilitado{opacity:0.4;cursor:not-allowed;}
.comparador-barra-vaciar{margin:0;padding:6px 4px;border:0;background:none;font-family:'Lato',sans-serif;font-size:13px;color:#8a8a8a;text-decoration:underline;cursor:pointer;}
.comparador-barra-vaciar:hover{color:#4a4a4a;}
.comparador-barra-mensaje{display:none;flex:1 1 100%;margin:0;padding:8px 12px;border-radius:3px;background:#fff4e5;color:#8a5300;font-size:13px;}
.comparador-barra-mensaje.visible{display:block;}

@media (max-width:768px){
    body.con-comparador{padding-bottom:150px;}
    .comparador-barra-interior{padding:0 10px;}
    .comparador-barra-lista{gap:6px;flex:1 1 100%;}
    .comparador-barra-item{justify-content:center;height:52px;padding:3px;}
    .comparador-barra-item img{width:44px;height:44px;}
    .comparador-barra-nombre{display:none;}
    .comparador-barra-quitar{top:-8px;right:-8px;background:#fff;border:1px solid #d0d0d0;width:20px;height:20px;font-size:15px;line-height:17px;}
    .comparador-barra-acciones{flex:1 1 100%;justify-content:space-between;}
}

/* ---------- Página /comparador ---------- */
#comparador-pagina{margin:10px 0 30px;font-family:'Lato',sans-serif;color:#575756;}
.comparador-cabecera{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-bottom:15px;}
.comparador-acciones{display:flex;align-items:center;flex-wrap:wrap;gap:18px;font-size:14px;}
.comparador-diferencias{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer;font-weight:400;}
.comparador-vaciar{margin:0;padding:0;border:0;background:none;font-size:14px;color:#8a8a8a;text-decoration:underline;cursor:pointer;}
.comparador-vaciar:hover{color:#4a4a4a;}
.comparador-aviso{margin:10px 0 20px;padding:14px 16px;border:1px solid #e0e0e0;border-radius:3px;background:#fafafa;font-size:15px;}
.comparador-pie{margin-top:12px;font-size:13px;color:#8a8a8a;}

.comparador-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e0e0e0;}
.comparador-tabla{width:100%;table-layout:fixed;border-collapse:collapse;background:#fff;}
.comparador-tabla td, .comparador-tabla th{padding:10px 12px;border-bottom:1px solid #ececec;vertical-align:top;text-align:left;font-size:14px;line-height:1.45;word-wrap:break-word;}
.comparador-tabla .comparador-etiqueta{
    position:sticky;left:0;z-index:2;width:110px;box-sizing:border-box;padding-left:10px !important;padding-right:6px !important;
    background:#f7f7f7;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:400;color:#4a4a4a;
}
.comparador-tabla tbody tr:nth-child(even) td{background:#fcfcfc;}
.comparador-tabla tbody tr:hover td{background:#f5f5f5;}
.comparador-sin-dato{color:#c4c4c4;}
.comparador-descripcion{
    display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;
    font-size:13px;color:#6b6969;
}
.comparador-texto-largo.abierto .comparador-descripcion{display:block;-webkit-line-clamp:unset;overflow:visible;}
.comparador-ver-mas{
    display:inline-block;margin:6px 0 0;padding:0;border:0;background:none;
    font-family:'Lato',sans-serif;font-size:13px;color:#4a4a4a;text-decoration:underline;cursor:pointer;
}
.comparador-ver-mas[hidden]{display:none;}
.comparador-ver-mas:hover{color:#000;}
.solo-diferencias .fila-igual{display:none;}

/* Tarjeta de producto dentro de la tabla: la de los listados, sin alto fijo ni flotado */
.comparador-producto{position:relative;}
.comparador-tabla .product{float:none;width:auto !important;height:auto;min-height:0;margin:0;padding-bottom:0;border:0;}
/* Sobra en la cabecera: la referencia ya tiene su fila, "Detalles" ya lo hacen imagen y nombre,
   y el alto mínimo del nombre solo tiene sentido en la cuadrícula */
.comparador-tabla .ref-wrapper, .comparador-tabla .detalles{display:none;}
/* Las etiquetas "Envío gratis" y "Dto. cantidad" de la imagen van como filas de la tabla */
.comparador-tabla .sprite-icono-envio-gratis-ficha-producto-small,
.comparador-tabla .icon-envio-gratis-ficha-producto,
.comparador-tabla .img-dto-cantidad{display:none !important;}
.comparador-tabla .name-product-container{min-height:0;height:auto;margin-bottom:0;padding-bottom:10px;border-bottom:0;}
.comparador-tabla .name-product{height:auto;}
.comparador-tabla .fam-extra:empty{display:none;}
.comparador-tabla .name-product a{color:inherit;text-decoration:none;}
.comparador-tabla .name-product a:hover{text-decoration:underline;}
.comparador-tabla .compra-producto-container{height:auto;margin-bottom:0;}
/* El precio va en su fila: en la tarjeta solo queda "Añadir", centrado */
.comparador-tabla .product .precio{display:none;}
.comparador-tabla .product .button-compra-container-familia{float:none;padding-top:8px;text-align:center;}
.comparador-fila-precio .numero-precio{width:auto;margin:0;font-family:'Montserrat',sans-serif;font-size:18px;color:#4a4a4a;}

@media (max-width:768px){
    .comparador-tabla .comparador-etiqueta{width:100px;font-size:12px;}
}