/* ferramentas/cms/css/componentes.css - V2: Visual Glass */

/* --- MINI CONTROLLER (Botão Flutuante do Menu/Olho) --- */
#mini-controller {
    position: fixed;
    bottom: 20px;
    right: 20px;
    
    /* ESTILO VIDRO */
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    border-radius: 50px;
    padding: 5px 10px;
    display: flex;
    gap: 10px;
    z-index: 9999;
    transition: opacity 0.3s, transform 0.2s;
}

#mini-controller:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

body.modo-visualizacao #mini-controller { opacity: 0.3; }
body.modo-visualizacao #mini-controller:hover { opacity: 1; }

.btn-mini {
    background: transparent; border: none; cursor: pointer;
    font-size: 1.2rem; padding: 5px; border-radius: 50%;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    color: #333;
}
.btn-mini:hover { background-color: rgba(0,0,0,0.05); }


/* --- COMPORTAMENTO DA DOBRA (SECTION) --- */

/* MODO EDIÇÃO: Borda sutil para identificar a área */
body.modo-edicao .cms-section {
    position: relative;
    /* Borda tracejada muito suave */
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    min-height: 100px;
    transition: all 0.2s;
}

body.modo-edicao .cms-section:hover {
    /* Destaque suave ao passar o mouse na dobra */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    background-color: rgba(0,0,0,0.005);
}

/* MODO VISUALIZAÇÃO: Limpo */
body.modo-visualizacao .cms-section {
    position: relative;
    border: none;
    background: transparent !important;
}


/* --- CONTROLES DA DOBRA (A Barra de Ferramentas da Section) --- */

.section-controls {
    position: absolute;
    
    /* POSICIONAMENTO: Centro da Base */
    top: auto;          /* Remove topo */
    bottom: 30px;       /* Distância do chão (respiro) */
    left: 50%;          /* Começa no meio */
    right: auto;        /* Remove direita */
    
    /* Centralização exata + Estado inicial da animação (levemente descido) */
    transform: translateX(-50%) translateY(10px);

    display: flex;
    gap: 5px;

    /* ESTILO VIDRO */
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    
    /* Sombra suave */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    /* Formato de Pílula */
    border-radius: 50px;
    padding: 4px 8px;
    
    z-index: 100;
    opacity: 0; /* Começa invisível */
    transition: all 0.2s ease;
}

/* Só aparece quando passa o mouse na dobra */
body.modo-edicao .cms-section:hover .section-controls {
    opacity: 1;
    transform: translateY(0);
}

/* Esconde totalmente no modo visualização */
body.modo-visualizacao .section-controls { display: none !important; }

.btn-controle {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 28px; height: 28px; /* Um pouco maior para toque */
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; /* Redondo */
    font-size: 0.9rem;
    color: #555;
    transition: all 0.2s;
}

.btn-controle:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transform: scale(1.1);
}

/* Estilo específico para o botão de Excluir (Lixeira) */
.btn-controle[style*="color: #dc2626"] { /* Seletor de atributo para pegar o style inline */
    color: #dc2626 !important;
}
.btn-controle[style*="color: #dc2626"]:hover {
    background-color: #fee2e2;
}


/* --- BOTÕES FLUTUANTES INTERNOS (Ex: "Editar Carrossel", "Trocar Foto") --- */

.btn-editor-flutuante {
    /* ESTILO VIDRO */
    background-color: rgba(255, 255, 255, 0.7) !important; /* Força override dos styles inline */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #333 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    
    opacity: 0.8;
    transition: all 0.2s !important;
}

.btn-editor-flutuante:hover {
    opacity: 1;
    background-color: #fff !important;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

/* Some no modo visualização */
body.modo-visualizacao .btn-editor-flutuante {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}