/* assets/css/alert.css*/
/* Estilo do Pop-up (Dialog) */
dialog {
	background-color: var(--beige);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 340px;
    text-align: center;
	}
dialog strong, H4{
	border-bottom: 1px solid rgba(84, 37, 14, 0.15);
    }
/*Estilo quando mensagens de sucesso*/	
	dialog.sucess {
	background-color: var(--green_light);
	color: var(--green);
	}
/*Estilo quando mensagens de erro*/			
	dialog.erro {
		background-color: var(--red_light);
		color: var(--red);
	}
/* Estilo do fundo escurecido atrás do pop-up */
    dialog::backdrop {
       background-color: var(--backgroung_color_popup);
    }
/*estilos dos botões de ajuda (help)*/
.btn-help {
    background-color: transparent;
    color: var(--brown);
    border: 2px solid var(--brown);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    
    /* Linhas para centralizar o texto "?" */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
}

/* Mantém a posição idêntica e blinda a cor do texto/borda no hover */
.btn-help:hover {
    background-color: var(--white) !important;
    color: var(--brown) !important;
    border-color: var(--brown) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Botão OK de fechar */
.btn-close {
    margin-top: 15px;
    background-color: var(--brown);
    color: var(--white);
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
	font-weight: bold;
	font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* Hover no close */
.btn-close:hover {
    background-color: var(--brown-dark);
}