/* ============================================================
 *  IGSS — Page: Proveedores (Convocatorias de Adquisiciones)
 *  assets/css/06_pages/proveedores.css
 *  Depende de: app.css (tokens + Bootstrap 5)
 * ============================================================ */

/* ── Contenedor ─────────────────────────────────────────────── */
.igss-prov-container {
    padding-top: var(--igss-space-6);
    padding-bottom: var(--igss-section-y);
}

/* ── Cards de sección ───────────────────────────────────────── */
.igss-prov-container .card {
    border-radius: var(--igss-radius-lg, 12px);
}

/* ── Filtro de años: botones ────────────────────────────────── */
.igss-prov-container .btn-sm {
    font-size: .82rem;
    font-weight: var(--igss-weight-semibold);
}

/* ── Card RGAE ──────────────────────────────────────────────── */
.igss-prov-rgae-card h3 {
    color: var(--igss-color-primary-dark);
    font-weight: var(--igss-weight-bold);
}

/* ── Tabla de eventos ───────────────────────────────────────── */
.igss-prov-table {
    font-size: .9rem;
    margin: 0;
}

.igss-prov-table thead th {
    font-size: .75rem;
    font-weight: var(--igss-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--igss-color-text-muted);
    border-bottom: 2px solid #dee2e6;
    vertical-align: middle;
    white-space: nowrap;
    background-color: var(--igss-color-bg-soft);
}

/* Filas normales */
.igss-prov-table tbody tr {
    vertical-align: middle;
    transition: background-color .1s;
}

.igss-prov-table tbody tr:hover {
    background-color: rgba(38, 107, 146, .04);
}

/* Fila de mes — separador visual */
.igss-prov-month-row th {
    background-color: color-mix(in srgb, var(--igss-color-primary) 8%, white);
    color: var(--igss-color-primary-dark);
    font-size: .75rem;
    font-weight: var(--igss-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-block: var(--igss-space-2);
    border-top: 1px solid #dee2e6;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .igss-prov-month-row th {
        background-color: var(--igss-color-bg-soft);
    }
}

/* ── Columna de acciones — ancho fijo ───────────────────────── */
.igss-prov-table .igss-prov-col-actions {
    width: 160px;
    white-space: nowrap;
}

/* ── Nombre / Descripción ───────────────────────────────────── */
.igss-prov-table .fw-semibold {
    color: var(--igss-color-text);
    line-height: 1.4;
}

/* ── Badges de tipo ─────────────────────────────────────────── */
.igss-prov-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: var(--igss-weight-semibold);
    padding: .25em .65em;
    border-radius: 4px;
    letter-spacing: .03em;
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
}

.igss-prov-badge--cotizacion {
    background-color: var(--igss-color-accent);
    color: #fff;
}

.igss-prov-badge--licitacion {
    background-color: var(--igss-color-navy);
    color: #fff;
}

.igss-prov-badge--otro {
    background-color: var(--igss-color-text-muted);
    color: #fff;
}

/* ── Dot de novedad — mismo efecto ping que .igss-dot (home.css),
   con su propia caja porque este va inline junto a los badges,
   no como overlay absoluto sobre una card ────────────────────── */
.prov-new-dot {
    display: inline-block;
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--igss-danger);
    flex-shrink: 0;
    vertical-align: middle;
}

.prov-new-dot::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background-color: var(--igss-danger);
    animation: igss-prov-dot-ping 1.6s ease-out infinite;
}

@keyframes igss-prov-dot-ping {
    0%        { transform: scale(1);   opacity: .75; }
    75%, 100% { transform: scale(2.4); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
    .prov-new-dot::after { animation: none; }
}

/* ── Botones de acción por fila ─────────────────────────────── */
.igss-prov-table .btn-outline-primary {
    font-size: .8rem;
    padding: .3rem .65rem;
}

.igss-prov-table .btn-primary {
    font-size: .8rem;
    padding: .3rem .65rem;
}

/* ── Estado vacío ───────────────────────────────────────────── */
.igss-prov-table .igss-prov-empty td {
    padding: 48px 24px;
    color: var(--igss-color-text-muted);
    font-size: .9rem;
}

/* ── Pie de tabla ───────────────────────────────────────────── */
.igss-prov-table-footer {
    color: var(--igss-color-text-muted);
    font-size: .82rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .igss-prov-container {
        padding-top: var(--igss-space-4);
    }

    /* En móvil el botón "Ver" (desktop-only) ya está oculto con d-none d-sm-inline-flex */
    /* Solo queda Descargar, que ocupa todo el ancho gracias a d-grid */

    .igss-prov-table .badge {
        font-size: .65rem;
    }
}

@media (max-width: 767.98px) {
    .igss-prov-table thead th:last-child {
        width: 90px;
    }
}