/* Corrección para autocompletado del navegador */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #021739;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Estilo para que el label no tape el icono cuando está abajo */
.peer:placeholder-shown ~ label {
    left: 3rem; /* Alineado con el inicio del texto, después del icono */
}
        
.peer:focus ~ label,
.peer:not(:placeholder-shown) ~ label {
    left: 1rem; /* Regresa a la izquierda cuando sube */
}

/* ─── Variables ─── */
        :root {
            --green:      #A2CB3B;
            --green-dark: #8ab52e;
            --navy:       #021739;
            --navy-mid:   #0a2a52;
            --navy-light: #0d3366;
            --card-bg:    rgba(255,255,255,0.97);
        }

        /* ─── Animated gradient background ─── */
        .bg-scene {
            position: fixed;
            inset: 0;
            background: radial-gradient(ellipse 80% 80% at 20% 50%, #0d3a6e 0%, #021739 55%, #030d1f 100%);
            z-index: 0;
        }
        .bg-scene::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle 500px at 80% 20%, rgba(162,203,59,.18) 0%, transparent 70%),
                radial-gradient(circle 400px at 10% 80%, rgba(13,51,102,.6)   0%, transparent 70%);
            animation: bgPulse 8s ease-in-out infinite alternate;
        }
        .bg-scene::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle 1px at 15% 25%, rgba(255,255,255,.4) 0%, transparent 1px),
                radial-gradient(circle 1px at 85% 15%, rgba(255,255,255,.3) 0%, transparent 1px),
                radial-gradient(circle 1px at 45% 75%, rgba(255,255,255,.35) 0%, transparent 1px),
                radial-gradient(circle 1px at 70% 60%, rgba(255,255,255,.25) 0%, transparent 1px),
                radial-gradient(circle 1px at 25% 55%, rgba(255,255,255,.3) 0%, transparent 1px),
                radial-gradient(circle 1px at 60% 35%, rgba(255,255,255,.2) 0%, transparent 1px),
                radial-gradient(circle 1px at 90% 80%, rgba(255,255,255,.25) 0%, transparent 1px),
                radial-gradient(circle 1.5px at 5%  90%, rgba(255,255,255,.3) 0%, transparent 2px);
        }
        @keyframes bgPulse {
            from { opacity: .8; }
            to   { opacity: 1; }
        }

        /* ─── Floating orbs ─── */
        .orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(80px);
            pointer-events: none;
            z-index: 0;
        }
        .orb-1 {
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(162,203,59,.22) 0%, transparent 70%);
            top: -100px; right: -100px;
            animation: orbFloat1 12s ease-in-out infinite alternate;
        }
        .orb-2 {
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(13,51,102,.5) 0%, transparent 70%);
            bottom: -80px; left: -80px;
            animation: orbFloat2 10s ease-in-out infinite alternate;
        }
        .orb-3 {
            width: 250px; height: 250px;
            background: radial-gradient(circle, rgba(162,203,59,.12) 0%, transparent 70%);
            top: 40%; left: 30%;
            animation: orbFloat3 14s ease-in-out infinite alternate;
        }
        @keyframes orbFloat1 { from { transform: translate(0,0) scale(1); }   to { transform: translate(-40px, 60px) scale(1.1); } }
        @keyframes orbFloat2 { from { transform: translate(0,0) scale(1); }   to { transform: translate(50px,-40px) scale(1.05); } }
        @keyframes orbFloat3 { from { transform: translate(0,0) scale(.9); }  to { transform: translate(30px, 30px) scale(1.1); } }

        /* ─── Main card ─── */
        .login-card {
            position: relative;
            z-index: 10;
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: min(920px, 96vw);
            min-height: 520px;
            border-radius: 2.25rem;
            overflow: hidden;
            box-shadow:
                0 40px 100px rgba(0,0,0,.55),
                0 0 0 1px rgba(255,255,255,.07);
            animation: cardIn .7s cubic-bezier(.22,1,.36,1) both;
        }
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(32px) scale(.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ─── Left panel ─── */
        .left-panel {
            background: linear-gradient(145deg, #0e3060 0%, #091e3e 50%, #041120 100%);
            padding: 3rem 2.5rem;
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .left-panel::before {
            content: '';
            position: absolute;
            width: 340px; height: 340px;
            background: radial-gradient(circle, rgba(162,203,59,.18) 0%, transparent 65%);
            top: -60px; right: -80px;
            border-radius: 50%;
            pointer-events: none;
        }
        .left-panel::after {
            content: '';
            position: absolute;
            width: 220px; height: 220px;
            background: radial-gradient(circle, rgba(162,203,59,.10) 0%, transparent 65%);
            bottom: 60px; left: -50px;
            border-radius: 50%;
            pointer-events: none;
        }

        /* Badge */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            background: rgba(162,203,59,.18);
            border: 1px solid rgba(162,203,59,.35);
            border-radius: 999px;
            padding: .35rem .9rem;
            font-size: .72rem;
            font-weight: 700;
            color: var(--green);
            letter-spacing: .08em;
            text-transform: uppercase;
            width: fit-content;
            animation: fadeSlideUp .6s .1s cubic-bezier(.22,1,.36,1) both;
        }
        .badge-dot {
            width: 7px; height: 7px;
            background: var(--green);
            border-radius: 50%;
            animation: dotPulse 2s infinite;
        }
        @keyframes dotPulse {
            0%,100% { opacity: 1; transform: scale(1); }
            50%      { opacity: .5; transform: scale(.7); }
        }

        /* Heading */
        /* Título centrado */
        .left-heading {
            flex: 1;
            display: flex;
            align-items: start;
            justify-content: center;
            text-align: center;
            padding-top: 20px;
        }

        .left-heading h1 {
            font-size: 4rem;
            font-weight: 900;
            color: #fff;
            line-height: 1.1;
        }

        .left-heading h1 span {
            color: var(--green);
        }

        /* Párrafo abajo */
        .left-description {
            margin-top: auto;
        }

        .left-description p {
            color: rgba(255,255,255,.55);
            font-size: 1.03rem;
            line-height: 1.6;
        }

        /* Error */
        .msg-error {
            display: none;
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #dc2626;
            font-size: .82rem;
            font-weight: 700;
            text-align: center;
            padding: .65rem 1rem;
            border-radius: .75rem;
            margin-bottom: 1rem;
        }
        .msg-error.visible { display: block; animation: shake .4s; }
        @keyframes shake {
            0%,100% { transform: translateX(0); }
            20%      { transform: translateX(-6px); }
            40%      { transform: translateX(6px); }
            60%      { transform: translateX(-4px); }
            80%      { transform: translateX(4px); }
        }

        /* Submit button */
        .btn-submit {
            position: relative;
            width: 100%;
            background: var(--green);
            color: #fff;
            font-family: 'Nunito', sans-serif;
            font-size: .9rem;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
            border: none;
            border-radius: .9rem;
            padding: 1rem;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 0 6px 24px rgba(162,203,59,.35);
            transition: background .25s, transform .2s, box-shadow .25s;
        }
        .btn-submit:hover:not(:disabled) {
            background: var(--green-dark);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(162,203,59,.45);
        }
        .btn-submit:active:not(:disabled) { transform: translateY(0); }
        .btn-submit:disabled { opacity: .8; cursor: not-allowed; }

        /* shimmer on hover */
        .btn-submit::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
            transform: translateX(-100%);
            transition: transform .5s;
        }
        .btn-submit:hover::after { transform: translateX(100%); }

        /* loading bar */
        .btn-loading-bar {
            position: absolute;
            bottom: 0; left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 0%;
            background: rgba(255,255,255,.7);
            border-radius: 4px 4px 0 0;
            transition: height 1s ease-out;
        }
        .btn-text-wrap, .btn-loading-wrap {
            transition: opacity .3s;
        }
        .btn-loading-wrap {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            font-size: .82rem;
        }

        /* Animations */
        @keyframes fadeSlideUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ─── Page footer (outside card) ─── */
        .page-footer {
            position: relative;
            z-index: 10;
            text-align: center;
            margin-top: 1.5rem;
            font-size: .78rem;
            color: rgba(255,255,255,.45);
            font-weight: 600;
            letter-spacing: .02em;
            animation: fadeSlideUp .6s .55s cubic-bezier(.22,1,.36,1) both;
        }
        .page-footer span { color: rgba(255,255,255,.85); font-weight: 800; }

        /* ─── Page wrapper (card + footer stacked) ─── */
        .page-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 1.5rem 0;
        }

        /* ─── Responsive ─── */
        @media (max-width: 680px) {
            .login-card {
                grid-template-columns: 1fr;
                width: 92vw;
                border-radius: 1.75rem;
            }
            .left-panel { display: none; }
            .right-panel { padding: 2.25rem 1.75rem; }
            .logo-ring { width: 64px; height: 64px; }
            .logo-inner { width: 42px; height: 42px; }
        }