/* 
  ============================
    CREADO BY MR.CONFIG PERU
  ============================
*/

/* ----- GENERAL ----- */

* {

    margin: 0;
    padding: 0;

}

/* ----- BODY ----- */

/* Fondo Web */

body.elementor-page-24:not(.elementor-motion-effects-element-type-background) {
    background-repeat: no-repeat;
    background-position: center center;
    height: 100vh;
}

/* ----- PAGINA LOGIN ----- */

/* 1. Estilos para los campos de texto (Email y Contraseña) */

#loginform .input {
    width: 100%;
    padding: 18px 20px;
    /* Aumenta el espacio interior */
    font-size: 15px;
    border: 2px solid #e2e8f0;
    /* Borde gris claro */
    border-radius: 12px;
    /* Bordes redondeados */
    outline: none;
    font-family: 'Inter', sans-serif;
    color: #0f172a;
    /* Color del texto oscuro */
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    /* Importante para que el padding no afecte el ancho total */
}

/* Efecto al hacer clic en un campo de texto */
#loginform .input:focus {
    border-color: #3b82f6;
    /* Borde azul */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    /* Sombra exterior azul */
}

/* Estilos para el texto de marcador de posición (placeholder) si lo tuvieras */
#loginform .input::placeholder {
    color: #cbd5e1;
}

/* 2. Estilos para las etiquetas (Label) */
#loginform label {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    /* Color gris oscuro */
    letter-spacing: 0.2px;
    display: block;
    /* Hace que la etiqueta se ponga encima del campo */
    margin-bottom: 12px;
}

/* 3. Estilos para el botón de "Acceder" */
#loginform #wp-submit {
    width: 100%;
    padding: 18px !important;
    background: #3b82f6;
    /* Fondo azul */
    color: #ffffff;
    font-size: 15px !important;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    /* Bordes redondeados */
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    letter-spacing: 0.3px;

    /* Reseteo de estilos de WordPress */
    height: auto;
    line-height: normal;
    text-shadow: none;
    box-shadow: none;
}

/* Efecto al pasar el ratón sobre el botón */
#loginform #wp-submit:hover {
    background: #2563eb;
    /* Azul más oscuro */
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}

/* Efecto al hacer clic en el botón */
#loginform #wp-submit:active {
    transform: translateY(0);
}

/* 4. Ajustes adicionales para espaciado */
#loginform p.login-username,
#loginform p.login-password {

    padding-top: 0 !important;
    
}

#loginform p.login-submit {
    border: none;
    /* Elimina cualquier borde que ponga WordPress */
}

.registration_form_custom_div {
    width: 75% !important;
}

/* Login Mensaje Error Personalizado */

.elementor-shortcode {

    text-align: center;
    font-size: 14px;
    color: #b35959;

}

/* Recuperar Contraseña */

a.avada_wifth_100.gmgt_chile_theme_forgot_pass {
    text-align: center;
    padding: 20px 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}


/* ----- DASHBOARD FRONTEND ----- */

/* Logo Menu */

img.system_logo_height_width {

    height: 54px;
    width: 54px;

}

.gmgt-header a.gmgt-logo {

    background-color: #121212;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

}

/* Fondo de los botones del siderbar */

.gmgt-navigation li a {

    background-color: #121212;

}

/* Cabecera */

.gmgt-header .gmgt-right-heder {

    padding: 1px 25px;
    background: linear-gradient(200deg, #FEC429, #fff);

}

/* QR Frontal */

.events1 .img-qr-front {
        width: 215px !important;
        height: 215px !important;
    }

/* Lista de Recibos */

.panel .panel-heading .panel-title {

    margin-right: 10px;

}

#gmgt-line-chat-p {

    display: flex;
    justify-content: center;
    text-align: center;

}

/* Icono Aviso */

.gmgt-setting-notification-bg img {

    border-radius: 30px;
    opacity: 90%;

}

/* Texto de Bienvenida */

.gmgt-right-heder .row h3 {

    font-weight: 600;

}

/* Estado de Miembro cuadritos pequeños */

.percent1 {

    left: 50%;
    text-align: center;

}

.line-chart-checkcolor-RegularMember {

    background-color: #44CB7F;

}

.line-chart-checkcolor-VolunteerMember {

    background-color: #BA170B;

}

/* Reporte/ Afiliación / Grafico Miembros Activos */

.con_color {

    background: #44CB7F !important;

}


/* ----- PAGOS ----- */

/* Vista de lista de recibos horizontales correctos (Frontend) */

#tblincome tbody td {

    white-space: nowrap;

}

#payment_list tbody td {


    padding-left: 15px;

}

/* Popup - Modal mejorado y centrado (Frontend) */

.overlay-content {

    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
    padding: 15px;
    box-sizing: border-box;
    position: fixed;
    top: 50% !important;
    left: 63%;
    transform: translate(-50%, -50%);
    /* 1. Para móviles: ocupa el 90% de la pantalla */
    width: 90%;
    /* 2. Límite: nunca será más ancho de 550px, incluso en pantallas gigantes */
    max-width: 1280px;
    max-height: 720px !important;

}

.view_details_body {

    max-height: 720px !important;

}

.modal-body {

    padding: 0.8rem !important;

}

.payment-steps li {

    padding-bottom: 15px;

}

.btn-success {

    background-color: #28a745;
    border-radius: 15px !important;
    padding: 12px;

}

.btn-success:focus {

    background-color: #121212;

}

/* Ver recibo */


#invoice_print .row .width_1 img {

    border-radius: 0;
    background-color: transparent;

}


/* ----- RESPONSIVIDAD ----- */


/* LO MINIMO QUE NECESITA PARA APLICAR */

@media (min-width: 768px) {

    /* Top del QR */

    .forntend_dashboard_main_div #main-wrapper .dashboard_content_rs {

        margin-top: 80px;

    }

    /* Menu Desplegable Top */

    .gym-management-content .main_page #main_sidebar-bgcolor {

        margin-top: 17px !important;

    }

}

@media (min-width: 783px) {

    /* Menu Desplegable Top */

    .gym-management-content .main_page #main_sidebar-bgcolor {

        margin-top: 30px !important;

    }

}

@media (min-width: 831px) {

    /* Top del QR */

    .forntend_dashboard_main_div #main-wrapper .dashboard_content_rs {

        margin-top: 120px;

    }
}

@media (min-width: 920px) {

    /* Sidebar Estirado */

    #main_sidebar-bgcolor {

        background-color: #121212;
        min-height: 350px;

    }

}


@media (min-width: 1280px) {

    /* DASHBOARD */

    /* ----- DASHBOARD MIEMBROS - STAFF ----- */

    /* Ancho de Estructura del Menu Lateral Izquierdo */

    .col-xl-2 {

        width: 20%;

    }

    /* Ancho de Estructura del Body Derecho */

    .col-xl-10 {

        width: 80%;

    }

    /* Tamaño contenedor del logo */

    .gmgt-header .gmgt-logo {
        height: 160px;
    }

    /* Tamaño del logo */

    img.system_logo_height_width {

        height: 80px;
        width: 80px;

    }

    
     /* Top del QR */

    .forntend_dashboard_main_div #main-wrapper .dashboard_content_rs {

        margin-top: 100px;

    }

    /* Estilado Aviso Rojo QR - Dashboard Miembros */

    .panel-title span {

        font-size: 16px !important;

    }

    .panel-title small {

        font-size: 8px !important;
        letter-spacing: 0.4px;

    }

    /* Tarjeta Afiliacion */

    .events1 .row {

        flex-wrap: nowrap;

    }


    .events .calendar-event {

        height: 85px;

    }

}


/* LO MAXIMO QUE PUEDE APLICAR */


@media (max-width: 767px) {

    .qrscanner,
    .qrscanner video {
        width: 100% !important;
        margin: 0 auto;
        background-color: #44CB7F;

    }

    /* Top del QR */

    .forntend_dashboard_main_div #main-wrapper .dashboard_content_rs {

        margin-top: 211px;

    }

    /* Reparando Menu Hamburguesa */

    /* Menu Desplegable Top */

    .gym-management-content .main_page #main_sidebar-bgcolor {

        margin-top: 33px !important;

    }

    /* ----- PAGOS ----- */

    /* Popup - Modal mejorado y centrado (Frontend) */

    .overlay-content {

        height: 600px !important;

    }

    .modal-content {

        max-height: 600px !important;

    }

    .view_details_body {

        max-height: 500px !important;
    }

}


@media (max-width: 920px) {


    /* Reparando Menu Hamburguesa */

    .main_sidebar {

        z-index: 999;

    }

    #sidebar.active {

        margin-top: 0;
    }

    .main_sidebar #sidebar .gmgt-navigation-forntend {

        margin-top: 0;

    }

    /* Estilado Icono Menu Hamburguesa */

    #sidebarCollapse span {

        background: #fff;

    }


}

@media (max-width: 1279px) {

    /* Vacio */

}