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

        body {

            min-height: 100vh;

            background: #e6e6e6;

            font-family: Arial, Helvetica, sans-serif;

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

            overflow-x: hidden;

            padding: 20px;
        }

        /* ================= PANEL ================= */

        .contenedor {

            position: relative;

            width: 700px;
            height: 700px;

            filter: blur(5px);
            pointer-events: none;

            transition: .4s;
        }

        .contenedor.activo {

            filter: none;
            pointer-events: auto;
        }

        .btn-menu {

            position: absolute;

            width: 140px;
            height: 140px;

            border-radius: 50%;

            text-decoration: none;

            color: white;

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

            gap: 10px;

            text-align: center;

            font-size: 16px;
            font-weight: bold;

            box-shadow:
                inset -8px -8px 15px rgba(0, 0, 0, 0.4),
                inset 8px 8px 15px rgba(255, 255, 255, 0.3),
                0 10px 20px rgba(0, 0, 0, 0.25);

            transition: .3s;
        }

        .btn-menu:hover {
            transform: scale(1.08);
        }

        .btn-menu::before {

            content: "";

            position: absolute;

            top: 15px;

            width: 65%;
            height: 25%;

            border-radius: 50%;

            background: rgba(255, 255, 255, 0.35);
        }

        .btn-menu i {

            font-size: 35px;
            z-index: 2;
        }

        .btn-menu span {

            z-index: 2;
            padding: 0 10px;
        }

        /* ================= BOTON CENTRAL ================= */

        .inicio {

            width: 220px;
            height: 220px;

            top: 240px;
            left: 240px;

            font-size: 24px;

            background:
                radial-gradient(circle at top,
                    #8dff8d,
                    #009c2f 70%);
        }

        .inicio i {
            font-size: 60px;
        }

        /* ================= BOTONES ================= */

        .documentos {

            top: 20px;
            left: 280px;

            background:
                radial-gradient(circle at top,
                    #ffe57c,
                    #ff8c00 70%);
        }

        .usuarios {

            top: 120px;
            left: 60px;

            background:
                radial-gradient(circle at top,
                    #8ec5ff,
                    #004cff 70%);
        }

        .reportes {

            top: 120px;
            right: 60px;

            background:
                radial-gradient(circle at top,
                    #8fffff,
                    #0096a8 70%);
        }

        .ventas {

            top: 320px;
            left: 0;

            background:
                radial-gradient(circle at top,
                    #ff8d8d,
                    #d60000 70%);
        }

        .config {

            top: 320px;
            right: 0;

            background:
                radial-gradient(circle at top,
                    #c5ff8c,
                    #2fa000 70%);
        }

        .clientes {

            bottom: 80px;
            left: 120px;

            background:
                radial-gradient(circle at top,
                    #fff08b,
                    #d4a000 70%);
        }

        .agenda {

            bottom: 80px;
            right: 120px;

            background:
                radial-gradient(circle at top,
                    #8fb4ff,
                    #003fd1 70%);
        }

        .salir {

            bottom: 0;
            left: 280px;

            background:
                radial-gradient(circle at top,
                    #d98cff,
                    #7000b8 70%);
        }

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

        .modal-login {

            position: fixed;
            inset: 0;

            background: rgba(0, 0, 0, 0.5);

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

            z-index: 999;

            padding: 20px;
        }

        .login-box {

            width: 100%;
            max-width: 380px;

            background: white;

            padding: 35px 30px;

            border-radius: 20px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

            animation: aparecer .4s ease;
        }

        @keyframes aparecer {

            from {
                transform: scale(.8);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .login-box h2 {

            text-align: center;

            margin-bottom: 25px;

            color: #333;
        }

        .input-group {

            margin-bottom: 20px;
        }

        .form-label {

            display: block;

            margin-bottom: 8px;

            font-weight: bold;

            color: #333;
        }

        .form-control {

            width: 100%;

            padding: 12px 15px;

            border: 1px solid #ccc;

            border-radius: 10px;

            outline: none;

            font-size: 15px;

            transition: .3s;
        }

        .form-control:focus {

            border-color: #009c2f;

            box-shadow: 0 0 8px rgba(0, 156, 47, 0.3);
        }

        .password-box {

            position: relative;
        }

        .btn-eye {

            position: absolute;

            right: 10px;
            top: 50%;

            transform: translateY(-50%);

            border: none;
            background: none;

            cursor: pointer;

            color: #666;

            font-size: 18px;
        }

        .btn-eye:hover {

            color: #009c2f;
        }

        .btn-login {

            width: 100%;

            padding: 13px;

            border: none;

            border-radius: 12px;

            background: #009c2f;

            color: white;

            font-size: 16px;
            font-weight: bold;

            cursor: pointer;

            transition: .3s;
        }

        .btn-login:hover {

            background: #007d26;
        }

        /* ================= RESPONSIVE ================= */

        @media(max-width:768px) {

            body {

                overflow-y: auto;

                align-items: flex-start;
            }

            .contenedor {

                width: 100%;
                height: auto;

                display: grid;

                grid-template-columns: repeat(2, 1fr);

                gap: 20px;

                padding-top: 120px;
            }

            .btn-menu {

                position: relative;

                margin: auto;
            }

            .inicio {

                position: relative;

                top: auto;
                left: auto;

                grid-column: 1 / span 2;

                margin: auto;
            }

            .documentos,
            .usuarios,
            .reportes,
            .ventas,
            .config,
            .clientes,
            .agenda,
            .salir {

                top: auto;
                left: auto;
                right: auto;
                bottom: auto;
            }
        }

        @media(max-width:480px) {

            .contenedor {

                grid-template-columns: 1fr;
            }

            .inicio {

                grid-column: auto;

                width: 180px;
                height: 180px;

                font-size: 20px;
            }

            .inicio i {

                font-size: 50px;
            }

            .btn-menu {

                width: 130px;
                height: 130px;

                font-size: 14px;
            }

            .btn-menu i {

                font-size: 28px;
            }
        }
.password-box{
    position: relative;
}

.btn-eye{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:none;
    cursor:pointer;
    z-index:100;
}