@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}
.thead-small th, .thead-small td {
    font-size: 0.8rem !important;
}

.text-xs {
    font-size: 0.7rem;
}

/*Barra de pasos*/
.progress-steps {
            width: 100%;
            margin: 20px 0;
        }
        
        .step-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            position: relative;
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-bottom: 8px;
            z-index: 2;
            position: relative;
        }
        
        .step-label {
            font-size: 0.875rem;
            text-align: center;
            font-weight: 500;
        }
        
        .step-line {
            height: 3px;
            flex: 1;
            margin: 0 10px;
            border-radius: 2px;
            margin-top: -20px;
            z-index: 1;
        }
        
        /* Estados de los pasos */
        .step.completed .step-number {
            background-color: #28a745;
            color: white;
        }
        
        .step.completed .step-label {
            color: #28a745;
            font-weight: 600;
        }
        
        .step.active .step-number {
            background-color: #007bff;
            color: white;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
        }
        
        .step.active .step-label {
            color: #007bff;
            font-weight: 600;
        }
        
        .step.pending .step-number {
            background-color: #e9ecef;
            color: #6c757d;
            border: 2px solid #dee2e6;
        }
        
        .step.pending .step-label {
            color: #6c757d;
        }
        
        .step-line.completed {
            background-color: #28a745;
        }
        
        .step-line:not(.completed) {
            background-color: #dee2e6;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .step-label {
                font-size: 0.75rem;
            }
            
            .step-number {
                width: 35px;
                height: 35px;
            }
        }