/* ============================================================
   DENWA 5.0.1 LOGIN - DESIGN SYSTEM V1
   ============================================================ */

html,
body {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

body.dw-login-ds-v1 {
    min-height: 100vh;

    overflow-x: hidden;

    background: #0A0F0F !important;

    color: #EDF2EE;

    font-family:
        Sora,
        Inter,
        Arial,
        Helvetica,
        sans-serif !important;
}


/* ocultamos exclusivamente el layout visual viejo */
body.dw-login-ds-v1 > .login {
    display: none !important;
}


/* ============================================================
   PAGE
   ============================================================ */

.dw-login-page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: grid;
    grid-template-rows: minmax(0, 1fr) 64px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(0,230,138,.17),
            transparent 30%
        ),
        radial-gradient(
            circle at 22% 62%,
            rgba(64,190,78,.10),
            transparent 34%
        ),
        #0A0F0F;
}


.dw-login-main {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1680px;
    min-height: 0;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(420px, 1.18fr)
        minmax(480px, .82fr);

    align-items: center;
}


/* ============================================================
   BRAND
   ============================================================ */

.dw-login-brand {
    position: relative;

    min-height: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    padding:
        60px
        clamp(64px, 9vw, 168px);

    overflow: hidden;
}


.dw-login-brand-inner {
    position: relative;
    z-index: 3;

    width: min(610px, 100%);
}


.dw-login-brand-head {
    display: flex;
    align-items: center;

    gap: 28px;
}


.dw-login-brand-logo {
    width: 112px;
    height: 112px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 10px 28px rgba(0,230,138,.10)
        );
}


.dw-login-brand-name {
    margin: 0;

    color: #F5F3EF;

    font-size:
        clamp(42px, 4vw, 62px);

    line-height: 1;
    font-weight: 750;

    letter-spacing: -.035em;
}


.dw-login-brand-subtitle {
    margin-top: 13px;

    color: #58B947;

    font-size:
        clamp(20px, 1.7vw, 28px);

    line-height: 1.25;
    font-weight: 500;
}


.dw-login-brand-description {
    max-width: 560px;

    margin: 30px 0 0;

    color: #A6B5AE;

    font-size: 17px;
    line-height: 1.65;
}


/* ============================================================
   ONDAS DECORATIVAS
   ============================================================ */

.dw-login-wave {
    position: absolute;

    z-index: 1;

    left: -280px;
    top: 22%;

    width: 1040px;
    height: 560px;

    opacity: .68;

    transform: rotate(-4deg);

    pointer-events: none;
}


.dw-login-wave::before,
.dw-login-wave::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius:
        50% 47% 52% 43% /
        43% 56% 45% 54%;
}


.dw-login-wave::before {
    background:
        repeating-radial-gradient(
            ellipse at 32% 50%,
            transparent 0,
            transparent 9px,
            rgba(0,230,138,.16) 10px,
            transparent 11px
        );

    transform:
        scaleX(1.36)
        scaleY(.62);
}


.dw-login-wave::after {
    left: 140px;
    top: 150px;

    opacity: .75;

    background:
        repeating-radial-gradient(
            ellipse at 43% 50%,
            transparent 0,
            transparent 11px,
            rgba(111,193,52,.13) 12px,
            transparent 13px
        );

    transform:
        scaleX(1.2)
        scaleY(.56);
}


/* ============================================================
   LOGIN SIDE
   ============================================================ */

.dw-login-access {
    position: relative;
    z-index: 5;

    min-height: 100%;

    box-sizing: border-box;

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

    padding:
        52px
        clamp(42px, 7vw, 100px)
        46px 36px;
}


.dw-login-card {
    width: min(520px, 100%);

    overflow: hidden;

    color: #EDF2EE;

    background:
        linear-gradient(
            180deg,
            rgba(19,26,24,.97),
            rgba(15,23,21,.985)
        );

    border:
        1px solid #233029;

    border-radius: 18px;

    box-shadow:
        0 28px 80px rgba(0,0,0,.30),
        0 0 70px rgba(0,230,138,.025);
}


/* ============================================================
   CARD HEADER
   ============================================================ */

.dw-login-card-body {
    padding: 48px 44px 28px;
}


.dw-login-card-header {
    margin-bottom: 30px;

    text-align: center;
}


.dw-login-card-logo {
    width: 75px;
    height: 75px;

    margin: 0 auto 17px;

    object-fit: contain;
}


.dw-login-card-title {
    margin: 0;

    color: #F5F3EF;

    font-size: 29px;
    line-height: 1.2;
    font-weight: 750;

    letter-spacing: -.025em;
}


.dw-login-card-subtitle {
    margin: 8px 0 0;

    color: #8FA69C;

    font-size: 14px;
    line-height: 1.45;
}


/* ============================================================
   WARNING
   ============================================================ */

.dw-login-warning {
    min-height: 0;

    margin: 0 0 14px;

    color: #FF9696;

    text-align: center;

    font-size: 12px;
    line-height: 1.45;
}


.dw-login-warning:empty {
    display: none;
}


/* ============================================================
   FIELDS
   ============================================================ */

.dw-login-field {
    position: relative;

    width: 100%;

    margin-bottom: 14px;
}


.dw-login-field-icon {
    position: absolute;

    z-index: 3;

    left: 16px;
    top: 50%;

    width: 19px;
    height: 19px;

    transform: translateY(-50%);

    color: #00E68A;

    pointer-events: none;
}


.dw-login-field-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.dw-login-card select,
.dw-login-card input {
    width: 100% !important;
    height: 54px !important;

    margin: 0 !important;

    padding:
        0 48px
        0 49px !important;

    box-sizing: border-box !important;

    color: #EDF2EE !important;

    background:
        #0C1413
        !important;

    background-image: none !important;

    border:
        1px solid #233029
        !important;

    border-radius:
        8px !important;

    outline: 0 !important;

    box-shadow:
        none !important;

    font-family: inherit !important;

    font-size: 14px !important;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}


.dw-login-card select {
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


.dw-login-card input::placeholder {
    color: #788A82 !important;

    opacity: 1;
}


.dw-login-card input:focus,
.dw-login-card select:focus {
    background:
        #0F1917
        !important;

    border-color:
        rgba(0,230,138,.58)
        !important;

    box-shadow:
        0 0 0 3px
        rgba(0,230,138,.08)
        !important;
}


/* select arrow */

.dw-login-select-arrow {
    position: absolute;

    z-index: 4;

    right: 17px;
    top: 50%;

    width: 9px;
    height: 9px;

    border-right:
        1.6px solid #EDF2EE;

    border-bottom:
        1.6px solid #EDF2EE;

    transform:
        translateY(-70%)
        rotate(45deg);

    pointer-events: none;
}


/* password */

.dw-login-password-toggle {
    position: absolute;

    z-index: 5;

    right: 12px;
    top: 50%;

    width: 36px;
    height: 36px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    cursor: pointer;

    color: #00E68A;

    background: transparent;

    border: 0;

    border-radius: 6px;
}


.dw-login-password-toggle:hover {
    background:
        rgba(0,230,138,.08);
}


.dw-login-password-toggle svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   LOGIN BUTTON
   ============================================================ */

.dw-login-submit {
    width: 100% !important;
    height: 54px !important;

    margin:
        8px 0 0
        !important;

    padding:
        0 19px
        !important;

    box-sizing: border-box;

    display: flex !important;
    align-items: center;
    justify-content: center;

    position: relative;

    cursor: pointer;

    color: #07110E !important;

    background:
        #00E68A
        !important;

    background-image:
        none !important;

    border:
        1px solid #00E68A
        !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;

    font-family:
        inherit !important;

    font-size:
        14px !important;

    line-height: 1 !important;

    font-weight:
        750 !important;

    text-shadow:
        none !important;
}


.dw-login-submit:hover {
    background:
        #16F29A
        !important;

    border-color:
        #16F29A
        !important;
}


.dw-login-submit-arrow {
    position: absolute;

    right: 18px;

    font-size: 23px;
    line-height: 1;

    font-weight: 300;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.dw-login-divider {
    width: 100%;

    margin: 25px 0 21px;

    display: flex;
    align-items: center;

    gap: 16px;

    color: #7D9188;

    font-size: 11px;
}


.dw-login-divider::before,
.dw-login-divider::after {
    content: "";

    height: 1px;

    flex: 1;

    background: #26342E;
}


/* ============================================================
   FORGOT
   ============================================================ */

.dw-login-forgot {
    width: 100%;

    min-height: 50px;

    box-sizing: border-box;

    display: flex !important;
    align-items: center;
    justify-content: center;

    gap: 9px;

    color: #00E68A !important;

    background:
        transparent !important;

    border:
        1px solid
        rgba(0,230,138,.58)
        !important;

    border-radius:
        8px;

    text-decoration:
        none !important;

    font-size:
        13px !important;

    font-weight:
        650 !important;
}


.dw-login-forgot:hover {
    color:
        #16F29A !important;

    background:
        rgba(0,230,138,.055)
        !important;

    border-color:
        #00E68A !important;
}


/* ============================================================
   SECURE FOOTER
   ============================================================ */

.dw-login-secure {
    height: 63px;

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

    gap: 9px;

    color: #8FA69C;

    background:
        rgba(7,14,13,.42);

    border-top:
        1px solid #1C2824;

    font-size: 12px;
}


.dw-login-secure-icon {
    width: 17px;
    height: 17px;

    color: #00E68A;
}


.dw-login-secure-icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
}


/* ============================================================
   PAGE FOOTER
   ============================================================ */

.dw-login-footer {
    position: relative;
    z-index: 10;

    height: 64px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 44px;

    color: #7E9188;

    background:
        rgba(9,15,14,.84);

    border-top:
        1px solid #1C2824;

    font-size: 11px;
}


.dw-login-footer strong,
.dw-login-footer a {
    color: #58B947;

    font-weight: 650;
}


.dw-login-footer a {
    text-decoration: none;
}


/* ============================================================
   SOPORTE
   ============================================================ */

.dw-login-support {
    position: fixed;

    z-index: 50;

    top: 18px;
    right: 18px;
}


.dw-login-support > * {
    opacity: .72;
}


.dw-login-support > *:hover {
    opacity: 1;
}


/* ============================================================
   PASSWORD RESTORE / BOXY
   ============================================================ */

#mb_restore_password .boxy-inner,
#mb_restore_password .boxy-content {
    color: #EDF2EE !important;

    background:
        #131A18 !important;
}


#mb_restore_password input {
    height: 38px;

    box-sizing: border-box;

    padding: 0 10px;

    color: #EDF2EE;

    background: #0C1413;

    border: 1px solid #233029;

    border-radius: 8px;

    outline: none;
}


#mb_restore_password input:focus {
    border-color: #00E68A;

    box-shadow:
        0 0 0 3px
        rgba(0,230,138,.08);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    .dw-login-main {
        grid-template-columns: 1fr;
    }

    .dw-login-brand {
        display: none;
    }

    .dw-login-access {
        min-height:
            calc(100vh - 64px);

        padding:
            36px 24px;
    }

    .dw-login-card {
        width:
            min(520px, 100%);
    }
}


@media (max-width: 620px) {

    .dw-login-page {
        grid-template-rows:
            minmax(0,1fr)
            auto;
    }

    .dw-login-access {
        padding:
            20px 14px;
    }

    .dw-login-card {
        border-radius:
            14px;
    }

    .dw-login-card-body {
        padding:
            34px 24px 24px;
    }

    .dw-login-card-logo {
        width: 62px;
        height: 62px;
    }

    .dw-login-card-title {
        font-size: 25px;
    }

    .dw-login-footer {
        min-height: 64px;
        height: auto;

        padding:
            14px 18px;

        flex-direction: column;

        justify-content: center;

        gap: 5px;

        text-align: center;
    }
}


/* ============================================================
   RESTORE PASSWORD MODAL (Myboxy) — restyle oscuro
   ============================================================
   El modal de "Restaurar contraseña" (scripts/myboxy.js + boxy.js) es un
   widget generico reusado en toda la app, con su tema claro original
   (crema/beige) escrito inline. En este login rediseñado quedaba flotando
   sobre el fondo oscuro, fuera de lugar. Se restylea SOLO esta instancia:
   #mb_restore_password no existe en ninguna otra pantalla, asi que el
   resto de los usos de Myboxy en el admin siguen con su tema clasico.
*/

body.dw-login-ds-v1 #mb_restore_password {
    background:
        linear-gradient(
            180deg,
            rgba(19,26,24,.97),
            rgba(15,23,21,.985)
        ) !important;
    border: 1px solid #233029 !important;
    border-radius: 14px !important;
    box-shadow:
        0 28px 80px rgba(0,0,0,.35),
        0 0 70px rgba(0,230,138,.03) !important;
    font-family: Sora, Inter, Arial, Helvetica, sans-serif !important;
    overflow: hidden;
}

body.dw-login-ds-v1 #mb_restore_password #my_boxy_title {
    background: rgba(0,230,138,.08) !important;
    color: #F5F3EF !important;
    border-bottom: 1px solid #233029 !important;
    text-shadow: none !important;
    letter-spacing: .3px !important;
    padding: 14px 18px !important;
}

body.dw-login-ds-v1 #mb_restore_password #mb_table,
body.dw-login-ds-v1 #mb_restore_password #mb_table td {
    background: transparent !important;
}

body.dw-login-ds-v1 #mb_restore_password #my_boxy_text {
    color: #EDF2EE !important;
    padding: 18px !important;
}

body.dw-login-ds-v1 #mb_restore_password #my_boxy_options {
    border-top: 1px solid #233029 !important;
    background: transparent !important;
}

/* contenido armado en JS: passwordBoxy() / restorePass() en login.php */
body.dw-login-ds-v1 .dw-restore-title-line {
    color: #8FA69C;
    font-size: 13px;
    margin-bottom: 14px;
}

body.dw-login-ds-v1 .dw-restore-warning {
    color: #FF9696;
    font-size: 13px;
    margin-bottom: 14px;
}

body.dw-login-ds-v1 .dw-restore-table {
    width: 100%;
    border-collapse: collapse;
}

body.dw-login-ds-v1 .dw-restore-label {
    color: #8FA69C;
    font-size: 13px;
    padding: 6px 10px 6px 0;
    white-space: nowrap;
    vertical-align: middle;
}

body.dw-login-ds-v1 .dw-restore-input-cell {
    width: 100%;
    padding: 6px 0;
}

body.dw-login-ds-v1 .dw-restore-input {
    width: 100% !important;
    height: 40px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 12px !important;
    color: #EDF2EE !important;
    background: #0C1413 !important;
    background-image: none !important;
    border: 1px solid #233029 !important;
    border-radius: 8px !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 13px !important;
    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

body.dw-login-ds-v1 .dw-restore-input:focus {
    border-color: #00E68A !important;
    box-shadow: 0 0 0 3px rgba(0,230,138,.12) !important;
}

/* Reemplaza el fondo amarillo palido hardcodeado (updatePass(), contraseña
   debil): no combinaba con el tema oscuro y encima era casi invisible
   dentro de un modal que ya era palido en el tema clasico. */
body.dw-login-ds-v1 .dw-restore-input-error {
    border-color: #FF9696 !important;
    box-shadow: 0 0 0 3px rgba(255,150,150,.14) !important;
}

body.dw-login-ds-v1 .dw-restore-note {
    color: #657970;
    font-size: 11px;
    margin-top: 12px;
    line-height: 1.4;
}