/* =============================================================================
   componentes/comparador.css — Comparador de productos
   -----------------------------------------------------------------------------
   Todo lo del comparador en un sitio:
     - Botón "Comparar"            componentes/_boton-comparar.php
     - Barra flotante inferior     componentes/_barra-comparador.php
     - Tabla comparativa           comparador/tabla.php  — se usa en la página
       /comparador Y dentro del modal (#ss-cmp-modal, layout.php), que la carga
       por AJAX en cualquier página: por eso es componente global.
   ============================================================================= */

/* ---------- BOTÓN COMPARAR ---------- */
.ss-cmp-btn { background:none; border:0; padding:.15rem .4rem; font-size:.78rem; font-weight:600;
              color:#8a9199; border-radius:999px; cursor:pointer; transition:color .15s ease, background .15s ease; }
.ss-cmp-btn:hover { color:var(--ss-first-color); background:rgba(0,0,0,.04); }
.ss-cmp-btn.activo { color:#fff; background:var(--ss-first-color); }
.ss-cmp-btn:disabled { opacity:.5; cursor:default; }
.ss-cmp-btn i { margin-right:.3rem; }
/* En la ficha, comparar es solo icono (ver .ss-accion en vistas/catalogo/producto.css): sin
   margen a la derecha. */
.ss-cmp-ficha i { margin-right:0; }
/* Meneo al rechazar el alta por comparativa llena. */
@keyframes ssCmpMenea { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.ss-cmp-btn.menea { animation:ssCmpMenea .28s ease 2; }
/* En la tarjeta, el botón se coloca junto al corazón: ver .ss-acciones-card en item-producto.css. */

@media (prefers-reduced-motion: reduce) {
    .ss-cmp-btn, .ss-cmp-btn.menea { transition:none; animation:none; }
}

/* ---------- BARRA FLOTANTE ---------- */
#ss-cmp-barra { position:fixed; left:0; right:0; bottom:0; z-index:1040; color:#fff;
                background:#212529; box-shadow:0 -2px 12px rgba(0,0,0,.25); }
#ss-cmp-barra.d-none { display:none!important; }
/* La barra es fixed: sin este hueco taparía la última fila / el paginador. */
body:has(#ss-cmp-barra:not(.d-none)) { padding-bottom:4.5rem; }

/* ---------- TABLA COMPARATIVA ---------- */
/* La tabla scrollea dentro de su caja; la página nunca scrollea en horizontal. */
.tabla-comparativa-wrap { overflow-x: auto; }

/* table-layout:fixed reparte el ancho A PARTES IGUALES entre las columnas de producto.
   Con el reparto automático (el de por defecto), la columna cuyo texto fuera más largo
   —normalmente la lista de acabados— se ensanchaba, y la foto de ESE producto quedaba
   desplazada respecto a las de al lado: era la mitad del descuadre de la cabecera. */
.tabla-comparativa { min-width: 640px; table-layout: fixed; }
.tabla-comparativa td, .tabla-comparativa thead th { overflow-wrap: anywhere; }

/* Primera columna fija al hacer scroll horizontal, esquina del thead incluida. */
.tabla-comparativa th[scope="row"], .tabla-comparativa .col-etiqueta {
    white-space: nowrap; font-weight: 600; color: #495057;
    position: sticky; left: 0; background: var(--bs-body-bg); z-index: 2; }
.tabla-comparativa .col-etiqueta { width: 12rem; }

/* Cabecera de producto. El botón de quitar iba con .float-end, y un float ACORTA la línea
   del contenido que va detrás: la foto se centraba dentro de ese ancho recortado y salía
   corrida hacia la izquierda. Fuera del flujo con position:absolute y deja de estorbar
   (esa era la otra mitad del descuadre). */
.tabla-comparativa thead th[scope="col"] { position: relative; vertical-align: top; }
.tabla-comparativa .cmp-quitar { position: absolute; top: .15rem; right: .3rem; z-index: 3; line-height: 1; }

/* Caja fija para TODAS las fotos: mismo alto y mismo eje tengan la proporción que tengan.
   object-fit:contain necesita un alto CONCRETO para hacer algo; con el height:auto que
   traía .img-fluid no se aplicaba y cada foto caía a una altura distinta. */
.tabla-comparativa .cmp-foto { display: block; width: 100%; height: 110px;
    object-fit: contain; margin-bottom: .5rem; }
.tabla-comparativa .cmp-premio { max-height: 34px; }

.tabla-comparativa tbody tr:nth-child(odd) td { background: rgba(0,0,0,.02); }

/* Realce de la fila bajo el cursor: con cuatro columnas es fácil perder el renglón al
   cruzar la tabla. Va con td/th explícitos (no con `> *`) porque tiene que ganarle en
   especificidad a la fila cebra y al fondo opaco de la columna fija. */
.tabla-comparativa tbody td, .tabla-comparativa tbody th[scope="row"] {
    transition: background-color .12s ease; }
.tabla-comparativa tbody tr:hover > td, .tabla-comparativa tbody tr:hover > th {
    background: rgba(0,0,0,.055);
    background: color-mix(in srgb, var(--ss-first-color) 8%, transparent); }

/* HUECO PARA AÑADIR ("+"). Es una columna más de la tabla mientras quede sitio, para que se
   lea como "aquí cabe otro" y no como un botón suelto. El borde discontinuo es lo que la
   distingue de las columnas con producto. */
.tabla-comparativa .cmp-hueco { background: transparent !important; }
.tabla-comparativa thead .cmp-hueco { vertical-align: top; }
.tabla-comparativa .cmp-anadir {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 9.5rem; padding: .75rem .5rem;
    border: 2px dashed #ced4da; border-radius: .75rem;
    color: #6c757d; text-decoration: none; font-weight: 500;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.tabla-comparativa .cmp-anadir:hover, .tabla-comparativa .cmp-anadir:focus-visible {
    border-color: var(--ss-first-color); color: var(--ss-first-color);
    background: color-mix(in srgb, var(--ss-first-color) 5%, transparent); }
.tabla-comparativa .cmp-anadir-mas { font-size: 2rem; line-height: 1; margin-bottom: .35rem; }

/* ---------- MODAL ---------- */
/* El modal del comparador va a lo ancho: dentro, la tabla no necesita el mínimo de la
   página (el diálogo ya scrollea) pero sí conviene que no se estruje con 4 columnas. */
#ss-cmp-modal .modal-body { padding-top: .5rem; }
#ss-cmp-modal .tabla-comparativa { min-width: 560px; }

/* Características en modal: el HTML viene del gestor y suele traer tablas e imágenes con
   anchos fijos que se salen del diálogo. */
.cmp-caract-cuerpo img { max-width: 100%; height: auto; }
.cmp-caract-cuerpo table { width: 100%; }