/* ============================================
   ESTILOS PROFESIONALES PARA LOGIN - ALBALI CENTROS
   ============================================ */

/* Ocultar header superior de ScriptCase */
.scFormHeader,
.scFormHeaderTitle,
.scFormHeaderDate,
.scAppHeader,
#sc_form_header,
.sc-form-header {
    display: none !important;
}

/* Fondo de la pagina - Degradado blanco a azul oscuro elegante */
.scFormPage.sc-app-contr,
body.scFormPage {
    background: linear-gradient(180deg, #ffffff 0%, #e8f4fc 25%, #b8d4e8 50%, #4a7c9b 75%, #1a3a52 100%) !important;
    min-height: 100vh !important;
}

/* Contenedor principal del formulario */
.scFormBorder {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 15px 50px rgba(26, 58, 82, 0.25), 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    padding: 50px 45px !important;
    max-width: 420px !important;
    margin: 20px auto !important;
    border: 1px solid rgba(74, 124, 155, 0.1) !important;
}

/* Tabla principal del formulario */
#main_table_form {
    width: 100% !important;
    max-width: 480px !important;
}

/* Contenedor del icono/logo de login */
.login-icon-container {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
}

/* Contenedor del LOGO de Albali con fondo blanco */
.login-logo-wrapper {
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.login-logo {
    max-width: 180px;
    height: auto;
    display: block;
}

.login-icon-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4a7c9b 0%, #1a3a52 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(26, 58, 82, 0.3);
}

.login-icon-circle i {
    font-size: 36px;
    color: #ffffff;
}

.login-title {
    color: #1a3a52;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 5px 0;
    letter-spacing: 1px;
}

.login-subtitle {
    color: #4a7c9b;
    font-size: 14px;
    margin-top: 0;
    font-weight: 500;
}

/* Etiquetas de los campos */
.css_login_label,
.css_pswd_label {
    font-weight: 600 !important;
    color: #1a3a52 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.scFormLabelOddFormat,
.scFormLabelAboveOddFormat {
    color: #1a3a52 !important;
    font-weight: 600 !important;
}

/* Contenedor de lineas de campos */
.css_login_line,
.css_pswd_line {
    padding: 12px 5px !important;
    margin: 0 10px !important;
}

/* Campos de entrada (inputs) */
.css_login_obj,
.css_pswd_obj,
.scFormObjectOdd,
.scFormObjectOddPwdInput {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #d1e3ed !important;
    border-radius: 12px !important;
    background: #f8fbfd !important;
    color: #1a3a52 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.css_login_obj:focus,
.css_pswd_obj:focus,
.scFormObjectOdd:focus,
.scFormObjectOddPwdInput:focus {
    outline: none !important;
    border-color: #4a7c9b !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(74, 124, 155, 0.15) !important;
}

.css_login_obj::placeholder,
.css_pswd_obj::placeholder,
.scFormObjectOdd::placeholder {
    color: #8fa8b8 !important;
}

/* Contenedor del campo password */
.scFormObjectOddPwdBox {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #f8fbfd !important;
    border: 2px solid #d1e3ed !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.scFormObjectOddPwdBox .scFormObjectOddPwdInput {
    border: none !important;
    background: transparent !important;
    flex: 1 !important;
}

.scFormObjectOddPwdBox:focus-within {
    border-color: #4a7c9b !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(74, 124, 155, 0.15) !important;
}

/* Icono de mostrar/ocultar password */
.sc-ui-pwd-toggle-icon {
    padding: 0 15px !important;
    color: #8fa8b8 !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
}

.sc-ui-pwd-toggle-icon:hover {
    color: #4a7c9b !important;
}

/* Checkbox "Recuerdame" */
.css_remember_me_label {
    color: #4a7c9b !important;
    font-size: 14px !important;
}

.css_remember_me_line {
    padding: 15px 10px !important;
    margin: 0 10px !important;
}

.css_remember_me_obj,
.sc-ui-checkbox-remember_me {
    accent-color: #4a7c9b !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

.scFormDataFontOdd {
    color: #1a3a52 !important;
}

.scFormDataFontOdd label {
    color: #4a7c9b !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    font-weight: 500 !important;
}

/* Enlaces (Nuevo usuario, Recuperar password) */
.css_new_user_label,
.css_new_user_line,
.css_new_user_obj,
.css_retrieve_pswd_label,
.css_retrieve_pswd_line,
.css_retrieve_pswd_obj {
    text-align: center !important;
    padding: 5px 0 !important;
}

.scFormLinkOdd {
    color: #4a7c9b !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.scFormLinkOdd:hover {
    color: #1a3a52 !important;
    text-decoration: underline !important;
}

/* Selector de idioma */
.css_language_label {
    color: #4a7c9b !important;
    font-weight: 500 !important;
}

.css_language_line {
    padding: 10px 0 !important;
    text-align: center !important;
}

.css_language_obj {
    padding: 10px 15px !important;
    border: 2px solid #d1e3ed !important;
    border-radius: 10px !important;
    background: #f8fbfd !important;
    color: #1a3a52 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    min-width: 150px !important;
}

.css_language_obj:focus {
    border-color: #4a7c9b !important;
    outline: none !important;
}

/* ========== BOTON DE LOGIN ========== */
.scFormToolbar,
.sc-toolbar-bottom {
    background: transparent !important;
    border: none !important;
    padding: 25px 0 10px 0 !important;
}

.scFormToolbarPadding {
    padding: 0 !important;
    width: 100% !important;
}

/* Boton principal */
.scButton_default,
input[type="button"],
input[type="submit"],
#sub_form_b,
.sc-unique-btn-1 {
    display: block !important;
    width: 100% !important;
    padding: 16px 30px !important;
    background: linear-gradient(135deg, #4a7c9b 0%, #1a3a52 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(26, 58, 82, 0.3) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

.scButton_default:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
#sub_form_b:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(26, 58, 82, 0.4) !important;
    background: linear-gradient(135deg, #5a8cab 0%, #2a4a62 100%) !important;
}

.scButton_default:active,
#sub_form_b:active {
    transform: translateY(0) !important;
}

/* Tablas internas */
.scFormTable,
.scFormDataOdd {
    background: transparent !important;
}

.scBlockRow,
.scBlockRowFirst {
    background: transparent !important;
}

.scBlockFrame {
    padding: 5px 15px !important;
}

/* Margenes internos del formulario */
.scFormTable td {
    padding: 8px 10px !important;
}

#hidden_bloco_0,
#hidden_bloco_1,
#hidden_bloco_2 {
    margin: 0 5px !important;
}

/* Captcha */
#SC_captcha_hidden {
    background: #f8fbfd !important;
    padding: 15px !important;
    border-radius: 12px !important;
    margin: 15px 0 !important;
    border: 1px solid #d1e3ed !important;
}

#SC_captcha_hidden .scFormPageText {
    color: #4a7c9b !important;
}

#SC_captcha_hidden input[type="text"] {
    padding: 10px !important;
    border-radius: 8px !important;
    border: 2px solid #d1e3ed !important;
    background: #ffffff !important;
    color: #1a3a52 !important;
}

/* Mensajes de error */
.scFormErrorMessage,
.scFormToastMessage {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    margin: 10px 0 !important;
    border: 1px solid #fecaca !important;
}

/* Ajustes responsivos */
@media (max-width: 480px) {
    .scFormBorder {
        padding: 35px 25px !important;
        margin: 15px !important;
        border-radius: 16px !important;
    }

    .login-icon-circle {
        width: 70px;
        height: 70px;
    }

    .login-icon-circle i {
        font-size: 30px;
    }

    .login-title {
        font-size: 22px;
    }

    .login-logo {
        max-width: 150px;
    }
}