/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* --- Estilos para el Formulario de Login de Ultimate Member (ACTUALIZADO y más específico) --- */

/* Contenedor principal del formulario de UM */
.um .um-form {
    padding: 0;
    margin: 0; /* Asegurar que no haya márgenes externos */
}

/* Contenedores de fila y columna dentro de UM para ajustar al 100% */
.um .um-form .um-row_1,
.um .um-form .um-col-1,
.um .um-form .um-field {
    width: 100%;
    max-width: 100%; /* Asegurar que no haya un max-width que limite */
    box-sizing: border-box;
}


/* Campos de entrada (Username/Email, Password) */
.um .um-field-area input[type="text"],
.um .um-field-area input[type="password"],
.um .um-field-area input[type="email"] {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 26px 15px !important; /* AUMENTADO EL PADDING VERTICAL A 26PX */
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #333 !important;
    font-size: 16px !important; /* Asegúrate de que este font-size sea el mismo que el del botón o ajusta */
    line-height: 1.5 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Estilo al enfocar los campos */
.um .um-field-area input[type="text"]:focus,
.um .um-field-area input[type="password"]:focus,
.um .um-field-area input[type="email"]:focus {
    border-color: #FCD890; /* Color del borde al enfocar */
    box-shadow: 0 0 0 2px rgba(252, 216, 144, 0.4); /* Sombra suave al enfocar */
}

/* Placeholder de los campos */
.um .um-field-area input::placeholder {
    color: #999;
}

/* Iconos dentro de los campos */
.um .um-field-label i {
    color: #999; /* Color de los iconos */
    margin-right: 8px; /* Espacio entre icono y placeholder */
    font-size: 18px; /* Tamaño del icono */
    vertical-align: middle; /* Alineación vertical */
}

/* Etiqueta del campo (si se usa en lugar de placeholder con iconos) */
.um .um-field-label label {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #555;
    margin-bottom: 8px; /* Espacio debajo de la etiqueta */
}

/* Checkbox "Mantenerme conectado" */
.um .um-field-c, /* Contenedor del checkbox */
.um .um-field-checkbox {
    margin-top: 20px; /* Mayor margen superior para separar del campo de contraseña */
    margin-bottom: 25px; /* Mayor margen inferior para separar del botón de Acceder */
    display: flex; /* Para alinear el checkbox y el texto */
    align-items: center;
    font-size: 15px;
    color: #555;
}

.um .um-field-checkbox input[type="checkbox"] {
    margin-right: 8px; /* Espacio entre el checkbox y el texto */
    cursor: pointer;
}

/* Botón de "Acceder" (Login) - selector más específico */
.um .um-button.um-submit-btn,
.um .um-form input[type="submit"].um-button { /* Aseguramos que sea el botón de submit con esas clases */
    background-color: #FCD890 !important; /* Usamos !important aquí para el color que está dando problemas */
    color: #333 !important; /* También !important para el color del texto */
    border: none;
    border-radius: 8px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    width: 100%; /* El botón ocupa el 100% del ancho del contenedor */
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

/* Efecto hover en el botón */
.um .um-button.um-submit-btn:hover,
.um .um-form input[type="submit"].um-button:hover {
    background-color: #FFC966 !important; /* Un tono ligeramente más oscuro/claro al pasar el ratón */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Enlaces "Forgot Password" y "Registrarse" */
.um-col-alt-b a,
.um-forgot-password {
    color: #555;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.um-col-alt-b a:hover,
.um-forgot-password:hover {
    color: #FCD890;
    text-decoration: underline;
}

/* Ajustes generales del formulario (para evitar márgenes o paddings indeseados de UM) */
.um .um-form input[type="text"],
.um .um-form input[type="password"],
.um .um-form input[type="email"],
.um .um-form .um-button {
    margin-bottom: 15px; /* Espacio entre los elementos */
}

/* Ajuste específico para el contenedor del checkbox para que tenga el margen deseado */
.um .um-field-c {
    margin-bottom: 5px; /* Reducimos el margen inferior por defecto si se aplica el de arriba */
}

/* Ocultar el pie de página por defecto de Ultimate Member si no se usa */
.um .um-col-alt-a {
    display: none;
}

/* --- Ajustes de Ancho para Campos de Ultimate Member (NUEVO) --- */

/* Asegurar que los contenedores de las filas y los campos permitan el 100% */
.um .um-form .um-row_1,
.um .um-form .um-col-1,
.um .um-form .um-field,
.um .um-form .um-field-area {
    width: 100% !important;
    max-width: 100% !important; /* Es crucial para anular posibles max-width */
    flex-basis: 100% !important; /* Para asegurar el comportamiento en Flexbox */
    box-sizing: border-box !important;
}

/* También para los elementos dentro de los campos */
.um .um-field-area input[type="text"],
.um .um-field-area input[type="password"],
.um .um-field-area input[type="email"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Asegurar que las etiquetas también se adapten al 100% */
.um .um-field-label {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Opcional: Si los campos aún no están al 100% después de lo anterior, podría haber un padding
   o margin interno en .um-form-inner que los restringe.
   Puedes inspeccionar .um-form-inner si los campos siguen sin ir al 100%.
*/
.um .um-form-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- Ajustes para el Checkbox "Mantenerme conectado" (NUEVO) --- */

/* Color del icono del checkbox cuando está marcado */
.um .um-field-checkbox .um-icon-android-checkbox-outline:before {
    color: #FCD890 !important; /* Tu color corporativo "yellow" */
}

/* Color del borde del checkbox (si es necesario y aplica) */
.um .um-field-checkbox .um-field-checkbox-state {
    border-color: #FCD890 !important; /* Asegura el borde del checkbox */
}

/* Color del fondo del checkbox (si es necesario y aplica) */
.um .um-field-checkbox .um-field-checkbox-state.um-field-checkbox-state-active {
    background-color: #FCD890 !important;
}


/* --- Ajuste del Ancho del Botón "Acceder" (ACTUALIZADO) --- */

/* Forzar el ancho del botón al 100% y centrarlo si es necesario */
.um .um-button.um-submit-btn,
.um .um-form input[type="submit"].um-button {
    width: 100% !important; /* Aseguramos que ocupe el 100% */
    display: block !important; /* Importante para que width:100% funcione bien en botones */
    margin-left: auto !important; /* Centra el botón si hay espacio restante */
    margin-right: auto !important; /* Centra el botón si hay espacio restante */
    text-align: center !important; /* Centra el texto dentro del botón */
}

/* Asegurarse de que el contenedor del botón también permita el 100% */
.um .um-center {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important; /* Asegura el centrado si hay algún elemento en línea */
}