<?php if(isset($_GET["pc"])) { Session::set('host_pc', 'PC0'.$_GET["pc"]); } ?>
<div id="wrapper-2" class="multimozo-executive">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="<?php echo URL; ?>public/css/style.min.css" id="theme" rel="stylesheet">

    <div class="row auth-wrapper gx-0 multimozo-layout">
        <div class="col-lg-7 col-xl-8 d-none d-lg-flex multimozo-visual hidden-md-down">
            <div class="multimozo-visual-bg" style="background-image:url(<?php echo URL; ?>public/images/background/fondo-logininsa.jpg);"></div>
            <div class="multimozo-visual-overlay"></div>
            <div class="multimozo-visual-content">
                <span class="multimozo-pill"><i class="fas fa-user-tie"></i> Panel de Mozos</span>
                <h1>Atencion rapida con estilo profesional</h1>
                <p>Un acceso agil para tu equipo en sala, con interfaz moderna y flujo operativo continuo.</p>
                <div class="multimozo-highlights">
                    <div class="highlight-item">
                        <strong>Ingreso veloz</strong>
                        <span>Teclado optimizado</span>
                    </div>
                    <div class="highlight-item">
                        <strong>Sin fricciones</strong>
                        <span>Menos pasos, mas servicio</span>
                    </div>
                    <div class="highlight-item">
                        <strong>Estilo premium</strong>
                        <span>Consistencia visual total</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center multimozo-panel">
            <div class="row justify-content-center w-100 mt-1 mt-lg-0 px-3 px-lg-4">
                <div class="col-12 multimozo-card-wrap">
                    <div class="multimozo-card">
                        <div class="multimozo-brand">
                            <img src="<?php echo URL; ?>public/images/favicons/android-icon-72x72.png" alt="Logo"/>
                            <span>Acceso del personal</span>
                        </div>

                        <h2 class="multimozo-title">Bienvenido</h2>
                        <p class="multimozo-subtitle">Ingrese sus datos de acceso</p>

                        <form class="form-horizontal" id="frm-login" role="form" method="post">
                            <h5 class="multimozo-input-title">Ingrese codigo</h5>

                            <div class="multimozo-input-wrap mb-3">
                                <input type="hidden" name="password" id="f-pass" class="form-control">
                                <input type="password" name="usuario" id="f-user" class="form-control text-center font-30" autocomplete="off" required>
                            </div>

                            <div class="row button-group virtual-keyboard keypad-grid">
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="1">1</button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="2">2</button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="3">3</button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="4">4</button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="5">5</button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="6">6</button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="7">7</button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="8">8</button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="9">9</button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn" data="0">0</button>
                                </div>
                                <div class="col-8">
                                    <button type="button" class="btn btn-block btn-lg keypad-btn keypad-btn-del" data="DEL"><i class="fas fa-arrow-left"></i></button>
                                </div>
                            </div>

                            <button class="btn btn-block btn-lg text-uppercase multimozo-btn-primary" type="submit">Acceder</button>
                        </form>

                        <div class="mt-3">
                            <a class="btn btn-lg btn-block multimozo-btn-secondary" href="<?php echo URL; ?>">Retroceder</a>
                        </div>

                        <div class="multimozo-meta text-center mt-3">EfaSIS.com | Todos los derechos reservados</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    #wrapper-2.multimozo-executive {
        --exec-hero-start: #152b46;
        --exec-hero-end: #213d60;
        --exec-panel-start: #0d1f35;
        --exec-panel-end: #173252;
        --exec-accent: #d8a56a;
        --exec-cta: #ea5b5d;
        --exec-cta-hover: #df4e51;
        min-height: 100vh;
        font-family: "Manrope", "Poppins", sans-serif;
        background: linear-gradient(160deg, #0d1f35 0%, #193455 100%);
    }

    #wrapper-2.multimozo-executive .multimozo-layout {
        min-height: 100vh;
        margin: 0;
    }

    #wrapper-2.multimozo-executive .multimozo-visual {
        position: relative;
        overflow: hidden;
        min-height: 100vh;
    }

    #wrapper-2.multimozo-executive .multimozo-visual-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        transform: scale(1.03);
        animation: multimozo-bg-zoom 26s ease-in-out infinite alternate;
    }

    #wrapper-2.multimozo-executive .multimozo-visual-overlay {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 20% 20%, rgba(216, 165, 106, 0.24), rgba(216, 165, 106, 0) 42%),
            linear-gradient(120deg, rgba(21, 43, 70, 0.8), rgba(33, 61, 96, 0.68));
    }

    #wrapper-2.multimozo-executive .multimozo-visual-content {
        position: relative;
        z-index: 2;
        max-width: 620px;
        color: #ffffff;
        padding: 68px 64px;
        background: linear-gradient(135deg, rgba(8, 23, 41, 0.38), rgba(8, 23, 41, 0.15));
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 22px;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        box-shadow: 0 18px 38px rgba(5, 18, 34, 0.38);
    }

    #wrapper-2.multimozo-executive .multimozo-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 0.86rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    #wrapper-2.multimozo-executive .multimozo-visual-content h1 {
        margin: 22px 0 14px;
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2.35rem, 3.1vw, 3.5rem);
        line-height: 1.08;
        font-weight: 700;
        color: #f8fbff;
        text-shadow: 0 6px 20px rgba(8, 22, 39, 0.45);
    }

    #wrapper-2.multimozo-executive .multimozo-visual-content p {
        margin-bottom: 24px;
        max-width: 540px;
        color: rgba(245, 250, 255, 0.92);
        font-size: 1.03rem;
        line-height: 1.7;
        text-shadow: 0 2px 14px rgba(6, 19, 36, 0.32);
    }

    #wrapper-2.multimozo-executive .multimozo-highlights {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        max-width: 540px;
    }

    #wrapper-2.multimozo-executive .highlight-item {
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 14px;
        padding: 12px 14px;
    }

    #wrapper-2.multimozo-executive .highlight-item strong {
        display: block;
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: 700;
    }

    #wrapper-2.multimozo-executive .highlight-item span {
        display: block;
        margin-top: 4px;
        color: rgba(246, 252, 255, 0.88);
        font-size: 0.77rem;
    }

    #wrapper-2.multimozo-executive .multimozo-panel {
        position: relative;
        background:
            radial-gradient(circle at 0% 12%, rgba(216, 165, 106, 0.2), rgba(216, 165, 106, 0) 32%),
            linear-gradient(155deg, var(--exec-panel-start) 0%, var(--exec-panel-end) 100%);
        min-height: 100vh;
        overflow: hidden;
    }

    #wrapper-2.multimozo-executive .multimozo-panel::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        right: -210px;
        top: -140px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
        pointer-events: none;
    }

    #wrapper-2.multimozo-executive .multimozo-card-wrap {
        max-width: 460px;
    }

    #wrapper-2.multimozo-executive .multimozo-card {
        position: relative;
        width: 100%;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 24px;
        box-shadow: 0 20px 48px rgba(8, 23, 41, 0.42);
        padding: 26px 24px 22px;
        animation: multimozo-card-enter 0.56s ease-out;
    }

    #wrapper-2.multimozo-executive .multimozo-brand {
        text-align: center;
        margin-bottom: 6px;
    }

    #wrapper-2.multimozo-executive .multimozo-brand img {
        width: 88px;
        height: 88px;
        border-radius: 24px;
        background: #ffffff;
        box-shadow: 0 10px 25px rgba(40, 74, 113, 0.2);
        padding: 12px;
        object-fit: contain;
    }

    #wrapper-2.multimozo-executive .multimozo-brand span {
        display: inline-block;
        margin-top: 8px;
        font-size: 0.78rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #8b6b46;
        background: #f6ecdf;
        padding: 4px 10px;
        border-radius: 999px;
    }

    #wrapper-2.multimozo-executive .multimozo-title {
        margin: 10px 0 2px;
        text-align: center;
        font-family: "Cormorant Garamond", serif;
        font-size: 2.12rem;
        line-height: 1.05;
        color: #10233b;
    }

    #wrapper-2.multimozo-executive .multimozo-subtitle {
        margin-bottom: 14px;
        text-align: center;
        color: #64748b;
        font-size: 0.94rem;
    }

    #wrapper-2.multimozo-executive .multimozo-input-title {
        margin-bottom: 8px;
        font-size: 1.02rem;
        color: #253f5f;
        font-weight: 700;
    }

    #wrapper-2.multimozo-executive .multimozo-input-wrap {
        border: 1px solid #d6dfeb;
        border-radius: 14px;
        background: #f9fbff;
        padding: 4px 10px;
    }

    #wrapper-2.multimozo-executive input#f-user {
        border: 0;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
        letter-spacing: 0.18em;
        color: #10233b;
        font-weight: 700;
        font-size: 1.7rem;
        height: 52px;
    }

    #wrapper-2.multimozo-executive .keypad-grid {
        margin: 0 -6px 14px;
    }

    #wrapper-2.multimozo-executive .keypad-grid > div {
        padding: 0 6px;
        margin-bottom: 10px;
    }

    #wrapper-2.multimozo-executive .keypad-btn {
        border: 0;
        border-radius: 11px;
        color: #ffffff;
        background: linear-gradient(180deg, #2f4761 0%, #243a53 100%);
        min-height: 52px;
        font-weight: 700;
        letter-spacing: 0.02em;
        box-shadow: 0 8px 16px rgba(18, 43, 71, 0.24);
        transition: transform 0.2s ease, filter 0.2s ease;
    }

    #wrapper-2.multimozo-executive .keypad-btn:hover,
    #wrapper-2.multimozo-executive .keypad-btn:focus {
        color: #ffffff;
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

    #wrapper-2.multimozo-executive .keypad-btn-del {
        background: linear-gradient(180deg, #304b68 0%, #264160 100%);
    }

    #wrapper-2.multimozo-executive .multimozo-btn-primary,
    #wrapper-2.multimozo-executive .multimozo-btn-secondary {
        border: 0;
        border-radius: 12px;
        font-weight: 700;
        letter-spacing: 0.01em;
        min-height: 48px;
        transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
    }

    #wrapper-2.multimozo-executive .multimozo-btn-primary {
        color: #ffffff;
        background: linear-gradient(90deg, var(--exec-cta) 0%, #f27367 100%);
        box-shadow: 0 10px 24px rgba(234, 91, 93, 0.35);
    }

    #wrapper-2.multimozo-executive .multimozo-btn-primary:hover {
        color: #ffffff;
        background: linear-gradient(90deg, var(--exec-cta-hover) 0%, #ee695f 100%);
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(234, 91, 93, 0.42);
    }

    #wrapper-2.multimozo-executive .multimozo-btn-secondary {
        color: #ffffff;
        background: linear-gradient(90deg, #5f54d8 0%, #7567eb 100%);
        box-shadow: 0 10px 24px rgba(95, 84, 216, 0.32);
    }

    #wrapper-2.multimozo-executive .multimozo-btn-secondary:hover {
        color: #ffffff;
        transform: translateY(-2px);
        filter: brightness(1.06);
    }

    #wrapper-2.multimozo-executive .multimozo-meta {
        font-size: 12px;
        color: #607086;
    }

    @keyframes multimozo-card-enter {
        from {
            opacity: 0;
            transform: translateY(14px) scale(0.99);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes multimozo-bg-zoom {
        from { transform: scale(1.02); }
        to { transform: scale(1.09); }
    }

    @media (max-width: 991.98px) {
        #wrapper-2.multimozo-executive .multimozo-panel {
            min-height: 100vh;
            padding: 26px 0;
        }

        #wrapper-2.multimozo-executive .multimozo-card-wrap {
            max-width: 500px;
        }
    }

    @media (max-width: 575.98px) {
        #wrapper-2.multimozo-executive .multimozo-card {
            padding: 22px 16px 18px;
            border-radius: 20px;
        }

        #wrapper-2.multimozo-executive .multimozo-title {
            font-size: 1.95rem;
        }

        #wrapper-2.multimozo-executive input#f-user {
            font-size: 1.45rem;
            height: 48px;
        }

        #wrapper-2.multimozo-executive .keypad-btn {
            min-height: 48px;
            font-size: 1.12rem;
        }
    }
</style>
