/**
 * SIGFLACSO - Design System & Visual Standardization Tokens
 * Arquivo: app/www/includes/sigflacso-tokens.css
 * Compatibilidade: Legado PHP/SIMEC + Bootstrap 3.3.7 + FontAwesome
 */

:root {
    /* --- Cores Primarias e Institucionais --- */
    --flacso-primary: #1e4262;
    --flacso-primary-hover: #15324d;
    --flacso-primary-active: #0d2134;
    --flacso-primary-light: #e8f0fe;
    --flacso-primary-text: #ffffff;

    --flacso-secondary: #4b6584;
    --flacso-secondary-hover: #3b5069;
    --flacso-secondary-light: #f1f5f9;

    --flacso-accent: #0284c7;
    --flacso-accent-hover: #0369a1;

    /* --- Cores Semanticas de Feedback --- */
    --flacso-success: #16a34a;
    --flacso-success-hover: #15803d;
    --flacso-success-bg: #dcfce7;
    --flacso-success-border: #86efac;
    --flacso-success-text: #14532d;

    --flacso-warning: #d97706;
    --flacso-warning-hover: #b45309;
    --flacso-warning-bg: #fef3c7;
    --flacso-warning-border: #fcd34d;
    --flacso-warning-text: #78350f;

    --flacso-danger: #dc2626;
    --flacso-danger-hover: #b91c1c;
    --flacso-danger-bg: #fee2e2;
    --flacso-danger-border: #fca5a5;
    --flacso-danger-text: #7f1d1d;

    --flacso-info: #0284c7;
    --flacso-info-hover: #0369a1;
    --flacso-info-bg: #e0f2fe;
    --flacso-info-border: #7dd3fc;
    --flacso-info-text: #075985;

    /* --- Superficies e Fundo --- */
    --flacso-bg-app: #f4f6f9;
    --flacso-bg-surface: #ffffff;
    --flacso-bg-muted: #f8fafc;
    --flacso-bg-subtle: #f1f5f9;
    --flacso-bg-hover: #f1f5f9;

    /* --- Bordas e Divisores --- */
    --flacso-border: #cbd5e1;
    --flacso-border-subtle: #e2e8f0;
    --flacso-border-focus: #3b82f6;

    /* --- Tipografia --- */
    --flacso-text-primary: #1e293b;
    --flacso-text-secondary: #64748b;
    --flacso-text-muted: #94a3b8;
    --flacso-text-inverse: #ffffff;
    --flacso-link: #0369a1;
    --flacso-link-hover: #075985;

    --flacso-font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --flacso-font-size-xs: 11px;
    --flacso-font-size-sm: 12px;
    --flacso-font-size-base: 13px;
    --flacso-font-size-md: 14px;
    --flacso-font-size-lg: 16px;
    --flacso-font-size-xl: 18px;
    --flacso-font-size-2xl: 22px;

    /* --- Espacamentos Compactos --- */
    --flacso-space-1: 3px;
    --flacso-space-2: 6px;
    --flacso-space-3: 10px;
    --flacso-space-4: 14px;
    --flacso-space-5: 18px;
    --flacso-space-6: 22px;

    /* --- Raios de Borda --- */
    --flacso-radius-xs: 2px;
    --flacso-radius-sm: 4px;
    --flacso-radius-md: 6px;
    --flacso-radius-lg: 8px;
    --flacso-radius-pill: 9999px;

    /* --- Sombras e Elevacoes --- */
    --flacso-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --flacso-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
    --flacso-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --flacso-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.08);

    /* --- Transicoes --- */
    --flacso-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --flacso-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base & Reset Suave
   ========================================================================== */
body {
    background-color: var(--flacso-bg-app) !important;
    color: var(--flacso-text-primary) !important;
    font-family: var(--flacso-font-sans) !important;
    font-size: var(--flacso-font-size-sm) !important;
    line-height: 1.4;
}

#main {
    background-color: var(--flacso-bg-app) !important;
}

/* Links */
a {
    color: var(--flacso-link);
    text-decoration: none;
    transition: color var(--flacso-transition-fast);
}

a:hover, a:focus {
    color: var(--flacso-link-hover);
    text-decoration: underline;
}

/* ==========================================================================
   Padronizacao de Titulos de Tela (monta_titulo / TituloTela)
   ========================================================================== */
.TituloTela, 
label.TituloTela {
    font-family: var(--flacso-font-sans) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--flacso-primary) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

table.titulo-sistema {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 95% !important;
    max-width: 95% !important;
    margin: 0 auto 10px auto !important;
    border: 1px solid var(--flacso-border-subtle) !important;
    border-radius: var(--flacso-radius-md) !important;
    box-shadow: var(--flacso-shadow-sm) !important;
    background-color: var(--flacso-bg-surface) !important;
}

table.titulo-sistema td {
    padding: 6px 12px !important;
}

/* ==========================================================================
   Tabelas de Formulario (table.tabela) - Compactas e Proporcionais
   ========================================================================== */
table.tabela {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 95% !important;
    max-width: 95% !important;
    margin: 0 auto 10px auto !important;
    background-color: var(--flacso-bg-surface) !important;
    border: 1px solid var(--flacso-border-subtle) !important;
    border-radius: var(--flacso-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--flacso-shadow-sm) !important;
}

table.tabela > tbody > tr > td,
table.tabela > tr > td {
    padding: 2px 6px !important;
    border-bottom: 1px solid var(--flacso-border-subtle) !important;
    font-size: 11.5px !important;
    color: var(--flacso-text-primary) !important;
    vertical-align: middle !important;
    line-height: 1.25 !important;
}

table.tabela > tbody > tr:last-child > td,
table.tabela > tr:last-child > td {
    border-bottom: none !important;
}

/* Labels de Campos (Coluna da Esquerda do Formulario) */
.SubTituloDireita,
.subtitulodireita,
.SubTituloDireitaMenor,
td.SubTituloDireita,
td.subtitulodireita {
    background-color: #f8fafc !important;
    color: #334155 !important;
    font-family: var(--flacso-font-sans) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    text-align: right !important;
    width: 25% !important;
    min-width: 160px !important;
    max-width: 280px !important;
    padding: 2px 8px !important;
    border-right: 1px solid var(--flacso-border-subtle) !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
}

.SubTituloEsquerda,
.subtituloesquerda,
td.SubTituloEsquerda,
td.subtituloesquerda {
    background-color: #f8fafc !important;
    color: #334155 !important;
    font-family: var(--flacso-font-sans) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    padding: 2px 8px !important;
    border-right: 1px solid var(--flacso-border-subtle) !important;
    line-height: 1.25 !important;
}

/* Linha de Botoes no Formulario */
table.tabela tr[bgcolor="#C0C0C0"],
table.tabela tr[bgcolor="#c0c0c0"],
table.tabela tr.linha_botoes,
tr[bgcolor="#C0C0C0"] td,
tr[bgcolor="#c0c0c0"] td {
    background-color: #f8fafc !important;
    padding: 4px 8px !important;
    border-top: 1px solid var(--flacso-border-subtle) !important;
}

/* ==========================================================================
   Tabelas de Listagem de Dados (.listagem, .listagem2, .listagem3)
   ========================================================================== */
table.listagem, 
table.listagem2,
table.listagem3 {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 95% !important;
    max-width: 95% !important;
    margin: 0 auto 12px auto !important;
    background-color: var(--flacso-bg-surface) !important;
    border: 1px solid var(--flacso-border-subtle) !important;
    border-radius: var(--flacso-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--flacso-shadow-sm) !important;
}

/* Cabecalho da Tabela */
table.listagem thead tr,
table.listagem tr.head,
table.listagem td.title,
table.listagem th,
table.listagem2 td.title,
table.listagem3 td.title {
    background-color: #f1f5f9 !important;
    color: var(--flacso-text-primary) !important;
    font-family: var(--flacso-font-sans) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-bottom: 1px solid var(--flacso-border) !important;
    border-top: none !important;
    text-align: left;
}

table.listagem thead tr td,
table.listagem thead tr th {
    border-right: 1px solid var(--flacso-border-subtle) !important;
    cursor: pointer;
    transition: background-color var(--flacso-transition-fast);
}

table.listagem thead tr td:last-child,
table.listagem thead tr th:last-child {
    border-right: none !important;
}

table.listagem thead tr td:hover,
table.listagem thead tr th:hover {
    background-color: #e2e8f0 !important;
}

/* Linhas e Celulas da Listagem */
table.listagem tbody tr td,
table.listagem2 tbody tr td,
table.listagem3 tbody tr td {
    padding: 2px 6px !important;
    border-bottom: 1px solid var(--flacso-border-subtle) !important;
    font-size: 11.5px !important;
    color: var(--flacso-text-primary) !important;
    line-height: 1.25 !important;
}

/* Efeito Hover na Listagem */
table.listagem tbody tr:hover,
table.listagem tbody tr:hover td,
table.listagem2 tbody tr:hover td,
table.listagem3 tbody tr:hover td {
    background-color: var(--flacso-bg-hover, #f1f5f9) !important;
}

/* ==========================================================================
   Campos de Formulario (Inputs, Selects, Textareas, Radios) - Compactos
   ========================================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
.campo,
.campotexto,
.CampoEstilo,
.normal {
    font-family: var(--flacso-font-sans) !important;
    font-size: 11.5px !important;
    color: var(--flacso-text-primary) !important;
    background-color: var(--flacso-bg-surface) !important;
    border: 1px solid var(--flacso-border) !important;
    border-radius: var(--flacso-radius-sm) !important;
    padding: 1px 5px !important;
    height: 23px !important;
    line-height: normal !important;
    outline: none !important;
    transition: border-color var(--flacso-transition-fast), box-shadow var(--flacso-transition-fast) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    display: inline-block;
    vertical-align: middle;
}

select {
    height: 23px !important;
    padding: 1px 4px !important;
    font-size: 11.5px !important;
}

textarea {
    font-family: var(--flacso-font-sans) !important;
    font-size: 11.5px !important;
    color: var(--flacso-text-primary) !important;
    background-color: var(--flacso-bg-surface) !important;
    border: 1px solid var(--flacso-border) !important;
    border-radius: var(--flacso-radius-sm) !important;
    padding: 3px 5px !important;
    outline: none !important;
    min-height: 40px;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    transition: border-color var(--flacso-transition-fast), box-shadow var(--flacso-transition-fast) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.CampoEstilo:focus,
.normal:focus {
    border-color: var(--flacso-accent) !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}

input[readonly],
input[disabled],
select[disabled],
textarea[disabled],
.campodesabilitado,
.disabled {
    background-color: var(--flacso-bg-subtle) !important;
    color: var(--flacso-text-secondary) !important;
    border-color: var(--flacso-border-subtle) !important;
    cursor: not-allowed !important;
}

/* Radios e Checkboxes */
input[type="radio"],
input[type="checkbox"] {
    margin: 0 3px 0 6px !important;
    vertical-align: middle !important;
    cursor: pointer;
}

/* ==========================================================================
   Padronizacao de Botoes
   ========================================================================== */
.botao,
.btn-flacso,
input[type="button"],
input[type="submit"],
input[type="reset"],
button.btn {
    font-family: var(--flacso-font-sans) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 2px 10px !important;
    height: 25px !important;
    line-height: normal !important;
    border-radius: var(--flacso-radius-sm) !important;
    border: 1px solid var(--flacso-border) !important;
    background-color: #ffffff !important;
    color: var(--flacso-text-primary) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all var(--flacso-transition-fast) !important;
    box-shadow: var(--flacso-shadow-sm) !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.botao:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button.btn:hover {
    background-color: var(--flacso-bg-hover) !important;
    border-color: var(--flacso-secondary) !important;
}

/* Botoes Primarios / Consultar / Pesquisar / Buscar */
.btn-primary,
.btn-flacso-primary,
.btverdeescuro,
input[value="Consultar"],
input[value="Pesquisar"],
input[value="Buscar"],
input[value="Filtrar"] {
    background-color: var(--flacso-primary) !important;
    color: var(--flacso-primary-text) !important;
    border-color: var(--flacso-primary) !important;
}

.btn-primary:hover,
.btn-flacso-primary:hover,
.btverdeescuro:hover,
input[value="Consultar"]:hover,
input[value="Pesquisar"]:hover,
input[value="Buscar"]:hover,
input[value="Filtrar"]:hover {
    background-color: var(--flacso-primary-hover) !important;
    border-color: var(--flacso-primary-hover) !important;
    color: #ffffff !important;
}

/* Botoes de Sucesso / Salvar / Cadastrar / Novo */
.btn-success,
.btn-flacso-success,
.btverdeclaro,
input[value="Salvar"],
input[value="Gravar"],
input[value="Cadastrar"],
input[value="Confirmar"],
input[value="Inserir"],
input[value="Novo"] {
    background-color: var(--flacso-success) !important;
    color: #ffffff !important;
    border-color: var(--flacso-success) !important;
}

.btn-success:hover,
.btn-flacso-success:hover,
.btverdeclaro:hover,
input[value="Salvar"]:hover,
input[value="Gravar"]:hover,
input[value="Cadastrar"]:hover,
input[value="Confirmar"]:hover,
input[value="Inserir"]:hover,
input[value="Novo"]:hover {
    background-color: var(--flacso-success-hover) !important;
    border-color: var(--flacso-success-hover) !important;
    color: #ffffff !important;
}

/* Botoes de Perigo / Excluir / Cancelar */
.btn-danger,
.btn-flacso-danger,
.btvermelho,
input[value="Excluir"],
input[value="Apagar"],
input[value="Deletar"],
input[value="Remover"] {
    background-color: var(--flacso-danger) !important;
    color: #ffffff !important;
    border-color: var(--flacso-danger) !important;
}

.btn-danger:hover,
.btn-flacso-danger:hover,
.btvermelho:hover,
input[value="Excluir"]:hover,
input[value="Apagar"]:hover,
input[value="Deletar"]:hover,
input[value="Remover"]:hover {
    background-color: var(--flacso-danger-hover) !important;
    border-color: var(--flacso-danger-hover) !important;
    color: #ffffff !important;
}

/* Botoes de Aviso / Alterar / Editar */
.btn-warning,
.btn-flacso-warning,
.btlaranja,
input[value="Alterar"],
input[value="Editar"] {
    background-color: var(--flacso-warning) !important;
    color: #ffffff !important;
    border-color: var(--flacso-warning) !important;
}

.btn-warning:hover,
.btn-flacso-warning:hover,
.btlaranja:hover,
input[value="Alterar"]:hover,
input[value="Editar"]:hover {
    background-color: var(--flacso-warning-hover) !important;
    border-color: var(--flacso-warning-hover) !important;
    color: #ffffff !important;
}

/* Botoes Voltar / Fechar / Neutros */
.btbranco,
input[value="Voltar"],
input[value="Fechar"],
input[value="Limpar"],
input[value="Cancelar"] {
    background-color: #ffffff !important;
    color: var(--flacso-text-primary) !important;
    border-color: var(--flacso-border) !important;
}

.btbranco:hover,
input[value="Voltar"]:hover,
input[value="Fechar"]:hover,
input[value="Limpar"]:hover,
input[value="Cancelar"]:hover {
    background-color: var(--flacso-bg-subtle) !important;
    border-color: var(--flacso-secondary) !important;
}

/* ==========================================================================
   Abas Modernas (cria_aba)
   ========================================================================== */
.flacso-tabs-container {
    width: 95% !important;
    margin: 8px auto 10px auto !important;
    border-bottom: 2px solid var(--flacso-border);
}

.flacso-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.flacso-tabs-nav li a:hover {
    background-color: var(--flacso-bg-subtle) !important;
    color: var(--flacso-primary) !important;
    border-color: var(--flacso-secondary) !important;
}

/* ==========================================================================
   Navbar Superior (.navbar-inverse) & Breadcrumbs
   ========================================================================== */
.navbar-inverse {
    background-color: var(--flacso-primary, #1e4262) !important;
    border-color: var(--flacso-primary-hover, #15324d) !important;
    box-shadow: var(--flacso-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.08)) !important;
    min-height: 48px;
}

.navbar-inverse .navbar-brand {
    padding: 4px 15px;
    height: 48px;
    display: flex;
    align-items: center;
}

.navbar-inverse .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12px;
    font-weight: 500;
    padding: 14px 10px;
    transition: all var(--flacso-transition-fast, 150ms ease-in-out);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.navbar-form-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.navbar-form-inline select {
    background-color: #ffffff !important;
    color: var(--flacso-text-primary, #1e293b) !important;
    border: 1px solid var(--flacso-border, #cbd5e1) !important;
    border-radius: var(--flacso-radius-sm, 4px) !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    height: 26px !important;
}

.navbar-text.exerc-label {
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 4px 0 6px;
    font-size: 11px;
    font-weight: 500;
}

ol.breadcrumb {
    background-color: var(--flacso-bg-surface, #ffffff) !important;
    border: 1px solid var(--flacso-border-subtle, #e2e8f0) !important;
    border-radius: var(--flacso-radius-md, 6px) !important;
    box-shadow: var(--flacso-shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
    width: 95% !important;
    margin: 10px auto !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
}

ol.breadcrumb li b {
    color: var(--flacso-text-secondary, #64748b) !important;
}

ol.breadcrumb li.active {
    color: var(--flacso-primary, #1e4262) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Rodape (#rodape)
   ========================================================================== */
footer#rodape {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--flacso-primary, #1e4262);
    color: rgba(255, 255, 255, 0.9);
    border-top: 2px solid var(--flacso-primary-hover, #15324d);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1030;
    font-family: var(--flacso-font-sans, "Segoe UI", Arial, sans-serif);
    font-size: 11px;
    padding: 4px 16px;
}

#rodape .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    gap: 12px;
}

#rodape .footer-left,
#rodape .footer-center,
#rodape .footer-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

#rodape .footer-info,
#rodape .system-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

#rodape .footer-info i,
#rodape .system-stats i {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

#rodape .footer-link {
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity var(--flacso-transition-fast, 150ms ease-in-out);
}

#rodape .footer-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

#rodape #rdpUsuariosOnLine {
    background-color: var(--flacso-success, #16a34a);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--flacso-radius-pill, 9999px);
}

#rodape .footer-separator {
    color: rgba(255, 255, 255, 0.3);
    user-select: none;
}

/* ==========================================================================
   Alertas e Modais
   ========================================================================== */
.alert,
.alerta {
    padding: 10px 14px !important;
    border-radius: var(--flacso-radius-md) !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.alert-success, .alerta-sucesso {
    background-color: var(--flacso-success-bg) !important;
    border: 1px solid var(--flacso-success-border) !important;
    color: var(--flacso-success-text) !important;
}

.alert-danger, .alerta-erro {
    background-color: var(--flacso-danger-bg) !important;
    border: 1px solid var(--flacso-danger-border) !important;
    color: var(--flacso-danger-text) !important;
}

.alert-warning, .alerta-aviso {
    background-color: var(--flacso-warning-bg) !important;
    border: 1px solid var(--flacso-warning-border) !important;
    color: var(--flacso-warning-text) !important;
}

.alert-info, .alerta-info {
    background-color: var(--flacso-info-bg) !important;
    border: 1px solid var(--flacso-info-border) !important;
    color: var(--flacso-info-text) !important;
}

.card-flacso,
.painel-flacso,
.login-box {
    background-color: var(--flacso-bg-surface) !important;
    border: 1px solid var(--flacso-border-subtle) !important;
    border-radius: var(--flacso-radius-lg) !important;
    box-shadow: var(--flacso-shadow-md) !important;
    padding: 24px !important;
}

@media (max-width: 768px) {
    table.tabela,
    table.listagem,
    table.titulo-sistema,
    .flacso-tabs-container,
    ol.breadcrumb {
        width: 100% !important;
        max-width: 100% !important;
    }
    .SubTituloDireita,
    .subtitulodireita {
        width: 35% !important;
    }
    footer#rodape {
        position: relative;
        padding: 8px 12px;
    }
    #rodape .footer-content {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}

#menubackmenu1,
#menubackmenu {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Padronizacao de Icones de Tabelas e Acoes (.listagem, .tabela, etc.)
   ========================================================================== */

/* 1. Icones de Acao nas Tabelas (alterar, excluir, consultar, visualizacao, etc.) */
table.listagem td img,
table.tabela td img,
table.listagem2 td img,
table.listagem3 td img,
.listagem td img,
.tabela td img {
    max-height: 16px !important;
    max-width: 16px !important;
    width: auto !important;
    height: auto !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin: 0 3px !important;
    cursor: pointer !important;
    transition: transform var(--flacso-transition-fast, 150ms ease-in-out), opacity var(--flacso-transition-fast, 150ms ease-in-out), filter var(--flacso-transition-fast, 150ms ease-in-out) !important;
}

/* Efeito Hover nos Icones de Acao de Tabela */
table.listagem td a img:hover,
table.tabela td a img:hover,
table.listagem td img:hover,
table.tabela td img:hover,
table.listagem2 td a img:hover,
table.listagem3 td a img:hover,
.listagem td a img:hover {
    transform: scale(1.22) !important;
    opacity: 0.85 !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) !important;
}

/* 2. Links de Acoes na Tabela (Coluna "Opcoes" / "Acoes") */
table.listagem td a,
table.tabela td a,
table.listagem2 td a,
table.listagem3 td a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    text-decoration: none !important;
}

/* 3. Icones de Ordenacao de Cabecalho (seta_ordemASC.gif, seta_ordemDESC.gif) */
table.listagem thead th img,
table.listagem thead td img,
table.listagem td.title img,
table.listagem2 td.title img,
table.listagem3 td.title img {
    max-height: 12px !important;
    max-width: 12px !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
    opacity: 0.85 !important;
}

/* 4. Icones de Links de Acao Superior ("+ Cadastrar", "+ Novo", "+ Incluir") */
a[href*="acao=I"],
a[href*="acao=A"],
a[href*="cadastrar"],
a[href*="incluir"],
.acao_incluir {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
    color: var(--flacso-primary, #1e4262) !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    border-radius: var(--flacso-radius-sm, 4px) !important;
    transition: background-color var(--flacso-transition-fast, 150ms ease-in-out) !important;
}

a[href*="acao=I"] img,
a[href*="cadastrar"] img,
a[href*="incluir"] img {
    max-height: 14px !important;
    width: auto !important;
    vertical-align: middle !important;
}

a[href*="acao=I"]:hover,
a[href*="cadastrar"]:hover,
a[href*="incluir"]:hover {
    background-color: var(--flacso-bg-hover, #f1f5f9) !important;
    text-decoration: none !important;
}

/* 5. Icones Vetoriais FontAwesome em Tabelas (.fa) */
table.listagem td .fa,
table.tabela td .fa,
table.listagem2 td .fa,
table.listagem3 td .fa {
    font-size: 14px !important;
    margin: 0 3px !important;
    vertical-align: middle !important;
    color: var(--flacso-secondary, #4b6584);
    cursor: pointer !important;
    transition: transform var(--flacso-transition-fast, 150ms ease-in-out), color var(--flacso-transition-fast, 150ms ease-in-out) !important;
}

table.listagem td a:hover .fa,
table.tabela td a:hover .fa,
table.listagem td .fa:hover,
table.tabela td .fa:hover {
    transform: scale(1.22) !important;
    color: var(--flacso-primary, #1e4262) !important;
}

/* 6. Icone de Campo Obrigatorio (obrig.gif) */
img[src*="obrig.gif"],
img[src*="obrig"] {
    max-height: 10px !important;
    max-width: 10px !important;
    vertical-align: middle !important;
    margin-left: 2px !important;
}

/* 7. Icone de Calendario (calendario.gif) */
img[src*="calendario.gif"],
img[src*="calendario"] {
    max-height: 16px !important;
    max-width: 16px !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
    cursor: pointer !important;
    transition: transform var(--flacso-transition-fast, 150ms ease-in-out) !important;
}

img[src*="calendario.gif"]:hover,
img[src*="calendario"]:hover {
    transform: scale(1.18) !important;
}

/* ==========================================================================
   Padronizacao Global de Espacamentos, Margens e Alinhamentos de Conteudo
   ========================================================================== */

/* 1. Alinhamento Global de Tabelas de Listagem Customizadas (ex: .tabelaProjeto) */
table.tabelaProjeto,
.tabelaProjeto {
    width: 95% !important;
    max-width: 95% !important;
    margin: 0 auto 12px auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: var(--flacso-bg-surface) !important;
    border: 1px solid var(--flacso-border-subtle) !important;
    border-radius: var(--flacso-radius-md) !important;
    overflow: visible !important;
    box-shadow: var(--flacso-shadow-sm) !important;
}

table.tabelaProjeto td.celula-titulo-projeto,
.tabelaProjeto td.celula-titulo-projeto {
    white-space: normal !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
    font-size: 11.5px !important;
    font-family: var(--flacso-font-sans) !important;
    color: var(--flacso-text-primary) !important;
    background-color: transparent !important;
}

table.tabelaProjeto td.celula-titulo-projeto *,
.tabelaProjeto td.celula-titulo-projeto * {
    font-size: 11.5px !important;
    font-family: inherit !important;
    line-height: inherit !important;
    background-color: transparent !important;
    text-align: left !important;
}

table.tabelaProjeto td.celula-titulo-projeto p,
.tabelaProjeto td.celula-titulo-projeto p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}

table.tabelaProjeto td.celula-titulo-projeto b,
table.tabelaProjeto td.celula-titulo-projeto strong,
.tabelaProjeto td.celula-titulo-projeto b,
.tabelaProjeto td.celula-titulo-projeto strong {
    font-weight: 700 !important;
}

table.tabelaProjeto td.celula-titulo-projeto i,
table.tabelaProjeto td.celula-titulo-projeto em,
.tabelaProjeto td.celula-titulo-projeto i,
.tabelaProjeto td.celula-titulo-projeto em {
    font-style: italic !important;
}

table.tabelaProjeto td.celula-titulo-projeto u,
.tabelaProjeto td.celula-titulo-projeto u {
    text-decoration: underline !important;
}

table.tabelaProjeto td,
.tabelaProjeto td {
    padding: 2px 6px !important;
    font-size: 11.5px !important;
    border-bottom: 1px solid var(--flacso-border-subtle) !important;
    vertical-align: middle !important;
    line-height: 1.25 !important;
}

table.tabelaProjeto thead tr td,
table.tabelaProjeto thead tr th {
    background-color: #f1f5f9 !important;
    color: var(--flacso-text-primary) !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    font-size: 11.5px !important;
    border-bottom: 1px solid var(--flacso-border) !important;
}

/* 2. Alinhamento e Contencao Global de Formularios e Tabelas de Modulo */
form[name="formulario"] > table,
form[name="form"] > table,
form[name="formulario"] > div > table,
body > form > table {
    width: 95% !important;
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. Barras de Acoes e Filtros (Toolbar Padronizada) */
.toolbar-flacso,
.flacso-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 6px 12px !important;
}

/* 4. Padronizacao dos Elementos de Migalha de Pao e Abas */
ol.breadcrumb {
    width: 95% !important;
    max-width: 95% !important;
    margin: 8px auto 10px auto !important;
    padding: 6px 12px !important;
    background-color: #f8fafc !important;
    border: 1px solid var(--flacso-border-subtle) !important;
    border-radius: var(--flacso-radius-md) !important;
    font-size: 12px !important;
}

.flacso-tabs-container {
    width: 95% !important;
    max-width: 95% !important;
    margin: 0 auto 10px auto !important;
}

/* ==========================================================================
   Padronizacao de Cores e Estilos dos Menus e Submenus (mmenu / dropdowns)
   ========================================================================== */

/* 1. Submenus Dinamicos (DIVs geradas pelo mmenu.js - menu2, menu3, etc.) */
div[id^="menu"]:not(#menubackmenu):not(#menubackmenu1):not(#menu1) {
    background-color: var(--flacso-primary, #1e4262) !important;
    border: 1px solid var(--flacso-primary-hover, #15324d) !important;
    border-radius: var(--flacso-radius-md, 6px) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
}

/* 2. Itens individuais de submenu */
div[id^="menu"]:not(#menubackmenu):not(#menubackmenu1):not(#menu1) div[id^="el"],
div[id^="menu"]:not(#menubackmenu):not(#menubackmenu1):not(#menu1) a > div {
    background-color: var(--flacso-primary, #1e4262) !important;
    color: #ffffff !important;
    font-family: var(--flacso-font-sans, Segoe UI, Arial, sans-serif) !important;
    font-size: 12px !important;
    padding: 7px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    transition: background-color var(--flacso-transition-fast, 150ms ease-in-out), color var(--flacso-transition-fast, 150ms ease-in-out) !important;
}

/* 3. Hover nos itens do submenu */
div[id^="menu"]:not(#menubackmenu):not(#menubackmenu1):not(#menu1) div[id^="el"]:hover,
div[id^="menu"]:not(#menubackmenu):not(#menubackmenu1):not(#menu1) a:hover > div {
    background-color: var(--flacso-primary-hover, #15324d) !important;
    color: #ffffff !important;
}

/* 4. Dropdowns padrao Bootstrap */
.dropdown-menu {
    background-color: var(--flacso-primary, #1e4262) !important;
    border: 1px solid var(--flacso-primary-hover, #15324d) !important;
    border-radius: var(--flacso-radius-md, 6px) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35) !important;
    padding: 4px 0 !important;
}

.dropdown-menu > li > a {
    color: #ffffff !important;
    font-size: 12px !important;
    padding: 7px 14px !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--flacso-primary-hover, #15324d) !important;
    color: #ffffff !important;
}