.contacto-escribenos .agenda-cita form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 5% !important;
}


/* Formulario principal más compacto */
.form_main .s_website_form {
    padding: 2% 15% !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
}

.form_main .s_website_form {
    padding: 2% 15% !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
}

/* Layout para formulario de appointment (el que dice "Nombre completo") */
.appointment .appointment-form .form-row {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    flex-direction: row !important;
}

.appointment .appointment-form .form-label {
    min-width: 120px !important;
    font-size: 16px !important;
    color: #333 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Forzar que los inputs estén al lado de los labels */
.appointment .appointment-form .form-row input,
.appointment .appointment-form .form-row select {
    flex: 1 !important;
    height: 30px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    border: none !important;
    background-color: #f4f4f4 !important;
    border-radius: 5px !important;
    outline: none !important;
    display: inline-block !important;
}

.appointment .appointment-form .form-row input,
.appointment .appointment-form .form-row select {
    flex: 1 !important;
    height: 30px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    border: none !important;
    background-color: #f4f4f4 !important;
    border-radius: 5px !important;
    outline: none !important;
}

.appointment .appointment-form .form-row input:focus,
.appointment .appointment-form .form-row select:focus {
    background-color: #f8f8f8 !important;
    border: 2px solid #E12826 !important;
    box-shadow: 0 2px 8px rgba(225, 40, 38, 0.1) !important;
}

.form_main .s_website_form form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 100% !important;
}

/* Indicador para los 3 primeros campos */
.form_main .s_website_form .campo_nombre,
.form_main .s_website_form .campo_apellido,
.form_main .s_website_form .campo_correo {
    position: relative !important;
}

.form_main .s_website_form .campo_nombre::before,
.form_main .s_website_form .campo_apellido::before,
.form_main .s_website_form .campo_correo::before {
    content: "⚠️ Campo requerido" !important;
    position: absolute !important;
    top: -25px !important;
    left: 0 !important;
    font-size: 10px !important;
    color: #E12826 !important;
    background-color: #fff !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    border: 1px solid #E12826 !important;
    z-index: 10 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.form_main .s_website_form .campo_nombre:hover::before,
.form_main .s_website_form .campo_apellido:hover::before,
.form_main .s_website_form .campo_correo:hover::before {
    opacity: 1 !important;
}

/* Campos más delgados en index */
.form_main .s_website_form input,
.form_main .s_website_form select,
.form_main .s_website_form textarea {
    height: 30px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    border: none !important;
    background-color: #f4f4f4 !important;
    border-radius: 5px !important;
    outline: none !important;
}

.form_main .s_website_form input:focus,
.form_main .s_website_form select:focus,
.form_main .s_website_form textarea:focus {
    background-color: #f8f8f8 !important;
    border: 2px solid #E12826 !important;
    box-shadow: 0 2px 8px rgba(225, 40, 38, 0.1) !important;
}

/* Labels más pequeños en index */
.form_main .s_website_form label {
    font-size: 12px !important;
    color: #7E8492 !important;
    margin-bottom: 5px !important;
    font-weight: 500 !important;
}

/* Botón centrado en index */
.form_main .s_website_form .s_website_form_submit {
    margin-top: 10px !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.form_main .s_website_form .btn {
    width: auto !important;
    min-width: 200px !important;
    margin: 0 !important;
}

.form_main .s_website_form form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 100% !important;
}

/* Campos más delgados */
.form_main .s_website_form input,
.form_main .s_website_form select,
.form_main .s_website_form textarea {
    height: 30px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    border: none !important;
    background-color: #f4f4f4 !important;
    border-radius: 5px !important;
    outline: none !important;
}

.form_main .s_website_form input:focus,
.form_main .s_website_form select:focus,
.form_main .s_website_form textarea:focus {
    background-color: #f8f8f8 !important;
    border: 2px solid #E12826 !important;
    box-shadow: 0 2px 8px rgba(225, 40, 38, 0.1) !important;
}

/* Labels más pequeños */
.form_main .s_website_form label {
    font-size: 12px !important;
    color: #7E8492 !important;
    margin-bottom: 5px !important;
    font-weight: 500 !important;
}

/* Textarea específico */
.form_main .s_website_form textarea {
    min-height: 60px !important;
    resize: vertical !important;
}

/* Botón centrado */
.form_main .s_website_form .s_website_form_submit {
    margin-top: 10px !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.form_main .s_website_form .btn {
    width: auto !important;
    min-width: 200px !important;
    margin: 0 !important;
}

/* Hacer que los campos de email y teléfono estén en la misma línea - SOBRESCRIBIR productos.css */
.contacto-escribenos .email-celular {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    justify-content: space-between !important;
}

.contacto-escribenos .email-celular>div {
    flex: 1 !important;
    min-width: 0 !important;
    /* Permite que se reduzcan */
    width: 48% !important;
}

/* Campo de nombre más compacto - SOBRESCRIBIR productos.css */
.contacto-escribenos .agenda-cita form input.nombre {
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    /* Más delgado */
    padding: 5px 10px !important;
    /* Menos padding */
}

/* Campo de provincia más compacto - SOBRESCRIBIR productos.css */
.contacto-escribenos .agenda-cita form select.direccion {
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    /* Más delgado */
    padding: 5px 10px !important;
    /* Menos padding */
}

/* Labels fuera del cuadro para nombre y provincia */
.contacto-escribenos .agenda-cita form .s_website_form_field[data-label]::before {
    content: attr(data-label);
    display: block !important;
    font-size: 12px !important;
    color: #7E8492 !important;
    margin-bottom: 5px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
}

/* Ocultar placeholders cuando hay labels */
.contacto-escribenos .agenda-cita form input.nombre::placeholder {
    color: #ccc !important;
    font-size: 12px !important;
}

.contacto-escribenos .agenda-cita form select.direccion option:first-child {
    color: #ccc !important;
}

/* Hacer que el botón quede exactamente abajo del formulario - SOBRESCRIBIR productos.css */
.contacto-escribenos .agenda-cita form .s_website_form_submit {
    margin-top: 10px !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.contacto-escribenos .agenda-cita form .agenda-cita-btn {
    width: auto !important;
    min-width: 200px !important;
    margin: 0 !important;
}

/* ===== FIXES PARA SCROLLING ===== */

/* Desactivar scroll-behavior: smooth que puede interferir */
.contacto-escribenos {
    scroll-behavior: auto !important;
}

.contacto-escribenos * {
    scroll-behavior: auto !important;
}

/* Fix global para scrolling */
html, body {
    scroll-behavior: auto !important;
}

/* Fix específico para formularios */
.appointment .appointment-form,
.form_main .s_website_form {
    scroll-behavior: auto !important;
}

.appointment .appointment-form *,
.form_main .s_website_form * {
    scroll-behavior: auto !important;
}

/* FORZAR SCROLL A FUNCIONAR */
html, body {
    scroll-behavior: auto !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Asegurar que no haya elementos que bloqueen el scroll */
.appointment,
.appointment-form,
.form_main,
.s_website_form {
    overflow: visible !important;
    position: static !important;
}

/* MENSAJES DE ERROR GRANDES Y VISIBLES */
.error-message {
    color: var(--dark-red) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    padding: 10px 15px !important;
    border: 2px solid var(--dark-red) !important;
    border-radius: 8px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 9999 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

/* Asegurar que los mensajes de error estén por encima del menú flotante de Odoo */
.error-message {
    z-index: 10000 !important;
    position: relative !important;
}

/* Campos con error */
input.error,
select.error,
textarea.error {
    border: 2px solid var(--dark-red) !important;
}

/* EXCEPCIÓN: No aplicar borde rojo a campos de interés - MEJORADO */
input[name="interest"],
input[type="radio"],
input.hidden-radio,
input[name="interest"].error,
input[type="radio"].error,
input.hidden-radio.error {
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
}

/* EXCEPCIÓN: No aplicar borde rojo al fieldset de interés */
fieldset legend.intereses,
fieldset .interest-options,
.interest-options {
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
}

/* Asegurar que los campos de interés nunca tengan bordes rojos */
input[name="interest"][style*="border"],
input[type="radio"][style*="border"],
input.hidden-radio[style*="border"] {
    border: none !important;
    background-color: transparent !important;
}

/* Prevenir interferencias de scrolling */
.appointment,
.appointment-form,
#sectionContact {
    position: relative !important;
    z-index: 1 !important;
    scroll-margin-top: 150px !important;
    /* Asegurar espacio arriba al hacer scroll */
}

/* Asegurar que los indicadores de error no interfieran con el scroll */
.field-indicator {
    position: fixed !important;
    z-index: 10000 !important;
    pointer-events: none !important;
}

/* Asegurar que el mensaje de error sea muy visible */
.main-error-message {
    position: relative !important;
    z-index: 10 !important;
    margin-bottom: 30px !important;
    border: 2px solid var(--dark-red) !important;
    color: var(--dark-red) !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 20px !important;
    border-radius: 12px !important;
    animation: pulse 2s infinite !important;
}

/* Estilo para el título Contáctanos cuando hay error (se aplica dinámicamente) */
.appointment-form-title h3.error-highlight,
.appointment-form h3.error-highlight {
    color: var(--dark-red) !important;
    border: 2px solid var(--dark-red) !important;
    animation: pulse 2s infinite !important;
}

/* Animación de pulso para campos específicos (nombre, correo, teléfono) */
.field-pulse {
    animation: fieldPulse 1.5s infinite !important;
    border: 2px solid var(--dark-red);
}

@keyframes fieldPulse {
    0% {
        transform: scale(1);
        border: 2px solid var(--dark-red);
    }

    50% {
        transform: scale(1.02);
        border: 2px solid var(--dark-red);
    }

    100% {
        transform: scale(1);
        border: 2px solid var(--dark-red);
    }
}

/* Animación de pulso para indicadores */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Estilos para mensajes rápidos */
.quick-message {
    animation: quickPulse 0.5s ease-in-out !important;
    transition: opacity 0.3s ease !important;
    margin-bottom: 8px !important;
}

/* Estilo especial para contenedor de interés cuando hay error */
.interest-options.field-pulse {
    border: 2px solid var(--dark-red) !important;
    padding: 10px !important;
}

@keyframes quickPulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.main-error-message {
    animation: pulse 2s infinite !important;
}

/* Asegurar que el formulario quepa en una sola vista */
.contacto-escribenos {
    padding: 2% 15% !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
}

.contacto-escribenos .agenda-cita form {
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* Fix para elementos que pueden interferir con el scroll */
.contacto-escribenos .agenda-cita {
    position: relative !important;
    z-index: 1 !important;
}

/* Asegurar que los campos de error sean visibles */
.contacto-escribenos .error-message {
    color: var(--dark-red) !important;
    font-size: 12px !important;
    margin-top: 5px !important;
    display: block !important;
}

/* ===== RESPONSIVE ===== */

/* Responsive para pantallas pequeñas - SOBRESCRIBIR productos.css */
@media only screen and (max-width: 768px) {
    .contacto-escribenos .email-celular {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .contacto-escribenos .email-celular>div {
        width: 100% !important;
    }

    .contacto-escribenos {
        padding: 2% 10% !important;
    }
}

/* ===== OVERRIDES ADICIONALES ===== */

/* Asegurar que nuestros estilos tengan prioridad */
.contacto-escribenos .agenda-cita form input,
.contacto-escribenos .agenda-cita form select,
.contacto-escribenos .agenda-cita form textarea {
    font-family: "Epilogue", sans-serif !important;
    border: none !important;
    background-color: #f4f4f4 !important;
    color: #7E8492 !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    outline: none !important;
    font-size: 14px !important;
    height: 35px !important;
    transition: all 0.3s ease !important;
}

.contacto-escribenos .agenda-cita form input:focus,
.contacto-escribenos .agenda-cita form select:focus,
.contacto-escribenos .agenda-cita form textarea:focus {
    background-color: #f8f8f8 !important;
    border: 2px solid #E12826 !important;
    box-shadow: 0 2px 8px rgba(225, 40, 38, 0.1) !important;
}

/* Textarea específico */
.contacto-escribenos .agenda-cita form textarea {
    min-height: 60px !important;
    resize: vertical !important;
}

/* Fieldset de intereses más compacto */
.contacto-escribenos .agenda-cita form fieldset {
    padding: 2% 1% !important;
    gap: 10px !important;
    row-gap: 15px !important;
}

.contacto-escribenos .agenda-cita form fieldset legend {
    color: #7E8492 !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
}

/* Checkbox de términos más compacto */
.contacto-escribenos .acepto {
    margin-top: 10px !important;
}

.contacto-escribenos .checkbox-container {
    padding: 5px 0 !important;
}