.elementor-kit-1360{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-image:url("https://dokter.com.mx/wp-content/uploads/2025/09/7.jpg");font-family:"Onest", Sans-serif;background-size:contain;}.elementor-kit-1360 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1144px;}.e-con{--container-max-width:1144px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* --- DISEÑO FINAL CON LOGO DOKTER --- */

/* 1. Importar Fuente Quicksand */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

/* 2. Contenedor Principal (Tarjeta) */
.mi-login-custom,
#pg-forgot-password-form-container,
.pg-forgot-password-form-main-section {
    background-color: #ffffff;
    padding: 45px 50px !important;
    border-radius: 8px;
    /* Borde sutil alrededor + Borde Azul Superior integrado */
    border: 1px solid #e1e4e8;
    border-top: 4px solid #0073aa !important; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-width: 100%;
    margin: 10px auto;
    font-family: 'Quicksand', sans-serif !important;
    position: relative;
    box-sizing: border-box;
}

/* 3. LOGO CENTRADO (Isotipo Dokter) */
/* Esto inserta la imagen antes del formulario */
.mi-login-custom::before,
#pg-forgot-password-form-container::before {
    content: '';
    display: block;
    width: 80px; /* Tamaño chico/mediano */
    height: 80px; 
    margin: 0 auto 1px auto; /* Centrado horizontal y margen abajo */
    background-image: url('https://dokter.com.mx/wp-content/uploads/2025/11/ISOTIPO_DOKTER_MINI2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 4. Etiquetas (Labels) */
.mi-login-custom label,
#pg-forgot-password-form-container label {
    display: block !important;
    font-weight: 700 !important;
    color: #4a5568 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Quicksand', sans-serif !important;
}

/* 5. Inputs (Limpios, sin iconos) */
.mi-login-custom input[type="text"],
.mi-login-custom input[type="email"],
.mi-login-custom input[type="password"],
#pg-forgot-password-form-container input[type="text"],
#pg-forgot-password-form-container input[type="email"] {
    width: 100% !important;
    padding: 12px 15px !important; /* Padding normal */
    margin-bottom: 25px !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e0 !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    color: #2d3748 !important;
    height: 48px !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 500;
    background-image: none !important; /* Asegura que no haya iconos */
}

/* Focus */
.mi-login-custom input:focus,
#pg-forgot-password-form-container input:focus {
    background-color: #fff !important;
    border-color: #0073aa !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1) !important;
    outline: none !important;
}

/* 6. Botón (Azul, centrado, tamaño controlado) */
.mi-login-custom input[type="submit"],
.mi-login-custom button[type="submit"],
#pg-forgot-password-form-container input[type="submit"] {
    background-color: #0073aa !important;
    color: #fff !important;
    width: auto !important;
    min-width: 150px;
    display: table !important;
    margin: 10px auto 0 auto !important; /* Centrado */
    padding: 12px 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    text-transform: uppercase;
    font-family: 'Quicksand', sans-serif !important;
    transition: background 0.3s ease !important;
}

.mi-login-custom input[type="submit"]:hover,
#pg-forgot-password-form-container input[type="submit"]:hover {
    background-color: #005177 !important;
}

/* 7. Enlaces (Forgot Password, etc) */
.mi-login-custom a,
#pg-forgot-password-form-container a {
    display: block !important;
    text-align: center;
    margin-top: 20px;
    color: #718096 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600;
}
.mi-login-custom a:hover { color: #0073aa !important; text-decoration: underline !important; }

/* 8. VISTA LOGUEADO (Usuario conectado) */
.mi-login-custom .pg-user-logged-in-msg,
.mi-login-custom .profilegrid_login_area {
    text-align: center;
    font-family: 'Quicksand', sans-serif !important;
}

/* Ocultar el logo en la vista logueado si ya sale el avatar (Opcional) */
/* Si quieres que salga el logo TAMBIÉN cuando está logueado, borra este bloque: */
.mi-login-custom.logged-in::before {
   /* display: none;  <-- Descomenta esto si NO quieres el logo al estar logueado */
}

/* Avatar */
.mi-login-custom .pg-login-user-img,
.mi-login-custom img.avatar {
    border-radius: 50% !important;
    border: 3px solid #f0f0f0 !important;
    padding: 3px !important;
    width: 90px !important;
    height: 90px !important;
    margin-bottom: 15px !important;
}

/* Links Dashboard */
.mi-login-custom .pg-login-dashboard-links a {
    display: inline-block !important;
    margin: 5px !important;
    padding: 10px 20px !important;
    background: #edf2f7 !important;
    border-radius: 5px !important;
    color: #4a5568 !important;
    border: 1px solid #e2e8f0;
    text-transform: none !important;
}
.mi-login-custom .pg-login-dashboard-links a:hover {
    background: #e2e8f0 !important;
    color: #0073aa !important;
}

/* Botón Logout */
.mi-login-custom a[href*="logout"] {
    background: #fff5f5 !important;
    color: #c53030 !important;
    border-color: #feb2b2 !important;
    padding: 8px 20px !important;
    border-radius: 5px !important;
    margin-top: 10px !important;
    display: inline-block !important;
}

/* Limpieza */
.mi-login-custom br, 
#pg-forgot-password-form-container br { display: none; }

/* --- PREVENCIÓN FUTURA: ESTILO RECAPTCHA --- */

/* 1. Centrar el bloque del Captcha */
.mi-login-custom .pg-recaptcha-element,
.mi-login-custom .g-recaptcha,
#pg-forgot-password-form-container .pg-recaptcha-element {
    display: flex !important;
    justify-content: center !important; /* Lo fuerza al centro */
    margin: 20px auto !important; /* Espacio arriba y abajo */
    width: 100% !important;
    clear: both !important;
}

/* 2. Ajuste para móviles pequeños */
/* El captcha mide 304px. Si el celular es más chico, lo reducimos un poco */
@media (max-width: 360px) {
    .mi-login-custom .pg-recaptcha-element iframe,
    .mi-login-custom .g-recaptcha iframe {
        transform: scale(0.85) !important; /* Reducir al 85% */
        transform-origin: center center !important;
    }
}/* End custom CSS */