/* ═══════════════════════════════════════════════════════════════
   PAV · estilos de celdas de tabla
   Estos selectores los inyecta dinamicamente el modelo `Familia`
   (via `getRowDesk` / `getHeadersDesk` en Producto), asi que la
   vista no controla las clases. Aqui mantenemos SOLO los que el
   modelo realmente sigue usando — el resto del style.css viejo
   eran overrides a Bootstrap (.container, .card, .btn, .bg-dark)
   que ahora viven en pav.css con la paleta correcta.
   ═══════════════════════════════════════════════════════════════ */


/* ── Tipografia de celdas ─────────────────────────────────── */
.bold {
    font-weight: 500;
}

.text-wrap.text-large,
th.text-wrap.text-large,
td.text-wrap.text-large {
    letter-spacing: -0.5px;
    font-stretch: 50%;
    line-height: 0.85;
}


/* ── Wrapper del % de cambio dentro de cada celda de precio ── */
div.change {
    width: 100%;
    display: inline-block;
    font-weight: 800;
    line-height: 1.7;
}
div.change.border.default {
    font-weight: 500;
    border-color: #000 !important;
    font-size: 0.5rem !important;
    font-stretch: 50%;
    line-height: 1.1;
}

.default {
    background-color: #fff;
}


/* ── Cells de precio que subieron (azul) ──────────────────── */
.blue-increase    { background-color: #9CCFEE; }
.bg-blue-increase { background-color: #C7E4F5; }


/* ── Cells de precio que bajaron (verde) ──────────────────── */
.green-discount    { background-color: #00B551; color: #fff; }
.bg-green-discount { background-color: #B2E7C1; }


/* ── Precio formateado ────────────────────────────────────── */
span.price-total {
    line-height: 1rem;
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    padding-bottom: 1px;
}


/* ── Chips de color (spans dentro de descripciones) ───────── */
span.white  { background: #fff; border: 1px solid #DCDAD6; display: inline-block; padding: 0.5rem; vertical-align: middle; }
span.black  { background: #000; border: 1px solid #DCDAD6; display: inline-block; padding: 0.5rem; vertical-align: middle; }
span.blue   { background: #0076B3; color: #fff; font-weight: 600; padding: 2px; }
span.orange { background: #FF5E00; color: #fff; font-weight: 600; padding: 2px; }
span.znegro { background: #000;    color: #fff; font-weight: 600; padding: 2px; }

span.red-color {
    background: #d6433b;
    color: #fff;
    border: 1px solid #DCDAD6;
    display: inline-block;
    padding: 0.5rem 0.25rem;
    vertical-align: middle;
}

.bg_color_gris {
    background-color: #D6D4D1;
    color: #000;
}

span.text-fiero   { background-color: #FF000A; color: #fff; font-weight: 500; padding: 0 4px 2px; }
span.text-bg-black { background-color: #282525; color: #fff; font-weight: 500; padding-bottom: 2px; }