<?php
if (isset($_GET["pc"]) && ctype_digit($_GET["pc"])) {
    Session::set('host_pc', 'PC0' . htmlspecialchars($_GET["pc"], ENT_QUOTES, 'UTF-8'));
}
?>
<div id="wrapper-1" class="login-executive" style="display: block;">
    <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 login-layout">
        <div class="col-lg-7 col-xl-8 d-none d-lg-flex login-visual hidden-md-down">
            <div class="login-visual-bg" style="background-image:url(<?php echo URL; ?>public/images/background/fondo-newlogin.jpg);"></div>
            <div class="login-visual-overlay"></div>
            <div class="login-visual-content">
                <span class="login-pill"><i class="fas fa-concierge-bell"></i> Restaurante Executive</span>
                <h1>Gestion elegante para restaurantes modernos</h1>
                <p>Controla caja, ventas y operacion diaria en una experiencia visual premium y profesional.</p>

                <div class="login-quick-stats">
                    <div class="quick-stat-item">
                        <strong>24/7</strong>
                        <span>Operacion fluida</span>
                    </div>
                    <div class="quick-stat-item">
                        <strong>Smart POS</strong>
                        <span>Todo en un panel</span>
                    </div>
                    <div class="quick-stat-item">
                        <strong>Cloud Ready</strong>
                        <span>Gestion centralizada</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center estilo-login login-panel">
            <div class="row justify-content-center w-100 mt-1 mt-lg-0 px-3 px-lg-4">
                <div class="col-12 login-card-wrap">
                    <div id="loginform" class="login-card">
                        <div class="login-brand">
                            <img src="<?php echo URL; ?>public/images/logos/logotipo-factuyo.png" alt="Logo de Factuyo"/>
                            <span>Suite de Gestion</span>
                        </div>

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

                        <form class="form-horizontal pt-2 login-form" id="frm-login" role="form" method="post">
                            <div class="login-field mb-3">
                                <label for="usuario">Usuario</label>
                                <div class="login-input-wrap">
                                    <i class="fas fa-user"></i>
                                    <input type="text" class="form-control form-input-bg login-control" name="usuario" id="usuario" placeholder="Ingrese su usuario" autocomplete="off" aria-label="Ingrese su usuario">
                                </div>
                            </div>

                            <div class="login-field mb-2">
                                <label for="password">Contrasena</label>
                                <div class="login-input-wrap">
                                    <i class="fas fa-lock"></i>
                                    <input type="password" class="form-control form-input-bg login-control" name="password" id="password" placeholder="Ingrese su contrasena" autocomplete="off" aria-label="Ingrese su contrasena">
                                </div>
                            </div>

                            <div class="button-group mt-4">
                                <button type="submit" class="btn btn-block btn-lg px-4 login-btn-primary">Continuar</button>
                            </div>
                        </form>

                        <div class="mt-4 mb-3">
                            <a class="btn btn-lg btn-block login-btn-secondary" href="<?php echo URL; ?>multimozo">Acceso Mozo</a>
                        </div>

                        <div class="login-meta text-center">EfaSIS.com | Todos los derechos reservados</div>
                        <div class="login-meta text-center">Version: 4.0</div>

                        <div class="mt-3 mb-1 text-center login-social">
                            <a href="https://www.facebook.com/EfaSIScom/" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                            <a href="https://www.instagram.com/" title="Instagram"><i class="fab fa-instagram"></i></a>
                            <a href="https://wa.me/51921372621" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                            <a href="#" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    #wrapper-1.login-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;
        --exec-text-main: #10233b;
        --exec-text-soft: #64748b;
        min-height: 100vh;
        font-family: "Manrope", "Poppins", sans-serif;
        background: linear-gradient(160deg, #0d1f35 0%, #193455 100%);
    }

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

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

    #wrapper-1.login-executive .login-visual-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        transform: scale(1.04);
        animation: login-bg-zoom 24s ease-in-out infinite alternate;
    }

    #wrapper-1.login-executive .login-visual-overlay {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 18% 22%, rgba(216, 165, 106, 0.24), rgba(216, 165, 106, 0) 42%),
            linear-gradient(120deg, rgba(21, 43, 70, 0.86), rgba(33, 61, 96, 0.72));
    }

    #wrapper-1.login-executive .login-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 36%);
        pointer-events: none;
    }

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

    #wrapper-1.login-executive .login-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-1.login-executive .login-visual-content h1 {
        margin: 22px 0 14px;
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2.4rem, 3.2vw, 3.7rem);
        line-height: 1.06;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: #f8fbff;
        text-shadow: 0 6px 20px rgba(8, 22, 39, 0.45);
    }

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

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

    #wrapper-1.login-executive .quick-stat-item {
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 14px;
        padding: 12px 14px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    #wrapper-1.login-executive .quick-stat-item strong {
        display: block;
        font-size: 0.92rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        color: #ffffff;
    }

    #wrapper-1.login-executive .quick-stat-item span {
        display: block;
        margin-top: 3px;
        font-size: 0.77rem;
        color: rgba(246, 252, 255, 0.88);
    }

    #wrapper-1.login-executive .login-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-1.login-executive .login-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-1.login-executive .login-card-wrap {
        max-width: 460px;
    }

    #wrapper-1.login-executive .login-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: 30px 28px 24px;
        animation: login-card-enter 0.58s ease-out;
    }

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

    #wrapper-1.login-executive .login-brand img {
        width: 100%;
        max-width: 230px;
        margin: 0 auto 6px;
        display: block;
    }

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

    #wrapper-1.login-executive .login-title {
        margin: 12px 0 2px;
        text-align: center;
        font-family: "Cormorant Garamond", serif;
        font-size: 2.25rem;
        line-height: 1.05;
        color: var(--exec-text-main);
    }

    #wrapper-1.login-executive .login-subtitle {
        margin-bottom: 20px;
        text-align: center;
        color: var(--exec-text-soft);
        font-size: 0.94rem;
    }

    #wrapper-1.login-executive .login-field label {
        display: block;
        margin-bottom: 7px;
        font-size: 0.86rem;
        color: #334155;
        font-weight: 600;
    }

    #wrapper-1.login-executive .login-input-wrap {
        display: flex;
        align-items: center;
        border: 1px solid #d6dfeb;
        border-radius: 14px;
        background: #f9fbff;
        padding: 0 12px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    #wrapper-1.login-executive .login-input-wrap i {
        color: #70829c;
        font-size: 0.95rem;
        margin-right: 10px;
    }

    #wrapper-1.login-executive .login-control {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        height: 50px;
        padding: 0;
        color: #0f2237;
        font-size: 0.95rem;
    }

    #wrapper-1.login-executive .login-control::placeholder {
        color: #9caabc;
    }

    #wrapper-1.login-executive .login-input-wrap:focus-within {
        border-color: #c99861;
        box-shadow: 0 0 0 4px rgba(216, 165, 106, 0.22);
        transform: translateY(-1px);
    }

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

    #wrapper-1.login-executive .login-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-1.login-executive .login-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-1.login-executive .login-btn-secondary {
        color: #ffffff;
        background: linear-gradient(90deg, var(--exec-hero-start) 0%, var(--exec-hero-end) 100%);
        box-shadow: 0 10px 24px rgba(18, 43, 71, 0.3);
    }

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

    #wrapper-1.login-executive .login-meta {
        font-size: 12px;
        color: #607086;
        line-height: 1.5;
    }

    #wrapper-1.login-executive .login-social {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    #wrapper-1.login-executive .login-social a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #284a71;
        background: #eef4fb;
        border: 1px solid #d4e0ef;
        transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
        text-decoration: none;
    }

    #wrapper-1.login-executive .login-social a:hover {
        transform: translateY(-2px);
        color: #ffffff;
        background: #284a71;
    }

    @keyframes login-card-enter {
        from {
            opacity: 0;
            transform: translateY(16px) scale(0.985);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

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

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

        #wrapper-1.login-executive .login-card-wrap {
            max-width: 500px;
        }

        #wrapper-1.login-executive .login-card {
            border-radius: 20px;
            padding: 28px 22px 22px;
        }
    }

    @media (max-width: 575.98px) {
        #wrapper-1.login-executive .login-card {
            padding: 24px 18px 20px;
        }

        #wrapper-1.login-executive .login-title {
            font-size: 2rem;
        }

        #wrapper-1.login-executive .login-control {
            height: 46px;
            font-size: 0.92rem;
        }

        #wrapper-1.login-executive .login-btn-primary,
        #wrapper-1.login-executive .login-btn-secondary {
            font-size: 1.02rem;
            min-height: 48px;
        }
    }
</style>
