/* ============================= */
/* BOTÃO SETA MODERNO */
/* ============================= */
.toggle-painel {
    position: fixed;
    top: 4%;
    left: 10px;
    z-index: 6000;

    width: 45px;
    height: 45px;

    border-radius: 50%;
    border: none;
    cursor: pointer;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 20px;

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

    transition: all 0.3s ease;
}

.toggle-painel:hover {
    background: rgba(255, 255, 255, 0.25);
}


/* ============================= */
/* PAINEL GLASS MODERNO */
/* ============================= */
.painel-flutuante {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;

    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(12px);

    box-shadow: 5px 0 25px rgba(0,0,0,0.3);

    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 100px 20px;

    transition: left 0.35s ease;
    z-index: 5000;

        overflow-y: auto;
}

/* Aberto */
.painel-flutuante.aberto {
    left: 0;
}

.painel-flutuante .btnAdicionarTexto {
    background: #556B2F;
    color: #ffffff;
    border: 2px solid #3d4f20;
}

.painel-flutuante .btnAdicionarTexto:hover {
    background: #6b8e23;
}

.painel-flutuante .btn-cancel {
  background: #dc3545;
  color: white;
}

.painel-flutuante .btn-cancel:hover {
  background: #c82333;
}

/* ============================= */
/* BOTÕES DO PAINEL */
/* ============================= */
.painel-flutuante button {
    padding: 14px;
    font-size: 15px;
    border-radius: 10px;
    border: none;
    cursor: pointer;

    background: rgba(255,255,255,0.15);
    color: white;

    transition: all 0.2s ease;
}

.painel-flutuante button:hover {
    background: rgba(255,255,255,0.25);
    transform: translateX(5px);
}


/* ============================= */
/* SUBMENU */
/* ============================= */
.menu-item {
    display: flex;
    flex-direction: column;
}

.submenu {
    display: none;
    flex-direction: column;
    margin-left: 10px;
    margin-top: 8px;
    gap: 8px;
}

.submenu button {
    font-size: 13px;
    opacity: 0.9;
    background: rgba(255,255,255,0.10);
}

.submenu button:hover {
    background: rgba(255,255,255,0.20);
    transform: translateX(3px);
}

.toggle-painel-direito {
    position: fixed;
    top: 4%;
    right: 10px;
    z-index: 6000;

    width: 45px;
    height: 45px;

    border-radius: 50%;
    border: none;
    cursor: pointer;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 20px;

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

    transition: all 0.3s ease;
}

.toggle-painel-direito:hover {
    background: rgba(255, 255, 255, 0.25);
}

.painel-flutuante-direito {
    position: fixed;
    top: 0;
    right: -260px;
    width: 260px;
    height: 100vh;

    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(12px);

    box-shadow: -5px 0 25px rgba(0,0,0,0.3);

    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 100px 20px;

    transition: right 0.35s ease;
    z-index: 5000;

    overflow-y: auto;
}

/* Aberto */
.painel-flutuante-direito.aberto {
    right: 0;
}

/* ============================= */
/* BOTÕES DO PAINEL DIREITO PADRÃO IGUAL AO ESQUERDO */
/* ============================= */

/* BOTÃO VERDE ADD TEXTO NO PAINEL DIREITO */
.painel-flutuante-direito .btnAdicionarTexto {
    background: #556B2F !important;  /* verde */
    color: #ffffff !important;       /* texto branco */
    border: 2px solid #3d4f20;
}

.painel-flutuante-direito .btnAdicionarTexto:hover {
    background: #6b8e23 !important;  /* verde mais claro no hover */
}

.painel-flutuante-direito button {
    padding: 14px;        /* mesmo padding do esquerdo */
    font-size: 15px;      /* mesma fonte do esquerdo */
    border-radius: 10px;  /* mesma borda arredondada */
    border: none;
    cursor: pointer;

    background: rgba(255,255,255,0.15); /* mesmo fundo padrão */
    color: white;

    transition: all 0.2s ease;
}

.painel-flutuante-direito button:hover {
    background: rgba(255,255,255,0.25); /* mesmo hover do esquerdo */
    transform: translateX(5px);
}

/* ============================= */
/* RESPONSIVO MOBILE */
/* ============================= */
@media (max-width: 768px) {

    .painel-flutuante {
        width: 220px;
        padding: 90px 15px;

        /* 🔥 MAIS TRANSPARENTE NO MOBILE */
        background: rgba(20, 20, 20, 0.35);
        backdrop-filter: blur(8px);
    }

    .toggle-painel {
        width: 40px;
        height: 40px;
                top: 30%;
    }

    .painel-flutuante-direito {
        width: 220px;
        padding: 90px 15px;
        background: rgba(20, 20, 20, 0.35);
        backdrop-filter: blur(8px);
    }

    .toggle-painel-direito {
        width: 40px;
        height: 40px;
        top: 35%;
    }