/* ============================================================
   compras.css — Sistema visual COMPARTIDO del módulo Compras
   ------------------------------------------------------------
   Se activa envolviendo la página en <div class="compras-module">.
   Es CSS global (no aislado): los selectores descendentes alcanzan
   a los componentes hijos (KPIs, tablas, modales, badges) sin ::deep.
   Todo consume los tokens de theme.css. Cero hex sueltos.
   ============================================================ */

.compras-module {
    color: var(--ui-text);
}

/* ---- Encabezados: jerarquía más ligera ---- */
.compras-module h1 {
    font-weight: 500;
    letter-spacing: -0.01em;
}

.compras-module h5 {
    font-weight: 500;
    font-size: 1.02rem;
}

.compras-module h6 {
    font-weight: 500;
}

.compras-module .text-uppercase.small {
    letter-spacing: .08em;
    font-size: .68rem;
}

/* ---- Tarjetas: un solo estilo unificado ---- */
.compras-module .card {
    background: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow .16s ease, border-color .16s ease;
}

.compras-module .card:hover {
    box-shadow: var(--ui-shadow);
    border-color: rgba(var(--ui-brand-rgb), .28);
}

.compras-module .card-body {
    padding: 1.25rem 1.35rem;
}

/* ---- KPIs (WidgetKpiIcono) ---- */
.compras-module .wh-42 {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: var(--ui-radius-sm);
}

.compras-module .card h4 {
    font-weight: 500;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    color: var(--ui-text);
}

/* ---- Botones ---- */
.compras-module .btn {
    border-radius: var(--ui-radius-sm);
    font-weight: 500;
}

.compras-module .btn-group > .btn {
    border-radius: 0;
}

.compras-module .btn-group > .btn:first-child {
    border-top-left-radius: var(--ui-radius-sm);
    border-bottom-left-radius: var(--ui-radius-sm);
}

.compras-module .btn-group > .btn:last-child {
    border-top-right-radius: var(--ui-radius-sm);
    border-bottom-right-radius: var(--ui-radius-sm);
}

/* ---- Tablas ---- */
.compras-module .table > thead > tr > th {
    background: transparent;
    white-space: nowrap;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ui-text-muted);
    border-bottom: 1px solid var(--ui-border);
}

.compras-module .table > tbody > tr > td {
    font-size: .86rem;
    vertical-align: middle;
    border-color: var(--ui-border);
}

.compras-module .table-hover > tbody > tr:hover > * {
    background: var(--ui-muted);
}

/* ---- Formularios (modales) ---- */
.compras-module .form-label {
    font-weight: 500;
    font-size: .82rem;
    color: var(--ui-text-muted);
    margin-bottom: .3rem;
}

.compras-module .form-control,
.compras-module .form-select {
    border-radius: var(--ui-radius-sm);
    border-color: var(--ui-border);
}

.compras-module .form-control:focus,
.compras-module .form-select:focus {
    border-color: rgba(var(--ui-brand-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--ui-brand-rgb), .15);
}

/* ---- Barras de progreso ---- */
.compras-module .progress {
    background: var(--ui-muted);
    border-radius: var(--ui-pill);
}

.compras-module .progress-bar {
    background: var(--ui-brand);
    border-radius: var(--ui-pill);
}

/* ---- Badges: se conservan colores del template, solo peso ---- */
.compras-module .badge {
    font-weight: 500;
}

/* ---- Modales ---- */
.compras-module .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
}