/* ==========================
   STATUS BADGES (Principal)
========================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: all var(--transition-fast, 150ms);
}

/* Punto indicador antes del texto */
.status-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}

/* ==========================
   VARIANTES DE ESTADO
========================== */

/* Pagado / Success */
.status-pagado,
.status-success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.status-pagado::before,
.status-success::before {
    background-color: #10b981;
    box-shadow: 0 0 0 2px #d1fae5;
}

.status-pagado:hover,
.status-success:hover {
    background-color: #a7f3d0;
}

/* Pendiente / Danger */
.status-pendiente,
.status-danger {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-pendiente::before,
.status-danger::before {
    background-color: #ef4444;
    box-shadow: 0 0 0 2px #fee2e2;
}

.status-pendiente:hover,
.status-danger:hover {
    background-color: #fecaca;
}

/* Parcial / Warning */
.status-parcial,
.status-warning {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.status-parcial::before,
.status-warning::before {
    background-color: #f59e0b;
    box-shadow: 0 0 0 2px #fef3c7;
}

.status-parcial:hover,
.status-warning:hover {
    background-color: #fde68a;
}

/* Info */
.status-info {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.status-info::before {
    background-color: #3b82f6;
    box-shadow: 0 0 0 2px #dbeafe;
}

.status-info:hover {
    background-color: #bfdbfe;
}

/* Neutral / Inactivo */
.status-neutral,
.status-inactive {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.status-neutral::before,
.status-inactive::before {
    background-color: #64748b;
    box-shadow: 0 0 0 2px #f1f5f9;
}

.status-neutral:hover,
.status-inactive:hover {
    background-color: #e2e8f0;
}

/* ==========================
   AUDIT ID BADGE
========================== */

.audit-id {
    display: inline-block;
    padding: 4px 10px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid #e2e8f0;
    font-family: monospace;
}

/* ==========================
   BADGE GENÉRICO
========================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-primary {
    background-color: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.badge-secondary {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.badge-success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.badge-warning {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.badge-info {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* ==========================
   BADGE CON ICONO
========================== */

.badge-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.badge-icon::before {
    font-size: 1rem;
}

/* ==========================
   REGISTRO INFO (Auditoría)
========================== */

.registro-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.registro-numero {
    font-weight: 700;
    color: var(--primary, #6366f1);
    font-size: 0.9rem;
}

.registro-nombre {
    color: var(--text-secondary, #64748b);
    font-size: 0.85rem;
}

/* ==========================
   USER INFO
========================== */

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-icon {
    font-size: 1.2rem;
}

/* ==========================
   FECHA INFO
========================== */

.fecha-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fecha {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    font-size: 0.9rem;
}

.hora {
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
}

/* ==========================
   AUDIT LEGEND
========================== */

.audit-legend {
    margin-top: 32px;
    padding: 20px;
    background: #f8fafc;
    border-radius: var(--radius-md, 10px);
    border: 1px solid #e2e8f0;
}

.audit-legend h4 {
    margin: 0 0 16px 0;
    color: var(--text-primary, #0f172a);
    font-size: 1rem;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary, #64748b);
}

/* ==========================
   RESPONSIVE
========================== */
@media screen and (max-width: 768px) {
    .status-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .status-badge::before {
        width: 5px;
        height: 5px;
        margin-right: 5px;
    }

    .registro-info {
        gap: 2px;
    }

    .registro-numero {
        font-size: 0.85rem;
    }

    .registro-nombre {
        font-size: 0.8rem;
    }

    .fecha-info {
        align-items: flex-end;
    }

    .audit-legend {
        padding: 16px;
    }

    .legend-items {
        flex-direction: column;
        gap: 12px;
    }

    .badge {
        font-size: 0.75rem;
        padding: 3px 8px;
    }
}