@media screen and (max-width:768px) {

    /* Todo lo que escribas acá adentro solo se aplicará en pantallas de 768px o menores */
    html body .ast-builder-layout-element.site-header-focus-item.ast-header-account {
        display: none !important;
    }

    .user-header-box-floating {
        position: absolute !important;
        top: 15px !important;
        right: 50px !important;
        z-index: 999999 !important;
        display: block !important;
        visibility: visible;
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    .mi-caja-flotante-global{
        display: none !important;
    } 

.user-trigger-wrapper {
   .user-header-box-floating {
        position: absolute !important;
        /* En lugar de usar porcentajes que fallan, usamos píxeles fijos desde arriba */
        top: 18px !important; 
        right: 20px !important; 
        z-index: 999999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}
} 
/* ==========================================================================
   3. REGLAS ESPECÍFICAS PARA MÓVILES (425px o menos)
   ========================================================================== */
@media screen and (max-width: 544px) {
    
    /* 1. Forzamos la desaparición absoluta de la barra blanca horizontal */
    .ast-desktop-header-content, 
    #ast-desktop-header,
    .main-navigation-layout-inline-flex {
        display: none !important;
    }

    /* 2. Si Astra despliega el menú móvil abajo, lo obligamos a ponerse en columna */
    .ast-mobile-header-content .main-header-menu,
    .ast-mobile-header-wrap .main-header-menu,
    .ast-mobile-header-wrap .menu-item {
        display: flex !important;
        flex-direction: column !important; /* Clave: cambia de fila a columna */
        align-items: flex-start !important;
        width: 100% !important;
        white-space: normal !important; /* Permite que el texto se acomode si es largo */
    }

    /* 3. Aseguramos que la barra verde ocupe el 100% del ancho del celular */
    .ast-mobile-header-wrap, #ast-mobile-header {
        display: block !important;
        width: 100% !important;
    }

    /* 4. Escondemos la caja flotante del usuario si tapa el texto "Body Harmony" */
    .user-header-box-floating {
        display: none !important; /* En celular es mejor que el login vaya adentro del menú desplegable */
    }


    /**************************APP SEGUIMIENTO *****************/
.eael-login-form-container .forget-menot,
.eael-login-form-container .forget-pass,
.eael-login-form-container .eael-lr-footer {
    display: none !important;
}
.eael-forever-forget.eael-lr-form-group,
.eael-sign-wrapper {
   display: none !important; 
}

/***********spinner boton ***************/

#login-spinner{
    display:none;
    justify-content:center;
    align-items:center;
    min-height:44px;
}

#login-spinner i{
    font-size:24px;
    color:#1a5711;
   
}


.cf-turnstile {
    display: flex;
    justify-content: center;
    margin: 15px auto;
}

/* --- ESTILIZAR ALERTAS DE ESSENTIAL ADDONS (LOGIN/REGISTER) --- */

/* Contenedor general de los mensajes (Éxito y Error) */
.eael-alert, 
.eael-success-message, 
.eael-error-message {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 15px auto !important;
    width: 90% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border: none !important; /* Quita los bordes gruesos nativos */
}

/* Personalización para los mensajes de ERROR (Rojo sutil tipo app) */
.eael-error-message, 
.eael-alert-danger {
    background-color: #ffebe9 !important; /* Rojo pastel muy suave */
    color: #ce2c30 !important;           /* Texto rojo oscuro elegante */
}

/* Personalización para los mensajes de ÉXITO (Verde sutil tipo app) */
.eael-success-message, 
.eael-alert-success {
    background-color: #e6f6ec !important; /* Verde pastel muy suave */
    color: #1f7a42 !important;           /* Texto verde oscuro elegante */
}

/* Si los mensajes traen un botón de cerrar interno (la típica X) */
.eael-alert .close, 
.eael-alert-close {
    font-size: 16px !important;
    color: inherit !important;
    opacity: 0.6 !important;
}

/* --- REGULACIÓN EXCLUSIVA PARA EL SEGUNDO PASO (OCULTO) --- */

/* Centrar el contenedor del segundo paso sin romper el texto de los inputs del primero */
.eael-login-registration-wrapper .eael-reset-password-form,
.eael-login-registration-wrapper .eael-lost-password-form {
    text-align: center !important;
}

/* Forzar que el botón de registro del primer paso NO se corte y use flex dinámico */
.eael-login-registration-wrapper .eael-register-form input[type="submit"],
.eael-login-registration-wrapper .eael-register-form button[type="submit"],
.eael-login-registration-wrapper .eael-register-form .eael-submit-btn {
    width: auto !important;               /* Evita que se comprima el ancho del botón */
    min-width: 180px !important;          /* Le da una base cómoda en móviles */
    max-width: 90% !important;
    padding: 12px 30px !important;        /* Espaciado interno generoso para que el texto respire */
    display: inline-flex !important;      /* Centrado interno perfecto de la palabra */
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;       /* Prohíbe que el texto se rompa en dos líneas */
    margin: 20px auto 0 auto !important;  /* Centra el bloque entero en la pantalla */
}

/* --- REPARACIÓN DE ALINEACIÓN DE LOS PLACEHOLDERS --- */

/* Devolver el texto de los campos de texto a su alineación natural a la izquierda */
.eael-login-registration-wrapper .eael-register-form input[type="text"],
.eael-login-registration-wrapper .eael-register-form input[type="email"],
.eael-login-registration-wrapper .eael-register-form input[type="password"] {
    text-align: left !important;         /* Devuelve el texto a la izquierda en coherencia con la imagen */
    padding-left: 15px !important;       /* Deja un margen interno prolijo antes del texto */
}

/* ==========================================================================
   DISEÑO LIMPIO Y CENTRADO TOTAL PARA EL PASO 2 (OTP)
   ========================================================================== */

/* 1. Fondos y bordes limpios para la caja */
.eael-login-registration-wrapper .eael-lr-otp-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 10px 0 !important;
}

/* 2. Centrar los textos (Títulos y leyendas) */
.eael-lr-otp-wrapper .eael-lr-otp-title,
.eael-lr-otp-wrapper .eael-lr-otp-subtitle,
.eael-lr-otp-wrapper .eael-lr-otp-resend-row {
    text-align: center !important;
}

/* 3. Centrar el bloque y el texto de los 6 numeritos */
.eael-lr-otp-wrapper .eael-lr-otp-input-row {
    text-align: center !important;
}
.eael-lr-otp-wrapper .eael-lr-otp-input {
    margin: 0 auto !important;
    text-align: center !important;
}

/* 4. Cambiar el botón a Verde, letra blanca y CENTRADO horizontal */
.eael-lr-otp-wrapper .eael-lr-otp-verify-btn {
    background-color: #2b773a !important; /* Color verde */
    color: #ffffff !important;              /* Letra blanca */
    font-weight: bold !important;
    border: none !important;
    border-radius: 8px !important;          /* Bordes redondeados */
    padding: 12px 30px !important;
    
    /* El secreto para centrar el botón sin romper el display nativo */
    margin: 20px auto !important;           
    display: block !important;              
    
    width: auto !important;
    min-width: 180px !important;
    white-space: nowrap !important;
}

/* Ocultar por completo los textos de éxito nativos para que la transición sea limpia */
.eael-lr-otp-wrapper .eael-success-message {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
/*************form informe ************/

.campo-oculto-paciente,
.eloculto{
    display: none !important;
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS PARA SUREFORMS (CON CLASES RECTIFICADAS srfm-)
   ========================================================================== */

/* 3. Títulos y Preguntas Principales */
.srfm-block .srfm-block-label,
.srfm-block-label, 
.sf-field-label,
.srfm-block-legend {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    color: #2d3748 !important; /* Gris oscuro elegante, no negro puro */
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* 4. Subtítulos o textos aclaratorios pequeños */
.srfm-block-help-text,
.sf-field-description, 
.sf-help-text {
    font-size: 13px !important;
    color: #718096 !important;
    font-weight: 400 !important;
    margin-top: -5px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* 5. Tarjetas de opciones (Botones de selección / Checkboxes) */
.srfm-block .srfm-field-option,
.sf-field-radio-label, 
.sf-choice-field-label {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important; /* Bordes redondeados idénticos al home de la app */
    /*padding: 14px 16px !important;*/
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important; /* Estilo app nativa: círculo de selección a la derecha */
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    cursor: pointer !important;
}

/* Efecto al presionar con el dedo o pasar el mouse por las opciones */
.srfm-field-option:hover,
.sf-field-radio-label:hover {
    border-color: #52b788 !important; /* El verde claro de tu app */
    background-color: #f8fafc !important;
}

/* 6. Botón de Enviar Formulario / Informe */
.srfm-submit-button,
.sureforms-submit-btn, 
.sf-submit-button {
    background-color: #2d6a4f !important; /* El verde oscuro de tus botones destacados */
    color: #ffffff !important;
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 14px 28px !important;
    border-radius: 30px !important; /* Formato cápsula de app móvil */
    border: none !important;
    width: 100% !important; /* Botón ancho que ocupa toda la pantalla móvil */
    box-shadow: 0 4px 10px rgba(45, 106, 79, 0.2) !important;
    margin-top: 20px !important;
    cursor: pointer !important;
}
.srfm-option-container{
    font-size: 13px !important; 
}
.srfm-form-container.srfm-form-container-2878.srfm-bg-color{
    border-radius: 20px !important;
    /*margin-top: 50% !important;*/
}
.elementor-element-5d08f21 .e-divider-base {
    display: none !important;
}

/* 1. Modificar el contenedor del mensaje de éxito */
div#srfm-success-message-page-2878.srfm-success-box-description {
    background-color: #f7f6f0 !important; /* Crema de la app */
    border-radius: 24px !important;       /* Curvas redondeadas estilo app */
    padding: 24px !important;
    margin: 15px auto !important;
    max-width: 95% !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    text-align: left !important;
    display: block !important;
}

/* 2. Inyectar el título ¡Gracias! y el Icono Check usando pseudo-elementos */
div#srfm-success-message-page-2878.srfm-success-box-description::before {
    content: "✓  ¡Gracias!" !important;
    display: block !important;
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #1e3d2f !important;            /* Verde oscuro */
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(30, 61, 47, 0.15) !important; /* Línea divisoria */
}

/* 3. Estilar el párrafo de texto que está adentro */
div#srfm-success-message-page-2878.srfm-success-box-description p {
    color: #5c685f !important;
    font-family: sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
/* ESTILOS EXCLUSIVOS PARA EL BOTÓN VOLVER AL MENÚ */
#volver-desde-informe {
    background-color: #1e3d2f !important; /* Verde oscuro de tu marca */
    color: #ffffff !important;
    border-radius: 16px !important;       /* Bordes curvos simil app */
    width: 95% !important;                 /* Ancho del bloque crema */
    max-width: 400px !important;
    margin: -5px auto 0 auto !important;   /* Margen negativo para subirlo y pegarlo al bloque */
    display: block !important;             /* Lo centra automáticamente */
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(30, 61, 47, 0.15) !important;
    padding: 14px 20px !important;         /* Espaciado interno cómodo */
}

/*******************MENU TERAPEUTA*************/
/* Baja la barra crema para que no tape el logo de WhatsApp */
.eael-nav-menu-wrapper {
    margin-top: 20px !important;
    
}
#menu-menu-terapeuta{
border-top: 2px solid #00a108 !important; 
border-bottom: 2px solid #00a108 !important; 
}
.menu-item-3414 a {
    background-color: rgb(255, 255, 255) !important;
    
}

/* INYECTAR EL TÍTULO "TERAPEUTA" DENTRO DE LA TARJETA DEL MENÚ */
ul.ea-simple-menu-responsive-menu::before {
    content: "Terapeuta" !important;
    display: block !important;
    font-family: 'Playfair Display', 'Georgia', serif !important; /* Misma tipografía de tu app */
    font-size: 16px !important;
    font-weight: bold !important;
    color: #1e3d2f !important; /* Verde oscuro de tu marca */
    padding: 14px 20px 8px 20px !important; /* Espaciado prolijo */
    border-bottom: 2px solid rgba(30, 61, 47, 0.15) !important; /* Línea divisoria más firme para el título */
    letter-spacing: 0.5px !important;
    
}

/************cabecera movil**************/
/* Estilo dorado y cursiva para el nombre de la estética */
.cabeceraMovil {
    text-align: center !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 22px !important; /* Ajusta este valor si lo quieres más grande o chico */
   /* Color de respaldo para navegadores viejos */
    color: #d4a373 !important; 
    /* Degradado metálico (bronce/dorado con reflejo) */
    background: linear-gradient(135deg, #b8860b 0%, #e7be03 25%, #fff3b0 50%, #e7be03 75%, #8b6508 100%) !important;
    /* Truco para que el degradado se aplique solo a las letras */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    /* Sombra profunda para dar volumen 3D */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), 0px 0px 10px rgba(231, 190, 3, 0.3) !important;
    padding: 10px 0 !important;
    display: block;
    line-height: 1.1 !important;
}

.elementor-heading-title{
    margin-top: 70px !important;
}
.elementor-element-a4e9dd1{
    margin-left: 10px !important;
}
/* Selector específico para la imagen de Cainzos Karina Mabel */
    img.e-image-base[data-interaction-id="ee87b45"] {
        width: 60% !important; /* Probá con porcentajes (60%, 50%) hasta que quede al tamaño que querés */
        height: auto !important; /* Mantiene la proporción para que no se deforme */
        max-width: 250px !important; /* Límite máximo opcional en píxeles para que no se pase */
        margin: 0 auto !important; /* Centra la imagen si el contenedor es flexible */
        display: block !important;
    }

 /* Selector para el contenedor de la imagen y el texto */
    div.elementor-element[data-id="ced170d"] {
        margin-top: 0px !important;   /* Elimina el margen externo superior */
        padding-top: 5px !important;  /* Reduce al mínimo el espacio interno superior */
        margin-left: 0px !important;
    }    
/***letras grandes del bloque de karina*/
 h2.e-heading-base[data-interaction-id="98dafbb"] {
        font-size: 23px !important; /* Cambiá el número a tu gusto hasta que quede bien */
        line-height: 1.2 !important; /* Mantiene el texto compacto y estético */
    }
 p.e-paragraph-base[data-interaction-id="659b9d6"] {
        font-size: 16px !important; /* Modificá el tamaño según lo que necesites */
        line-height: 1.2 !important; /* Espaciado compacto y legible */
    }  
    
     div.elementor-element[data-id="a4e9dd1"] {
        margin-left: 0px !important;
    }   

    div.elementor-element[data-id="a80f695"] {
        /* Tus estilos acá */
        margin-top: 0px !important;
        padding-top: 0px !important;  /* Ejemplo: achicar espacio arriba */
        padding-bottom: 10px !important; /* Ejemplo: achicar espacio abajo */
    }
 
}