/* ==========================================================================
   Módulo Comisionistas Mercantiles EPIX — Estilos CSS
   Versión: 1.0 — 2026-10-18
   Descripción: Estilos para la pestaña de comisionista, checklist de expediente
                y estados visuales del módulo.
   ========================================================================== */

/* ── Badge de estados ─────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.badge.status1 {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.badge.status4 {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
}

.badge.status2 {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #fd7e14;
}

.badge.status5 {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}

.badge.badge-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
}

.badge.badge-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

/* ── Barra de progreso del expediente ─────────────────────────────────────── */
.progress {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
    height: 20px;
    background-color: #f5f5f5;
}

/* ── Tabla del expediente ─────────────────────────────────────────────────── */
#epixcomisiones-tab .tableforfield td {
    padding: 6px 10px;
}

#epixcomisiones-tab .titlefieldmiddle {
    width: 220px;
    color: #555;
    font-weight: 600;
}

/* ── Panel de checklist documental ───────────────────────────────────────── */
#epixcomisiones-tab .fa-check-circle.green {
    color: #28a745;
}

#epixcomisiones-tab .fa-times-circle.error {
    color: #dc3545;
}

/* ── Input de tasa en línea ───────────────────────────────────────────────── */
#epixcomisiones-tab input[name="comision_tasa"] {
    width: 80px !important;
    text-align: right;
}