/* ==========================================================
   J.M. LAMEIRA - LOGIN V14 RESPONSIVE
   Desktop / Tablet / Mobile
   ========================================================== */

#loginPage.jml13 {
    --cyan:#19c9f4;
    --blue:#0b8cff;
    --green:#00e59b;
    --orange:#ff9d18;
    --text:#f4f9fc;
    --muted:#8da8ba;
    --line:rgba(48,190,245,.22);

    position:relative;
    width:100%;
    min-height:100svh;
    overflow:hidden;
    color:var(--text);
    background:#020b12;
    isolation:isolate;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ===== CENÁRIO ÚNICO ===== */

.jml13-background {
    position:absolute;
    inset:0;
    z-index:-4;
    background:
        linear-gradient(
            90deg,
            rgba(1,11,19,.82) 0%,
            rgba(1,13,22,.60) 35%,
            rgba(1,12,20,.42) 61%,
            rgba(1,10,17,.78) 100%
        ),
        url("/assets/login-security-clean.png") center center / cover no-repeat;
}

.jml13-background::before {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,
            rgba(0,9,16,.12),
            rgba(0,9,16,.08) 55%,
            rgba(0,7,12,.72)
        );
}

.jml13-background::after {
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 15% 50%,rgba(0,157,255,.10),transparent 30%),
        radial-gradient(circle at 88% 50%,rgba(0,190,255,.07),transparent 25%);
}

/* desativa elementos antigos */
.jml13-glow,
.jml13-grid,
.jml13-visual {
    display:none !important;
}

/* ===== CABEÇALHO ===== */

.jml13-header {
    position:relative;
    z-index:10;
    height:128px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(42px,4vw,82px);
    border-bottom:1px solid rgba(52,180,230,.08);
}

.jml13-brand {
    display:flex;
    align-items:center;
    gap:16px;
}

.jml13-brand img {
    width:82px;
    height:82px;
    object-fit:contain;
    filter:drop-shadow(0 8px 24px rgba(0,0,0,.45));
}

.jml13-brand div {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.jml13-brand strong {
    font-size:23px;
    font-weight:900;
    letter-spacing:.02em;
}

.jml13-brand span {
    color:var(--orange);
    font-size:10px;
    font-weight:900;
    letter-spacing:.18em;
}

.jml13-status {
    text-align:right;
    display:flex;
    flex-direction:column;
    gap:17px;
    align-items:flex-end;
}

.jml13-status > span {
    color:#65879c;
    font-size:9px;
    letter-spacing:.28em;
}

.jml13-status b {
    display:flex;
    align-items:center;
    gap:11px;
    color:#8ca8b9;
    font-size:10px;
    letter-spacing:.22em;
}

.jml13-status i,
.jml13-online i,
.jml13-eyebrow i {
    width:9px;
    height:9px;
    display:inline-block;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 18px rgba(0,229,155,.9);
}

/* ===== ESTRUTURA DESKTOP ===== */

.jml13-layout {
    position:relative;
    z-index:5;
    width:100%;
    min-height:calc(100svh - 188px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,520px);
    align-items:center;
    gap:clamp(60px,8vw,150px);
    padding:45px clamp(42px,4vw,82px) 80px;
}

.jml13-hero {
    align-self:center;
    max-width:940px;
}

.jml13-eyebrow {
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:30px;
    color:#69d8fa;
    font-size:11px;
    font-weight:900;
    letter-spacing:.28em;
}

.jml13-hero h1 {
    margin:0;
    max-width:880px;
    font-size:clamp(58px,5.2vw,94px);
    line-height:.94;
    letter-spacing:-.055em;
    font-weight:900;
    text-shadow:0 8px 40px rgba(0,0,0,.4);
}

.jml13-hero h1 span {
    display:block;
    margin-top:7px;
    background:linear-gradient(90deg,#098bff,#20d6e9);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.jml13-description {
    max-width:730px;
    margin:26px 0 0;
    color:#a3b7c5;
    font-size:clamp(17px,1.2vw,21px);
    line-height:1.65;
}

/* ===== SERVIÇOS ===== */

.jml13-features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    max-width:880px;
    margin-top:55px;
    overflow:hidden;
    border:1px solid rgba(41,177,231,.25);
    border-radius:19px;
    background:rgba(1,18,30,.70);
    box-shadow:0 18px 55px rgba(0,0,0,.25);
    backdrop-filter:blur(14px);
}

.jml13-features article {
    min-height:104px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 24px;
}

.jml13-features article + article {
    border-left:1px solid rgba(54,173,220,.17);
}

.jml13-features article > span {
    align-self:flex-start;
    padding-top:4px;
    color:#20cdf3;
    font-size:10px;
    font-weight:900;
}

.jml13-features article div {
    display:flex;
    flex-direction:column;
    gap:7px;
}

.jml13-features b {
    font-size:13px;
    font-weight:900;
}

.jml13-features small {
    color:#7998aa;
    font-size:10px;
}

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

.jml13-access {
    width:100%;
    display:flex;
    justify-content:flex-end;
}

.jml13-card {
    width:100%;
    max-width:500px;
    padding:34px 38px 30px;
    border:1px solid rgba(48,190,245,.38);
    border-radius:28px;
    background:
        linear-gradient(145deg,
            rgba(4,31,48,.92),
            rgba(2,19,31,.96)
        );
    box-shadow:
        0 35px 90px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(25px);
}

.jml13-card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.jml13-card-header img {
    width:75px;
    height:75px;
    object-fit:contain;
}

.jml13-online {
    display:flex;
    align-items:center;
    gap:10px;
    color:#7999aa;
    font-size:9px;
    letter-spacing:.18em;
}

.jml13-divider {
    height:1px;
    margin:18px 0 32px;
    background:linear-gradient(90deg,rgba(37,189,243,.35),transparent);
}

.jml13-login-heading > span {
    color:#27cdf4;
    font-size:10px;
    font-weight:900;
    letter-spacing:.22em;
}

.jml13-login-heading h2 {
    margin:20px 0 7px;
    font-size:42px;
    line-height:1;
    letter-spacing:-.04em;
}

.jml13-login-heading p {
    margin:0 0 29px;
    color:#89a5b6;
    font-size:13px;
}

.jml13-form-group {
    margin-top:19px;
}

.jml13-form-group label {
    display:block;
    margin-bottom:9px;
    font-size:11px;
    font-weight:800;
}

.jml13-label-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.jml13-label-row button {
    padding:0;
    border:0;
    background:transparent;
    color:#1bcdf5;
    font-size:9px;
    cursor:pointer;
}

.jml13-field {
    height:62px;
    display:flex;
    align-items:center;
    padding:0 16px;
    border:1px solid rgba(64,181,228,.42);
    border-radius:13px;
    background:rgba(1,22,35,.82);
    transition:.2s ease;
}

.jml13-field:focus-within {
    border-color:#20c8f2;
    box-shadow:0 0 0 3px rgba(24,190,238,.08);
}

.jml13-icon {
    width:28px;
    color:#7ca7be;
    text-align:center;
}

.jml13-field input {
    flex:1;
    min-width:0;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:15px;
}

.jml13-field input::placeholder {
    color:#718896;
}

.jml13-password-toggle {
    border:0;
    background:transparent;
    color:#86aabc;
    cursor:pointer;
}

.jml13-submit {
    width:100%;
    height:66px;
    margin-top:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    border:0;
    border-radius:13px;
    background:linear-gradient(100deg,#0a82ff,#20d3e7);
    color:white;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 15px 40px rgba(0,149,255,.22);
    transition:transform .2s ease,box-shadow .2s ease;
}

.jml13-submit:hover {
    transform:translateY(-2px);
    box-shadow:0 20px 48px rgba(0,149,255,.30);
}

.jml13-security {
    margin-top:21px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
}

.jml13-shield {
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    border:1px solid rgba(26,190,238,.40);
    border-radius:50%;
    color:#22d1f3;
}

.jml13-security div:last-child {
    display:flex;
    flex-direction:column;
}

.jml13-security b {
    color:#7698aa;
    font-size:8px;
    letter-spacing:.16em;
}

.jml13-security small {
    margin-top:3px;
    color:#526f80;
    font-size:7px;
}

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

.jml13-footer {
    position:absolute;
    z-index:8;
    left:0;
    right:0;
    bottom:18px;
    padding:0 clamp(42px,4vw,82px);
    display:flex;
    justify-content:space-between;
    color:#456d82;
    font-size:8px;
    letter-spacing:.18em;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1100px) {

    .jml13-header {
        height:105px;
        padding:0 32px;
    }

    .jml13-brand img {
        width:67px;
        height:67px;
    }

    .jml13-layout {
        grid-template-columns:1fr 430px;
        gap:35px;
        padding:35px 32px 70px;
    }

    .jml13-hero h1 {
        font-size:58px;
    }

    .jml13-description {
        font-size:16px;
    }

    .jml13-features {
        margin-top:38px;
    }

    .jml13-features article {
        padding:17px 14px;
    }

    .jml13-card {
        padding:30px;
    }
}

/* ==========================================================
   TABLET VERTICAL / MOBILE
   Layout próprio - NÃO é desktop espremido
   ========================================================== */

@media (max-width:850px) {

    #loginPage.jml13 {
        min-height:100svh;
        background:#020c15;
    }

    .jml13-background {
        background:
            linear-gradient(
                180deg,
                rgba(0,10,18,.18) 0%,
                rgba(0,11,19,.42) 31%,
                rgba(0,10,18,.91) 65%,
                #020c15 100%
            ),
            url("/assets/login-security-clean.png")
            center top / auto 62vh no-repeat;
    }

    .jml13-header {
        height:94px;
        justify-content:center;
        padding:12px 20px;
        border:0;
    }

    .jml13-brand {
        flex-direction:column;
        gap:3px;
        text-align:center;
    }

    .jml13-brand img {
        width:60px;
        height:60px;
    }

    .jml13-brand strong {
        display:none;
    }

    .jml13-brand span {
        display:none;
    }

    .jml13-status {
        position:absolute;
        top:18px;
        right:18px;
    }

    .jml13-status > span {
        display:none;
    }

    .jml13-status b {
        font-size:7px;
    }

    .jml13-layout {
        display:block;
        min-height:auto;
        padding:0 20px 75px;
    }

    .jml13-hero {
        display:none;
    }

    .jml13-access {
        min-height:calc(100svh - 100px);
        align-items:center;
        justify-content:center;
        padding-top:14vh;
    }

    .jml13-card {
        max-width:500px;
        padding:28px 26px 25px;
        border-radius:25px;
        background:rgba(2,21,34,.90);
        box-shadow:0 30px 80px rgba(0,0,0,.58);
        backdrop-filter:blur(22px);
    }

    .jml13-card-header {
        justify-content:center;
    }

    .jml13-card-header img {
        width:85px;
        height:85px;
    }

    .jml13-online {
        position:absolute;
        top:25px;
        right:25px;
    }

    .jml13-divider {
        margin:14px 0 24px;
    }

    .jml13-login-heading {
        text-align:center;
    }

    .jml13-login-heading h2 {
        font-size:38px;
        margin-top:14px;
    }

    .jml13-login-heading p {
        margin-bottom:25px;
    }

    .jml13-footer {
        display:none;
    }
}

/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width:600px) {

    .jml13-background {
        background:
            linear-gradient(
                180deg,
                rgba(0,9,16,.18),
                rgba(0,10,18,.50) 27%,
                rgba(1,13,22,.94) 55%,
                #020c15 100%
            ),
            url("/assets/login-security-clean.png")
            center top / auto 46vh no-repeat;
    }

    .jml13-header {
        height:78px;
    }

    .jml13-brand img {
        width:53px;
        height:53px;
    }

    .jml13-layout {
        padding:0 14px 30px;
    }

    .jml13-access {
        min-height:calc(100svh - 78px);
        padding-top:15vh;
        align-items:flex-start;
    }

    .jml13-card {
        width:100%;
        max-width:420px;
        padding:23px 20px 20px;
        border-radius:22px;
    }

    .jml13-card-header img {
        width:69px;
        height:69px;
    }

    .jml13-online {
        top:23px;
        right:20px;
        font-size:7px;
    }

    .jml13-login-heading > span {
        font-size:8px;
    }

    .jml13-login-heading h2 {
        font-size:34px;
    }

    .jml13-login-heading p {
        font-size:12px;
    }

    .jml13-field {
        height:55px;
    }

    .jml13-submit {
        height:57px;
        margin-top:21px;
    }
}

/* celulares pequenos */
@media (max-width:390px) {

    .jml13-access {
        padding-top:11vh;
    }

    .jml13-card {
        padding:20px 17px 18px;
    }

    .jml13-card-header img {
        width:60px;
        height:60px;
    }

    .jml13-login-heading h2 {
        font-size:30px;
    }

    .jml13-form-group {
        margin-top:14px;
    }

    .jml13-field {
        height:51px;
    }

    .jml13-submit {
        height:53px;
    }
}


/* ==========================================================
   J.M. LAMEIRA V14.1
   REFINAMENTO FINAL RESPONSIVO
   ========================================================== */

/* ---------- DESKTOP / NOTEBOOK ---------- */

@media (min-width:1101px) {

    #loginPage.jml13 {
        height:100svh;
        min-height:720px;
    }

    .jml13-header {
        height:112px;
        padding-left:4.2vw;
        padding-right:4.2vw;
    }

    .jml13-brand img {
        width:72px;
        height:72px;
    }

    .jml13-brand strong {
        font-size:21px;
    }

    .jml13-layout {
        height:calc(100svh - 112px);
        min-height:608px;

        grid-template-columns:
            minmax(600px,1fr)
            minmax(410px,500px);

        gap:clamp(50px,6vw,115px);

        padding:
            clamp(25px,3vh,45px)
            4.2vw
            clamp(50px,6vh,75px);

        align-items:center;
    }

    .jml13-hero {
        max-width:900px;
        transform:translateY(-8px);
    }

    .jml13-eyebrow {
        margin-bottom:24px;
    }

    .jml13-hero h1 {
        max-width:790px;

        font-size:
            clamp(58px,4.5vw,82px);

        line-height:.93;
    }

    .jml13-description {
        max-width:690px;
        margin-top:22px;
        font-size:18px;
    }

    .jml13-features {
        max-width:800px;
        margin-top:38px;
    }

    .jml13-features article {
        min-height:88px;
        padding:16px 20px;
    }

    .jml13-access {
        align-items:center;
    }

    .jml13-card {
        max-width:480px;
        padding:27px 34px 25px;
        border-radius:25px;

        transition:
            transform .18s ease,
            box-shadow .25s ease;
    }

    .jml13-card-header img {
        width:64px;
        height:64px;
    }

    .jml13-divider {
        margin:14px 0 25px;
    }

    .jml13-login-heading h2 {
        margin:15px 0 6px;
        font-size:38px;
    }

    .jml13-login-heading p {
        margin-bottom:22px;
    }

    .jml13-form-group {
        margin-top:15px;
    }

    .jml13-field {
        height:56px;
    }

    .jml13-submit {
        height:59px;
        margin-top:20px;
    }

    .jml13-security {
        margin-top:16px;
    }
}


/* ---------- NOTEBOOK COM POUCA ALTURA ---------- */

@media (min-width:1101px) and (max-height:800px) {

    .jml13-header {
        height:90px;
    }

    .jml13-brand img {
        width:60px;
        height:60px;
    }

    .jml13-layout {
        height:calc(100svh - 90px);
        padding-top:15px;
        padding-bottom:38px;
    }

    .jml13-eyebrow {
        margin-bottom:17px;
    }

    .jml13-hero h1 {
        font-size:clamp(50px,4vw,68px);
    }

    .jml13-description {
        margin-top:15px;
        font-size:16px;
    }

    .jml13-features {
        margin-top:25px;
    }

    .jml13-features article {
        min-height:72px;
    }

    .jml13-card {
        padding:21px 30px;
    }

    .jml13-card-header img {
        width:52px;
        height:52px;
    }

    .jml13-divider {
        margin:10px 0 18px;
    }

    .jml13-login-heading h2 {
        margin-top:10px;
        font-size:33px;
    }

    .jml13-login-heading p {
        margin-bottom:14px;
    }

    .jml13-form-group {
        margin-top:11px;
    }

    .jml13-field {
        height:49px;
    }

    .jml13-submit {
        height:52px;
        margin-top:16px;
    }

    .jml13-security {
        margin-top:11px;
    }
}


/* ---------- TABLET ---------- */

@media (min-width:601px) and (max-width:1100px) {

    #loginPage.jml13 {
        min-height:100svh;
    }

    .jml13-header {
        height:92px;
        padding:12px 28px;
    }

    .jml13-brand img {
        width:62px;
        height:62px;
    }

    .jml13-brand strong {
        font-size:18px;
    }

    .jml13-layout {
        min-height:calc(100svh - 92px);
        display:flex;
        align-items:center;
        justify-content:center;
        padding:45px 28px 60px;
    }

    .jml13-hero {
        display:none;
    }

    .jml13-access {
        width:100%;
        justify-content:center;
        padding:0;
        min-height:0;
    }

    .jml13-card {
        width:min(100%,500px);
        padding:32px 35px 28px;
    }

    .jml13-card-header img {
        width:76px;
        height:76px;
    }

    .jml13-login-heading h2 {
        font-size:40px;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width:600px) {

    #loginPage.jml13 {
        min-height:100svh;
        overflow:auto;
    }

    .jml13-background {
        background:
            linear-gradient(
                180deg,
                rgba(0,8,15,.12) 0%,
                rgba(0,10,18,.34) 22%,
                rgba(1,13,22,.88) 43%,
                #020c15 66%
            ),
            url("/assets/login-security-clean.png")
            51% top / auto 48vh no-repeat;
    }

    .jml13-header {
        height:74px;
        padding:10px 15px;
        justify-content:center;
    }

    .jml13-brand img {
        width:58px;
        height:58px;
    }

    .jml13-status {
        top:16px;
        right:13px;
    }

    .jml13-status b {
        font-size:0;
        gap:0;
    }

    .jml13-status b i {
        width:8px;
        height:8px;
    }

    .jml13-layout {
        display:block;
        min-height:calc(100svh - 74px);
        padding:0 14px 24px;
    }

    .jml13-hero {
        display:none;
    }

    .jml13-access {
        min-height:calc(100svh - 74px);
        padding-top:18vh;
        align-items:flex-start;
        justify-content:center;
    }

    .jml13-card {
        width:100%;
        max-width:410px;

        padding:
            21px
            19px
            20px;

        border-radius:22px;

        background:
            linear-gradient(
                180deg,
                rgba(3,29,45,.94),
                rgba(2,17,28,.98)
            );

        box-shadow:
            0 25px 65px rgba(0,0,0,.62);
    }

    .jml13-card-header img {
        width:65px;
        height:65px;
    }

    .jml13-online {
        top:24px;
        right:20px;
    }

    .jml13-divider {
        margin:12px 0 19px;
    }

    .jml13-login-heading {
        text-align:center;
    }

    .jml13-login-heading h2 {
        margin:11px 0 5px;
        font-size:32px;
    }

    .jml13-login-heading p {
        margin-bottom:18px;
        font-size:11px;
    }

    .jml13-form-group {
        margin-top:13px;
    }

    .jml13-field {
        height:51px;
    }

    .jml13-field input {
        font-size:14px;
    }

    .jml13-submit {
        height:54px;
        margin-top:17px;
    }

    .jml13-security {
        margin-top:13px;
    }

    .jml13-footer {
        display:none;
    }
}


/* ---------- CELULAR PEQUENO ---------- */

@media (max-width:390px) {

    .jml13-background {
        background-size:auto 43vh;
    }

    .jml13-access {
        padding-top:13vh;
    }

    .jml13-card {
        padding:18px 16px;
    }

    .jml13-card-header img {
        width:55px;
        height:55px;
    }

    .jml13-login-heading h2 {
        font-size:29px;
    }

    .jml13-field {
        height:48px;
    }

    .jml13-submit {
        height:50px;
    }
}


/* ==========================================================
   JML MOBILE V15
   Uma única logo + melhor enquadramento mobile
   ========================================================== */

@media (max-width: 600px) {

    /* No celular a logo principal do topo permanece */
    .jml13-header {
        height: 108px;
        padding: 14px 20px;
        align-items: flex-start;
        justify-content: center;
    }

    .jml13-brand {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5px;
        position: relative;
        z-index: 10;
    }

    .jml13-brand img {
        display: block !important;
        width: 92px;
        height: 92px;
        object-fit: contain;
        filter:
            drop-shadow(0 0 12px rgba(0,180,255,.28))
            drop-shadow(0 8px 20px rgba(0,0,0,.35));
    }

    /* Evita repetir nome/texto ao lado da logo no mobile */
    .jml13-brand > div {
        display: none !important;
    }

    /* Remove a segunda logo de dentro do card */
    .jml13-card-header img {
        display: none !important;
    }

    /* Mantém somente o indicador ONLINE no card */
    .jml13-card-header {
        min-height: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .jml13-online {
        position: static !important;
        margin: 0;
    }

    /* Fundo de monitoramento */
    .jml13-background {
        background:
            linear-gradient(
                180deg,
                rgba(0,8,15,.12) 0%,
                rgba(0,10,18,.25) 22%,
                rgba(0,11,19,.68) 43%,
                rgba(2,12,21,.97) 65%,
                #020c15 100%
            ),
            url("/assets/login-security-clean.png")
            center top / auto 48vh no-repeat;
    }

    /* Card começa depois da área visual */
    .jml13-layout {
        padding: 0 14px 30px;
    }

    .jml13-access {
        min-height: 100svh;
        padding-top: 38vh;
        align-items: flex-start;
    }

    .jml13-card {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
        padding: 22px 20px 23px;
        border-radius: 25px;
        background:
            linear-gradient(
                180deg,
                rgba(4,35,53,.96),
                rgba(2,22,35,.98)
            );
        box-shadow:
            0 24px 70px rgba(0,0,0,.50),
            0 0 0 1px rgba(28,199,245,.08);
    }

    .jml13-divider {
        margin-top: 5px;
        margin-bottom: 27px;
    }

    .jml13-login-heading {
        text-align: center;
    }

    .jml13-login-heading > span {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .jml13-login-heading h2 {
        font-size: 36px;
        line-height: 1;
        margin-top: 12px;
    }

    .jml13-login-heading p {
        font-size: 13px;
        margin-top: 11px;
        margin-bottom: 27px;
    }

    .jml13-form-group {
        margin-top: 17px;
    }

    .jml13-field {
        height: 58px;
        border-radius: 16px;
    }

    .jml13-submit {
        height: 60px;
        margin-top: 24px;
        border-radius: 16px;
        font-size: 15px;
    }

    .jml13-security {
        margin-top: 22px;
        justify-content: center;
    }

    /* No celular não precisamos do conteúdo comercial lateral */
    .jml13-hero {
        display: none !important;
    }

    .jml13-status {
        display: none !important;
    }

    .jml13-footer {
        display: none !important;
    }
}


/* Celulares menores */
@media (max-width: 390px) {

    .jml13-header {
        height: 98px;
    }

    .jml13-brand img {
        width: 82px;
        height: 82px;
    }

    .jml13-access {
        padding-top: 35vh;
    }

    .jml13-card {
        padding: 20px 17px 20px;
        border-radius: 22px;
    }

    .jml13-login-heading h2 {
        font-size: 32px;
    }

    .jml13-field {
        height: 54px;
    }

    .jml13-submit {
        height: 56px;
    }
}


/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {

    .jml13-card-header img {
        width: 78px;
        height: 78px;
    }

    .jml13-card {
        max-width: 520px;
    }
}


/* ==========================================================
   J.M. LAMEIRA - MOBILE V16 FINAL
   Somente celular - Desktop permanece inalterado
   ========================================================== */

@media (max-width:600px) {

    /* página */
    #loginPage.jml13 {
        min-height:100svh;
        overflow-x:hidden;
        overflow-y:auto;
        background:#020c15;
    }

    /* imagem principal do ambiente */
    .jml13-background {
        position:absolute;
        inset:0;
        min-height:100%;
        background:
            linear-gradient(
                180deg,
                rgba(0,8,14,.06) 0%,
                rgba(0,9,16,.12) 20%,
                rgba(0,10,18,.30) 36%,
                rgba(1,12,21,.78) 50%,
                #020c15 66%,
                #020c15 100%
            ),
            url("/assets/login-security-clean.png")
            center top / auto 54vh no-repeat;
    }

    /*
       No celular usamos somente UMA logo.
       A logo do cabeçalho é eliminada.
    */
    .jml13-header {
        position:absolute;
        top:0;
        left:0;
        right:0;
        height:60px;
        padding:0;
        border:0;
        pointer-events:none;
    }

    .jml13-brand {
        display:none !important;
    }

    /*
       Remove o indicador superior para não disputar
       espaço com a logo e com o status do card.
    */
    .jml13-status {
        display:none !important;
    }

    /* layout mobile */
    .jml13-layout {
        display:block;
        width:100%;
        min-height:100svh;
        padding:
            clamp(315px, 48vh, 410px)
            14px
            34px;
    }

    .jml13-hero {
        display:none !important;
    }

    .jml13-access {
        display:flex;
        width:100%;
        min-height:0;
        padding:0;
        margin:0;
        align-items:flex-start;
        justify-content:center;
    }

    /* card */
    .jml13-card {
        position:relative;
        width:100%;
        max-width:430px;
        margin:0 auto;
        padding:24px 20px 22px;
        border-radius:25px;

        background:
            linear-gradient(
                180deg,
                rgba(3,31,48,.96),
                rgba(2,21,34,.98)
            );

        border:1px solid rgba(39,184,239,.40);

        box-shadow:
            0 25px 70px rgba(0,0,0,.58),
            0 0 0 1px rgba(0,181,255,.03) inset;

        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
    }

    /* ======================================================
       LOGO ÚNICA
       ====================================================== */

    .jml13-card-header {
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:104px;
        padding:0;
    }

    .jml13-card-header img {
        display:block;
        width:112px;
        height:112px;
        max-width:none;
        object-fit:contain;

        filter:
            drop-shadow(0 8px 14px rgba(0,0,0,.50))
            drop-shadow(0 0 12px rgba(0,174,255,.14));
    }

    /* status online dentro do card */
    .jml13-online {
        position:absolute;
        top:9px;
        right:2px;

        display:flex;
        align-items:center;
        gap:8px;

        font-size:8px;
        font-weight:700;
        letter-spacing:.20em;
        color:#91a9b8;
    }

    .jml13-online i {
        width:10px;
        height:10px;
    }

    /* divisor */
    .jml13-divider {
        margin:12px 0 28px;
        opacity:.85;
    }

    /* título */
    .jml13-login-heading {
        text-align:center;
    }

    .jml13-login-heading > span {
        display:block;
        font-size:9px;
        font-weight:900;
        letter-spacing:.28em;
        color:#22cff5;
    }

    .jml13-login-heading h2 {
        margin:13px 0 7px;
        font-size:34px;
        line-height:1.05;
        letter-spacing:-.035em;
    }

    .jml13-login-heading p {
        margin:0 0 25px;
        font-size:13px;
        line-height:1.5;
        color:#92a9b8;
    }

    /* formulário */
    .jml13-form-group {
        margin-top:17px;
    }

    .jml13-label-row {
        margin-bottom:8px;
    }

    .jml13-form-group label {
        font-size:13px;
    }

    .jml13-label-row button {
        font-size:10px;
    }

    .jml13-field {
        width:100%;
        height:58px;
        border-radius:16px;
        padding:0 15px;
    }

    .jml13-field input {
        min-width:0;
        font-size:16px;
    }

    .jml13-icon {
        flex:0 0 auto;
    }

    .jml13-password-toggle {
        flex:0 0 auto;
    }

    /* botão */
    .jml13-submit {
        width:100%;
        height:60px;
        margin-top:23px;
        border-radius:16px;
        font-size:15px;
    }

    /* conexão protegida */
    .jml13-security {
        margin-top:22px;
        justify-content:center;
    }

    .jml13-shield {
        flex:0 0 auto;
    }

    .jml13-security b {
        font-size:8px;
        letter-spacing:.17em;
    }

    .jml13-security small {
        font-size:7px;
    }

    .jml13-footer {
        display:none !important;
    }
}


/* ==========================================================
   CELULARES PEQUENOS
   ========================================================== */

@media (max-width:390px) {

    .jml13-background {
        background:
            linear-gradient(
                180deg,
                rgba(0,8,14,.05) 0%,
                rgba(0,9,16,.14) 20%,
                rgba(0,10,18,.34) 35%,
                rgba(1,12,21,.82) 49%,
                #020c15 64%,
                #020c15 100%
            ),
            url("/assets/login-security-clean.png")
            center top / auto 50vh no-repeat;
    }

    .jml13-layout {
        padding:
            clamp(285px, 45vh, 370px)
            10px
            26px;
    }

    .jml13-card {
        padding:21px 17px 20px;
        border-radius:22px;
    }

    .jml13-card-header {
        min-height:92px;
    }

    .jml13-card-header img {
        width:98px;
        height:98px;
    }

    .jml13-online {
        top:8px;
        right:0;
        font-size:7px;
    }

    .jml13-divider {
        margin:10px 0 23px;
    }

    .jml13-login-heading h2 {
        font-size:31px;
    }

    .jml13-login-heading p {
        font-size:12px;
        margin-bottom:20px;
    }

    .jml13-form-group {
        margin-top:14px;
    }

    .jml13-field {
        height:54px;
        border-radius:15px;
    }

    .jml13-submit {
        height:56px;
        margin-top:20px;
    }

    .jml13-security {
        margin-top:18px;
    }
}


/* ==========================================================
   CELULAR EM PAISAGEM
   ========================================================== */

@media (max-width:850px) and (max-height:500px) and (orientation:landscape) {

    .jml13-background {
        background:
            linear-gradient(
                90deg,
                rgba(0,9,16,.30),
                rgba(0,10,18,.72)
            ),
            url("/assets/login-security-clean.png")
            center center / cover no-repeat;
    }

    .jml13-layout {
        min-height:100svh;
        padding:20px;
    }

    .jml13-access {
        justify-content:flex-end;
        align-items:center;
    }

    .jml13-card {
        width:min(420px,58vw);
        padding:18px;
    }

    .jml13-card-header {
        min-height:55px;
    }

    .jml13-card-header img {
        width:62px;
        height:62px;
    }

    .jml13-divider {
        margin:7px 0 12px;
    }

    .jml13-login-heading h2 {
        font-size:26px;
        margin:7px 0 4px;
    }

    .jml13-login-heading p {
        margin-bottom:10px;
    }

    .jml13-form-group {
        margin-top:9px;
    }

    .jml13-field {
        height:45px;
    }

    .jml13-submit {
        height:47px;
        margin-top:12px;
    }

    .jml13-security {
        display:none;
    }
}


/* ==========================================================
   MOBILE V17 - LOGO + ALINHAMENTO FINAL
   ========================================================== */

@media (max-width:600px) {

    /* Fundo/Cenário */
    .jml13-background {
        background:
            linear-gradient(
                180deg,
                rgba(0,8,14,.05) 0%,
                rgba(0,9,16,.10) 22%,
                rgba(0,10,18,.30) 39%,
                rgba(1,12,21,.78) 52%,
                #020c15 69%,
                #020c15 100%
            ),
            url("/assets/login-security-clean.png")
            center top / auto 50vh no-repeat;
    }

    /* elimina completamente a logo superior no mobile */
    .jml13-header {
        display:none !important;
    }

    /* aproxima o formulário da imagem */
    .jml13-layout {
        display:block;
        width:100%;
        min-height:100svh;
        padding:
            clamp(290px, 43vh, 355px)
            12px
            28px;
    }

    .jml13-hero {
        display:none !important;
    }

    .jml13-access {
        width:100%;
        min-height:0;
        display:flex;
        justify-content:center;
        align-items:flex-start;
        padding:0;
        margin:0;
    }

    /* Card */
    .jml13-card {
        position:relative;
        width:100%;
        max-width:430px;
        margin:0 auto;
        padding:22px 20px 22px;
        border-radius:25px;
    }

    /* ===============================
       LOGO PRINCIPAL DO MOBILE
       =============================== */

    .jml13-card-header {
        position:relative;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        width:100%;
        height:118px;
        min-height:118px;
        padding:0 !important;
        margin:0;
    }

    .jml13-card-header img {
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        width:118px !important;
        height:118px !important;
        max-width:118px !important;

        object-fit:contain;
        object-position:center;

        margin:0 auto !important;

        filter:
            drop-shadow(0 8px 18px rgba(0,0,0,.55))
            drop-shadow(0 0 14px rgba(0,180,255,.18));
    }

    /* ONLINE fica no canto, sem interferir na logo */
    .jml13-online {
        position:absolute !important;
        top:12px !important;
        right:3px !important;

        display:flex !important;
        align-items:center;
        gap:8px;

        font-size:8px;
        letter-spacing:.18em;
        color:#8fa9b9;
    }

    .jml13-online i {
        width:10px;
        height:10px;
    }

    /* linha abaixo da logo */
    .jml13-divider {
        margin:10px 0 24px !important;
    }

    /* conteúdo */
    .jml13-login-heading {
        text-align:center;
    }

    .jml13-login-heading > span {
        font-size:9px;
        letter-spacing:.27em;
    }

    .jml13-login-heading h2 {
        margin:13px 0 8px;
        font-size:34px;
        line-height:1.05;
    }

    .jml13-login-heading p {
        margin:0 0 22px;
        font-size:13px;
    }

    /* formulário */
    .jml13-form-group {
        margin-top:16px;
    }

    .jml13-field {
        height:57px;
        border-radius:16px;
    }

    .jml13-field input {
        font-size:16px;
    }

    /* botão */
    .jml13-submit {
        height:58px;
        margin-top:21px;
        border-radius:16px;
    }

    /* rodapé de segurança */
    .jml13-security {
        margin-top:20px;
        justify-content:center;
    }
}


/* Samsung / celulares mais estreitos */
@media (max-width:390px) {

    .jml13-layout {
        padding:
            clamp(270px, 41vh, 330px)
            10px
            24px;
    }

    .jml13-card {
        padding:19px 16px 20px;
        border-radius:22px;
    }

    .jml13-card-header {
        height:105px;
        min-height:105px;
    }

    .jml13-card-header img {
        width:105px !important;
        height:105px !important;
        max-width:105px !important;
    }

    .jml13-online {
        top:9px !important;
        right:1px !important;
        font-size:7px;
    }

    .jml13-divider {
        margin:8px 0 21px !important;
    }

    .jml13-login-heading h2 {
        font-size:31px;
    }

    .jml13-login-heading p {
        font-size:12px;
        margin-bottom:18px;
    }

    .jml13-field {
        height:53px;
    }

    .jml13-submit {
        height:55px;
    }
}



/* ==========================================================
   LOGIN V18
   INPUTS + AUTOFILL + VISIBILIDADE DA SENHA
   Desktop / Tablet / Mobile
   ========================================================== */

.jml13-field {
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    overflow:hidden;

    background:rgba(2,24,38,.88) !important;
    border:1px solid rgba(55,190,240,.42);

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

.jml13-field:focus-within {
    border-color:#19c9f4;
    background:rgba(2,29,45,.96) !important;

    box-shadow:
        0 0 0 3px rgba(25,201,244,.08),
        0 0 22px rgba(25,201,244,.08);
}


/* Ícones da esquerda */

.jml13-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 40px;

    color:#76a5bd;
    font-size:17px;

    opacity:.95;
}


/* INPUT */

.jml13-field input {
    display:block;

    flex:1 1 auto;
    width:100%;
    min-width:0;
    height:100%;

    padding:0 12px;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    color:#f2f8fc !important;

    font-family:inherit;
    font-size:16px;
    font-weight:500;

    caret-color:#19c9f4;

    box-shadow:none !important;
    -webkit-box-shadow:none !important;

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


/* Placeholder */

.jml13-field input::placeholder {
    color:#6f8a9b !important;
    opacity:1;
}


/* ==========================================================
   CORREÇÃO DO AUTOFILL CHROME / EDGE / ANDROID
   Remove aquele fundo branco da imagem
   ========================================================== */

.jml13-field input:-webkit-autofill,
.jml13-field input:-webkit-autofill:hover,
.jml13-field input:-webkit-autofill:focus,
.jml13-field input:-webkit-autofill:active {

    -webkit-text-fill-color:#f2f8fc !important;

    -webkit-box-shadow:
        0 0 0 1000px #021826 inset !important;

    box-shadow:
        0 0 0 1000px #021826 inset !important;

    caret-color:#19c9f4 !important;

    transition:
        background-color 99999s ease-out 0s;
}


/* Firefox */

.jml13-field input:autofill {
    color:#f2f8fc !important;
    background:#021826 !important;
}


/* ==========================================================
   BOTÃO OLHO
   ========================================================== */

.jml13-password-toggle {
    position:relative;

    flex:0 0 48px;

    width:48px;
    height:100%;

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

    padding:0;
    margin:0;

    border:0;
    outline:0;

    background:transparent !important;

    color:#7da7bd;

    cursor:pointer;

    transition:
        color .2s ease,
        transform .2s ease,
        opacity .2s ease;
}


/* desenha o olho */

.jml13-password-toggle::before {
    content:"";

    width:20px;
    height:14px;

    border:2px solid currentColor;

    border-radius:
        70% 30%
        70% 30%;

    transform:rotate(45deg);

    opacity:.9;
}


/* pupila */

.jml13-password-toggle::after {
    content:"";

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:currentColor;
}


.jml13-password-toggle:hover {
    color:#21d2f4;
}


.jml13-password-toggle:active {
    transform:scale(.92);
}


/* senha visível */

.jml13-password-toggle.is-visible {
    color:#20d2f4;
}


/* risco indicando que a senha está escondida */

.jml13-password-toggle:not(.is-visible) span {
    display:none;
}


/* não exibe o caractere antigo ◉ */

.jml13-password-toggle {
    font-size:0 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:600px) {

    .jml13-field {
        padding-left:7px;
    }

    .jml13-icon {
        flex-basis:36px;
        font-size:15px;
    }

    .jml13-field input {
        padding-left:7px;
        font-size:16px;
    }

    .jml13-password-toggle {
        flex-basis:46px;
        width:46px;
    }

    .jml13-password-toggle::before {
        width:19px;
        height:13px;
    }

    .jml13-password-toggle::after {
        width:6px;
        height:6px;
    }
}