@charset "utf-8";
/* CSS Document */
/* =============================================================
   Estilo da tabela Mobile: colunas com larguras iguais - table-layout: fixed
   ============================================================= */
/* Definir direto na tabela: 
border-collapse: collapse; - Remove espaços entre células 
Se quiser que a tabela só ocupe o espaço do conteúdo, deixe a tabela sem width*/

/* Definir direto na td e th:
text-align: center;   Alinhamento do texto 
ou usar "class Ex.:  <td class="text-center">  ou melhor: <center></center>
width: 100%;  Cada célula ocupa toda a largura disponível */ 

/* bgcolor, não existe em CSS, devemos usar background-color: */

/* UTILIZADA NAS PÁGINAS COM ESQUENA DA GRANDE SINTESE */

        .tabela-mobile {
            width: 100%; /* Ocupa toda a largura disponível */
            max-width: 100%; /* Garante que não ultrapasse a tela */
            table-layout: fixed; /* Força a tabela a respeitar as larguras definidas */
            margin: 0; /* Remove margens */
        }

        /* Estilo das células (th e td) */
        .tabela-mobile th,
        .tabela-mobile td {
            padding: 12px 8px; /* Padding interno para espaçamento */
            overflow-wrap: break-word; /* Quebra palavras longas */
            hyphens: auto; /* Hifenização automática quando suportada */
            border-right: 2px solid #000000; /* DESTAQUE: Borda direita para separação entre colunas */
        }

        /* partularidade do Cabeçalho da tabela */
        .tabela-mobile th {
           /* background-color: #f5f5f5;*/
            font-weight: bold;
            text-align: center;
        }

        /* Alternância de cores nas linhas */
        .tabela-mobile tr:nth-child(even) {
          /*  background-color: #f9f9f9;*/
        }

/* Remove a borda da última coluna do cabeçalho */
        .tabela-mobile td:last-child,
        .tabela-mobile th:last-child {
            border-right: none;
        }

        /* Para textos muito longos, permite scroll horizontal se necessário */
        /* exemplo de uso .... <td class="texto-longo">   */
        .tabela-mobile td.texto-longo {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* Adiciona "..." para textos cortados */
        }

        /* Classe especial para células que devem mostrar todo o texto */
        /* exemplo de uso .... <td class="expandir-texto">   */
        .tabela-mobile td.expandir-texto {
            white-space: normal;
            word-break: break-all; /* Força quebra mesmo em palavras */
        }

        /* Responsividade adicional para telas muito pequenas */
        @media screen and (max-width: 320px) {
            .tabela-mobile th,
            .tabela-mobile td {
                padding: 8px 4px;
                font-size: 14px;
            }
        }
/* =============================================================
   Estilo da tabela colunas proporcionais ao conteudo - table-layout: auto;
   ============================================================= */
/* Definir direto na tabela: 
border-collapse: collapse; - Remove espaços entre células 
Se quiser que a tabela só ocupe o espaço do conteúdo, deixe a tabela sem width
 width: 100%;  Ocupa toda a largura disponível */

/* Definir direto na td e th:
text-align: center;   Alinhamento do texto 
ou usar "class Ex.:  <td class="text-center">  ou melhor: <center></center>
width: 100%;  Cada célula ocupa toda a largura disponível 
cx  = Chico Xavier*/

       .tabela-cols_cx {
		    border-collapse: collapse; /* bordas coladas, mais limpo */
		    width: 100%; /* Ocupa toda a largura disponível */
            max-width: 100%; /* Garante que não ultrapasse a tela */
            table-layout: auto; /* IMPORTANT: faz as colunas seguirem o conteúdo  */
            margin: 0; /* Remove margens */
        }
         /* Estilização específica dos cabeçalhos */
        .tabela-cols_cx th {
            background-color: #4CAF50; /* Cor de fundo verde */
            color: white; /* Texto branco */
            font-weight: bold; /* Texto em negrito */
            white-space: nowrap; /* Impede quebra de linha no texto do cabeçalho */
            text-align: center;
        }
         
         /* Remove a borda direita da última coluna */
        .tabela-cols_cx th:last-child, .tabela-cols_cx td:last-child {
            border-right: none;
        }

        /* Largura fixa apenas para a primeira coluna (ID) */
        .tabela-cols_cx th:nth-child(1), 
        .tabela-cols_cx td:nth-child(1) {
            width: 30px; /* Largura fixa de 30px */
            min-width: 30px; /* Largura mínima igual à fixa */
            max-width: 30px; /* Largura máxima igual à fixa */
        }

        /* Efeito hover nas linhas da tabela */
        .tabela-cols_cx tr:hover {
            background-color: #f5f5f5; /* Muda cor de fundo ao passar o mouse */
        }

        /* Alternância de cores nas linhas */
        .tabela-cols_cx tr:nth-child(even) {
          /*  background-color: #f9f9f9;*/
        }

        /* Para textos muito longos, permite scroll horizontal se necessário */
        /* exemplo de uso .... <td class="texto-longo">   */
        .tabela-cols_cx td.texto-longo {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* Adiciona "..." para textos cortados */
        }

        /* Classe especial para células que devem mostrar todo o texto */
        /* exemplo de uso .... <td class="expandir-texto">   */
        .tabela-cols_cx td.expandir-texto {
            white-space: normal;
            word-break: break-all; /* Força quebra mesmo em palavras */
        }

        /* Responsividade adicional para telas muito pequenas */
        @media screen and (max-width: 320px) {
            .tabela-cols_cx th,
            .tabela-cols_cx td {
                padding: 8px 4px;
                font-size: 14px;
            }
        }

/* =============================================================
   Container para scroll horizontal se necessário  Container que envolve a tabela  -  DIV
   ============================================================= */
        .table-container {
            width: 100%;
            overflow-x: auto; /* Permite scroll(rolagem) horizontal se a tabela for muito larga */
            -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
			background-color: white; /* Fundo branco para destacar a tabela */
            border-radius: 8px; /* Cantos arredondados de 8px */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil para efeito de profundidade */
            padding: 10px; /* Espaçamento interno de 20px */
        }

/* =============================================================
   Tabela para links relacionados
   ============================================================= */
        .table-rel-pert {
			border: solid 5px black;
			background-color: #FCFEFF;
			border-style: groove;
			border-collapse: collapse;
			box-shadow: 5px 5px 15px rgba(0,0,0,0.5); /* Sombra sutil para efeito de profundidade */
            border-radius: 8px; /* Cantos arredondados de 8px */
			margin-left: auto;   /* este 2 parâmetro faz com a tabela fique centralizada */
            margin-right: auto;  /* este 2 parâmetro faz com a tabela fique centralizada */
        }

.table-rel-pert td, 
.table-rel-pert th {
	background-color: #FCFEFF;
}

/* =============================================================
   Em casos extremos
   ============================================================= */

.tabela-estreita {
    word-break: break-all;  /* Força quebra mesmo em palavras */
}

/* =============================================================
   TABELAS NORMAIS
   ============================================================= */
*/ overflow-x: auto;  Permite rolagem horizontal em telas pequenas */
*/ não pode ter  	background-color: white, deve ser especifico de cada class */

table {
    vertical-align: top;
	valign: top; 
    table-border-color-light: #999999;
    table-border-color-dark: #999999;
	margin-right: 2px;
    border-color: #CCCCCC;
    border: solid 2px black;
	border-style: groove;
	bordercolor: #CCCCCC; 
    bordercolorlight: #000080; 
    bordercolordark: #000080; 
	border-collapse: collapse; /* Remove espaços entre bordas das células */
    padding-left: 2px;
    color: #000000;
	cellpadding: 2; /* Define o espaçamento interno das células (entre o conteúdo e a borda) */
	cellspacing: 1; /* Define o espaçamento entre as células */
	frame: box; /* Controla quais bordas externas da tabela são exibidas */
	rules: all; /* Controla quais bordas internas são exibidas */
	overflow-x: auto; /* Permite rolagem horizontal em telas pequenas */
	table-layout: auto; /* Largura das colunas se ajusta ao conteúdo */
}
.table-sem-borda {
    width: 100%;
	background-color: white;
    border: none;
}

.table-azul-titulo {
    width: 100%;
	height: 30px;
	background-color: #A5C5F5;
    border-radius: 5px;
    margin-bottom: 5px;
}
.table-azul-titulo td,
.table-azul-titulo th {
	background-color: #A5C5F5;
}
.table-azul-titulo td,
.table-azul-titulo th {
	background-color: #A5C5F5;
    border-radius: 5px;
    margin-bottom: 5px;
}

.table-azul-titulo td,
.table-azul-titulo th {
	background-color: #A5C5F5;
}
.table-azul-titulo td,
.table-azul-titulo th {
	background-color: #A5C5F5;
    border-radius: 5px;
    margin-bottom: 5px;
}

.table_azul_claro {
    width: 100%;
	background-color: #EAF3F7;
    border-radius: 5px;
    margin-bottom: 5px;
}

.table_azul_claro td,
 table_azul_claro th {
    border: solid 5px black;
	background-color: #EAF3F7;
}

.table_azul_escuro {
    width: 100%;
	background-color: #00008B;
    border-radius: 5px;
    margin-bottom: 5px;
}

.table_azul_escuro td,
 table_azul_escuro th {
    border: solid 5px black;
	background-color: #00008B;
}

.table_preta {
    width: 100%;
	background-color: #000000;
    border-radius: 5px;
    margin-bottom: 5px;
}

.table_preta td,
 table_preta th {
    width: 100%;
	border: solid 5px black;
	background-color: black;;
}

.table_marron {
    width: 100%;
	background-color: #8B4726;
    border-radius: 5px;
    margin-bottom: 5px;
}

.table_marron td,
 table_marron th {
    width: 100%;
	border: solid 5px black;
	background-color: black;;
}

.table-resumo {
    width: 100%;
	height: 30px;
	background-color:#FBFBF8;
	border: 8px;
    border-radius: 5px;
    margin-bottom: 5px;
	text-align: left;
}

.table-resumo td,
.table-resumo th {
	background-color: #FBFBF8;
}

.table_sem_pad {
    background-color: #F2F6F9;
    border-radius: 5px;
    margin-bottom: 5px;
	padding-left: 0px;
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 0px;
	border: 0px;
}
th {
	margin-right: 2px;
	border: solid 2px black; 
    border-spacing: 1px;  /*- Define espaço entre células (quando não usa collapse)*/
	border-bottom: 1px solid #e0e0e0; /* Linha divisória inferior em cada célula */
    border-right: 1px solid #e0e0e0; /* Linha divisória vertical entre colunas */
	padding: 5px;  /* Espaçamento interno de 5px em cada célula */
	font-family: Verdana;
    font-style: normal;
	font-weight: normal;
	font-size: 16px;
	text-align: justify;
	line-height: 150%;
    align: justify; 
    vertical-align: top;
    hyphens: auto; /* Hifenização automática quando suportada */
}

/* border-collapse: collapse; - Remove o espaço entre bordas das células (recomendado) */
/* ???	 color: #000000;   cor do texto */
/* o parâmetro "width: 100%";" em "td" bagunça a tabela e não respeita "table-layout: auto" da tabela */
/* Em border:- Estilo da linha (ex: solid, dashed, dotted, double, groove) - Cor da borda (ex:,white black, #000, #333, red, rgb(0,0,0))*/
	
/* td não pode te r cor de fundo background , o fundo deve ser especifico de cada class*/
td {
	margin-right: 2px;
	border: solid 2px black; 
    border-spacing: 1px;  /*- Define espaço entre células (quando não usa collapse)*/
	border-bottom: 1px solid #e0e0e0; /* Linha divisória inferior em cada célula */
    border-right: 1px solid #e0e0e0; /* Linha divisória vertical entre colunas */
	padding: 5px;  /* Espaçamento interno de 5px em cada célula */
	font-family: Verdana;
    font-style: normal;
	font-weight: normal;
	font-size: 16px;
	text-align: justify;
	line-height: 150%;
    align: justify; 
    vertical-align: top;
    hyphens: auto; /* Hifenização automática quando suportada */
}

caption {
    font-size: 14pt;
    font-style: normal;
    font-family: 'Trebuchet MS', Arial, Helvetica;
    color: #999999;
}

/* Tabelas do layout moderno */
.content-table_Principal {
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 100%; /* Cada célula ocupa toda a largura disponível */
	max-width: 100%; /* Garante que não ultrapasse a tela */
	margin: 0; /* Remove margens */
	vertical-align: top;
	valign: top; 
    table-border-color-light: #999999;
    table-border-color-dark: #999999;
    border-color: #CCCCCC;
    border: solid 2px black;
	bordercolor: #CCCCCC; 
    bordercolorlight: #000080; 
    bordercolordark: #000080; 
    padding-left: 2px;
    color: #000000;
/*O termo overflow:hidden refere-se a uma propriedade CSS utilizada para controlar o comportamento do conteúdo que excede os limites de um elemento. Quando aplicado, ele oculta qualquer parte do conteúdo que não se encaixa na área designada do elemento, evitando que barras de rolagem apareçam. Essa propriedade é especialmente útil em layouts onde o controle visual é crucial, como em galerias de imagens ou em caixas de texto que não devem ultrapassar um determinado tamanho.  */
}
.content-table {
    background-color: white;
    border-radius: 5px;
    margin-bottom: 5px;
}

.content-table td {
    padding: 5px;
    border: solid 2px black;;
}
/* Estilo dos itens de lista */
.content-table li {
    margin-bottom: 8px;
    font-size: 16px;
    color: #000000;
    line-height: 1.5;
}

.inner-content-table {
    width: 100% !important;
    border: none;
    background-color: #FFFFFF;
}

.inner-content-table td {
    width: 100% !important;
    background-color: #FFFFFF;
    padding: 5px;
}

/* Atributos principais:
1. border - Define a espessura da borda da tabela
html<table border="1">

2. cellpadding - Define o espaçamento interno das células (entre o conteúdo e a borda)
html<table border="1" cellpadding="10">

3. cellspacing - Define o espaçamento entre as células
html<table border="1" cellspacing="5">

4. frame - Controla quais bordas externas da tabela são exibidas

void - sem bordas externas
above - apenas borda superior
below - apenas borda inferior
hsides - bordas horizontais (superior e inferior)
vsides - bordas verticais (esquerda e direita)
lhs - apenas lado esquerdo
rhs - apenas lado direito
box ou border - todas as bordas

5. rules - Controla quais bordas internas são exibidas

none - sem bordas internas
rows - apenas entre linhas
cols - apenas entre colunas
all - todas as bordas internas 

<table border="2" cellpadding="8" cellspacing="0" frame="box" rules="all">
*/

/* #######################################

Para dar destaque nas bordas das células de uma tabela, você pode usar estes parâmetros CSS:
Propriedades principais:

border - Define largura, estilo e cor da borda de uma vez

Exemplo: border: 2px solid #333;

border-width - Espessura da borda (ex: 1px, 2px, 3px)
border-style - Estilo da linha (ex: solid, dashed, dotted, double ou groove)
border-color - Cor da borda (ex: #000, red, rgb(0,0,0))

Para tabelas especificamente:

border-collapse: collapse; - Remove o espaço entre bordas das células (recomendado)
border-spacing - Define espaço entre células (quando não usa collapse)

Exemplo prático:
csstable {
  border-collapse: collapse;
}

td, th {
  border: 2px solid #333;
  padding: 10px;
}
Para destaque especial:

Use bordas mais grossas (3px ou mais)
Cores contrastantes ou vibrantes
Estilos diferentes como double ou groove
box-shadow para efeito de sombra: box-shadow: 0 0 5px rgba(0,0,0,0.3);

Importante: Para box-shadow funcionar bem em tabelas, é recomendado usar border-collapse: collapse; junto:
html<table style="border-collapse: collapse; box-shadow: 0 0 5px rgba(0,0,0,0.3);">


Para maior destaque da sombra, altere estes valores:
1. Aumente o blur (3º valor):
htmlstyle="border-collapse: collapse; box-shadow: 0 0 10px rgba(0,0,0,0.3);"
Ou mais intenso: 15px, 20px
2. Aumente a opacidade (último valor do rgba):
htmlstyle="border-collapse: collapse; box-shadow: 0 0 5px rgba(0,0,0,0.6);"
Valores maiores = sombra mais escura (máximo: 1.0)
3. Combine os dois para máximo destaque:
htmlstyle="border-collapse: collapse; box-shadow: 0 0 15px rgba(0,0,0,0.5);"
4. Adicione deslocamento (1º e 2º valores) para sombra "caindo":
htmlstyle="border-collapse: collapse; box-shadow: 5px 5px 10px rgba(0,0,0,0.4);"
Resumo dos valores:

0 0 = deslocamento horizontal e vertical
5px = tamanho do blur/desfoque
0.3 = opacidade (0 a 1)

Teste aumentando o blur para 10px ou 15px e a opacidade para 0.5 ou 0.6 - o destaque ficará bem mais visível!