/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #f9f9f9;
}

/* Tela de Login */
.login-body {
    background: url('./images/login-background.jpeg') no-repeat center center / cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tela de Login */
.login-body {
    background: url('./images/login-background.jpeg') no-repeat center center / cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-overlay {
    background: rgba(0, 0, 0, 0.5); /* Sobreposição escura */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
}

.login-container h1 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #1e8449;
}

.login-container p {
    margin-bottom: 20px;
    color: #555;
}

.login-container input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.login-container button {
    width: 100%;
    padding: 10px;
    background-color: #1e8449;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-container button:hover {
    background-color: #27ae60;
}

.login-container footer {
    margin-top: 15px;
    font-size: 0.9em;
    color: #777;
}


/* Conteúdo Principal */
.dashboard-content {
    margin-left: 270px;
    padding: 20px;
    width: calc(100% - 270px);
    overflow-y: auto;
}

/* Barra de Notificações */
.notificacoes {
    background-color: #fdebd3;
    color: #d35400;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 1em;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.notificacoes:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}


/* Indicadores */
.indicadores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    background-color: #f0f8f5; /* Cor de fundo suave */
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #d5e8de; /* Borda clara */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.card h3 {
    font-size: 1.3em;
    margin-bottom: 15px;
    color: #1e8449;
    text-align: left;
}

.card ul {
    list-style: none;
    padding-left: 0;
}

.card ul li {
    font-size: 1em;
    color: #555;
    margin-bottom: 5px;
    text-align: left;
}

/* Imagem do Fluxo */
.image-container {
    margin-top: 40px;
    text-align: center;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilo para o rodapé */
.rodape {
    text-align: center;
    padding: 10px;
    background-color: #f9f9f9;
    font-size: 0.9em;
    color: #777;
    border-top: 1px solid #ddd;
    margin-top: 20px;
    position: sticky;
    bottom: 0;
    width: 100%;
}

/* Submenu */
.menu-item {
    position: relative;
}

.menu-item a {
    cursor: pointer;
}

.submenu {
    display: none; /* Esconde o submenu por padrão */
    list-style: none;
    margin: 0;
    padding-left: 20px;
    position: relative; /* Garante que o submenu não interfira em outros itens */
    z-index: 1; /* Evita sobreposição incorreta */
}

.menu-item:hover .submenu {
    display: block; /* Mostra o submenu ao passar o mouse */
}

.submenu li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9em;
    padding: 5px 10px;
    display: block;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.15);
    margin: 5px 0;
}

.submenu li a:hover {
    background-color: rgba(0, 0, 0, 0.3); /* Destaque ao passar o mouse */
}

/* Menu lateral fixo */
.menu-lateral {
    width: 250px; /* Largura do menu lateral */
    height: 100vh; /* Altura total da tela */
    position: fixed; /* Fixado na lateral esquerda */
    top: 0;
    left: 0;
    background-color: #1e8449; /*#2ecc71*/
    color: white;
    padding: 20px;
    overflow-y: auto;
}

.menu-lateral h2 {
    text-align: center;
    margin-bottom: 20px;
}

.menu-lateral a {
    text-decoration: none;
    color: white;
    display: block;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.menu-lateral a:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Painel principal */
#main-content {
    margin-left: 250px; /* Compensação para o menu lateral */
    padding: 20px;
    height: 100vh; /* Altura total da tela */
    overflow-y: auto; /* Adiciona rolagem se necessário */
    background-color: #f9f9f9; /* Fundo branco */
}

/* Reseta margens e paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Corpo principal */
body {
    display: flex;
    height: 100vh; /* Ocupa toda a altura da janela */
    overflow: hidden; /* Remove rolagem externa */
    font-family: Arial, sans-serif;
}

/* Formulário de busca */
.search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.search-form label {
    font-weight: normal; /*bold*/
}

.search-form input {
    flex-basis: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#search-button {
    padding: 10px 20px;
    background-color: #1e8449;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#search-button:hover {
    background-color: #27ae60;
}

/* Tabela */
.table-container {
    margin-top: 20px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
}

table th {
    background-color: #f4f4f4;
}

/* Botões de ação na tabela */
.edit-button, .delete-button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
}

.edit-button {
    background-color: #1e8449;
    color: white;
}

.delete-button {
    background-color: #e74c3c;
    color: white;
}

.edit-button:hover {
    background-color: #1e8449;
}

.delete-button:hover {
    background-color: #c0392b;
}

/* Botões gerais */
.action-buttons {
    display: flex;
    justify-content: center; /* Centraliza os botões */
    gap: 20px;
    margin-top: 20px;
}

.action-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
}

#add-empresa-button {
    background-color: #3498db;
    color: white;
}

#return-dashboard {
    background-color: #9e9797;
    color: white;
}

#cancel-button {
    background-color: #9e9797;
    color: white;
}

#add-empresa-button:hover {
    background-color: #2980b9;
}

#return-dashboard:hover {
    background-color: #9e9797;
}

#cancel-button:hover {
    background-color: #9e9797;
}

#add-setor-button {
    background-color: #3498db; /* Azul padrão */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    text-align: center;
}

#add-setor-button:hover {
    background-color: #2980b9; /* Azul mais escuro ao passar o mouse */
}


/*posto de traalho*/

/* Formulário de busca */
.search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.search-form label {
    font-weight: normal; /*bold*/
}

.search-form input {
    flex-basis: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#search-button {
    padding: 10px 20px;
    background-color: #1e8449;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#search-button:hover {
    background-color: #27ae60;
}

/* Tabela */
.table-container {
    margin-top: 20px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
}

table th {
    background-color: #f4f4f4;
}

/* Botões na tabela */
.edit-button, .delete-button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
}

.edit-button {
    background-color: #1e8449;
    color: white;
}

.delete-button {
    background-color: #e74c3c;
    color: white;
}

.edit-button:hover {
    background-color: #1e8449;
}

.delete-button:hover {
    background-color: #c0392b;
}

/* Botões gerais */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.action-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
}

#add-posto-trabalho-button {
    background-color: #3498db;
    color: white;
}

#return-dashboard {
    background-color: #9e9797;
    color: white;
}

#add-posto-trabalho-button:hover {
    background-color: #2980b9;
}

#return-dashboard:hover {
    background-color: #9e9797;
}

.table-container {
    margin-top: 20px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
    white-space: nowrap; /* Evita quebra de texto */
}

table th {
    background-color: #f4f4f4;
    font-weight: normal; /*bold*/
}

table td {
    font-size: 0.9em;
}

/* Botões na tabela */
.edit-button, .delete-button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
}

.edit-button {
    background-color: #1e8449;
    color: white;
}

.delete-button {
    background-color: #e74c3c;
    color: white;
}

.edit-button:hover {
    background-color: #1e8449;
}

.delete-button:hover {
    background-color: #c0392b;
}

/* Botões gerais */
.action-buttons {
    display: flex;
    justify-content: center; /* Centraliza os botões */
    gap: 20px;
    margin-top: 20px;
}

/* tabela de turnos */

.table-container {
    margin-top: 20px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.9em;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
}

table th {
    background-color: #f4f4f4;
    font-weight: normal;
    color: #333;
}

table td {
    font-size: 0.9em;
}

.action-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.action-buttons button {
    padding: 10px 20px;
    background-color: #1e8449; /*#3498db*/
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.action-buttons button:hover {
    background-color: #1e8449; /*2980b9;*/
}

/* horário dos turnos */

.table-container {
    margin-top: 20px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.9em;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
}

table th {
    background-color: #f4f4f4;
    font-weight: normal;
    color: #333;
}

table td {
    font-size: 0.9em;
}

.action-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.action-buttons button {
    padding: 10px 20px;
    background-color: #1e8449; /*3498db*/
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.action-buttons button:hover {
    background-color: #1e8449; /*2980b9**/
}

/*materia prima*/
/* Estilo da tabela */
.table-container table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

.table-container th, .table-container td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.action-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.action-buttons button#add-materia-prima-button {
    background-color: #007bff; /* Azul */
    color: white;
}

.action-buttons button#return-dashboard {
    background-color: #9e9797; /* Verde */
    color: white;
}

/* Estilo para o botão de pesquisa */
.search-form button {
    padding: 8px 15px;
    font-size: 14px;
    color: white;
    background-color: #28a745; /* Verde suave */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-form button:hover {
    background-color: #218838; /* Verde mais escuro ao passar o mouse */
}

/* controle de estoque de insumos*/
/* Estilo básico da tabela */
.table-container table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

.table-container th, .table-container td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.action-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.action-buttons button#add-estoque-insumo-button {
    background-color: #007bff; /* Azul */
    color: white;
}

.action-buttons button#return-dashboard {
    background-color: #9e9797; /* Verde */
    color: white;
}

/*novo pedido*/

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.grid-item {
    display: flex;
    flex-direction: column;
}

h3 {
    color: #1e8449; /* Verde padrão */
    margin-top: 20px;
}


.back-button {
    background-color: #1e8449; /* Verde padrão */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}


/* estilo para entrada de dados*/

.form-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input:focus {
    border-color: #1e8449;
    box-shadow: 0 0 5px rgba(30, 132, 73, 0.5);
    outline: none;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Ajusta duas colunas */
    gap: 20px;
    margin-bottom: 20px;
}

.grid-item label {
    font-weight: normal;
    margin-bottom: 5px;
    display: block;
}

.grid-item input, .grid-item select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}
textarea {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc; /* Borda cinza clara */
    border-radius: 5px; /* Bordas arredondadas */
    box-sizing: border-box; /* Inclui padding e borda no tamanho total */
    resize: none; /* Evita redimensionamento manual */
    outline: none; /* Remove o contorno azul ao clicar */
}

/* Estilo Padrão para Campos de Entrada */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc; /* Borda cinza clara */
    border-radius: 5px; /* Bordas arredondadas */
    box-sizing: border-box; /* Inclui padding e borda no tamanho total */
    background-color: #fff; /* Fundo branco */
    outline: none; /* Remove o contorno azul ao clicar */
}

/* Adicional para os campos read-only */
input[readonly] {
    background-color: #f3f3f3; /* Fundo cinza claro */
    color: #666; /* Texto mais apagado */
}

/* Adicional para textarea */
textarea {
    resize: none; /* Desativa redimensionamento manual */
    height: 80px; /* Altura padrão */
}

/* Estilo para o botão Insert-Button */
.insert-button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    background-color: #28a745; /* Verde padrão */
    color: white;
}

.insert-button:hover {
    background-color: #218838; /* Verde mais escuro ao passar o mouse */
}


/*campo de pesquisa ajustar*/
/* Estilização da barra de pesquisa */
.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.search-form input,
.search-form select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.search-button {
    padding: 5px 10px;
    background-color: #1e8449;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.search-button:hover {
    background-color: #145a32;
}


/*para precificação */
/* Layout Geral */
.container {
    width: 80%;
    margin: auto;
    font-family: Arial, sans-serif;
}

/* Títulos */
.main-title {
    text-align: left;
    color: #1e8449;
    margin-bottom: 20px;
    font-weight: normal;    
}

.section-title {
    color: #1e8449;
 /*   margin-top: 30px;*/
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: normal;    
}



/* Formulário */
.form-group {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Custos Diretos */
.costs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.cost-item {
    flex: 1 1 calc(33.333% - 20px);
    display: flex;
    flex-direction: column;
}

/* Resumo de Precificação */
.summary-container {
    margin-top: 20px;
}

.summary-item {
    margin-bottom: 15px;
}

/* Botões */
.action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.save-button {
    background-color: #1e8449; /* Verde */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}

.save-button:hover {
    background-color: #145a32; /* Verde mais escuro no hover */
}

.return-button {
    background-color: #1e8449;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-button:hover,
.return-button:hover {
    opacity: 0.9;
}


/*centralizar botoes de baixo*/
.action-buttons {
    display: flex;
    justify-content: center; /* Centraliza os botões horizontalmente */
    gap: 20px; /* Espaço entre os botões */
    margin-top: 20px; /* Adiciona espaço acima dos botões */
}

.action-buttons button {
    padding: 10px 20px; /* Ajusta o tamanho do botão */
    font-size: 14px; /* Mantém o texto legível */
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer; /* Mostra que é clicável */
}


.return-button {
    background-color: #1e8449; /* Verde padrão */
    color: white;
    border: none;
}

.save-button:hover, .return-button:hover {
    opacity: 0.8; /* Efeito ao passar o mouse */
}


/*painel de producao*/
/* Painel de Produção */
.page-title {
    text-align: center;
    color: #1e8449;
    margin-bottom: 20px;
}

.turno-info {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ops-container, .pedidos-container {
    margin-bottom: 30px;
}

.op-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    background: #ddd;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}

.progress {
    background: #1e8449;
    height: 100%;
    border-radius: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

table th, table td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px;
}

.action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.primary-button {
    background-color: #1e8449;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.secondary-button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.primary-button:hover, .secondary-button:hover {
    opacity: 0.9;
}

/*maquinas monitoramento*/
/* Monitoramento de Máquinas */
.machines-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-around;
    margin-top: 20px;
}

.machine-card {
    width: 30%;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: white;
}

.machine-card.green {
    background-color: #1e8449;
}

.machine-card.yellow {
    background-color: #f1c40f;
}

.machine-card.red {
    background-color: #e74c3c;
}

.machine-card h3 {
    margin-bottom: 10px;
}

.action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/*Florestal**/
/* Monitoramento de Manejo Florestal */
.manejo-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-around;
    margin-top: 20px;
}

.manejo-card {
    width: 30%;
    padding: 15px;
    background: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.manejo-card h3 {
    color: #1e8449;
    margin-bottom: 10px;
}

.action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    justify-content: center; /* Centraliza os botões */
}

/*estilo para monitoramento de maquinas*/
.machine-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

.machine-card {
    width: 200px;
    height: 180px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-align: center;
    font-family: Arial, sans-serif;
}

.machine-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.machine-card p {
    margin: 5px 0;
    font-size: 0.9rem;
    color: #333;
}

.button-container {
    text-align: center;
    margin-top: 20px;
}

.btn-back {
    background-color: #1e8449;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

.btn-back:hover {
    background-color: #145a32;
}

#submit {
    background-color: #1e8449;
    color: white;
}

/*dashboard*/
.dashboard-container {
    position: relative; /* Necessário para que os elementos filhos usem posicionamento absoluto */
    width: 100%;
    height: auto;
}

.background-image {
    width: 100%;
    height: auto;
    display: block; /* Garante que seja tratado como um bloco */
}

.indicator {
    position: absolute; /* Para permitir posicionamento sobre a imagem */
    background: rgba(255, 255, 255, 0.8); /* Fundo branco semi-transparente */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    width: 150px; /* Largura padrão */
    text-align: center;
}

.indicator h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.indicator p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #555;
}

/*formação dos indicadores no dashboard*/
.indicator {
    position: absolute; /* Para sobrepor na imagem */
    background: rgba(166, 201, 166, 0.8); /* Fundo verde claro com transparência */
    border: 1px solid #a2caa2; /* Borda verde claro */
    border-radius: 8px; /* Arredondamento das bordas */
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra leve */
    width: 290px; /* Ajuste da largura */
    height: 120px; /* Ajuste da altura */
    text-align: center;
}

.indicator.verde {
    background: rgba(202, 231, 202, 0.8); /* Fundo verde claro com transparência */
    border: 1px solid #a2caa2; /* Borda verde clara */
}

.indicator.amarelo {
    background: rgba(236, 236, 178, 0.8); /* Fundo amarelo claro com transparência */
    border: 1px solid #f0e6c4; /* Borda amarela */
}

.indicator.vermelho {
    background: rgba(238, 188, 188, 0.8); /* Fundo vermelho claro com transparência */
    border: 1px solid #dcc1c1; /* Borda vermelha */
}

/*novo cliente*/
.modal {
    display: none; /* Modal começa oculto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 8px;
    z-index: 1000;
    max-width: 600px;
    width: 90%;
}

.modal-content {
    padding: 20px;
}

.modal-title {
    font-size: 1.5em;
    color: #1e8449;
    margin-bottom: 20px;
}

/*css para tela do modal do novo cliente*/
/* Ajusta botões no modal */
.action-buttons {
    display: flex;
 /*   justify-content: space-between;*/
    gap: 20px;
    margin-top: 20px;
}

#btn-cancelar {
    background-color: #9e9797;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

#btn-cancelar:hover {
    background-color: #7f7f7f;
}
/*

#btn-novo {
    background-color: #28a745;
    color: white;
}

#btn-salvar {
    background-color: #3498db;
    color: white;
}
*/

/*mascaras para campos*/
// Aplicação de máscaras nos campos
document.addEventListener('DOMContentLoaded', () => {
    const cpfCnpjInput = document.getElementById('documento');
    const telefoneInput = document.getElementById('telefone');
    const celularInput = document.getElementById('celular');
    const cepInput = document.getElementById('cep');

    cpfCnpjInput.addEventListener('input', () => {
        let value = cpfCnpjInput.value.replace(/\D/g, '');
        if (value.length <= 11) {
            cpfCnpjInput.value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
        } else {
            cpfCnpjInput.value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5');
        }
    });

    telefoneInput.addEventListener('input', () => {
        telefoneInput.value = telefoneInput.value
            .replace(/\D/g, '')
            .replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
    });

    celularInput.addEventListener('input', () => {
        celularInput.value = celularInput.value
            .replace(/\D/g, '')
            .replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
    });

    cepInput.addEventListener('input', () => {
        cepInput.value = cepInput.value.replace(/\D/g, '').replace(/(\d{5})(\d{3})/, '$1-$2');
    });
});


/*estilização do login*/

.password-container {
    display: flex;
    align-items: center;
    position: relative; /* Permite posicionamento absoluto do botão dentro do container */
    width: 100%; /* O container ocupa a largura total */
}

.password-container input {
    width: 100%; /* O input ocupa o espaço total disponível */
    padding-right: 40px; /* Espaço para o botão de visualizar senha */
    box-sizing: border-box; /* Inclui padding e bordas no tamanho total */
}

.toggle-password {
    position: absolute; /* Botão posicionado dentro do container */
    right: 10px; /* Afasta o botão do lado direito do input */
    top: 50%; /* Centraliza verticalmente no input */
    transform: translateY(-50%); /* Corrige o alinhamento vertical */
    background: none; /* Remove qualquer fundo */
    border: none; /* Remove bordas */
    font-size: 1.2rem; /* Ajusta o tamanho do ícone */
    cursor: pointer; /* Mostra que é clicável */
    padding: 0; /* Remove padding adicional */
    line-height: 1; /* Garante alinhamento adequado */
    width: auto; /* Define largura apenas para o conteúdo */
    height: auto; /* Define altura apenas para o conteúdo */
}


.forgot-password {
    display: block;
    margin-top: 1rem;
    text-align: center;
    color: #0066cc;
    text-decoration: none;
    font-size: 0.9em;
}

.forgot-password:hover {
    text-decoration: underline;
}


/*estilização para  gerenciar permissões*/ 
/* Estilos gerais */

#salvar-permissoes {
    background-color: #1e8449;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

#cancelar-permissoes {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}











/*estilo do modal de gerenciar permissões*/
/* Modal - Fundo Escuro */
/* Modal - Fundo Escuro */
.modal {
    display: none;
    position: fixed;
    top: 50;
    left: 500;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center; /* Centraliza verticalmente */
    z-index: 1000; /* Certifica que o modal estará acima de outros elementos */
}

/* Modal - Conteúdo */
.modal-content {
    background: white;
    padding: 20px;
    width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
}

/* Animação para suavizar a aparição do modal */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Botões 
.action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
*/
#salvar-permissoes {
    background-color: #1e8449;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.close-button {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}



/*estulos para cadastro ede usuario*/
/* Container principal */
.container {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Título */
.main-title {
    text-align: center;
    margin-bottom: 20px;
}

/* Estilo dos campos do formulário */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}


.action-buttons button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

#cadastrar-usuario {
    background-color: #1e8449;
    color: white;
}

#cancelar-cadastro {
    background-color: #e74c3c;
    color: white;
}