/*
 * IMQ Theme para Apereo CAS 7.3.7
 * Objetivo: header IMQ, fondo global, card con curvas,
 * boton login/password degradado y login mas ancho.
 */

:root {
    --imq-primary: #0A55A3;
    --imq-primary-dark: #063b73;
    --imq-secondary: #1678d8;
    --imq-secondary-light: #5fbfed;
    --imq-text: #114377;
    --imq-muted: #24538c;
    --imq-border: #d9e2ec;
    --imq-danger: #a20323;

    --mdc-text-button-label-text-color: #ffffff;
    --mdc-shape-small: 6px;
    --mdc-theme-body: #f8fbff;
    --mdc-theme-primary: var(--imq-primary);
    --cas-theme-primary: var(--imq-primary);
    --cas-theme-button-bg: var(--imq-primary);
    --cas-theme-button-bg-hover: var(--imq-secondary);
    --cas-theme-button-bg-lite: var(--imq-secondary);
    --cas-theme-primary-light: var(--imq-secondary-light);
    --cas-theme-border-light: 1px solid rgba(0, 0, 0, .15);
}

/* ======================================================
   Fondo global CAS
   ====================================================== */

html,
body,
body.login,
.mdc-drawer-app-content,
#main-content {
    background:
        radial-gradient(
            circle at top right,
            rgba(0, 85, 184, .16) 0%,
            transparent 42%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(95, 191, 237, .18) 0%,
            transparent 46%
        ),
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef4f9 55%,
            #e7f0f7 100%
        ) !important;

    background-attachment: fixed !important;
    background-size: cover !important;
}

body {
    overflow: hidden;
}

/* ======================================================
   Header IMQ
   ====================================================== */

#app-bar,
.mdc-top-app-bar {
    background: linear-gradient(
        90deg,
        var(--imq-primary-dark) 0%,
        var(--imq-primary) 55%,
        var(--imq-secondary) 100%
    ) !important;

    box-shadow: 0 8px 22px rgba(6, 59, 115, .22) !important;
}

#app-bar .navbar,
.mdc-top-app-bar .navbar {
    background: transparent !important;
}

.mdc-top-app-bar__row {
    height: 92px !important;
    display: flex !important;
    align-items: center !important;
}

.cas-brand {
    height: 92px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cas-brand h1 {
    display: none !important;
}

#cas-logo,
.cas-logo {
    height: 84px !important;
    width: auto !important;
    display: block !important;
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, .75))
        drop-shadow(0 0 5px rgba(255, 255, 255, .18));
}

/* ======================================================
   Layout principal
   ====================================================== */

#main-content {
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 3rem !important;
}

/* Regla original de CAS: main:has(.d-flex > section:only-of-type) max-width: 560px.
   La subimos para que el titulo entre en una sola linea. */
main:has(.d-flex > section:only-of-type) {
    max-width: 880px !important;
}

#content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ======================================================
   Card login
   ====================================================== */

#content > .mdc-card,
#content .card {
    max-width: 760px !important;
    width: 100% !important;
    border: none !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    position: relative !important;

    box-shadow:
        0 20px 45px rgba(6, 59, 115, .18),
        0 4px 10px rgba(0, 0, 0, .05) !important;
}

#content > .mdc-card::before,
#content .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 10;

    background: linear-gradient(
        90deg,
        var(--imq-primary-dark) 0%,
        var(--imq-primary) 55%,
        var(--imq-secondary-light) 100%
    );
}

.login-section {
    border: none !important;
    padding: 2.6rem 2.8rem 2.4rem 2.8rem !important;
}

/* ======================================================
   Titulo y texto
   ====================================================== */

#login-form-controls h2,
h1,
h2,
h3 {
    color: var(--imq-text) !important;
}

#login-form-controls h2 {
    max-width: 100% !important;
    margin: 0 auto 2rem auto !important;
    text-align: center !important;
}

#login-form-controls h2 i {
    display: inline-block !important;
    margin-right: .45rem !important;
    margin-bottom: 0 !important;
    color: var(--imq-primary) !important;
    font-size: 1.8rem !important;
    vertical-align: middle !important;
}

#login-form-controls h2 span {
    white-space: nowrap !important;
    vertical-align: middle !important;
}

#login-form-controls {
    max-width: 640px;
    margin: 0 auto;
}


.mdc-floating-label {
    color: var(--imq-muted) !important;
}

.mdc-text-field--focused .mdc-floating-label {
    color: var(--imq-primary) !important;
}

.mdc-text-field__input {
    color: var(--imq-text) !important;
    font-weight: 500;
}

a {
    color: var(--imq-primary) !important;
    font-weight: 600;
    text-decoration: none;
}

a:hover {
    color: var(--imq-secondary) !important;
    text-decoration: underline;
}

/* ======================================================
   Campos
   ====================================================== */

.cas-field {
    max-width: 100% !important;
}

.cas-field > * {
    width: 100% !important;
    max-width: none !important;
}

.mdc-text-field {
    border-radius: 14px !important;
    background-color: #ffffff !important;
}

.mdc-text-field--outlined .mdc-notched-outline__leading,
.mdc-text-field--outlined .mdc-notched-outline__notch,
.mdc-text-field--outlined .mdc-notched-outline__trailing {
    border-color: var(--imq-border) !important;
}

.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--imq-primary) !important;
    border-width: 2px !important;
}

.mdc-text-field--invalid .mdc-notched-outline__leading,
.mdc-text-field--invalid .mdc-notched-outline__notch,
.mdc-text-field--invalid .mdc-notched-outline__trailing {
    border-color: var(--imq-danger) !important;
}

/* ======================================================
   Boton login
   ====================================================== */

#submitBtn,
.mdc-button--raised.btn-primary {
    
    #width: 560px !important;
    max-width: 100%;
    margin: 0 auto;
    display: block;

    min-height: 48px !important;
    border: none !important;
    border-radius: 999px !important;

    background: linear-gradient(
        90deg,
        var(--imq-primary) 0%,
        var(--imq-secondary) 100%
    ) !important;

    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;

    box-shadow: 0 10px 24px rgba(10, 85, 163, .28) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

#submitBtn .mdc-button__label {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow:
        0 0 1px rgba(255, 255, 255, .9),
        0 0 4px rgba(255, 255, 255, .25);
}

#submitBtn:hover,
.mdc-button--raised.btn-primary:hover {
    filter: brightness(1.05) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 30px rgba(10, 85, 163, .34) !important;
}


#pmlinks {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#resetPassLink {

    display: block !important;
    text-align: center !important;
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 20px !important;
    font-weight: 500;  


    color: #0A55A3 !important;

    text-decoration: underline;
    text-underline-offset: 3px;

}

/* ======================================================
   Boton mostrar password
   ====================================================== */

.reveal-password,
.reveal-password.btn,
.reveal-password.mdc-button {
    width: 48px !important;
    min-width: 48px !important;
    height: 56px !important;

    border: none !important;
    border-radius: 0 14px 14px 0 !important;

    background: linear-gradient(
        90deg,
        var(--imq-primary) 0%,
        var(--imq-secondary) 100%
    ) !important;

    box-shadow: 0 4px 10px rgba(0, 85, 184, .25) !important;
}

.reveal-password i,
.reveal-password .mdi,
.reveal-password-icon {
    color: #ffffff !important;
    font-size: 1.2rem !important;
}

/* ======================================================
   Errores, separadores y sidebar
   ====================================================== */

.error-message,
.text-danger,
.invalid-feedback,
.mdc-text-field-helper-text--validation-msg {
    color: var(--imq-danger) !important;
}

hr {
    border: 0 !important;
    border-top: 1px solid rgba(10, 85, 163, .15) !important;
    opacity: 1 !important;
}

#sidebar:empty,
#sidebar .sidebar-content:empty {
    display: none !important;
}

/* ======================================================
   Responsive
   ====================================================== */

@media all and (max-width: 767px) {
    .mdc-top-app-bar__row {
        height: 76px !important;
    }

    .cas-brand {
        height: 76px !important;
    }

    #cas-logo,
    .cas-logo {
        height: 64px !important;
    }

    #main-content {
        padding: 1.2rem !important;
        margin-top: 6px !important;
    }

    main:has(.d-flex > section:only-of-type) {
        max-width: 100% !important;
    }

    #content > .mdc-card,
    #content .card {
        max-width: 100% !important;
        border-radius: 20px !important;
    }

    .login-section {
        padding: 2rem 1.4rem 1.8rem 1.4rem !important;
    }

    #login-form-controls h2 span {
        white-space: normal !important;
    }
}