/* Tema AiGO para el webmail.
 *
 * Hereda todo de la skin "elastic" de Roundcube y solo cambia el aspecto:
 * colores, tipografias y la pantalla de entrada, para que el correo se vea
 * como aigo.com.mx.
 *
 * Los valores salen del sitio real, medidos, no inventados:
 *   morado #7c6aff   fondo #f8f7f4   texto #12121a
 *   titulares Instrument Serif   cuerpo DM Sans
 *
 * OJO: el fichero de elastic se llama styles.min.css, no styles.css.
 * Con el nombre equivocado se pierde TODA la maquetacion.
 */

@import url("../../elastic/styles/styles.min.css");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Instrument+Serif&display=swap");

:root {
    --aigo-morado: #7c6aff;
    --aigo-morado-oscuro: #6553e8;
    --aigo-brillo: rgba(124, 106, 255, 0.32);
    --aigo-fondo: #f8f7f4;
    --aigo-tinta: #12121a;
    --aigo-tenue: #8b8b9e;
    --aigo-borde: rgba(18, 18, 26, 0.09);

    /* variables de elastic, reapuntadas a la marca */
    --color-main: #7c6aff;
    --color-main-dark: #6553e8;
    --color-link: #7c6aff;
    --color-link-hover: #6553e8;
    --color-btn-primary-background: #7c6aff;
    --color-btn-primary-background-hover: #6553e8;
}

body,
input,
select,
textarea,
button,
.username {
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}

/* ───────────────────────────────────────── pantalla de entrada */

body.task-login,
body.task-login #layout,
body.task-login #layout-content {
    background: var(--aigo-fondo);
}

/* el resplandor morado del sitio, detras de todo */
body.task-login #layout-content::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(55rem 35rem at 50% -8%, rgba(124, 106, 255, 0.15), transparent 70%),
        radial-gradient(38rem 26rem at 88% 108%, rgba(124, 106, 255, 0.09), transparent 70%);
}

/* el logo: alto fijo y sin recortes */
body.task-login #logo {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 14rem;
    max-height: 3.5rem;
    object-fit: contain;
    margin-bottom: 1.75rem;
}

/* la tarjeta */
body.task-login #login-form {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid var(--aigo-borde);
    border-radius: 24px;
    box-shadow:
        0 1px 2px rgba(18, 18, 26, 0.04),
        0 14px 44px rgba(18, 18, 26, 0.08);
    padding: 2.25rem 2rem 1.75rem;
    max-width: 24rem;
}

body.task-login #login-form .box-inner {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* campos */
body.task-login #login-form input.form-control {
    border: 1px solid var(--aigo-borde);
    border-radius: 12px;
    background: #fbfaf9;
    padding: 0.8rem 0.95rem;
    height: auto;
    font-size: 0.95rem;
    color: var(--aigo-tinta);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.task-login #login-form input.form-control:focus {
    border-color: var(--aigo-morado);
    box-shadow: 0 0 0 3px var(--aigo-brillo);
    outline: none;
}

body.task-login #login-form input.form-control::placeholder {
    color: var(--aigo-tenue);
}

/* boton de entrar */
body.task-login #login-form button.btn-primary {
    background: var(--aigo-morado);
    border: 0;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px var(--aigo-brillo);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

body.task-login #login-form button.btn-primary:hover,
body.task-login #login-form button.btn-primary:focus {
    background: var(--aigo-morado-oscuro);
    box-shadow: 0 8px 24px var(--aigo-brillo);
    transform: translateY(-1px);
}

body.task-login #login-form button.btn-primary:active {
    transform: translateY(0);
}

/* pie: el dominio, discreto */
body.task-login #login-footer {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--aigo-tenue);
}

/* ───────────────────────────────────────── dentro del buzon */

#layout-menu,
#taskmenu {
    background: #101018;
}

#taskmenu a.selected,
#taskmenu a:hover,
#taskmenu a.selected::before {
    color: var(--aigo-morado);
}

a,
a:hover,
a:focus {
    color: var(--aigo-morado);
}

.btn-primary {
    background-color: var(--aigo-morado);
    border-color: var(--aigo-morado);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--aigo-morado-oscuro);
    border-color: var(--aigo-morado-oscuro);
}

#messagelist tbody tr.selected > td {
    background-color: rgba(124, 106, 255, 0.10);
    color: var(--aigo-tinta);
}

/* ───────────────────────────────────────── movil */

@media screen and (max-width: 480px) {
    body.task-login #login-form {
        padding: 1.75rem 1.35rem 1.35rem;
        border-radius: 20px;
    }

    body.task-login #logo {
        max-width: 11rem;
        margin-bottom: 1.25rem;
    }
}

/* ───────────────────────────────────────── modo oscuro del navegador */

@media (prefers-color-scheme: dark) {
    body.task-login,
    body.task-login #layout,
    body.task-login #layout-content {
        background: #0a0a12;
    }

    body.task-login #login-form {
        background: #12121c;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
    }

    body.task-login #login-form input.form-control {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.10);
        color: #eeeef0;
    }
}