/** * 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: auto !important; max-width: 320px !important; margin: 0 auto 30px auto !important; gap: 8px !important; padding: 20px 15px !important; background: transparent !important; box-sizing: border-box !important; } /* Círculo de cada paso */ .step { width: 44px !important; height: 44px !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: 14px !important; line-height: 1 !important; text-align: center !important; transition: all 0.3s ease !important; flex-shrink: 0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } /* Línea conectora entre pasos */ .step-line { width: 50px !important; height: 4px !important; background: #e0e0e0 !important; flex-shrink: 0 !important; transition: all 0.3s ease !important; border-radius: 2px !important; } /* Estado: Paso activo (actual) */ .step.active { background: linear-gradient(135deg, #e91e63, #ff4081) !important; color: white !important; box-shadow: 0 4px 12px rgba(233, 30, 99, 0.4) !important; transform: scale(1.1) !important; } /* Estado: Paso completado */ .step.completed { background: linear-gradient(135deg, #4caf50, #66bb6a) !important; color: white !important; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3) !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: 8px !important; padding: 12px 15px !important; } .step { width: 42px !important; height: 42px !important; font-size: 13px !important; } .step-line { width: 45px !important; } } /* Responsive: Móviles */ @media (max-width: 480px) { .steps-container { gap: 6px !important; padding: 10px !important; } .step { width: 36px !important; height: 36px !important; font-size: 12px !important; } .step-line { width: 30px !important; height: 3px !important; } }