/* Contenedor principal de la orden */
        .order-main-container {
            max-width: 100%;
            margin: 10px auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .order-header {
            width: 100%;
            height: 150px; /* Altura de la cabecera */
            background-size: cover; /* Cubre todo el área sin distorsionar */
            background-position: center; /* Centra la imagen de fondo */
            background-repeat: no-repeat;
            position: relative; /* Necesario para posicionar el overlay y la información del cliente */
            display: flex;
            justify-content: center; /* Centra horizontalmente el contenido */
            align-items: flex-end; /* Alinea el contenido (foto y nombre) en la parte inferior */
            padding-bottom: 20px; /* Espacio desde la parte inferior */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra sutil */
        }

        .header-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4); /* Capa oscura semitransparente */
            z-index: 1; /* Asegura que esté por encima de la imagen de fondo pero debajo del contenido */
        }

        .client-info {
            position: relative; /* Para que el z-index funcione en relación al header-overlay */
            z-index: 1; /* Asegura que la información del cliente esté por encima del overlay */
            text-align: center;
            color: white; /* Color del texto */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .client-photo {
            width: 80px; /* Tamaño de la foto de perfil */
            height: 80px;
            border-radius: 50%; /* Hace la imagen circular */
            border: 4px solid white; /* Borde blanco alrededor de la foto */
            object-fit: cover; /* Asegura que la imagen cubra el círculo sin distorsionarse */
            margin-bottom: 10px; /* Espacio entre la foto y el nombre */
        }

        .client-name {
            margin: 0;
            font-size: 1.8em; /* Tamaño del nombre */
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra para mejor legibilidad */
        }

        /* Estilos de ejemplo para el resto del contenido si lo necesitas */
        .content-section {
            padding: 20px;
            background-color: white;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        /* --- ESTILOS PARA EL PROGRESS TRACKER --- */
        .progress-tracker-container {
            background-color: #ffffff;
            border-radius: 8px; /* Mantener si el contenedor es un módulo independiente */
            box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Mantener si es independiente */
            max-width: 100%; /* Centrarlo */
            margin: 15px auto;
            padding: 15px 0; /* Padding superior/inferior para el contenido */
            overflow: hidden; /* Oculta el contenido que se desborda y permite scrollbar */
        }

        .progress-steps-wrapper {
            display: flex;
            justify-content: space-between; /* Distribuye los pasos uniformemente */
            align-items: center;
            padding: 0 20px; /* Padding lateral para los pasos */

            /* CRÍTICO: Configuración para el scroll horizontal en móvil */
            overflow-x: auto; /* Permite el scroll horizontal */
            -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: #ccc transparent; /* Firefox */
            white-space: nowrap; /* Evita que los pasos se envuelvan */
        }

        /* Estilos del scrollbar para WebKit */
        .progress-steps-wrapper::-webkit-scrollbar {
            height: 6px;
        }
        .progress-steps-wrapper::-webkit-scrollbar-track {
            background: transparent;
        }
        .progress-steps-wrapper::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 10px;
            border: 1px solid transparent;
        }

        /* Estilos para el elemento <a> de cada paso */
        a.progress-step {
            text-decoration: none; /* Quitar subrayado del enlace */
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            flex-shrink: 0; /* Evita que los pasos se encojan */
            padding: 0 12px; /* Espacio entre los círculos/etiquetas de los pasos */
            cursor: pointer; /* Indica que es clickeable por defecto */
            transition: transform 0.2s ease; /* Efecto hover */
            color: inherit; /* Hereda el color base de la tipografía */
        }

        a.progress-step:hover {
            transform: translateY(-3px); /* Efecto de elevación al pasar el ratón */
        }

        /* Estilo del círculo numerado */
        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffc107; /* Color por defecto (amarillo) */
            color: #fff; /* Número blanco */
            font-weight: bold;
            font-size: 1.2em;
            border: 2px solid #ffc107;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: background-color 0.6s ease, border-color 0.6s ease, transform 0.6s ease, box-shadow 0.6s ease; /* Transiciones para animación */
        }

        /* Estilo de la etiqueta de texto debajo del círculo */
        .step-label {
            margin-top: 8px;
            font-size: 0.85em;
            color: #666;
            text-align: center;
            white-space: nowrap; /* CRÍTICO: Evita que el texto de la etiqueta se rompa */
            transition: color 0.6s ease;
        }

        /* Estilo de la línea de conexión entre pasos */
        .progress-line {
            flex-grow: 1; /* La línea ocupa el espacio entre los círculos */
            height: 2px;
            background-color: #e0e0e0; /* Color de la línea inactiva */
            margin: 0 -12px; /* Ajusta este margen para que la línea se conecte bien con los círculos */
            transition: background-color 0.6s ease;
        }

        /* --- ESTADOS DE LOS PASOS (Clases que controlarás desde el HTML) --- */

        /* Paso Completado */
        a.progress-step.completed .step-circle {
            background-color: #28a745; /* Verde */
            border-color: #28a745;
            transform: scale(1.05); /* Ligeramente más grande */
            box-shadow: 0 2px 6px rgba(40,167,69,0.3); /* Sombra para el verde */
        }
        a.progress-step.completed .step-label {
            color: #333;
            font-weight: bold;
        }

        /* Paso Actual (el "current") */
        a.progress-step.current {
            cursor: default; /* Cursor normal para indicar que no es clicable */
            pointer-events: none; /* CRÍTICO: Deshabilita completamente los eventos de ratón */
            transform: none !important; /* Asegura que no haya animación de hover en el actual */
        }
        a.progress-step.current .step-circle {
            background-color: #007bff; /* Azul vibrante */
            border-color: #007bff;
            transform: scale(1.15); /* Más grande para el actual */
            box-shadow: 0 4px 10px rgba(0,123,255,0.4); /* Sombra más pronunciada para el actual */
            animation: pulse-current 1.5s infinite alternate ease-in-out; /* Animación de pulso */
        }
        a.progress-step.current .step-label {
            color: #007bff;
            font-weight: bold;
        }

        /* Líneas de progreso activas (se aplica a las líneas DESPUÉS de un paso completado) */
        a.progress-step.completed ~ .progress-line {
            background-color: #28a745; /* Línea verde para pasos completados */
        }
        a.progress-step.current ~ .progress-line {
            background-color: #007bff; /* Línea azul para el progreso hacia el paso actual */
        }

        /* Keyframes para la animación de "pulso" */
        @keyframes pulse-current {
            from { transform: scale(1.15); box-shadow: 0 4px 10px rgba(0,123,255,0.4); }
            to { transform: scale(1.12); box-shadow: 0 2px 6px rgba(0,123,255,0.2); }
        }

        /* --- Media Queries para Responsividad (Ajustes finos) --- */
        @media (max-width: 768px) {
            .order-header {
                font-size: 1.3em;
                padding: 12px 15px;
            }

            .top-tabs {
                padding: 0 15px 8px 15px;
            }
            .top-tab-button {
                font-size: 1em;
                padding: 8px 12px;
            }
            .horizontal-scroll-container {
                padding: 0 15px 12px 15px;
                gap: 10px;
            }
            .scroll-item {
                padding: 6px 10px;
                font-size: 0.85em;
            }
            .scroll-item i {
                font-size: 1.3em;
                margin-bottom: 3px;
            }

            .progress-tracker-container {
                border-radius: 0; /* Quitar bordes redondeados si ocupa todo el ancho en móvil */
                margin: 0; /* Ocupa todo el ancho */
                padding: 15px 0; /* Reducir padding vertical */
            }

            .progress-steps-wrapper {
                padding: 0 10px; /* Reducir padding lateral para el scroll */
                gap: 5px; /* Espacio entre pasos en móvil, podría ser necesario ajustar */
            }

            a.progress-step {
                padding: 0 8px; /* Ajustar padding individual del paso */
            }

            .step-circle {
                width: 35px; /* Ligeramente más pequeños los círculos */
                height: 35px;
                font-size: 1.1em;
            }

            .step-label {
                font-size: 0.8em; /* Texto de la etiqueta un poco más pequeño */
                /* Si el texto aún se superpone en teléfonos muy pequeños, puedes considerar ocultarlo: */
                /* display: none; */
            }

            .progress-line {
                margin: 0 -8px; /* Ajustar margen de la línea para conectarse */
            }
        }

        @media (max-width: 480px) {
            .order-header {
                font-size: 1.1em;
                padding: 10px 10px;
                margin-bottom: 8px;
            }

            .top-tabs {
                padding: 0 15px 6px 15px; /* Ajuste para móvil */
                margin-bottom: 8px; /* Ajuste para móvil */
            }
            .top-tab-button {
                font-size: 0.9em;
                padding: 6px 10px;
            }
            .horizontal-scroll-container {
               padding: 0 15px 8px 15px; /* Ajuste para móvil */
                gap: 8px;
            }
            .scroll-item {
                padding: 5px 8px;
                font-size: 0.8em;
            }
            .scroll-item i {
                font-size: 1.2em;
            }

            .progress-tracker-container {
                margin: 10px auto; /* Ajuste para móvil */
                padding: 10px 0; /* Ajuste para móvil */
            }
            .progress-steps-wrapper {
                padding: 0 5px;
                gap: 2px; /* Mínimo espacio para evitar superposición */
            }
            a.progress-step {
                padding: 0 5px; /* Mínimo padding */
            }
            .step-circle {
                width: 30px;
                height: 30px;
                font-size: 1em;
            }
            .step-label {
                font-size: 0.7em;
                /* Podrías añadir un media query para display: none; solo en pantallas muy estrechas si es crítico */
            }
            .progress-line {
                margin: 0 -5px; /* Mínimo margen para la línea */
            }
        }