/* ===== Bandeja sticky ===== */
.cmp-tray{
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1030; /* acima do footer, abaixo de modal */
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -8px 24px rgba(0,0,0,.06);
}

/* esconder barra física mas manter rolagem */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { width:0; height:0; display:none; }

/* cartões grandes (como no mock) */
.cmp-card{
    position: relative;
    max-width: 342px;
    min-height: 160px;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .75rem .85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.cmp-card .cmp-remove{
    position: absolute; top: .3rem; right: .45rem;
    padding: 0; line-height: 1; font-size: 1.1rem;
}

/* mini “chips” de meta */
.cmp-chip{
    display:inline-block; padding:.125rem .4rem; font-size:.72rem;
    background:#f3f4f6; border-radius:.35rem; color:#374151;
}

/* thumb e título */
.cmp-thumb-wrap{ width:64px; height:64px; flex:0 0 64px; }
.cmp-thumb{ width:100%; height:100%; object-fit:contain; display:block; }
.cmp-thumb.ph{ background:#f3f4f6; border-radius:.25rem; }
.cmp-title-link{ font-weight: 500; }
.text-truncate-2{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}

/* feedback de selecionado para o controle no card */
.is-selected{ outline: 2px solid var(--bs-primary); outline-offset: 2px; }

.comparacao{
    color: #1A2D3B;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
}

/* Placeholder (slot vazio) – mesmo tamanho dos cards */
.cmp-slot{
    position: relative;
    min-width: 320px;
    min-height: 160px;
    background: #e9ecef;   /* cinza claro, como no print */
    border: 1px dashed #cfd4da;
    border-radius: .5rem;
    padding: .75rem .85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.cmp-slot-inner{
    width: 100%;
    height: 100%;
    background: #e9ecef;   /* cinza claro, como no print */
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cmp-slot svg { opacity: .55; }

/* mantém os cards reais e placeholders alinhados */
.cmp-card { min-width: 320px; min-height: 160px; }

/* ===== Cards do topo ===== */
.cmp-top-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 16px;
}
@media (max-width: 1200px){
    .cmp-top-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px){
    .cmp-top-grid{ grid-template-columns: 1fr; }
}

.cmp-card{
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.cmp-remove{
    position: absolute;
    top: 6px; right: 8px;
    border: 0; background: transparent;
    font-size: 18px; line-height: 1; cursor: pointer;
    color: #6b7280;
}
.cmp-remove:hover{ color:#111827; }

.cmp-thumb{ width:64px; height:64px; flex:0 0 64px; }
.cmp-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.cmp-thumb-ph{ width:100%; height:100%; background:#f3f4f6; border-radius:4px; }

.cmp-chip{
    display:inline-block; padding:.1rem .45rem; font-size:.72rem;
    background:#f3f4f6; border-radius:.35rem; color:#374151;
}
.cmp-title{
    font-weight: 600;
    min-height: 300px;
    line-height: 1.2;
}

/* ===== Tabela de comparação ===== */
.cmp-specs-wrap{
    overflow-x: auto;  /* scroll horizontal em telas pequenas */
    border-radius: 8px;
}

.cmp-specs-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #E2E4E6;
    border-radius: 8px;
    overflow: hidden;
}

.cmp-specs-table thead th{
    background:#ECF4F8;
    padding: 12px 14px;
    min-width: 235px;
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    border-bottom: 1px solid #E9EEF3;
    white-space: nowrap;
}

.spec-col-head{ width: 26%; min-width: 220px; }
.prod-col-head{ text-align: left; }

.cmp-head-thumb{ width:32px; height:32px; flex:0 0 32px; }
.cmp-head-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.cmp-head-thumb-ph{ width:100%; height:100%; background:#eef2f7; border-radius:4px; }
.cmp-head-title{ font-size: 13px; font-weight: 500; }

.cmp-specs-table th.spec-col,
.cmp-specs-table td.prod-col{
    padding: 12px 14px;
    font-size: 14px;
    color: #111111;
    border-bottom: 1px solid #E9EEF3;
}

.cmp-specs-table th.spec-col{
    font-weight: 500;
}

.cmp-specs-table td.prod-col{
    background: #F9F9F9;
}
.cmp-specs-table th{
    background: #F9F9F9;
}
.cmp-specs-table tr:nth-child(even) td.prod-col{
    background: #ECF4F8;  /* listrado suave */
}
.cmp-specs-table tr:nth-child(even) th{
    background: #ECF4F8;  /* listrado suave */
}

/* marcador de “faltante” */
.cmp-miss{
    display:inline-block;
    font-weight: 700;
    color:#9ca3af;
}

/* arredondamento do container quando há scroll */
.cmp-specs-wrap::-webkit-scrollbar{
    height: 8px;
}
.cmp-specs-wrap::-webkit-scrollbar-thumb{
    background:#e5e7eb; border-radius: 4px;
}

.text-prod{
    color: #01001C;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}
header h1{
    color: #1A2D3B;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
}

.selecionados{
    color: #1A2D3B;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
}

.btn-prod{
    font-size: 15px;
    padding: 7px;
}

.title-prod{
    min-height: 100px;
}

.btn-outline-secondary{
    border: 1px solid #000;
    color: #000
}