/** * Componente: Marca Pasos (Step Indicator) * * Sistema de indicador visual de pasos para formularios multi-etapa * * @author Valora.vip * @version 1.0.0 * * USO: * 1. Incluir este CSS en el : * 2. Incluir marcaPasos.php con: * 3. Llamar la función: // (paso actual, total de pasos) */ /* Contenedor principal del marca pasos */ .steps-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin-bottom: 25px !important; gap: 8px !important; background: white !important; padding: 20px 40px !important; border-radius: 15px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; } /* Círculo de cada paso */ .step { width: 45px !important; height: 45px !important; border-radius: 50% !important; background: #e0e0e0 !important; color: #757575 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: 20px !important; line-height: 1 !important; text-align: center !important; transition: all 0.3s ease !important; } /* Línea conectora entre pasos */ .step-line { width: 70px !important; height: 4px !important; background: #e0e0e0 !important; flex-shrink: 0 !important; transition: all 0.3s ease !important; } /* Estado: Paso activo (actual) */ .step.active { background: linear-gradient(135deg, #e91e63, #ff4081) !important; color: white !important; box-shadow: 0 6px 15px rgba(233, 30, 99, 0.5) !important; transform: scale(1.15) !important; } /* Estado: Paso completado */ .step.completed { background: linear-gradient(135deg, #4caf50, #66bb6a) !important; color: white !important; } /* Línea activa (conecta paso completado con activo) */ .step-line.active { background: linear-gradient(90deg, #4caf50, #e91e63) !important; } /* Línea completada (conecta pasos completados) */ .step-line.completed { background: linear-gradient(90deg, #4caf50, #66bb6a) !important; } /* Responsive: Tablets */ @media (max-width: 768px) { .steps-container { gap: 6px !important; padding: 15px !important; } .step { width: 38px !important; height: 38px !important; font-size: 18px !important; } .step-line { width: 50px !important; } } /* Responsive: Móviles */ @media (max-width: 480px) { .steps-container { gap: 4px !important; padding: 12px !important; } .step { width: 32px !important; height: 32px !important; font-size: 16px !important; } .step-line { width: 35px !important; height: 3px !important; } }