/* ============================================================
   Login — Maxx Admin
   Paleta: azul #1A3A6C · verde #197C74 · verde-claro #A8D8CD
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Painel esquerdo */
    --c-bg: #1A3A6C;
    --c-accent: #A8D8CD;
    --c-accent-dim: rgba(168, 216, 205, 0.12);
    --c-accent-glow: rgba(168, 216, 205, 0.25);
    --c-text: #ffffff;
    --c-muted: rgba(255, 255, 255, 0.45);
    --c-border-l: rgba(255, 255, 255, 0.08);

    /* Painel direito */
    --c-surface: #ffffff;
    --c-green: #197C74;
    --c-green-glow: rgba(25, 124, 116, 0.25);
    --c-form-text: #1E293B;
    --c-form-muted: #64748B;
    --c-form-border: #E2E8F0;
    --c-form-bg: #F8FAFC;
    --c-focus-border: #1A3A6C;
    --c-focus-shadow: rgba(26, 58, 108, 0.09);
}

body.guest-layout {
    margin: 0;
    padding: 0;
    background: var(--c-bg);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

main.guest-content {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

.mxl-root {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 100vh;
}

/* ═══════════════════════════════════════
   LEFT — BRAND PANEL
═══════════════════════════════════════ */
.mxl-brand {
    position: relative;
    overflow: hidden;
    background: var(--c-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 56px;
}

/* Scrolling grid */
.mxl-grid-bg {
    position: absolute;
    inset: -48px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: mxGridScroll 20s linear infinite;
}

@keyframes mxGridScroll {
    to {
        transform: translateY(48px);
    }
}

/* Glow orbs */
.mxl-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.mxl-orb-1 {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(168, 216, 205, 0.22) 0%, transparent 70%);
    top: -180px;
    left: -160px;
    animation: mxOrb1 9s ease-in-out infinite;
}

.mxl-orb-2 {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(43, 91, 174, 0.45) 0%, transparent 70%);
    bottom: -140px;
    right: -120px;
    animation: mxOrb2 11s ease-in-out infinite;
}

.mxl-orb-3 {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(25, 124, 116, 0.20) 0%, transparent 70%);
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    animation: mxOrb3 13s ease-in-out infinite;
}

@keyframes mxOrb1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(28px, 40px) scale(1.08);
    }
}

@keyframes mxOrb2 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-22px, -28px) scale(0.94);
    }
}

@keyframes mxOrb3 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.25;
    }
}

/* Scan line */
.mxl-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
    opacity: 0.28;
    animation: mxScan 8s linear infinite;
}

@keyframes mxScan {
    from {
        top: -1px;
    }

    to {
        top: 100%;
    }
}

/* Corner brackets */
.mxl-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    opacity: 0.55;
}

.mxl-corner-tl {
    top: 20px;
    left: 20px;
    border-top: 2px solid var(--c-accent);
    border-left: 2px solid var(--c-accent);
}

.mxl-corner-tr {
    top: 20px;
    right: 20px;
    border-top: 2px solid var(--c-accent);
    border-right: 2px solid var(--c-accent);
}

.mxl-corner-bl {
    bottom: 20px;
    left: 20px;
    border-bottom: 2px solid var(--c-accent);
    border-left: 2px solid var(--c-accent);
}

.mxl-corner-br {
    bottom: 20px;
    right: 20px;
    border-bottom: 2px solid var(--c-accent);
    border-right: 2px solid var(--c-accent);
}

/* Floating squares */
.mxl-float {
    position: absolute;
    border: 1px solid rgba(168, 216, 205, 0.13);
    animation: mxFloat linear infinite;
}

@keyframes mxFloat {
    0% {
        transform: translateY(110vh) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        transform: translateY(-80px) rotate(270deg);
        opacity: 0;
    }
}

/* Brand content */
.mxl-brand-inner {
    position: relative;
    z-index: 10;
    text-align: center;
    animation: mxFadeUp 0.8s ease both;
}

.mxl-logo {
    width: 300px;
    margin-bottom: 36px;
    filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(168, 216, 205, 0.20));
}

.mxl-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 14px;
    opacity: 0.9;
}

.mxl-headline {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 58px;
    font-weight: 800;
    line-height: 0.95;
    color: var(--c-text);
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.mxl-headline em {
    font-style: normal;
    color: var(--c-accent);
}

.mxl-desc {
    font-size: 14px;
    color: var(--c-muted);
    max-width: 300px;
    line-height: 1.75;
    font-weight: 300;
    margin: 0 auto;
}

/* Módulos da plataforma */
.mxl-modules {
    display: flex;
    gap: 10px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--c-border-l);
    justify-content: center;
    flex-wrap: wrap;
}

.mxl-module-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.03em;
}

.mxl-module-tag::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-accent);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════
   RIGHT — FORM PANEL
═══════════════════════════════════════ */
.mxl-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 52px;
    background: var(--c-surface);
    position: relative;
    overflow: hidden;
}

.mxl-form-panel::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--c-accent) 50%, transparent);
    opacity: 0.35;
}

.mxl-form-wrap {
    width: 100%;
    max-width: 390px;
    position: relative;
    z-index: 1;
    animation: mxFadeUp 0.65s ease both;
}

@keyframes mxFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mxl-mobile-logo {
    display: none;
    width: 150px;
    margin: 0 auto 32px;
}

/* Header */
.mxl-header {
    margin-bottom: 36px;
}

.mxl-header-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-green);
    margin-bottom: 12px;
}

.mxl-header-tag::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: var(--c-green);
}

.mxl-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--c-bg);
    line-height: 1.05;
    letter-spacing: -0.5px;
}

.mxl-subtitle {
    font-size: 14px;
    color: var(--c-form-muted);
    margin-top: 8px;
    font-weight: 300;
}

/* Fields */
.mxl-field {
    margin-bottom: 18px;
}

.mxl-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c-form-muted);
    margin-bottom: 8px;
    transition: color 0.2s;
}

.mxl-field:focus-within .mxl-label {
    color: var(--c-focus-border);
}

.mxl-input-wrap {
    position: relative;
}

.mxl-input {
    width: 100%;
    background: var(--c-form-bg);
    border: 1.5px solid var(--c-form-border);
    border-radius: 10px;
    padding: 13px 44px 13px 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    color: var(--c-form-text);
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.mxl-input::placeholder {
    color: #C8D5E2;
}

.mxl-input:focus {
    border-color: var(--c-focus-border);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--c-focus-shadow);
}

.mxl-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #CBD5E1;
    pointer-events: none;
    transition: color 0.2s;
    display: flex;
}

.mxl-field:focus-within .mxl-icon {
    color: var(--c-focus-border);
}

/* Toggle password */
.mxl-toggle-pass {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #CBD5E1;
    display: flex;
    padding: 4px;
    transition: color 0.2s;
}

.mxl-toggle-pass:hover {
    color: var(--c-focus-border);
}

/* Submit */
.mxl-btn {
    width: 100%;
    margin-top: 28px;
    padding: 15px;
    background: var(--c-green);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s;
}

.mxl-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.45s ease;
}

.mxl-btn:hover {
    background: #125C56;
    transform: translateY(-2px);
    box-shadow: 0 6px 28px var(--c-green-glow);
}

.mxl-btn:hover::after {
    transform: translateX(100%);
}

.mxl-btn:active {
    transform: translateY(0);
    box-shadow: none;
    background: #0E4A45;
}

.mxl-btn-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Footer */
.mxl-footer {
    margin-top: 36px;
    text-align: center;
    font-size: 11px;
    color: #C0CCDA;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 860px) {
    .mxl-root {
        grid-template-columns: 1fr;
    }

    .mxl-brand {
        display: none;
    }

    .mxl-form-panel {
        padding: 48px 24px;
    }

    .mxl-form-panel::before {
        display: none;
    }

    .mxl-mobile-logo {
        display: block;
    }
}