/* =====================================================================
 *  BASE / LAYOUT GERAL
 * ===================================================================== */

.bold, .negrito{
    font-weight: bold;
}

.oculto, .hidden{
    display: none!important;
}

.txt_align_r{
    text-align: right;
}

.txt_align_l{
    text-align: left;
}

/* color ---------------------------------------------- */
.c_red{
    color: red;
}
.c_blue{
    color: blue;
}
.c_green{
    color: green;
}
.c_yellow{
    color: yellow;
}
.c_orange{
    color: orange;
}
.c_black{
    color: black;
}
.c_silver{
    color: silver;
}
/* border ---------------------------------------------- */
.b_red{
    border: 1px solid red;
}
.b_blue{
    border: 1px solid blue;
}
.b_green{
    border: 1px solid green;
}
.b_yellow{
    border: 1px solid yellow;
}
.b_orange{
    border: 1px solid orange;
}
.b_black{
    border: 1px solid black;
}
.b_silver{
    border: 1px solid silver;
}

.w_330{
    width: 330px;
}


/* =====================================================================
 *  BASE / LAYOUT GERAL
 * ===================================================================== */
 
/* Base geral do body e estrutura flex vertical */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* O body vira um flex container vertical */
body {
    font-family: Arial, sans-serif;
    background: #f3f3f3;
    min-height: 100vh;
}

body.app-body { /* Esta classe será para páginas internas (com header/footer) */
    display: flex;
    flex-direction: column;
    /* min-height: 100vh; já está no seletor 'body' acima, não precisa repetir */
}

body.app-body #body-container { /* Aplica flex: 1 0 auto SOMENTE para páginas internas */
    flex: 1 0 auto; /* ESSENCIAL: Faz o body-container crescer e ocupar todo o espaço restante */
    padding: 10px 15px; /* Ajuste conforme seu layout */
    box-sizing: border-box; /* Garante que padding não adicione altura extra */
    background-color: #fff; 
}

.layout-main {
    flex: 1 0 auto;          /* ocupa todo o espaço disponível entre header e footer */
    padding: 10px 15px;      /* ajuste conforme seu layout */
}

/* Rodapé sempre no fim */
.layout-footer {
    flex-shrink: 0;          /* não deixa o footer encolher */
}

/* Container central do app */
.app-main {
    flex: 1 0 auto;
}

.app-container {
    max-width: 960px;
    margin: 0 auto;
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

/* =====================================================================
 *  HEADER E FOOTER
 * ===================================================================== */

.app-header {
    flex-shrink: 0;
    background: #004c99;
    color: #fff;
    padding: 10px 20px;
}

/* Conteúdo Principal - #body-container */
#body-container { /* Use o ID que você usa no HTML */
    flex: 1 0 auto; /* <--- ESSENCIAL: Faz o body-container crescer e ocupar todo o espaço restante */
    padding: 10px 15px; /* Ajuste conforme seu layout */
    box-sizing: border-box; /* Garante que padding não adicione altura extra */
    /* Se o conteúdo dentro do body-container também precisar de flexbox para layout interno, adicione: */
    /* display: flex; */
    /* flex-direction: column; */
}

.app-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-header-title {
    font-size: 18px;
    font-weight: bold;
}

.app-header-title-link {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.app-header-title-link:hover {
    text-decoration: underline;
}

.app-footer {
    flex-shrink: 0; /* Impede que o footer encolha */
    margin-top: 20px; /* Mantenha se quiser um espaçamento fixo acima do footer */
    background: #eee;
    padding: 10px 20px;
    font-size: 12px;
    color: #555;
    text-align: center;
}

.app-footer-inner {
    max-width: 960px;
    margin: 0 auto;
}

/* =====================================================================
 *  TIPOGRAFIA / TÍTULOS
 * ===================================================================== */

.page-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 20px;
}

/* =====================================================================
 *  BOTÕES (GERAIS + ÍCONES)
 * ===================================================================== */

/* Botões padrão */
.app-button {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #007bff;
    background: #007bff;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

.app-button:hover {
    background: #0056b3;
}

.app-button-secondary {
    background: #959595;
    color: #333;
}

/* Botões de ícone genéricos */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1em;
    line-height: 1;
}

.btn-icon-header {
    background: transparent;
    color: #555;
    border-color: transparent;
    cursor: default;
    pointer-events: none;     /* não clicável */
}

.btn-icon:hover {
    background: #555;
}

.btn-icon-primary {
    background-color: #357edd;
    border: 1px solid #357edd;
    color: #ffffff; 
}

.btn-icon-primary:hover {
    background-color: #285fb0;
    border-color: #285fb0;
    color: #ffffff;
}

/* Ícone interno do botão */
.btn-icon-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn-icon-symbol svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
}

.btn-icon.btn-icon-secondary { 
    background-color: #959595!important; /* Azul, igual ao primário */
    border: 1px solid #dbdbdb!important;
    color: #ffffff !important; /* Texto/ícone branco, igual ao primário */
    margin-left: 5px!important; /* Espaçamento entre os botões da toolbar */
}

.btn-icon.btn-icon-secondary:hover {
    background-color: #656363 !important; /* Azul mais escuro no hover */
    border-color: #dbdbdb!important;
    color: #ffffff !important;
}

/* Botões de ação específicos (edit/delete) */
.btn-icon-acao-edit {
    background: transparent;
    border-color: none;
    color: #366fb4;
}

.btn-icon-acao-edit:hover {
    background: transparent;
    border-color: none;
    color: #4a90e2;
}

.btn-icon-acao-delete {
    background: transparent;
    border-color: none;
    color: #b44a36;
}

.btn-icon-acao-delete:hover {
    background: transparent;
    border-color: none;
    color: #e2604a;
}

.app-listagem-btn-acao {
    background: transparent;
    border-color: none;
    color: #366fb4;
}

.app-listagem-btn-acao:hover {
    background: transparent;
    border-color: none;
    color: #4a90e2;
}

/* Mapeia botões genéricos de ação para o estilo existente */
.app-listagem-btn-acao-editar {
    background: transparent;
    border-color: none;
    color: #366fb4;
}

.app-listagem-btn-acao-editar:hover {
    background: transparent;
    border-color: none;
    color: #4a90e2;
}

.app-listagem-btn-acao-excluir {
    background: transparent;
    border-color: none;
    color: #b44a36;
}

.app-listagem-btn-acao-excluir:hover {
    background: transparent;
    border-color: none;
    color: #e2604a;
}

.app-listagem-context-menu {
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 4px 0;
    min-width: 160px;
    font-size: 13px;
}

.app-listagem-context-menu-item {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    cursor: pointer;
    color: #333;
    white-space: nowrap;
}

.app-listagem-context-menu-item:hover {
    background-color: #f0f0f0;
}

.app-listagem-context-menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;    /* largura fixa para o ícone no menu */
    height: 20px;
    margin-right: 6px;
}

.app-listagem-context-menu-item-icon svg {
    width: 100%;
    height: 100%;
}

.app-listagem-context-menu-item-text {
    flex: 1;
}

/* linha da listagem quando o menu de contexto está aberto */
.app-listagem-row-context-open {
    background-color: #afdddb !important;  /* ajuste a cor como preferir */
}

/* =====================================================================
 *  TOOLBAR E LISTA DE FERRAMENTAS
 * ===================================================================== */

/* Toolbar genérica (inclui listagens) */
.toolbar {
    margin: 10px 0 15px 0;
    display: flex;
    gap: 8px;
}

/* Lista de ferramentas na home */
.tools-list {
    list-style: none;
    padding-left: 0;
}

.tools-item {
    margin-bottom: 8px;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajuste o minmax conforme necessário */
    gap: 20px; /* Espaçamento entre os botões */
    margin-top: 30px;
}

.tool-button {
    display: flex; /* MUDEI: Usa flexbox para alinhar os itens internos */
    flex-direction: row; /* MUDEI: Itens um ao lado do outro */
    align-items: center; /* MUDEI: Alinha os itens verticalmente ao centro */
    justify-content: flex-start; /* MUDEI: Alinha os itens ao início do container */
    padding: 15px 20px; /* Ajustei o padding para um layout horizontal */
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
}

.tool-button:hover {
    background-color: #f0f0f0;
    border-color: #c0c0c0;
    color: #000;
}

.tool-icon {
    display: flex; /* Para centralizar o SVG dentro dele */
    align-items: center;
    justify-content: center;
    width: 32px; /* MUDEI: Tamanho do ícone um pouco menor para caber ao lado do texto */
    height: 32px; /* MUDEI: Tamanho do ícone */
    margin-right: 15px; /* MUDEI: Espaçamento à direita do ícone para separar do texto */
    color: #357edd; /* Cor padrão para os ícones da home */
    flex-shrink: 0; /* Impede que o ícone encolha se o texto for muito longo */
}

/* Estilo para o SVG dentro do .tool-icon */
.tool-icon svg {
    width: 100%; /* Faz o SVG preencher o .tool-icon */
    height: 100%;
    /* stroke: currentColor; já está no SVG, mas pode ser sobrescrito aqui se precisar */
}

.tool-title {
    font-size: 1.1em; /* Tamanho da fonte do título */
    font-weight: 600; /* Deixa o texto um pouco mais bold */
    line-height: 1.2; /* Ajusta a altura da linha para melhor alinhamento */
    flex-grow: 1; /* Permite que o título ocupe o espaço restante */
}

/* =====================================================================
 *  ALERTAS / MENSAGENS
 * ===================================================================== */

.alert {
    padding: 8px 10px;
    border-radius: 4px;
    margin: 8px 0;
    font-size: 13px;
}

.alert-erro {
    background: #ffe6e6;
    color: #a00;
    border: 1px solid #f5b5b5;
}

.alert-sucesso {
    background: #e6ffe6;
    color: #0a0;
    border: 1px solid #b5f5b5;
}

.alert-list {
    margin: 0;
    padding-left: 18px;
}

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

 body.body-login-layout { /* Esta classe será aplicada ao <body> na página de login */
    display: flex; /* Transforma o body em um container flexível */
    flex-direction: column; /* Organiza os itens filhos em coluna */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: center;     /* Centraliza o conteúdo horizontalmente */
    background: #f0f2f5; /* O background que você já tinha para .app-body-login */
}

body.body-login-layout #body-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; /* Garante que ocupe toda a altura disponível para centralizar verticalmente */
    padding: 0; /* Remove padding para que o .app-container-login possa usar o espaço */
    background: transparent; /* Remove background para que o body.body-login-layout defina */
    box-shadow: none; /* Remove sombra */
    flex-grow: 0; /* Impede que o body-container cresça desnecessariamente */
}

.app-container-login {
    max-width: 360px;
    margin: auto;
    background: #fff;
    border-radius: 8px;
    padding: 22px 25px 25px 25px;
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
    flex-shrink: 0; 
    width: 100%; 
}

.app-container-login {
    min-width: 320px; /* NOVO: Largura mínima para o formulário */
    max-width: 450px; /* AJUSTADO: Largura máxima um pouco maior */
    background: #fff;
    border-radius: 8px;
    padding: 22px 25px 25px 25px;
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
    flex-shrink: 0; /* Garante que o card de login não encolha */
}

/* Estilos para a página de login */
body.login-page { /* Use esta classe no <body> para a página de login */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: center;     /* Centraliza o conteúdo horizontalmente */
    background: #f0f2f5; /* O background que você já tinha para .app-body-login */
}

body.login-page #body-container {
    flex-grow: 0; /* Na tela de login, o container não deve crescer para preencher tudo */
    min-height: auto;
    padding: 0; /* Remove padding para o container de login não ter espaço extra */
    background: transparent; /* Remove background do body-container para o card de login aparecer */
    box-shadow: none; /* Remove sombra do body-container */
}

.login-title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 18px;
}

.login-form .campo {
    margin-bottom: 10px;
}

.login-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
    font-size: 14px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    font-size: 14px;
}

.login-form button.app-button {
    width: 100%;
    margin-top: 5px;
}

.login-erro {
    color:#c00;
    margin-bottom:10px;
    text-align:center;
}

/* =====================================================================
 *  FORMULÁRIOS (USUÁRIOS E GENÉRICOS)
 * ===================================================================== */

/* Form de usuários (e base para outros forms) */
.form-default {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 4px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    max-width: 700px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 10px;
}

.campo {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
}

.campo label {
    font-size: 13px;
    margin-bottom: 3px;
}

.campo input[type="text"],
.campo input[type="password"],
.campo select {
    padding: 5px 6px;
    font-size: 13px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

.campo-checkbox {
    justify-content: flex-end;
}

.form-botoes {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

/* =====================================================================
 *  LISTAGENS (TABELAS + PAGINAÇÃO)
 * ===================================================================== */

/* Tabela genérica de listagem */
.app-listagem-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
}

/* Cabeçalho */
.app-listagem-tabela thead th {
    text-align: left;
    padding: 6px 8px;
    background: #f0f0f0;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

/* Corpo */
.app-listagem-tabela tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

/* Zebra */
.app-listagem-tabela tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.app-listagem-tabela tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

/* Hover */
.app-listagem-tabela tbody tr:hover {
    background-color: #e6f1ff;
}

/* Linha selecionada em seleção múltipla (CTRL+click) */
.app-listagem-tabela tr.app-listagem-row-selected-multi > td {
    background-color: #cbd5ba; /* ajuste a cor ao seu gosto */
}

/* Colunas genéricas */
.app-listagem-col {
    /* se quiser algo comum a todas as colunas */
}

/* Colunas de ação (header e corpo) */
.app-listagem-col-acao-header,
.app-listagem-col-acao {
    text-align: center!important;
    white-space: nowrap;
}

/* Colunas de ação antigas (se ainda usadas em alguma view específica) */
.col-acoes,
.col-acoes-header {
    text-align: center;
    white-space: nowrap;
}

.col-acao {
    text-align: center!important;
    white-space: nowrap;
}

.col-acao-header {
    text-align: center!important;
    white-space: nowrap;
}

/* Linha "nenhum registro" */
.app-listagem-vazia {
    text-align: center;
    font-style: italic;
    color: #777;
}

/* Paginação da listagem genérica */
.app-listagem-paginacao {
    margin-top: 10px;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.app-listagem-paginacao .btn-pag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    font-size: 12px;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

.app-listagem-paginacao .btn-pag:hover {
    background: #f0f0f0;
}

.app-listagem-paginacao .btn-pag.active {
    background: #357edd;
    border-color: #357edd;
    color: #fff;
    cursor: default;
}

.app-listagem-paginacao .btn-pag.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}


/* Novo registro em azul */
.app-listagem-toolbar .app-listagem-btn-novo {
    font-size: 1.8em;
    font-weight: 900;
    line-height: 1;
}

.app-listagem-toolbar .app-listagem-btn-novo:hover {
    background: #285fb0;
    color: #fff;
}

/* Ícone SVG específico do botão Voltar (dupla seta, etc.) */
.app-listagem-btn-voltar .icon-back {
    /*
    width: 18px;
    height: 18px;
    */
    display: block;
}

/* =====================================================================
 *  ACESSIBILIDADE
 * ===================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* =====================================================================
 *  MODAIS (DIALOG / LOADING)
 * ===================================================================== */

/* Overlay base */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ordem das modais */
.modal-overlay-loading { z-index: 1000; }
.modal-overlay-general { z-index: 1100; }
.modal-overlay-dialog  { z-index: 1200; }

/* Janela base */
.modal-window {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 18px rgba(0,0,0,0.4);
    max-width: 480px;
    width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.modal-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
}

.modal-header-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: #fff;
}

.modal-header-title {
    flex: 1;
    font-size: 15px;
    font-weight: bold;
}

.modal-close-btn {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #666;
}

.modal-close-btn:hover {
    color: #000;
}

/* Conteúdo */
.modal-content {
    padding: 12px 14px;
    overflow-y: auto;
    font-size: 14px;
}

/* Rodapé */
.modal-footer {
    padding: 8px 10px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 15px;
}

/* Botões */
.modal-btn {
    min-width: 80px;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
}

.modal-btn-primary {
    background: #357edd;
    border-color: #357edd;
    color: #fff;
}

.modal-btn-primary:hover {
    background: #285fb0;
    border-color: #285fb0;
}

.modal-btn-secondary {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.modal-btn-secondary:hover {
    background: #e4e4e4;
}

/* Cores por tipo da dialog */
.modal-dialog-error   .modal-header-icon { background: #e53935; }
.modal-dialog-success .modal-header-icon { background: #43a047; }
.modal-dialog-info    .modal-header-icon { background: #1e88e5; }
.modal-dialog-alert   .modal-header-icon { background: #fb8c00; }

/* Loading spinner */
.modal-loading-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    height: 100%;
}

.modal-loading-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.7);
    border-top-color: #357edd;
    animation: modal-spinner-rotate 0.9s linear infinite;
}

@keyframes modal-spinner-rotate {
    to { transform: rotate(360deg); }
}

/* =====================================================================
 *  HEADER: USUÁRIO LOGADO (DROPDOWN)
 * ===================================================================== */

.app-header-user {
    position: relative;
    font-size: 14px;
}

/* Botão que mostra nome + tipo + setinha */
.app-header-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 2px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.app-header-user-trigger:hover {
    background: rgba(255,255,255,0.1);
}

.app-header-user-name {
    font-weight: 500;
}

.app-header-user-type {
    font-size: 11px;
    opacity: 0.8;
}

.app-header-user-arrow {
    font-size: 10px;
}

/* Dropdown de usuário */
.app-header-user-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 6px;
    min-width: 180px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 4px 0;
    z-index: 1300;
    display: none; /* oculto por padrão */
}

.app-header-user-dropdown.open {
    display: block;
}

.app-header-user-item {
    display: block;
    padding: 6px 10px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.app-header-user-item:hover {
    background: #f0f0f0;
}

.app-header-user-divider {
    height: 1px;
    margin: 4px 0;
    background: #e0e0e0;
}

/* Item sair com ícone vermelho à esquerda */
.app-header-user-item-logout {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #c0392b;
}

.app-header-user-item-logout .logout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-header-user-item-logout .logout-svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Item de gestão de usuários */
.app-header-user-item-manage {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2c3e50;
}

.app-header-user-item-manage:hover {
    background: #f0f0f0;
    color: #1f2d3a;
}

.app-header-user-item-manage .manage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; /* Garante que o span tenha um tamanho */
    height: 18px; /* Garante que o span tenha um tamanho */
}

.app-header-user-item-manage .manage-icon.svgusuarios{
    width: 24px; /* Garante que o span tenha um tamanho */
    height: 24px; /* Garante que o span tenha um tamanho */
}

.app-header-user-item-manage .manage-svg {
    width: 24px;
    height: 24px;
    display: block;
    transform: translateY(3px); /* AJUSTE FINO */
}

/* =====================================================================
 *  INPUT: CAMPO SENHA COM ICO MOSTRAR
 * ===================================================================== */

/* Container para o campo de senha com o toggle */
.campo-senha-com-toggle {
    position: relative; /* Para posicionar o botão de toggle */
    flex: 1 1 200px; /* Mantém o comportamento flex do campo */
    display: flex;
    flex-direction: column;
}

/* Container para o input e o botão de toggle */
.input-com-toggle {
    position: relative;
    display: flex; /* Para alinhar o input e o botão */
    align-items: center;
}

.input-com-toggle input[type="password"],
.input-com-toggle input[type="text"] {
    flex: 1; /* Faz o input ocupar o espaço restante */
    padding-right: 40px; /* Espaço para o botão de toggle */
}

/* Botão de toggle da senha */
.btn-toggle-senha {
    position: absolute;
    right: 5px; /* Posição à direita do input */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px; /* Tamanho do botão */
    height: 30px; /* Tamanho do botão */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666; /* Cor padrão do ícone */
}

.login-form .btn-toggle-senha {
    top: 70%;
}

.btn-toggle-senha:hover {
    color: #333; /* Cor do ícone no hover */
}

/* Estilo para o SVG dentro do botão de toggle */
.icon-eye-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Tamanho do ícone de olho */
    height: 20px; /* Tamanho do ícone de olho */
}

.icon-eye-symbol svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =====================================================================
 *  HINT
 * ===================================================================== */
/* Estilo para o container do hint */
.hint-container {
    position: relative; /* Para posicionar o hint-text */
    display: inline-flex; /* Para que o ícone e o texto da label fiquem na mesma linha */
    align-items: center;
    margin-left: 5px; /* Espaçamento entre "Senha:" e o ícone */
}

/* Estilo para o ícone de interrogação */
.hint-icon {
    display: inline-flex; /* Já está assim, o que é bom para centralização */
    align-items: center;  /* Centraliza verticalmente o conteúdo (o SVG) */
    justify-content: center; /* Centraliza horizontalmente o conteúdo (o SVG) */
    width: 18px;
    height: 18px;
    cursor: help;
    color: #999;
    /* vertical-align: middle; */ /* REMOVA ou COMENTE esta linha */
    transition: color 0.2s ease;
}

.hint-icon:hover {
    color: #357edd; /* Cor para o ícone no hover (ativo) - um azul, por exemplo */
}

.hint-icon svg {
    width: 100%;
    height: 100%;
    display: block; /* Já está assim */
    /* Adicione estas duas linhas para garantir que o SVG preencha o espaço sem ser cortado */
    /* Se o viewBox for 0 0 24 24, e o elemento for 18x18, ele vai escalar */
    /*object-fit: contain;*/
    flex-shrink: 0;
}

/* Estilo para o texto da dica (a pequena modal/tooltip) */
.hint-text {
    position: absolute;
    background-color: #6d6860;
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;

    /* --- NOVOS AJUSTES DE POSICIONAMENTO E INTERAÇÃO --- */
    /* Posiciona a dica à direita do ícone, alinhada verticalmente */
    left: calc(100% + 5px); /* 100% da largura do pai (.hint-container) + 5px de espaçamento */
    top: 50%; /* Alinha o topo da dica ao centro vertical do pai */
    transform: translateY(-50%); /* Ajusta a dica para que seu centro fique alinhado ao centro do pai */

    /* Permite que o mouse passe por cima sem esconder a dica, mas não interage com ela */
    pointer-events: none; 
}

.hint-text.active {
    opacity: 1;
    visibility: visible;
    /* Quando ativo, ainda não queremos que o mouse interaja com o texto da dica,
       a menos que você queira que o usuário possa selecionar o texto.
       Se quiser que o usuário possa selecionar o texto, mude para 'auto'.
       Porém, 'none' é melhor para evitar que o mouse saia do ícone e a dica suma. */
    pointer-events: none; 
}

/* =====================================================================
 *  HINT
 * ===================================================================== */

.modal-overlay {
    display: none; /* Escondido por padrão */
    position: fixed; /* Fica no topo da tela */
    z-index: 1000; /* Acima de tudo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilita scroll se necessário */
    background-color: rgba(0,0,0,0.4); /* Fundo escuro semi-transparente */
    display: flex; /* Para centralizar o conteúdo */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* Centraliza */
    padding: 10px;
    border: none;
    width: 90%; /* Largura padrão */
    max-width: 600px; /* Largura máxima para ser "pequena" */
    border-radius: 8px;
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.3em;
    color: #333;
}

.close-button {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
}

.modal-body p {
    margin-bottom: 15px;
    color: #555;
    text-align: center;
}

.modal-body #modalListagemNome {
    font-weight: bold;
    color: #357edd; /* Cor de destaque */
}

.export-options {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-top: 20px;
}

.export-options .btn {
    flex: 1; /* Faz os botões ocuparem o mesmo espaço */
    padding: 10px 15px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estilos básicos para botões, se não tiver */

.btn-icon-symbol .icon-pdf-text {
    width: 100%;
    height: 100%;
    display: block;
}

.btn-export-pdf-with-text {
    display: inline-flex;
    align-items: center;
    gap: 5px; 
    padding: 8px 12px; 
}

.btn-export-pdf-with-text .btn-icon-symbol {
    width: 18px; 
    height: 18px; 
    display: flex; 
    align-items: center;
    justify-content: center;
}

.btn-export-pdf-with-text .btn-text {
    font-size: 0.9em;
    font-weight: bold;
    color: inherit;
    line-height: 1;
}

/* Estilo para o bloco de informações da listagem (contagem e paginação) */
.app-listagem-info {
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #555;
    text-align: left; /* Alinha o texto à direita */
    padding: 5px 0;
}

.btn-icon.btn-goto-page {
    background: transparent!important;
    border: none!important;
    position: relative;
    top: -10px;
}

.btn-icon.btn-goto-page .btn-icon-symbol{
    color: #357edd;
    background: #fff;
    border: 1px solid #ccc;
    transform: scaleX(-1);
    border-radius: 4px;
    min-width: 24px;
    height: 24px;
}
.btn-icon.btn-goto-page .btn-icon-symbol:hover{
    color: #004c99;
}

.app-listagem-goto-page{
    border: none;
    height: 22px;
    margin-left: 40px;
}

.input-goto-page{
    position: relative;
    top: -17px;
    border: 1px solid #ccc;
}

.total-pages-display{
    position: relative;
    top: -15px;
}

.app-listagem-tabela tr.highlight-delete td {
    color: #a00;
    background-color: #ffe0e0;
    transition: background-color 0.2s ease-in-out;
}

.label-form-etl{
    width: 170px;
}

.btn-icon.excluir_admin {
    background: #c95943;
    color: #fff;
}

.btn-icon.excluir_admin:hover {
    background: #b44a36;
    color: #fff;
}

.upload-info {
    margin-top: 4px;
    font-size: 12px;
    color: #444;
}

.upload-info div {
    margin-bottom: 2px;
}

.upload-info span.ok {
    color: #008000;
    font-weight: 600;
}

.upload-info span.warn {
    color: #d00000;
    font-weight: 600;
}