@charset "utf-8";

/* ============================================================
   CRM FOCUS — prg.css
   Folha compartilhada por todos os programas (dentro do iframe).
   Todos os seletores do arquivo antigo foram preservados; o que
   mudou foi so a aparencia. Nenhum nome de classe saiu.
   ============================================================ */

:root {
	--gf-900:#12171C;
	--gf-800:#1B2229;
	--gf-700:#242E37;
	--el-500:#2F8BFF;
	--el-600:#1E6FE0;
	--tx-1:#1E2A35;
	--tx-2:#47535F;
	--tx-3:#7C8A98;
	--ln-1:#E3E8EC;
	--ln-2:#D5DDE3;
	--bg:#EEEEEE;
	--ok:#2FA84F;
	--err:#D64545;
	--warn:#F2994A;
	--ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: var(--bg);
	font-family: var(--ui);
	color: var(--tx-1);
	-webkit-font-smoothing: antialiased;
}

/*INI - CAMPOS DE FORMULARIO*/
input.in-tx-txt003:focus, input.in-tx-txt004:focus, select.in-tx-txt003:focus, select.in-tx-txt004:focus, textarea.in-tx-txt003:focus, textarea.in-tx-txt004:focus, input.in-tx-txt003, input.in-tx-txt004, select.in-tx-txt003, select.in-tx-txt004, textarea.in-tx-txt003, textarea.in-tx-txt004, input.in-bt-txt003, input.in-bt-txt004 {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-1);
	box-sizing: border-box;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	background-color: #FFFFFF;
	padding: 0px 10px;
	outline: none;
}
input.in-bt-txt003:focus, input.in-bt-txt004:focus, input.in-bt-txt003, input.in-bt-txt004 {
	height: 30px;
	padding: 0px 14px;
	background-color: var(--el-500);
	border: 1px solid var(--el-500);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
input.in-bt-txt003:hover, input.in-bt-txt004:hover {
	background-color: var(--el-600);
	border-color: var(--el-600);
}
input.in-bt-txt003:active, input.in-bt-txt004:active {
	background-color: #1A61C6;
}
input.in-tx-txt003:focus, input.in-tx-txt004:focus, input.in-tx-txt003, input.in-tx-txt004 {
	height: 30px;
}
select.in-tx-txt003:focus, select.in-tx-txt004:focus, select.in-tx-txt003, select.in-tx-txt004 {
	height: 30px;
	padding-right: 26px;
}
/*O :focus entra aqui junto, e nao e detalhe: o seletor grande la de cima tambem casa
  com textarea...:focus e manda padding 0px 10px. Sem o :focus nesta regra, quem tinha
  a especificidade maior no estado focado era aquela, o campo perdia os 8px de cima e
  os 8 de baixo e ENCOLHIA 16px ao ser clicado — junto com o cartao inteiro. O input e
  o select nao passam por isso porque as regras deles (as duas logo acima) ja trazem o
  :focus no seletor; so a do textarea nao trazia (achado 155).*/
textarea.in-tx-txt003, textarea.in-tx-txt004,
textarea.in-tx-txt003:focus, textarea.in-tx-txt004:focus {
	padding: 8px 10px;
	line-height: 18px;
}
input.in-tx-txt003:focus, input.in-tx-txt004:focus, select.in-tx-txt003:focus, select.in-tx-txt004:focus, textarea.in-tx-txt003:focus, textarea.in-tx-txt004:focus {
	background-color: #FFFFFF;
	border-color: var(--el-500);
	box-shadow: 0 0 0 3px rgba(47,139,255,.16);
}
input.in-tx-txt004, textarea.in-tx-txt004 {
	text-align: right;
}

/*INI - CAMPO DE DATA
  O campo de data e hora tem 19 caracteres fixos - "01/08/2026
  00:00:00" - e cada tela vinha escrevendo a propria largura, 128px,
  que cortava o fim do texto. A largura passa a sair daqui, pelo
  proprio campo, sem depender de classe nova no HTML: vale para as
  telas 1.0 tambem, e tela nova nasce certa sem repetir a regra.
  O casamento e por id DT_ + maxlength 19 justamente para nao pegar
  campo de outra natureza que por acaso tenha 19 caracteres.*/
input.in-tx-txt003[id^="DT_"][maxlength="19"],
input.in-tx-txt004[id^="DT_"][maxlength="19"] {
	width: 154px;
}
/*Inicio e fim sao um filtro so. Numa barra que quebra por falta de
  espaco, os dois quebram juntos em vez de a data final descer
  sozinha para a linha de baixo, longe da que ela limita.*/
.in-dt-par {
	display: flex;
	align-items: center;
	gap: 12px;
}
@media (max-width: 560px) {
	.in-dt-par { flex-wrap: wrap; }
}
/*FIM - CAMPO DE DATA*/
/*FIM - CAMPOS DE FORMULARIO*/

.dv-prg-tt, .dv-prg-subtt {
	margin-left: 30px;
	font-family: var(--ui);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	text-transform: none;
}
.dv-prg-subtt {
	font-size: 13px;
	font-weight: 500;
	color: var(--tx-3);
}
.dv-prg-tt-2 {
	margin-left: 30px;
	margin-top: 20px;
	font-family: var(--ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--tx-2);
}
.txt002 {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-2);
}
.txt003 {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-2);
}
/*INI - Mensagens de 'Erro'*/
.txt005, .txt006 {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--ok);
}
.txt006 {
	color: var(--err);
}
/*FIM - Mensagens de 'Erro'*/
.txt009, .txt010, .txt011, .txt012, .txt014 {
	font-family: var(--ui);
	font-size: 12px;
	color: var(--ok);
	font-weight: 600;
}
.txt014 {
	color: var(--warn);
}
.txt009 {
	color: var(--err);
}
.txt011, .txt012, .txt011:hover {
	font-family: var(--ui);
	color: var(--el-500);
	cursor: pointer;
	font-weight: 600;
}
.txt012, .txt011:hover {
	color: var(--el-600);
	text-decoration: underline;
}
.txt013 {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-1);
}
.tb-prg-prp-ct {
	margin-left: 20px;
	width: 95%;
}
.tb-prg-inc-ct {
	margin-left: 20px;
}
.tb-prg-alt-ct {
	margin-left: 20px;
}
.dv-prg-prp-acoes {
	float: left;
	margin-right: 10px;
	margin-top: 20px;
}

/*INI - GRID*/
.td-grid-tt, .td-grid-tt-sel {
	background-image: none;
	background-color: var(--gf-800);
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: #FFFFFF;
	height: 34px;
	cursor: pointer;
}
.td-grid-tt-sel {
	background-image: none;
	background-color: var(--gf-700);
	box-shadow: inset 0 -3px 0 var(--el-500);
}
.td-grid-tt-certo {
	background-color: var(--ok);
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: #FFFFFF;
	height: 26px;
	border-radius: 6px;
	cursor: pointer;
}
.td-grid-tt-errado {
	background-color: var(--err);
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: #FFFFFF;
	height: 26px;
	border-radius: 6px;
	cursor: pointer;
}
.td-grid-tt-prp, .td-grid-tt-inc, .td-grid-tt-alt {
	background-image: none;
	background-color: var(--gf-800);
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: #FFFFFF;
	height: 34px;
	padding-left: 10px;
}
.dv-grid-tt {
	float: left;
	margin-left: 10px;
}
.dv-seta-cima, .dv-seta-baixo {
	float: left;
	display: none;
	margin-left: 4px;
	margin-top: 4px;
}
.dv-seta-baixo {
	margin-top: 4px;
}
.td-grid-ct {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-1);
	padding: 7px 10px;
	border-bottom: 1px solid var(--ln-1);
}
.tr-grid-ct-ln1, .tr-grid-ct-ln1, .tr-grid-ct-ln-sel {
	background-color: #FFFFFF;
	cursor: pointer;
}
.tr-grid-ct-ln2 {
	background-color: #F7F9FA;
}
.tr-grid-ct-ln1:hover, .tr-grid-ct-ln2:hover {
	background-color: #EFF5FF;
}
.tr-grid-ct-ln-sel {
	background-color: #DCEBFF;
}
/*FIM - GRID*/

.img-link {
	cursor: pointer;
}
.txt-link {
	cursor: pointer;
}
.hr-001 {
	margin-top: 20px;
	margin-bottom: 10px;
	width: 80%;
	height: 1px;
	border: 0;
	color: var(--ln-1);
	background-color: var(--ln-1);
}

.ul-prd-opcional-pai, .ul-prd-opcional-filho, .li-prd-opcional-pai, .li-prd-opcional-filho {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-2);
	list-style: none;
}
.li-prd-opcional-pai {
	margin-bottom: 15px;
}
.li-prd-opcional-filho {
	margin-bottom: 3px;
	margin-left: -8px;
}
/*INI - Mensagens de 'Status'*/
.dv-clear-left {
	clear: left;
}
/*FIM - Mensagens de 'Status'*/

/*INI Classes Logicas */
.dv-display-none, .dv-display-block {
	position: absolute;
	background-color: #FFFFFF;
	padding: 10px 12px;
	width: 350px;
	border: 1px solid var(--ln-1);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(16,24,40,.14);
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-2);
	word-break: normal;
	white-space: pre-line;
	text-align: left;
	margin-left: 100px;
	z-index: 500;
}
.dv-display-none {
	display: none;
}
.dv-display-block {
	display: block;
}
/*FIM Classes Logicas */

.bt-sub-adm {
	box-shadow: none;
	background: var(--el-500);
	background-color: var(--el-500);
	filter: none;
	border-radius: 8px;
	border: 1px solid var(--el-500);
	display: inline-block;
	cursor: pointer;
	color: #FFFFFF;
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 18px;
	text-decoration: none;
	text-shadow: none;
	text-align: center;
}
.bt-sub-adm:hover {
	background: var(--el-600);
	background-color: var(--el-600);
	filter: none;
	border-color: var(--el-600);
}
.bt-sub-adm:active {
	position: relative;
	top: 1px;
	background-color: #1A61C6;
}

/*Abas*/
.td-aba-on, .td-aba-of {
	cursor: pointer;
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-1);
	background-color: #FFFFFF;
	border-radius: 8px 8px 0px 0px;
	box-shadow: inset 0 -3px 0 var(--el-500);
}
.td-aba-of {
	background-color: #E7ECF0;
	color: var(--tx-3);
	box-shadow: none;
}
.b-aba-tt {
	padding: 9px 16px;
	display: inline-block;
	font-weight: 600;
}

/* ============================================================
   CONTROLES PADRAO DOS GRAFICOS
   Vieram do <style> do ini_comp.php quando passaram a servir mais
   de uma tela. Nao redefinem nada: sao nomes novos aqui.
   ============================================================ */

/* --- olho: mostra/oculta os numeros sobre os pontos ---
   O checkbox fica invisivel mas continua sendo o campo do
   formulario; marcado = numeros ocultos, e o olho ganha o risco. */
.lb-olho {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.lb-olho input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0px;
}
.lb-olho input:focus-visible + .sp-olho {
	outline: 2px solid var(--el-500);
	outline-offset: 2px;
	border-radius: 4px;
}
.sp-olho {
	display: inline-flex;
	align-items: center;
	color: var(--tx-2);
}
.sp-olho .ln-risco { display: none; }
.lb-olho:hover .sp-olho { color: var(--el-500); }
.lb-olho input:checked + .sp-olho { color: #A6B2BE; }
.lb-olho input:checked + .sp-olho .ln-risco { display: inline; }

/* --- botao de duas posicoes (ex.: "Ajustar ao trecho") --- */
.bt-tgl {
	height: 30px;
	padding: 0px 14px;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--tx-2);
	white-space: nowrap;
	cursor: pointer;
}
.bt-tgl:hover {
	background-color: #EFF5FF;
	border-color: var(--el-500);
	color: var(--el-600);
}
.bt-tgl.bt-on, .bt-tgl.bt-on:hover {
	background-color: var(--el-500);
	border-color: var(--el-500);
	color: #FFFFFF;
}

/* ============================================================
   CARTOES DE COMPARACAO ENTRE PERIODOS (pg_gr_comp_01..06)
   ============================================================ */
/*Coluna flex que ocupa a altura que lhe derem. Numa celula de grade
  que estica, ou dentro de um iframe de altura cheia, o cartao vai ate o
  fim e o grafico recebe a sobra - e assim que os fundos de varios
  cartoes lado a lado passam a bater. Onde o pai tem altura automatica,
  o height:100% nao faz efeito e nada muda.*/
.cp-card {
	width: 100%;
	padding: 12px 14px 10px 14px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.cp-card .cp-gr { flex: 1 1 auto; }
/*A nota desce para o rodape, seja qual for a altura.*/
.cp-card .cp-nota { margin-top: auto; }
.cp-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 9px;
}
.cp-tt {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cp-x {
	color: var(--tx-3);
	font-weight: 400;
	margin: 0px 2px;
}
.cp-bt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 5px 10px;
	background-color: transparent;
	border: 1px solid var(--ln-1);
	border-radius: 8px;
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 600;
	color: var(--tx-2);
	white-space: nowrap;
	cursor: pointer;
}
.cp-bt:hover {
	background-color: #EFF5FF;
	border-color: var(--el-500);
	color: var(--el-600);
}
.cp-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 6px;
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 4px;
}
.cp-up {
	background-color: #E8F6EC;
	color: #1F7A38;
}
.cp-down {
	background-color: #FCEDED;
	color: #B23434;
}
.cp-gr {
	width: 100%;
	height: 186px;
}
.cp-nota {
	font-family: var(--ui);
	font-size: 11px;
	color: var(--tx-3);
	margin: 6px 0px 0px 0px;
	line-height: 16px;
}
.cp-vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 262px;
}
.cp-vazio-tx {
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-3);
	text-align: center;
	line-height: 18px;
	margin: 0px;
}
.cp-per {
	margin-left: auto;
	padding: 3px 9px;
	background-color: #EFF3F6;
	border-radius: 6px;
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 600;
	color: var(--tx-2);
	white-space: nowrap;
}
.cp-gr-pz { height: 214px; }

/* ============================================================
   CARTAO DE RESUMO DO MES (ini_comp.php)
   ============================================================ */
.rs-card {
	width: 100%;
	padding: 12px 14px 12px 14px;
	box-sizing: border-box;
	text-align: left;
}
.rs-kpi {
	display: block;
	padding: 9px 0px;
	border-top: 1px solid var(--ln-1);
}
.rs-lb {
	display: block;
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 500;
	color: var(--tx-3);
	margin-bottom: 3px;
}
.rs-vl {
	font-family: var(--ui);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tx-1);
	vertical-align: middle;
}
.rs-var {
	display: inline-block;
	margin-left: 9px;
	padding: 2px 8px;
	border-radius: 6px;
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}
.rs-up { background-color: #E8F6EC; color: #1F7A38; }
.rs-down { background-color: #FCEDED; color: #B23434; }
.rs-neutro { background-color: #EFF3F6; color: var(--tx-3); font-weight: 500; }
.rs-linhas {
	margin-top: 4px;
	padding-top: 9px;
	border-top: 1px solid var(--ln-1);
}
.rs-ln {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0px;
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-2);
}
.rs-ln b {
	font-size: 13px;
	font-weight: 700;
	color: var(--tx-1);
	white-space: nowrap;
}

/* ============================================================
   GRADE DE DADOS  —  gd-
   Cartao com faixa de titulo, abas e tabela densa. Nasceu no popup
   de dentistas por periodo e passou a servir tambem o ranking do
   seg_comp.php e o lista_ped.php. Estava escrito por dentro de cada
   um dos quatro arquivos, com valores ligeiramente diferentes: e o
   caminho conhecido para a mesma estrutura acabar com duas caras.
   Mora aqui para nao poder mais divergir.

   Quem usa hoje:
     rel_dentista/comp_periodo.php      (tres listas de dentistas)
     rel_segmentacao/comp_periodo.php   (idem)
     crm_geral/seg_comp.php             (ranking, duas abas)
     rel_dentista/lista_ped.php         (ranking, duas abas)
   ============================================================ */

/* ---------- cartao ---------- */
.gd-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0px;
	box-sizing: border-box;
	overflow: hidden;
}
/*Faixa de titulo do cartao. O nome do que a grade mostra fica aqui e
  nao numa aba, porque a aba nao acompanha o cartao para o PDF.*/
.gd-card-tt {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 10px 12px;
	border-bottom: 1px solid var(--ln-1);
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 700;
	color: var(--tx-1);
}
.gd-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
/*As tres cores sao fixas e valem em qualquer tela: regular verde,
  novo azul, desativado vermelho.*/
.gd-dot-ok { background-color: #1F7A38; }
.gd-dot-nv { background-color: #2F8BFF; }
.gd-dot-of { background-color: #B23434; }
.gd-qt {
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 500;
	color: var(--tx-3);
	white-space: nowrap;
}
.gd-per {
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 500;
	color: var(--tx-3);
	white-space: nowrap;
}
.gd-acoes { margin-left: auto; display: flex; align-items: center; gap: 7px; }

/* ---------- botoes pequenos ---------- */
.gd-bt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0px 11px;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 7px;
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 600;
	color: var(--tx-2);
	white-space: nowrap;
	cursor: pointer;
}
.gd-bt:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }
.gd-bt-ic { width: 28px; padding: 0px; justify-content: center; color: var(--tx-3); }
.gd-bt-pri {
	background-color: var(--el-500);
	border-color: var(--el-500);
	color: #FFFFFF;
}
.gd-bt-pri:hover { background-color: var(--el-600); border-color: var(--el-600); color: #FFFFFF; }

/* ---------- abas ----------
   Encostadas no cartao que elas comandam. As classes td-aba-on e
   td-aba-of continuam sendo trocadas por nome pelo JS de cada tela;
   aqui elas so deixaram de morar dentro de uma tabela de layout. */
.gd-abas {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	width: 100%;
}
.gd-abas > div { cursor: pointer; }
.gd-abas .gd-bt { margin-bottom: 4px; }
.gd-push { margin-left: auto; }

/* ---------- area de rolagem ----------
   Rola por dentro do cartao, com o cabecalho e a linha de totais
   grudados: em janela de altura fixa a lista passa longe do fim e o
   total ficava fora da tela. */
.gd-rol {
	flex: 1 1 auto;
	min-height: 90px;
	overflow: auto;
}

/* ---------- tabela ---------- */
.gd-tb { width: 100%; border-collapse: collapse; }
.gd-tb th, .gd-tb td.td-grid-tt {
	position: sticky;
	top: 0px;
	z-index: 2;
	font-family: var(--ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tx-2);
	background-color: #E5ECF2;
	background-image: none;
	padding: 0px 9px;
	height: 28px;
	text-align: right;
	white-space: nowrap;
	border-bottom: 1px solid #C9D5DE;
	cursor: default;
}
/*Faixa do periodo: um tom mais escuro que a linha das colunas, para
  separar "de que periodo e" de "o que e".*/
.gd-tb th.gd-th-per {
	text-align: center;
	font-size: 11px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tx-1);
	background-color: #D5E0E9;
	border-left: 1px solid #C9D5DE;
}
/*Segunda linha do cabecalho, quando ha faixa de periodo em cima.*/
.gd-tb thead tr + tr th { top: 28px; height: 24px; }
.gd-tb th.gd-th-nm, .gd-tb td.gd-th-nm { text-align: left; }
.gd-tb th.gd-th-num, .gd-tb td.gd-th-num { text-align: right; }
.gd-tb th.gd-th-pos, .gd-tb td.gd-th-pos { text-align: center; }
.gd-tb th.gd-th-cl, .gd-tb td.gd-th-cl { text-align: center; }
.gd-tb th.gd-th-ck, .gd-tb td.gd-th-ck { width: 1%; }
/*A coluna que manda na ordenacao daquela aba.*/
.gd-tb th.gd-ord, .gd-tb td.td-grid-tt.gd-ord {
	background-color: #D5E0E9;
	color: var(--tx-1);
}

.gd-tb tbody td {
	padding: 6px 9px;
	border-bottom: 1px solid #F0F3F5;
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-1);
	white-space: nowrap;
	text-align: right;
}
.gd-tb tbody tr:last-child td { border-bottom: 0px; }
/*max-width:0 com width em porcentagem faz o nome cortar com
  reticencias em vez de empurrar a tabela, sem engolir a folga toda.*/
.gd-tb td.gd-nm {
	text-align: left;
	max-width: 0px;
	width: 30%;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.gd-tb tbody tr:hover td.gd-nm { color: var(--el-600); }
.gd-tb td.gd-num { font-variant-numeric: tabular-nums; }
.gd-tb td.gd-pos {
	text-align: center;
	width: 1%;
	font-weight: 700;
	color: var(--tx-3);
	font-variant-numeric: tabular-nums;
}
.gd-tb td.gd-ck { text-align: center; width: 1%; }
.gd-tb tbody td.gd-ord { font-weight: 700; background-color: rgba(47,139,255,.05); }
.gd-tb td.gd-cl { text-align: center; font-size: 11px; color: var(--tx-2); }
/*Separa o bloco dos numeros do bloco das classificacoes.*/
.gd-tb th.gd-cl1, .gd-tb td.gd-cl1 { border-left: 1px solid var(--ln-1); }
/*O rodape nao herdava nada da regra do corpo: recuo, familia, tamanho
  e alinhamento estavam so em ".gd-tb tbody td". O Total saia colado na
  borda do cartao, em fonte de texto do navegador e alinhado a esquerda,
  com o numero longe da coluna que ele soma. Aqui ele repete a celula do
  corpo e muda so o que e de rodape.*/
.gd-tb tfoot td {
	position: sticky;
	bottom: 0px;
	z-index: 2;
	background-color: #F2F6F9;
	border-top: 1px solid var(--ln-2);
	border-bottom: 0px;
	font-weight: 700;
	padding: 7px 9px;
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-1);
	white-space: nowrap;
	text-align: right;
}
.gd-tb tfoot td.gd-nm { text-align: left; cursor: default; }
.gd-up { color: #1F7A38; font-weight: 600; }
.gd-down { color: #B23434; font-weight: 600; }
.gd-vazio { color: #B6C1CB; }
/*Dentro da grade a regra da celula e mais especifica que a da cor e
  ganhava dela: o verde e o vermelho sumiam da coluna de variacao.*/
.gd-tb tbody td.gd-up, .gd-tb tfoot td.gd-up { color: #1F7A38; }
.gd-tb tbody td.gd-down, .gd-tb tfoot td.gd-down { color: #B23434; }
.gd-tb tbody td .gd-vazio { color: #B6C1CB; }
.gd-sem {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 12px;
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-3);
	text-align: center;
	margin: 0px;
}

/* ============================================================
   ic-  |  ICONES DE ACAO
   Um desenho por acao, para o sistema inteiro. Substituem as
   imagens de PRG/../IMG (bt-prop.gif, bt-edit.gif, bt-del.gif,
   bt-new.gif, bt-prop-pes.gif, maps-ico.png, whats-ico.png).

   Uso, no lugar do <img>, mantendo title/alt/onClick da imagem:
     <span class="ic ic-prp" title="Propriedades" onClick="..."></span>

   O desenho vai numa mascara: o traco nao tem cor propria, quem
   pinta e o color do elemento. Por isso hover, estado desligado e
   cor de perigo sao uma linha de CSS, e trocar o desenho de uma
   acao em 470 telas e trocar uma linha aqui.

   Nenhuma tela redesenha estes icones no proprio <style>.
   ============================================================ */
.ic {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	flex: 0 0 auto;
	color: var(--tx-3);
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	cursor: pointer;
}
.ic:hover { color: var(--el-500); }
/*Dentro de uma celula de grade o icone acompanha o hover da linha.*/
.gd-tb tbody tr:hover td .ic { color: var(--tx-2); }
.gd-tb tbody tr:hover td .ic:hover { color: var(--el-500); }
/*Acao indisponivel: sem cor de acao e sem mao. Precisa da forma
  qualificada tambem, senao o hover da linha pinta o icone morto.*/
.ic-of { color: var(--ln-2); cursor: default; }
.ic-of:hover { color: var(--ln-2); }
.gd-tb tbody tr:hover td .ic-of, .gd-tb tbody tr:hover td .ic-of:hover { color: var(--ln-2); }

/*Propriedades: abre a ficha completa do registro.*/
.ic-prp {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8.5z'/%3E%3Cpath d='M13.5 3.5v5h5'/%3E%3Cpath d='M9 12.5h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8.5z'/%3E%3Cpath d='M13.5 3.5v5h5'/%3E%3Cpath d='M9 12.5h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E");
}
/*Propriedades da pessoa por tras do registro.*/
.ic-pes {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2z'/%3E%3Cpath d='M4.6 20.4c1.5-3.4 4.1-5.1 7.4-5.1s5.9 1.7 7.4 5.1'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2z'/%3E%3Cpath d='M4.6 20.4c1.5-3.4 4.1-5.1 7.4-5.1s5.9 1.7 7.4 5.1'/%3E%3C/svg%3E");
}
/*Alterar.*/
.ic-alt {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l4.4-1L18.3 9a1.8 1.8 0 0 0 0-2.5l-.8-.8a1.8 1.8 0 0 0-2.5 0L5.5 15.1z'/%3E%3Cpath d='M14.2 6.6l3.2 3.2'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l4.4-1L18.3 9a1.8 1.8 0 0 0 0-2.5l-.8-.8a1.8 1.8 0 0 0-2.5 0L5.5 15.1z'/%3E%3Cpath d='M14.2 6.6l3.2 3.2'/%3E%3C/svg%3E");
}
/*Excluir, e tambem limpar uma lista inteira: e a mesma acao de
  apagar, entao e o mesmo desenho. Unico com hover vermelho.*/
.ic-exc {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16'/%3E%3Cpath d='M9.5 6.5V4.6a1.1 1.1 0 0 1 1.1-1.1h2.8a1.1 1.1 0 0 1 1.1 1.1v1.9'/%3E%3Cpath d='M6.4 6.5l.9 13a1.6 1.6 0 0 0 1.6 1.5h6.2a1.6 1.6 0 0 0 1.6-1.5l.9-13'/%3E%3Cpath d='M10.3 10.4v7'/%3E%3Cpath d='M13.7 10.4v7'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16'/%3E%3Cpath d='M9.5 6.5V4.6a1.1 1.1 0 0 1 1.1-1.1h2.8a1.1 1.1 0 0 1 1.1 1.1v1.9'/%3E%3Cpath d='M6.4 6.5l.9 13a1.6 1.6 0 0 0 1.6 1.5h6.2a1.6 1.6 0 0 0 1.6-1.5l.9-13'/%3E%3Cpath d='M10.3 10.4v7'/%3E%3Cpath d='M13.7 10.4v7'/%3E%3C/svg%3E");
}
.ic-exc:hover { color: #B23434; }
.gd-tb tbody tr:hover td .ic-exc:hover { color: #B23434; }
/*Incluir.*/
.ic-inc {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6a8.4 8.4 0 1 0 0 16.8 8.4 8.4 0 0 0 0-16.8z'/%3E%3Cpath d='M12 8.2v7.6'/%3E%3Cpath d='M8.2 12h7.6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6a8.4 8.4 0 1 0 0 16.8 8.4 8.4 0 0 0 0-16.8z'/%3E%3Cpath d='M12 8.2v7.6'/%3E%3Cpath d='M8.2 12h7.6'/%3E%3C/svg%3E");
}
/*Endereco no Google Maps.*/
.ic-map {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.4c4.3-4.6 6.4-8 6.4-10.3a6.4 6.4 0 1 0-12.8 0c0 2.3 2.1 5.7 6.4 10.3z'/%3E%3Cpath d='M12 13.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.4c4.3-4.6 6.4-8 6.4-10.3a6.4 6.4 0 1 0-12.8 0c0 2.3 2.1 5.7 6.4 10.3z'/%3E%3Cpath d='M12 13.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
}
/*WhatsApp: unico icone que nasce colorido, porque a cor e o que
  faz reconhecer o servico antes de ler o title.*/
.ic-zap {
	color: #1F7A38;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8a8.2 8.2 0 0 0-7 12.5l-1.2 3.9 4.1-1.2A8.2 8.2 0 1 0 12 3.8z'/%3E%3Cpath d='M9.4 8.8l1.1 1.9-1 1.2c.6 1.2 1.5 2.1 2.7 2.7l1.2-1 1.9 1.1-.3 1.5c-3-.3-6.3-3.6-6.6-6.6z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8a8.2 8.2 0 0 0-7 12.5l-1.2 3.9 4.1-1.2A8.2 8.2 0 1 0 12 3.8z'/%3E%3Cpath d='M9.4 8.8l1.1 1.9-1 1.2c.6 1.2 1.5 2.1 2.7 2.7l1.2-1 1.9 1.1-.3 1.5c-3-.3-6.3-3.6-6.6-6.6z'/%3E%3C/svg%3E");
}
.ic-zap:hover { color: #2FA84F; }
.gd-tb tbody tr:hover td .ic-zap { color: #1F7A38; }
.gd-tb tbody tr:hover td .ic-zap:hover { color: #2FA84F; }

/* ---------- acoes do CRM sobre uma lista de dentistas ----------
   Aparecem na faixa de acoes de quem monta lista (incluir tarefa,
   campanha, mapa de calor, Excel). Dentro de um botao o icone
   herda a cor dele; para isso a tela escreve
   .xx-bt .ic { color: inherit; cursor: inherit; }              */

/*Incluir tarefa para os dentistas da lista.*/
.ic-tar {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5l1.8 1.8 3.5-3.5'/%3E%3Cpath d='M11.5 6.6h8.5'/%3E%3Cpath d='M3.5 13.5l1.8 1.8 3.5-3.5'/%3E%3Cpath d='M11.5 13.6h5'/%3E%3Cpath d='M17.5 17v5.5'/%3E%3Cpath d='M14.75 19.75h5.5'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5l1.8 1.8 3.5-3.5'/%3E%3Cpath d='M11.5 6.6h8.5'/%3E%3Cpath d='M3.5 13.5l1.8 1.8 3.5-3.5'/%3E%3Cpath d='M11.5 13.6h5'/%3E%3Cpath d='M17.5 17v5.5'/%3E%3Cpath d='M14.75 19.75h5.5'/%3E%3C/svg%3E");
}
/*Tarefas diversas: uma lista para cada dentista.*/
.ic-tar-dv {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3.5h8a2 2 0 0 1 2 2v8'/%3E%3Cpath d='M4.5 6.5h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2z'/%3E%3Cpath d='M5.5 10.5h6'/%3E%3Cpath d='M5.5 14.5h4'/%3E%3Cpath d='M18.5 15v6'/%3E%3Cpath d='M15.5 18h6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3.5h8a2 2 0 0 1 2 2v8'/%3E%3Cpath d='M4.5 6.5h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2z'/%3E%3Cpath d='M5.5 10.5h6'/%3E%3Cpath d='M5.5 14.5h4'/%3E%3Cpath d='M18.5 15v6'/%3E%3Cpath d='M15.5 18h6'/%3E%3C/svg%3E");
}
/*Tarefa e/ou acontecimento: entra na agenda.*/
.ic-aco {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5h15A1.5 1.5 0 0 1 21 7v12a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19V7a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3.2v4'/%3E%3Cpath d='M16 3.2v4'/%3E%3Cpath d='M12 12.8v5'/%3E%3Cpath d='M9.5 15.3h5'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5h15A1.5 1.5 0 0 1 21 7v12a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19V7a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3.2v4'/%3E%3Cpath d='M16 3.2v4'/%3E%3Cpath d='M12 12.8v5'/%3E%3Cpath d='M9.5 15.3h5'/%3E%3C/svg%3E");
}
/*Campanha.*/
.ic-cam {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11a1.5 1.5 0 0 1 1.5-1.5H7L16.5 5v14L7 15H4.5A1.5 1.5 0 0 1 3 13.5z'/%3E%3Cpath d='M7 15.2v4.3h2.7v-3.2'/%3E%3Cpath d='M19.5 9.5a3.6 3.6 0 0 1 0 5.4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11a1.5 1.5 0 0 1 1.5-1.5H7L16.5 5v14L7 15H4.5A1.5 1.5 0 0 1 3 13.5z'/%3E%3Cpath d='M7 15.2v4.3h2.7v-3.2'/%3E%3Cpath d='M19.5 9.5a3.6 3.6 0 0 1 0 5.4'/%3E%3C/svg%3E");
}
/*Grupo de dentistas: adicionar os dentistas da lista a um grupo.
  Duas pessoas, e nao uma pasta ou uma etiqueta - o que o grupo
  guarda e gente, e e assim que ele aparece na tela de grupos.*/
.ic-grp {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='9' r='3.3'/%3E%3Cpath d='M3.6 19.4c1.1-2.8 3.1-4.2 5.6-4.2s4.5 1.4 5.6 4.2'/%3E%3Cpath d='M16 5.9a3.1 3.1 0 0 1 0 6.2'/%3E%3Cpath d='M17.2 14.4c1.6.5 2.8 1.8 3.5 3.6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='9' r='3.3'/%3E%3Cpath d='M3.6 19.4c1.1-2.8 3.1-4.2 5.6-4.2s4.5 1.4 5.6 4.2'/%3E%3Cpath d='M16 5.9a3.1 3.1 0 0 1 0 6.2'/%3E%3Cpath d='M17.2 14.4c1.6.5 2.8 1.8 3.5 3.6'/%3E%3C/svg%3E");
}
/*Registro do dentista: incluir um registro - a anotacao do que
  aconteceu - para o dentista da ficha ou para os da lista. E o
  bilhete com a ponta dobrada EMBAIXO, para nao se confundir com
  a folha da ficha (ic-prp), que dobra em cima.*/
.ic-reg {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a1 1 0 0 1 1 1v9.5L14.5 20H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M20 14.5h-4.5a1 1 0 0 0-1 1V20'/%3E%3Cpath d='M7.5 8.5h9'/%3E%3Cpath d='M7.5 12h6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a1 1 0 0 1 1 1v9.5L14.5 20H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M20 14.5h-4.5a1 1 0 0 0-1 1V20'/%3E%3Cpath d='M7.5 8.5h9'/%3E%3Cpath d='M7.5 12h6'/%3E%3C/svg%3E");
}
/*Agendar: por na agenda do usuario (programa 220), a partir da LISTA, da
  ficha do dentista, da tarefa, do aviso/acontecimento ou do registro. O
  calendario com o RELOGIO no canto - o calendario com o "mais" ja e o
  ic-aco (tarefa e/ou acontecimento), e o que distingue agendar e a hora.*/
.ic-agd {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 20H4.5A1.5 1.5 0 0 1 3 18.5V7a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 19 7v4'/%3E%3Cpath d='M3 10h16'/%3E%3Cpath d='M7.5 3.2v4'/%3E%3Cpath d='M14.5 3.2v4'/%3E%3Ccircle cx='17' cy='17' r='4.3'/%3E%3Cpath d='M17 15v2.2l1.5 1'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 20H4.5A1.5 1.5 0 0 1 3 18.5V7a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 19 7v4'/%3E%3Cpath d='M3 10h16'/%3E%3Cpath d='M7.5 3.2v4'/%3E%3Cpath d='M14.5 3.2v4'/%3E%3Ccircle cx='17' cy='17' r='4.3'/%3E%3Cpath d='M17 15v2.2l1.5 1'/%3E%3C/svg%3E");
}
/*Carteira de dentistas: adicionar os dentistas da lista a uma carteira
  (programa 221). A carteira de bolso, com o fecho do lado - e o nome
  da coisa, e nao se confunde com as duas pessoas do grupo (ic-grp).*/
.ic-crt {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 8V5.5A1.5 1.5 0 0 0 17.5 4H5.5a2 2 0 0 0 0 4H19a1.5 1.5 0 0 1 1.5 1.5v2'/%3E%3Cpath d='M3.5 6v12.5a2 2 0 0 0 2 2H19a1.5 1.5 0 0 0 1.5-1.5v-2.5'/%3E%3Cpath d='M20.5 11.5H17a2.5 2.5 0 0 0 0 5h3.5z'/%3E%3Ccircle cx='17.2' cy='14' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 8V5.5A1.5 1.5 0 0 0 17.5 4H5.5a2 2 0 0 0 0 4H19a1.5 1.5 0 0 1 1.5 1.5v2'/%3E%3Cpath d='M3.5 6v12.5a2 2 0 0 0 2 2H19a1.5 1.5 0 0 0 1.5-1.5v-2.5'/%3E%3Cpath d='M20.5 11.5H17a2.5 2.5 0 0 0 0 5h3.5z'/%3E%3Ccircle cx='17.2' cy='14' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E");
}
/*Exportar para Excel.*/
.ic-xls {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.5h10a1.5 1.5 0 0 1 1.5 1.5v14a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 19V5A1.5 1.5 0 0 1 4 3.5z'/%3E%3Cpath d='M2.5 9h13'/%3E%3Cpath d='M9 3.5v17'/%3E%3Cpath d='M19.5 11.5v7.5'/%3E%3Cpath d='M16.8 16.3l2.7 2.7 2.7-2.7'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.5h10a1.5 1.5 0 0 1 1.5 1.5v14a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 19V5A1.5 1.5 0 0 1 4 3.5z'/%3E%3Cpath d='M2.5 9h13'/%3E%3Cpath d='M9 3.5v17'/%3E%3Cpath d='M19.5 11.5v7.5'/%3E%3Cpath d='M16.8 16.3l2.7 2.7 2.7-2.7'/%3E%3C/svg%3E");
}
/*Mapa de calor: mancha sobre a area, nao o pino do endereco.*/
.ic-cal {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 3.5h15A1.5 1.5 0 0 1 21 5v14a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19V5a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Ccircle cx='9' cy='9' r='2.7' fill='black' stroke='none'/%3E%3Ccircle cx='15.4' cy='14.6' r='3.4' fill='black' stroke='none' opacity='.55'/%3E%3Ccircle cx='15.6' cy='7.6' r='1.5' fill='black' stroke='none' opacity='.75'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 3.5h15A1.5 1.5 0 0 1 21 5v14a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19V5a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Ccircle cx='9' cy='9' r='2.7' fill='black' stroke='none'/%3E%3Ccircle cx='15.4' cy='14.6' r='3.4' fill='black' stroke='none' opacity='.55'/%3E%3Ccircle cx='15.6' cy='7.6' r='1.5' fill='black' stroke='none' opacity='.75'/%3E%3C/svg%3E");
}
/*Abrir o arquivo enviado, numa aba nova.*/
.ic-lnk {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 13.5a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.6 1.6'/%3E%3Cpath d='M13.5 10.5a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1.6-1.6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 13.5a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.6 1.6'/%3E%3Cpath d='M13.5 10.5a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1.6-1.6'/%3E%3C/svg%3E");
}
/*Voltar: sai da ficha e volta para a lista.*/
.ic-vol {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4.5'/%3E%3Cpath d='M10.5 5.5L4 12l6.5 6.5'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4.5'/%3E%3Cpath d='M10.5 5.5L4 12l6.5 6.5'/%3E%3C/svg%3E");
}
/*Consultar: abre o mesmo numero em detalhe, numa tela a parte. E
  a lupa.png da barra do painel de producao.*/
.ic-lup {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='M15.4 15.4l4.6 4.6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='M15.4 15.4l4.6 4.6'/%3E%3C/svg%3E");
}
/*Grafico: os mesmos numeros da grade, desenhados. E a
  grafico.png da barra do painel de producao.*/
.ic-gra {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.5v15A1.5 1.5 0 0 0 5.5 20h15'/%3E%3Cpath d='M8.2 16.5v-4.2'/%3E%3Cpath d='M12.4 16.5V7.5'/%3E%3Cpath d='M16.6 16.5v-6.4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.5v15A1.5 1.5 0 0 0 5.5 20h15'/%3E%3Cpath d='M8.2 16.5v-4.2'/%3E%3Cpath d='M12.4 16.5V7.5'/%3E%3Cpath d='M16.6 16.5v-6.4'/%3E%3C/svg%3E");
}

/* ---------- acoes das telas de gerenciamento ----------
   Cinco desenhos que so apareciam nas ger.php: pendurar um filho
   na arvore de categorias e cadastrar os quatro tipos de registro
   que as arvores carregam. Como qualquer outro do catalogo, valem
   para o sistema inteiro a partir daqui.                        */

/*Incluir subcategoria: o ramo que desce e dobra, com o mais na
  ponta. E a bt-subcat.png.*/
.ic-sub {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.8v10.7a2 2 0 0 0 2 2h4.3'/%3E%3Cpath d='M17.5 13.3v6.4'/%3E%3Cpath d='M14.3 16.5h6.4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.8v10.7a2 2 0 0 0 2 2h4.3'/%3E%3Cpath d='M17.5 13.3v6.4'/%3E%3Cpath d='M14.3 16.5h6.4'/%3E%3C/svg%3E");
}
/*Incluir aviso: o balao com o ponto de exclamacao. E a
  bt-talk.png. O aviso avisa — por isso o "!".*/
.ic-avi {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.5h15A1.5 1.5 0 0 1 21 6v8.5a1.5 1.5 0 0 1-1.5 1.5h-7.6L7.5 20v-4H4.5A1.5 1.5 0 0 1 3 14.5V6a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M12 7.4v4'/%3E%3Cpath d='M12 13.4v.4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.5h15A1.5 1.5 0 0 1 21 6v8.5a1.5 1.5 0 0 1-1.5 1.5h-7.6L7.5 20v-4H4.5A1.5 1.5 0 0 1 3 14.5V6a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M12 7.4v4'/%3E%3Cpath d='M12 13.4v.4'/%3E%3C/svg%3E");
}
/*Incluir acontecimento: o mesmo balao com os tres pontos, que e o
  que se distingue do "!" a distancia. E a bt-talk-inf.png.*/
.ic-aci {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.5h15A1.5 1.5 0 0 1 21 6v8.5a1.5 1.5 0 0 1-1.5 1.5h-7.6L7.5 20v-4H4.5A1.5 1.5 0 0 1 3 14.5V6a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Ccircle cx='8.4' cy='10.3' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='10.3' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='15.6' cy='10.3' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.5h15A1.5 1.5 0 0 1 21 6v8.5a1.5 1.5 0 0 1-1.5 1.5h-7.6L7.5 20v-4H4.5A1.5 1.5 0 0 1 3 14.5V6a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Ccircle cx='8.4' cy='10.3' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='10.3' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='15.6' cy='10.3' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
}
/*Incluir pergunta: o balao com o ponto de interrogacao. E a
  bt-per.png.*/
.ic-per {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.5h15A1.5 1.5 0 0 1 21 6v8.5a1.5 1.5 0 0 1-1.5 1.5h-7.6L7.5 20v-4H4.5A1.5 1.5 0 0 1 3 14.5V6a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M10.2 8.6a1.9 1.9 0 0 1 3.7.6c0 1.3-1.8 1.5-1.8 2.8'/%3E%3Cpath d='M12.1 13.6v.4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.5h15A1.5 1.5 0 0 1 21 6v8.5a1.5 1.5 0 0 1-1.5 1.5h-7.6L7.5 20v-4H4.5A1.5 1.5 0 0 1 3 14.5V6a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M10.2 8.6a1.9 1.9 0 0 1 3.7.6c0 1.3-1.8 1.5-1.8 2.8'/%3E%3Cpath d='M12.1 13.6v.4'/%3E%3C/svg%3E");
}
/*Incluir resposta: a seta de responder. E a bt-res.png.*/
.ic-res {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5L3.5 11 9 16.5'/%3E%3Cpath d='M3.5 11h9.5a7 7 0 0 1 7 7v1.5'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5L3.5 11 9 16.5'/%3E%3Cpath d='M3.5 11h9.5a7 7 0 0 1 7 7v1.5'/%3E%3C/svg%3E");
}

/* ---------- acoes e marcas das telas do CRM ----------
   Seis desenhos que so apareciam nas telas de feed, historico e
   tarefa. Os tres primeiros sao acao; os tres ultimos sao MARCA —
   dizem em que estado a linha esta, e por isso nao tem mao nem
   hover (a regra .ic-mc, logo abaixo).                          */

/*Informacao: a linha tem observacao escrita pela administracao.
  E a info-icon.png / info-icon-branco.png.*/
.ic-inf {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 11.2v5'/%3E%3Cpath d='M12 7.8v.4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 11.2v5'/%3E%3Cpath d='M12 7.8v.4'/%3E%3C/svg%3E");
}
/*Marcar como visualizado: o olho, que e o que a acao faz — dar
  por lido. E a bt-visualizar.png.*/
.ic-vis {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.9'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.9'/%3E%3C/svg%3E");
}
/*Especificar detalhes da tarefa: os cursores de ajuste. E a
  bt-tarefa-his-clear.png / bt-tarefa-his.png.*/
.ic-cfg {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h16'/%3E%3Cpath d='M4 16.5h16'/%3E%3Ccircle cx='9.4' cy='7.5' r='2.2'/%3E%3Ccircle cx='15.2' cy='16.5' r='2.2'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h16'/%3E%3Cpath d='M4 16.5h16'/%3E%3Ccircle cx='9.4' cy='7.5' r='2.2'/%3E%3Ccircle cx='15.2' cy='16.5' r='2.2'/%3E%3C/svg%3E");
}
/*Habilitar mais agentes para a tarefa: a pessoa com o mais. E a
  bt-prop-pes-add.gif.*/
.ic-agt {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.6'/%3E%3Cpath d='M3.4 19.4c1.3-3 3.6-4.5 6.6-4.5 1.1 0 2.1.2 3 .6'/%3E%3Cpath d='M17.6 14.4v5.6'/%3E%3Cpath d='M14.8 17.2h5.6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.6'/%3E%3Cpath d='M3.4 19.4c1.3-3 3.6-4.5 6.6-4.5 1.1 0 2.1.2 3 .6'/%3E%3Cpath d='M17.6 14.4v5.6'/%3E%3Cpath d='M14.8 17.2h5.6'/%3E%3C/svg%3E");
}
/*Habilitar mais eventos e tarefas: a lista com o mais. E a
  bt-tarefa-add.png.*/
.ic-tar-ad {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h11'/%3E%3Cpath d='M3.5 11.5h9'/%3E%3Cpath d='M3.5 16.5h6'/%3E%3Cpath d='M17.5 12.5v8'/%3E%3Cpath d='M13.5 16.5h8'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h11'/%3E%3Cpath d='M3.5 11.5h9'/%3E%3Cpath d='M3.5 16.5h6'/%3E%3Cpath d='M17.5 12.5v8'/%3E%3Cpath d='M13.5 16.5h8'/%3E%3C/svg%3E");
}
/*Prioridade de acompanhamento: escolher com que forca o usuario da
  sessao acompanha o que esta na lista. A bandeira e o desenho de
  "marcar para acompanhar", e nao repete nenhum dos outros — o olho ja
  e "visualizado" e a estrela nao existe no catalogo. Nasce com esta
  acao; nao substitui imagem nenhuma da 1.0.*/
.ic-acp {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20.6V3.8'/%3E%3Cpath d='M6 4.6h11.8l-2.5 4 2.5 4H6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20.6V3.8'/%3E%3Cpath d='M6 4.6h11.8l-2.5 4 2.5 4H6'/%3E%3C/svg%3E");
}
/*Conferido: o registro passou na verificacao. E a bt-correct.png.*/
.ic-ok {
	color: #1F7A38;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M8.2 12.2l2.6 2.6 5-5.4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M8.2 12.2l2.6 2.6 5-5.4'/%3E%3C/svg%3E");
}
/*Pendente: o registro precisa de atencao. E a bt-alert2.png.*/
.ic-ale {
	color: #B23434;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8L21.2 19.6H2.8z'/%3E%3Cpath d='M12 9.6v4.2'/%3E%3Cpath d='M12 16.6v.4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8L21.2 19.6H2.8z'/%3E%3Cpath d='M12 9.6v4.2'/%3E%3Cpath d='M12 16.6v.4'/%3E%3C/svg%3E");
}
/*Marca, nao acao: o icone diz o estado da linha e nao clica em
  nada. Sem mao e sem hover — prometer clique onde nao ha e o que
  fazia o usuario tentar de novo.*/
.ic-mc { cursor: default; }
.ic-mc:hover { color: inherit; }
.gd-tb tbody tr:hover td .ic-mc, .gd-tb tbody tr:hover td .ic-mc:hover { color: inherit; }
/*Marca menor, colada no texto que ela qualifica.*/
.ic-p { width: 13px; height: 13px; }
/*Acao ja feita: a tarefa que ja teve os detalhes preenchidos. Na
  1.0 o popup trocava o src da imagem por uma versao colorida —
  aqui o salvar_win_pai() troca a className por "ic ic-cfg ic-on",
  que e a mesma troca de desenho custando uma cor.*/
.ic-on { color: var(--el-500); }
.gd-tb tbody tr:hover td .ic-on { color: var(--el-500); }
/*A marca "na agenda" das listas de tarefa (2026-09-30): o ic-agd como marca
  (ic-mc), com cor - azul quando o compromisso ainda vem, vermelho
  (ic-agd-vc) quando a data passou e a tarefa continua na lista. A cor fica
  no hover da linha, qualificada como a do ic-on, e o cursor e o da celula,
  que abre a ficha da tarefa. So o ic-agd alcanca: nenhuma outra marca muda.*/
.ic-agd.ic-mc, .ic-agd.ic-mc:hover { color: var(--el-500); cursor: inherit; }
.ic-agd.ic-mc.ic-agd-vc, .ic-agd.ic-mc.ic-agd-vc:hover { color: #B23434; }
.gd-tb tbody tr:hover td .ic-agd.ic-mc, .gd-tb tbody tr:hover td .ic-agd.ic-mc:hover { color: var(--el-500); }
.gd-tb tbody tr:hover td .ic-agd.ic-mc.ic-agd-vc, .gd-tb tbody tr:hover td .ic-agd.ic-mc.ic-agd-vc:hover { color: #B23434; }

/* ============================================================
   sl-  |  TELA DE PESQUISA  (familia sel.php)
   Cabecalho, cartao de filtro, grade de selecao e rodape de
   paginas das ~55 telas "sel.php" — o CRUD generico que roda
   sobre o CL_CAD_SEL.js. Todas tem a mesma estrutura: um
   formulario de pesquisa em cima, a lista com os icones de acao
   na esquerda de cada linha, paginacao e mensagem no fim.

   Nasceu como o bloco pd- por dentro do pedido/sel.php, primeira
   tela da familia a vir para a 2.0. Mora aqui desde a segunda,
   pelo motivo de sempre: a mesma estrutura nao pode ter duas
   caras. Nenhuma tela da familia reescreve estas regras no
   proprio <style>; o que varia de uma para outra e so a largura
   das colunas, e para isso existem as classes sl-w* abaixo.

   Nada aqui redefine classe de outro bloco: .tb-shadow-01,
   .gd-card, .gd-card-tt, .gd-rol, .gd-tb, .gd-sem, .gd-bt,
   .gd-acoes, .ic-*, .td-grid-tt, .td-grid-tt-sel, .dv-grid-tt,
   .dv-seta-*, .tr-grid-ct-ln*, .txt002, .txt005/6, .txt011/12,
   .in-tx-txt003 e .in-bt-txt003 entram como estao — o que existe
   sao regras mais especificas dentro de .sl-pg / .sl-tb / .sl-pag.
   ============================================================ */
.sl-pg {
	width: 100%;
	max-width: 1720px;
	margin: 0px auto;
	padding: 14px 16px 24px 16px;
	box-sizing: border-box;
	text-align: left;
}
.sl-cab { margin: 0px 0px 12px 2px; }
.sl-tt {
	font-family: var(--ui);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
.sl-sub {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-3);
	margin: 4px 0px 0px 0px;
}

/* ---------- cartao de filtro ----------
   Os campos que na 1.0 vinham empilhados numa tabela de rotulo a
   direita ficam lado a lado, com o rotulo em cima, e quebram
   sozinhos quando a janela aperta. */
.sl-flt { margin-bottom: 16px; }
.sl-flt-bd { padding: 14px; box-sizing: border-box; }
.sl-flds {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
}
.sl-fld {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.sl-lb { white-space: nowrap; }
.sl-in-tx { width: 200px; }
.sl-in-tx-p { width: 120px; }
.sl-in-tx-g { width: 300px; }
/*A largura do campo de data e o par inicio/fim vem do bloco
  CAMPO DE DATA, la em cima.*/
.sl-dt { display: inline-flex; align-items: center; gap: 6px; }
.sl-flds select.in-tx-txt003 { max-width: 260px; }
/*Botao do calendario: mesmo desenho das outras telas 2.0, com o
  onClick original do cal.gif.*/
.sl-cal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0px;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	color: var(--tx-3);
	cursor: pointer;
}
.sl-cal:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }
.sl-acoes { flex-direction: row; align-items: center; gap: 10px; }
/*Caixa de marcar dentro do filtro.*/
.sl-ck {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	cursor: pointer;
	white-space: nowrap;
}

/* ---------- faixa de titulo da grade ----------
   O "Incluir" da 1.0 era um bt-new.gif solto numa linha extra no
   pe da tabela, onde ninguem procura acao de cadastro. Aqui ele e
   o botao primario da faixa de titulo do cartao. Dentro de botao o
   icone nao tem cor propria: acompanha o botao, inclusive o branco
   do primario. */
.sl-pg a.gd-bt { text-decoration: none; }
.sl-pg .gd-bt .ic { color: inherit; cursor: inherit; }

/* ---------- grade ----------
   A lista vem com ate 100 linhas por pagina, entao ela rola por
   dentro do cartao e o cabecalho fica grudado no topo. */
.sl-gd .gd-rol { max-height: calc(100vh - 330px); }
/*O CL_CAD_SEL troca a className INTEIRA da celula de cabecalho
  entre td-grid-tt e td-grid-tt-sel: nenhuma classe de alinhamento
  ou de largura sobrevive ali. Por isso o cabecalho se alinha pelo
  proprio dv-grid-tt, a largura das colunas vem das celulas do
  corpo (que o JS nao toca) e o estado "coluna que ordena" precisa
  ser escrito na forma que o JS deixa: so a classe td-grid-tt-sel,
  sem mais nada ao lado.*/
.sl-tb thead td.td-grid-tt-sel {
	position: sticky;
	top: 0px;
	z-index: 2;
	font-family: var(--ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tx-1);
	background-color: #D5E0E9;
	background-image: none;
	padding: 0px 9px;
	height: 28px;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid #C9D5DE;
	cursor: pointer;
}
.sl-tb thead td.td-grid-tt { text-align: left; cursor: default; }
/*So as colunas ordenaveis tem handler; e o que sobra para
  reconhece-las depois que o JS apaga as classes.*/
.sl-tb thead td[onmouseover] { cursor: pointer; }
.sl-tb thead td .dv-grid-tt { margin-left: 0px; line-height: 28px; }
.sl-tb thead td .dv-seta-cima, .sl-tb thead td .dv-seta-baixo { margin: 11px 0px 0px 6px; }
/*Setas de ordenacao: desenho em CSS no lugar de seta-cima.gif e
  seta-baixo.gif, que eram brancos, feitos para o cabecalho escuro
  da 1.0, e sumiam no cabecalho claro da grade 2.0. O display
  continua sendo ligado e desligado pelo JS, no div de fora.*/
.sl-seta {
	display: block;
	width: 0px;
	height: 0px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
.sl-seta-c { border-bottom: 5px solid currentColor; }
.sl-seta-b { border-top: 5px solid currentColor; }

.sl-tb tbody td { vertical-align: top; cursor: pointer; }
/*Coluna de acoes: as tres celulas da 1.0 (propriedades, alterar,
  excluir) viraram uma so.*/
.sl-tb tbody td.sl-ac { text-align: left; white-space: nowrap; width: 1%; cursor: default; }
.sl-tb tbody td.sl-ac a { text-decoration: none; }
/*Celula que nao abre nada: nas telas em que a linha so tem os
  icones de acao, a mao do cursor prometia um clique que nao existe.*/
.sl-tb tbody td.sl-sc { cursor: default; }
.sl-tb tbody td.sl-ac .ic { margin-right: 10px; }
.sl-tb tbody td.sl-ac a .ic { margin-right: 10px; }
/*max-width:0 com width em porcentagem: o texto corta com
  reticencias em vez de empurrar a tabela.*/
.sl-tb tbody td.sl-nm {
	text-align: left;
	max-width: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*Celula que pode ter varias linhas concatenadas: quebra em vez de
  cortar, porque cortar esconderia justamente o que distingue um
  registro do outro.*/
.sl-tb tbody td.sl-mul {
	white-space: normal;
	text-overflow: clip;
	line-height: 16px;
}
.sl-tb tbody td.sl-num { text-align: right; font-variant-numeric: tabular-nums; }
/*Codigo/identificador: fica a esquerda, como texto, mas com o
  algarismo de largura fixa para as linhas se lerem em coluna.*/
.sl-tb tbody td.sl-id { text-align: left; font-variant-numeric: tabular-nums; }
.sl-tb tbody td.sl-ct { text-align: center; }
.sl-tb tbody td.sl-dtc { text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
/*Larguras: cada tela da familia tem um conjunto de colunas
  diferente, e a largura precisa ser escrita na celula do CORPO,
  porque o JS reescreve a classe da celula de cabecalho. Ficam
  aqui, e nao em 55 blocos <style> iguais, para a familia nao
  voltar a ter uma folha por tela.*/
.sl-tb tbody td.sl-w5  { width: 5%; }
.sl-tb tbody td.sl-w7  { width: 7%; }
.sl-tb tbody td.sl-w8  { width: 8%; }
.sl-tb tbody td.sl-w10 { width: 10%; }
.sl-tb tbody td.sl-w12 { width: 12%; }
.sl-tb tbody td.sl-w15 { width: 15%; }
.sl-tb tbody td.sl-w18 { width: 18%; }
.sl-tb tbody td.sl-w20 { width: 20%; }
.sl-tb tbody td.sl-w25 { width: 25%; }
.sl-tb tbody td.sl-w30 { width: 30%; }
.sl-tb tbody td.sl-w35 { width: 35%; }
.sl-tb tbody td.sl-w40 { width: 40%; }
.sl-tb tbody td.sl-w50 { width: 50%; }

/* ---------- rodape: paginas e mensagem ---------- */
.sl-rod {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 12px;
	border-top: 1px solid var(--ln-1);
}
.sl-pag { line-height: 26px; }
.sl-pag b {
	display: inline-block;
	min-width: 24px;
	margin-right: 3px;
	padding: 2px 6px;
	box-sizing: border-box;
	border: 1px solid var(--ln-2);
	border-radius: 7px;
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}
.sl-pag b.txt011:hover { background-color: #EFF5FF; border-color: var(--el-500); text-decoration: none; }
.sl-pag b.txt012 {
	background-color: var(--el-500);
	border-color: var(--el-500);
	color: #FFFFFF;
	text-decoration: none;
}
.sl-msg { margin-left: auto; text-align: right; }
/*Quadro que carrega a ficha do registro escolhido, embaixo do
  filtro — e o desenho das tres telas de pesquisa do dentista, que
  em vez de listar abrem a ficha ali mesmo. A altura quem acerta e
  o ajusta_iframe_cont() da tela; o cartao so da a moldura, com
  recuo zero para o quadro encostar na borda.*/
.sl-ifr { padding: 0px; box-sizing: border-box; margin-top: 16px; }
.sl-ifr iframe { width: 100%; border: 0px; display: block; }

/* ============================================================
   pr-  |  FICHA DE PROPRIEDADES  (familia prp.php)
   A tela que mostra um registro inteiro, com as quatro acoes de
   sempre: voltar, incluir, alterar, excluir. E a irma da familia
   sel.php: a lista abre a ficha, a ficha volta para a lista.

   Nasceu como bloco pd-/pr- por dentro do pedido/prp.php, a
   primeira da familia a vir para a 2.0. Mora aqui desde a
   segunda, pelo motivo de sempre: a mesma estrutura nao pode ter
   duas caras. As ~45 telas da familia nao tem <style> proprio.

   O desenho e sempre o mesmo:
     cabecalho com titulo, linha de contexto e a barra de acoes;
     um ou mais cartoes de ficha (.pr-cd) com os campos em duas
     colunas, rotulo em cima; endereco escrito como num envelope;
     contato, listas e grades quando a tela tiver; as duas datas
     no pe do cartao; a mensagem do CRUD no fim da pagina.

   Nada aqui redefine classe de outro bloco: .tb-shadow-01,
   .gd-card, .gd-card-tt, .gd-rol, .gd-tb, .gd-sem, .ic-*,
   .txt002 e .txt00* entram como estao — o que existe sao regras
   mais especificas dentro de .pr-pg / .pr-tb.
   ============================================================ */
.pr-pg {
	width: 100%;
	max-width: 1720px;
	margin: 0px auto;
	padding: 14px 16px 24px 16px;
	box-sizing: border-box;
	text-align: left;
}
/*Ficha de um cartao so: sem teto menor, dois campos por linha
  viram duas colunas de 800px num monitor largo e o olho percorre
  meia tela entre o rotulo e o proximo campo.*/
.pr-pg-md { max-width: 1100px; }

/* ---------- cabecalho e barra de acoes ----------
   Na 1.0 as quatro imagens (bt-voltar, bt-new, bt-edit, bt-del)
   ficavam numa linha extra dentro da tabela de campos, embaixo do
   ultimo dado. Aqui sobem para o cabecalho, onde se procura acao,
   e ganham rotulo: em ficha de leitura o icone sozinho obriga a
   passar o mouse para descobrir o que faz.
   Alterar e a acao provavel de quem abriu a ficha, entao e ela a
   primaria. Excluir e a unica com hover vermelho.                */
.pr-cab {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0px 0px 4px 2px;
}
.pr-cab-tx { min-width: 0px; }
.pr-tt {
	font-family: var(--ui);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
.pr-sub {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-3);
	margin: 4px 0px 0px 0px;
}
.pr-acoes {
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.pr-bt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0px 14px;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--tx-2);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.pr-bt:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }
a.pr-bt { text-decoration: none; }
/*Dentro do botao o icone nao tem cor propria: acompanha o botao,
  inclusive o branco do primario e o vermelho do excluir.*/
.pr-bt .ic { color: inherit; cursor: inherit; }
.pr-bt .ic:hover { color: inherit; }
.pr-bt-pri {
	background-color: var(--el-500);
	border-color: var(--el-500);
	color: #FFFFFF;
}
.pr-bt-pri:hover { background-color: var(--el-600); border-color: var(--el-600); color: #FFFFFF; }
.pr-bt-del:hover { background-color: #FCEDED; border-color: #E7B7B7; color: #B23434; }

/* ---------- secoes e grades ----------
   Os cartoes de uma linha esticam de proposito (o stretch padrao
   da grade): a altura de cada bloco varia com o dado, e com
   align-items:start o cartao mais baixo parava onde o conteudo
   acabava e abria um vao cinza ate a secao de baixo.             */
.pr-sec-tt {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 700;
	color: var(--tx-2);
	margin: 26px 0px 10px 2px;
}
.pr-g2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.pr-g3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
/*Duas colunas de peso diferente: a ficha manda, o que vem ao lado
  acompanha.*/
.pr-g21 {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
}
/*Coluna que empilha mais de um cartao dentro de uma celula.*/
.pr-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0px;
}
@media (max-width: 1240px) {
	.pr-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pr-g21 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.pr-g2, .pr-g3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- cartao de ficha ---------- */
.pr-cd {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px 12px 16px;
}
.pr-cd-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.pr-cd-tt {
	font-family: var(--ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
.pr-cd-top .pr-cd-tt { flex: 1; }
.pr-cd-sub {
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-3);
	margin: 3px 0px 0px 0px;
}
/*Dois campos por linha: com um por linha o cartao fica alto demais
  e o olho percorre o dobro do caminho.*/
.pr-gr {
	display: flex;
	flex-wrap: wrap;
	margin-top: 6px;
}
.pr-f {
	width: 50%;
	min-width: 0px;
	box-sizing: border-box;
	padding: 7px 14px 7px 0px;
	border-top: 1px solid #F0F3F6;
}
/*Campo que costuma vir com mais de uma linha (forma de pagamento
  chega separada por <br>, observacao chega com texto corrido)
  ocupa a linha inteira. O pr-f-3 e o contrario: tres campos curtos
  numa linha, em cartao largo.*/
.pr-f-2 { width: 100%; }
.pr-f-3 { width: 33.333%; }
@media (max-width: 620px) {
	.pr-f, .pr-f-3 { width: 100%; }
}
.pr-f i {
	display: block;
	font-style: normal;
	font-family: var(--ui);
	font-size: 11px;
	color: var(--tx-3);
	margin-bottom: 1px;
}
.pr-f b {
	display: block;
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-1);
	line-height: 18px;
	word-break: break-word;
}
/*Campo vazio: travessao cinza, para se enxergar de imediato o que
  falta preencher sem a linha desalinhar.*/
.pr-vz { color: #C3CCD5; font-weight: 400; }
.pr-sec {
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 600;
	color: var(--tx-3);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 14px 0px 7px 0px;
}
/*Endereco escrito como num envelope, nao como sete campos
  rotulados. Linha vazia nao sai.*/
.pr-end {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-1);
	line-height: 20px;
	margin: 0px;
}
/*O get_contato devolve linhas de tabela prontas: a tabela fica, so
  o desenho muda.*/
.pr-ct { width: 100%; border-collapse: collapse; }
.pr-ct td {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-1);
	text-align: left;
	padding: 5px 12px 5px 0px;
	white-space: nowrap;
}
/*O get_contato manda o rotulo alinhado a direita; aqui ele volta
  para a esquerda e ganha o mesmo tom dos rotulos da identificacao.*/
.pr-ct td:first-child {
	font-size: 11px;
	font-weight: 400;
	color: var(--tx-3);
	width: 1%;
}
/*Lista simples de itens: permissoes marcadas, tabelas vinculadas,
  respostas de uma pergunta. Na 1.0 era uma tabela de uma coluna so
  com o texto dentro de dois <div> flutuados.*/
.pr-li { margin: 4px 0px 0px 0px; padding: 0px; list-style: none; }
.pr-li li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 7px 0px;
	border-top: 1px solid #F0F3F6;
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-1);
	line-height: 18px;
}
/*Marca de item: ponto neutro, so para dar ritmo a lista.*/
.pr-li li:before {
	content: '';
	flex: none;
	width: 5px;
	height: 5px;
	margin-top: 7px;
	border-radius: 50%;
	background-color: #C3CCD5;
}
.pr-li li span {
	margin-left: auto;
	padding-left: 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tx-3);
	white-space: nowrap;
}
.pr-nada {
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-3);
	margin: 10px 0px 6px 0px;
}
/*Painel que abre por cima da grade (os precos de uma tabela, na ficha
  da radiologia). Quem liga e desliga continua sendo o JS da tela, pelo
  style.display; aqui so mora a aparencia e o teto de rolagem.*/
/*O mesmo popup aparece na ficha (pr-) e no formulario de alteracao
  (fm-) da radiologia, ligado pelo mesmo appear()/desappear(): uma
  regra so, para a peca nao ganhar duas caras.*/
.pr-pop,
.fm-pop {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 30;
	min-width: 320px;
	max-width: 560px;
	max-height: 60vh;
	overflow-y: auto;
	padding: 10px 12px;
	box-sizing: border-box;
	background-color: #FFFFFF;
	cursor: pointer;
}
/*Imagem do arquivo enviado: nunca passa da largura do cartao. Na 1.0
  saia em tamanho natural e empurrava a pagina para o lado.*/
.pr-img { margin: 0px; }
.pr-img img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--ln-1);
	border-radius: 8px;
}
/*Pe do cartao: as datas de cadastro, longe dos dados.*/
.pr-pe {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 14px 0px 0px 0px;
	padding-top: 10px;
	border-top: 1px solid var(--ln-1);
	font-family: var(--ui);
	font-size: 11px;
	color: var(--tx-3);
}
.pr-pe span { white-space: nowrap; }

/* ---------- grade dentro da ficha ----------
   Exames de um pedido, arquivos de uma pessoa, links de um menu:
   a grade e a mesma gd- das outras telas; o que muda aqui e o teto
   de rolagem, para uma lista longa nao empurrar o cartao ao lado. */
.pr-gd .gd-rol { max-height: 420px; }
.pr-gd-g .gd-rol { max-height: 620px; }
/*Nome longo e o que distingue uma linha da outra: aqui a celula
  quebra em vez de cortar com reticencias.*/
.pr-tb tbody td.gd-nm, .pr-tb tfoot td.gd-nm {
	width: 70%;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	cursor: default;
	line-height: 16px;
}
/*A linha nao abre nada: o azul de "clique aqui" sai.*/
.pr-tb tbody tr:hover td.gd-nm { color: var(--tx-1); }
.pr-tb tbody td { cursor: default; }
.pr-tb td.pr-vl { white-space: nowrap; }
/*Pergunta e resposta na mesma grade: a pergunta manda, a resposta vem
  recuada abaixo dela. Na 1.0 o recuo era um seta-subcat.gif seguido de
  &nbsp; contados a mao.*/
.pr-tb tbody td.pr-per { font-weight: 700; color: var(--tx-1); }
.pr-tb tbody td.pr-res { padding-left: 32px; }
.pr-obr { color: #B23434; font-weight: 700; }
.pr-tar { color: var(--el-600); font-weight: 700; }
.pr-tb td.pr-ct-ac { text-align: center; width: 1%; }
.pr-tb td.pr-ct-ac a { text-decoration: none; }

/* ---------- mensagem do CRUD ----------
   O "registro excluido", o "nao foi possivel excluir". Ficava
   centralizado no pe da pagina, longe da acao que a produziu.     */
.pr-msg {
	margin: 16px 0px 0px 2px;
	font-family: var(--ui);
	font-size: 13px;
}

/* ============================================================
   fm-  |  FORMULARIO DE CADASTRO  (familia inc.php)
   A tela em que se digita um registro novo. E a terceira da
   familia do CRUD generico: a sel.php pesquisa, a prp.php mostra,
   a inc.php cadastra — e a alt.php, quando vier, e esta mesma
   tela com o registro ja carregado.

   O desenho e sempre o mesmo:
     cabecalho com o titulo da tela, a linha de contexto e a barra
     de acoes a direita (o "Voltar", que na 1.0 era um
     bt-voltar.gif solto embaixo dos botoes);
     um cartao de formulario (.fm-cd) com os campos em duas
     colunas e rotulo EM CIMA — na 1.0 o rotulo vinha a direita,
     numa tabela de layout, e o olho ia e voltava a cada campo;
     o pe do cartao com "Incluir" (primario azul, a acao da tela)
     e "Limpar";
     os cartoes que a tela tiver alem da ficha (grade de selecao,
     lista de resultado, painel de simulacao);
     a mensagem do CRUD no fim da pagina.

   O que NAO muda, porque e do CL_CAD_INC.js: os id/name dos
   campos, o onClick de sub_form()/limpar(), o hidden INC e a
   ordem em que arr_campos_id espera encontra-los — o consiste
   campos() percorre a lista do JS, nao a ordem do HTML, mas o
   primeiro da lista e quem recebe o focus() do limpar().

   Nada aqui redefine classe de outro bloco: .tb-shadow-01,
   .gd-card, .gd-card-tt, .gd-rol, .gd-tb, .gd-sem, .ic-*,
   .txt002, .txt00*, .in-tx-txt003/4 e .in-bt-txt003 entram como
   estao — o que existe sao regras mais especificas dentro de
   .fm-pg / .fm-f / .fm-tb.
   ============================================================ */
.fm-pg {
	width: 100%;
	max-width: 1720px;
	margin: 0px auto;
	padding: 14px 16px 24px 16px;
	box-sizing: border-box;
	text-align: left;
}
/*Formulario de um cartao so: sem teto menor, dois campos por
  linha viram duas colunas de 800px num monitor largo e o campo
  fica mais comprido que o conteudo que cabe nele.*/
.fm-pg-md { max-width: 1100px; }
/*Formulario de dois ou tres campos: cartao estreito, para o campo
  nao ficar dez vezes maior que o dado.*/
.fm-pg-sm { max-width: 820px; }

/* ---------- cabecalho e barra de acoes ---------- */
.fm-cab {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0px 0px 4px 2px;
}
.fm-cab-tx { min-width: 0px; }
.fm-tt {
	font-family: var(--ui);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
.fm-sub {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-3);
	margin: 4px 0px 0px 0px;
}
/*Palavra da linha de contexto que dispara uma acao ("clique aqui
  para incluir novo dentista"). Na 1.0 era um <font style="color:#06C;
  cursor:pointer"> com um <b> dentro.*/
.fm-lnk { color: var(--el-600); font-weight: 700; cursor: pointer; }
.fm-lnk:hover { color: var(--el-500); text-decoration: underline; }
.fm-acoes {
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.fm-bt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 30px;
	padding: 0px 14px;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--tx-2);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.fm-bt:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }
a.fm-bt { text-decoration: none; }
/*O <input type="button"> nao herda familia nem tamanho do pai.*/
input.fm-bt, button.fm-bt { font-family: var(--ui); font-size: 12px; font-weight: 600; }
/*Dentro do botao o icone nao tem cor propria: acompanha o botao,
  inclusive o branco do primario.*/
.fm-bt .ic { color: inherit; cursor: inherit; }
.fm-bt .ic:hover { color: inherit; }
.fm-bt-pri {
	background-color: var(--el-500);
	border-color: var(--el-500);
	color: #FFFFFF;
}
.fm-bt-pri:hover { background-color: var(--el-600); border-color: var(--el-600); color: #FFFFFF; }
/*So a alt.php tem o "Excluir" no cabecalho, e ele e o unico botao
  da folha com hover vermelho — mesma regra da ficha (pr-bt-del),
  para a mesma acao nao mudar de cor entre a ficha e a alteracao.*/
.fm-bt-del:hover { background-color: #FCEDED; border-color: #E7B7B7; color: #B23434; }

/* ---------- secoes e grades ----------
   Os cartoes de uma linha esticam de proposito (o stretch padrao
   da grade): a altura de cada bloco varia com o dado, e com
   align-items:start o cartao mais baixo parava onde o conteudo
   acabava e abria um vao cinza ate a secao de baixo.             */
.fm-sec-tt {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 700;
	color: var(--tx-2);
	margin: 26px 0px 10px 2px;
}
.fm-g2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
/*Duas colunas de peso diferente: o formulario manda, o que vem ao
  lado (resultado de pesquisa, simulacao, lista) acompanha.*/
.fm-g21 {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 16px;
}
/*O contrario: o formulario e curto e quem manda e a lista.*/
.fm-g12 {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 16px;
}
/*Coluna que empilha mais de um cartao dentro de uma celula.*/
.fm-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0px;
}
/*Respiro entre dois cartoes empilhados fora de uma coluna flex (as
  etapas do cadastro de usuario, por exemplo).*/
.fm-esp { margin-top: 16px; }
@media (max-width: 1240px) {
	.fm-g21, .fm-g12 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.fm-g2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- cartao de formulario ---------- */
.fm-cd {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px 14px 16px;
}
/*Titulo do cartao com uma acao a direita — "Abrir arquivo" na
  alteracao de arquivos. Mesmo desenho do pr-cd-top da ficha.*/
.fm-cd-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.fm-cd-tt {
	font-family: var(--ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
.fm-cd-top .fm-cd-tt { flex: 1; }
.fm-cd-sub {
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-3);
	margin: 3px 0px 0px 0px;
}
.fm-cd-sub a { color: var(--el-600); font-weight: 600; }
/*Divisao dentro do cartao: "Endereco", "Contato". Mesma marca de
  secao da ficha, para as duas telas do mesmo registro se lerem
  igual.*/
.fm-sec {
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 600;
	color: var(--tx-3);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 18px 0px 8px 0px;
	padding-top: 12px;
	border-top: 1px solid #F0F3F6;
}
.fm-sec-1 { margin-top: 4px; padding-top: 0px; border-top: 0px; }

/*Dois campos por linha: com um por linha o cartao fica alto demais
  e o olho percorre o dobro do caminho; com tres, o rotulo comprido
  quebra em duas linhas e desalinha a fileira.*/
.fm-gr {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 18px;
	margin-top: 10px;
}
.fm-gr-1 { grid-template-columns: minmax(0, 1fr); }
.fm-gr-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.fm-gr-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.fm-gr, .fm-gr-3 { grid-template-columns: minmax(0, 1fr); }
}
.fm-f {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0px;
}
/*Campo que ocupa a linha inteira: observacao, descricao, endereco
  comprido.*/
.fm-f-2 { grid-column: 1 / -1; }
.fm-lb {
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 500;
	color: var(--tx-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*Obrigatorio: o asterisco que na 1.0 vinha colado no rotulo, em
  preto, e ninguem via.*/
.fm-ob { color: #B23434; font-weight: 700; }
/*O campo ocupa a celula: e a celula da grade que decide a largura,
  nao um size= escrito no HTML de cada tela.*/
.fm-f input.in-tx-txt003,
.fm-f input.in-tx-txt004,
.fm-f select.in-tx-txt003,
.fm-f select.in-tx-txt004,
.fm-f textarea.in-tx-txt003,
.fm-f textarea.in-tx-txt004 { width: 100%; }
/*Campo curto (ordem, sigla, quantidade, valor): a celula continua
  do tamanho da fileira, mas o campo para onde o dado acaba.*/
.fm-f-p input.in-tx-txt003,
.fm-f-p input.in-tx-txt004,
.fm-f-p select.in-tx-txt003 { max-width: 150px; }
.fm-f-m input.in-tx-txt003,
.fm-f-m input.in-tx-txt004,
.fm-f-m select.in-tx-txt003 { max-width: 280px; }
/*A largura do campo de data vem do bloco CAMPO DE DATA, la em
  cima, e nao pode ser esticada pela celula.*/
.fm-f input.in-tx-txt003[id^="DT_"][maxlength="19"],
.fm-f input.in-tx-txt004[id^="DT_"][maxlength="19"] { width: 154px; }
/*Data + botao do calendario andam juntos.*/
.fm-dt { display: inline-flex; align-items: center; gap: 6px; }
/*Valor e o seletor que diz o que fazer com ele (cobrar, nao cobrar)
  sao um campo so: quebram juntos e nunca em linhas diferentes.*/
.fm-par { display: flex; align-items: center; gap: 8px; }
.fm-par input.in-tx-txt004, .fm-par input.in-tx-txt003 { flex: 0 0 130px; }
.fm-par select.in-tx-txt003 { flex: 1 1 auto; min-width: 0px; }
/*Botao do calendario: mesmo desenho das outras telas 2.0, com o
  onClick original do cal.gif.*/
.fm-cal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0px;
	flex: none;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	color: var(--tx-3);
	cursor: pointer;
}
.fm-cal:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }
/*Caixa de marcar dentro do formulario: o texto ao lado faz parte
  do alvo do clique.*/
.fm-ck {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-1);
	cursor: pointer;
	white-space: nowrap;
}
/*Campo de texto longo: altura util e o mesmo desenho dos outros
  campos. O cols/rows do HTML antigo continua onde estava e perde
  para a folha.*/
.fm-ta { min-height: 118px; resize: vertical; }
.fm-ta-g { min-height: 168px; }
/*Envio de arquivo: o <input type=file> nao aceita o desenho dos
  outros campos, entao ganha so a moldura.*/
.fm-file {
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-2);
	padding: 6px 8px;
	box-sizing: border-box;
	border: 1px dashed var(--ln-2);
	border-radius: 8px;
	background-color: #FBFCFD;
	width: 100%;
	cursor: pointer;
}
/*Campo somente-leitura: fica claro que o dado vem de outro lugar
  (do link escolhido, da pessoa selecionada) e nao se digita ali.*/
.fm-f input[readonly].in-tx-txt003 { background-color: #F5F7F9; color: var(--tx-2); cursor: default; }
/*Valor que a tela mostra e nao deixa trocar: o vinculo que so a
  inclusao escolhe (o convenio de uma regra de importacao, o
  dentista de uma tabela de preco). Na 1.0 era um <td class=txt013>
  no meio dos campos; aqui ocupa a celula da grade, na altura dos
  campos ao lado, para a fileira nao desalinhar.*/
.fm-vl {
	display: flex;
	align-items: center;
	min-height: 30px;
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-1);
}
/*Foto do paciente dentro do cartao de cadastro: o JS troca o src
  desta <img> de tres em tres segundos (callback_get_foto_paciente),
  entao ela nao pode mudar de id nem sair do lugar.*/
.fm-foto { margin: 0px 0px 10px 0px; text-align: center; }
.fm-foto img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--ln-1);
	border-radius: 10px;
}
/*Imagem que ja esta gravada, mostrada no formulario que a altera.
  Mesmo desenho do pr-img da ficha.*/
.fm-img { margin: 0px; }
.fm-img img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--ln-1);
	border-radius: 8px;
}
/*Campo que a tela destaca porque falta preencher — o e-mail de um
  usuario que ainda nao tem contato. Na 1.0 a linha inteira levava
  bgcolor="#FF0000" com o rotulo em branco, que gritava sem dizer o
  que fazer.*/
.fm-f-al {
	background-color: #FCEDED;
	border: 1px solid #E7B7B7;
	border-radius: 8px;
	padding: 8px 10px;
	box-sizing: border-box;
}
.fm-f-al .fm-lb { color: #B23434; font-weight: 700; }
/*Linha de apoio embaixo do campo.*/
.fm-aj {
	font-family: var(--ui);
	font-size: 11px;
	color: var(--tx-3);
	margin: 0px;
}

/* ---------- pe do cartao: as acoes ----------
   "Incluir" e a acao da tela, entao e ela a primaria. "Limpar" so
   esvazia o formulario — nao apaga registro nenhum —, por isso e
   secundario e nao vermelho.                                     */
.fm-pe {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0px 0px 0px;
	padding-top: 12px;
	border-top: 1px solid var(--ln-1);
}
.fm-pe-dir { margin-left: auto; }
/*Pe de acoes de uma tela que termina em grade, e nao em cartao de
  campos: sem a linha de cima, que separaria do nada.*/
.fm-pe-so { border-top: 0px; padding-top: 0px; }
/*O "Incluir" usa o in-bt-txt003, que ja e o botao primario da
  folha; a altura e o recuo vem de la.*/
.fm-pe input.in-bt-txt003 { min-width: 110px; }

/* ---------- grade dentro do formulario ----------
   Links de um acesso restrito, itens de uma categorizacao,
   dentistas de uma simulacao: a grade e a mesma gd- das outras
   telas; o que muda aqui e o teto de rolagem e o fato de a linha
   nao abrir nada — quem clica esta marcando uma caixa.           */
.fm-gd .gd-rol { max-height: calc(100vh - 420px); }
.fm-gd-g .gd-rol { max-height: calc(100vh - 300px); }
/*O teto acima foi medido para a tela cheia, onde os 420px descontados sao o
  menu do sistema mais o cabecalho e o pe. Numa popup baixa (varias abrem com
  height=420) a conta da negativo, o teto e ignorado e a lista desaba para os
  90px de min-height do gd-rol: rolagem enorme numa faixa de duas linhas, com
  espaco sobrando na janela. O piso abaixo e o cinto de seguranca — quando o
  teto vale, ele e que manda; quando desaba, ainda restam sete linhas uteis.*/
.fm-gd .gd-rol, .fm-gd-g .gd-rol { min-height: 220px; }
/*Lista ao lado de um formulario que manda (fm-g2 e fm-g21): a celula do grid
  ja estica ate a altura da linha, mas o cartao parava no proprio conteudo e
  deixava a coluna com um vao branco embaixo — 130px de cartao numa coluna de
  473px, no Alterar Acontecimento. Esticando o cartao, o gd-rol (que ja e
  flex:1) cresce junto e a lista acompanha a altura do formulario vizinho.
  O teto de viewport afrouxa junto: fica descontando o cabecalho da tela, nao os
  420px pensados para a tela cheia com o menu do sistema. Nao vira "sem teto" de
  proposito — sem teto nenhum, numa janela baixa a lista cresce e joga a rolagem
  no documento, que e trocar um incomodo por outro.
  **O quanto descontar importa mais do que parece.** O desconto tem de cobrir
  tudo o que a pagina gasta fora da lista: cabecalho da tela, faixa de titulo do
  cartao e os paddings. Medido no Alterar Acontecimento, isso da 127px. Com
  desconto menor que esse, a lista cresce 1px para cada 1px de janela e o
  documento fica SEMPRE alguns pixels maior que a janela: a popup cresce, o teto
  sobe junto, a lista revela mais uma linha, e a barrinha de rolagem nunca some —
  a janela persegue um conteudo que foge na mesma velocidade, ate bater no
  monitor. Com desconto maior, a conta fecha e a rolagem some.
  160px cobre os 127 medidos com folga para telas de cabecalho mais alto.
  De fora fica o fm-g12, onde quem manda e a lista e o formulario e o curto:
  la o teto de 420px continua sendo a medida certa.*/
.fm-g2 > .fm-col > .gd-card,
.fm-g21 > .fm-col > .gd-card { flex: 1 1 auto; min-height: 0px; }
.fm-g2 > .fm-col > .gd-card .gd-rol,
.fm-g21 > .fm-col > .gd-card .gd-rol { max-height: calc(100vh - 160px); }
.fm-pg a.gd-bt { text-decoration: none; }
.fm-pg .gd-bt .ic { color: inherit; cursor: inherit; }
/*Botao de acao na faixa de titulo da grade: o <input type="button">
  nao herda familia nem tamanho do pai.*/
.fm-pg input.gd-bt { font-family: var(--ui); font-size: 12px; font-weight: 600; }
.fm-tb tbody td { vertical-align: middle; }
/*Celula que so mostra: sem mao, para nao prometer clique.*/
.fm-tb tbody td.fm-sc { cursor: default; }
.fm-tb tbody td.fm-nm {
	text-align: left;
	max-width: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fm-tb tbody td.fm-mul { white-space: normal; text-overflow: clip; line-height: 16px; }
.fm-tb tbody td.fm-num { text-align: right; font-variant-numeric: tabular-nums; }
.fm-tb tbody td.fm-ct { text-align: center; }
.fm-tb tbody td.fm-ck-td { text-align: center; width: 1%; }
/*Item filho de uma lista com dois niveis (grupo e procedimento,
  evento e tarefa).*/
.fm-tb tbody td.fm-fi { padding-left: 26px; color: var(--tx-2); }
/*Arvore de categorias dentro da grade: o nivel vira recuo. Na 1.0
  cada nivel repetia quatro &nbsp; e emendava uma seta-subcat.gif no
  fim — o recuo dependia da fonte e a seta nao clicava em nada.*/
.fm-tb tbody td.fm-nv1 { padding-left: 10px; }
.fm-tb tbody td.fm-nv2 { padding-left: 28px; }
.fm-tb tbody td.fm-nv3 { padding-left: 46px; }
.fm-tb tbody td.fm-nv4 { padding-left: 64px; }
.fm-tb tbody td.fm-nv5 { padding-left: 82px; }
.fm-tb tbody td.fm-nv6 { padding-left: 100px; }
/*Divisoria entre os dois grupos da mesma grade — em cima o que ja
  esta na categoria, embaixo o que esta disponivel. Na 1.0 era um
  <tr> com height=14, que so abria um buraco sem dizer por que.*/
.fm-tb tbody tr.fm-sep td {
	height: 1px;
	padding: 0px;
	background-color: var(--ln-2);
	border-bottom: 0px;
}
.fm-tb tbody tr.fm-sep + tr td { padding-top: 10px; }
.fm-tb tbody td .fm-tar { color: var(--el-600); font-weight: 700; }
.fm-tb tbody td select.txt013 {
	font-family: var(--ui);
	font-size: 12px;
	height: 26px;
	padding: 0px 6px;
	box-sizing: border-box;
	border: 1px solid var(--ln-2);
	border-radius: 7px;
	background-color: #FFFFFF;
	color: var(--tx-1);
}
/*Larguras das colunas, escritas na celula do corpo pelo mesmo
  motivo da familia sel.php: e o corpo que o JS nao reescreve.*/
.fm-tb tbody td.fm-w5  { width: 5%; }
.fm-tb tbody td.fm-w10 { width: 10%; }
.fm-tb tbody td.fm-w15 { width: 15%; }
.fm-tb tbody td.fm-w20 { width: 20%; }
.fm-tb tbody td.fm-w25 { width: 25%; }
.fm-tb tbody td.fm-w30 { width: 30%; }
.fm-tb tbody td.fm-w40 { width: 40%; }
.fm-tb tbody td.fm-w50 { width: 50%; }

/* ---------- painel que o servidor preenche ----------
   A lista de dentistas e a de pacientes chegam prontas do SAJAX,
   com o HTML montado no PHP. A tela nao pode desenhar por dentro:
   o que ela faz e dar a moldura e o teto de rolagem.             */
.fm-lista {
	max-height: calc(100vh - 330px);
	min-height: 220px;
	overflow-y: auto;
	padding: 4px 10px 10px 10px;
	box-sizing: border-box;
}
.fm-lista table { max-width: 100%; }
/*Lista de contato: o CL_Add_Rem_Campo.js escreve <tr> dentro
  desta tabela, com o rotulo alinhado a direita e dois <div>
  flutuados. A tabela continua sendo tabela — mexer nisso e mexer
  no JS compartilhado —, so o desenho das celulas muda.

  QUALIFICADAS COM table: o nome fm-ct e usado com DOIS sentidos no
  sistema — aqui a TABELA da lista de contato (13 telas), e la em
  cima a CELULA centralizada da grade de formulario, .fm-tb tbody
  td.fm-ct (26 celulas em 17 arquivos). Sem o qualificador, o
  width: 100% daqui caia sobre aquelas celulas: numa grade, um td
  com 100% come toda a largura livre e espreme as colunas de texto
  ao lado.*/
table.fm-ct { width: 100%; border-collapse: collapse; }
table.fm-ct td {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-1);
	text-align: left;
	vertical-align: top;
	padding: 4px 8px 4px 0px;
}
table.fm-ct td:first-child { width: 1%; white-space: nowrap; }
table.fm-ct select.in-tx-txt003 { max-width: 190px; }

/* ---------- mensagem do CRUD ---------- */
.fm-msg {
	margin: 16px 0px 0px 2px;
	font-family: var(--ui);
	font-size: 13px;
}

/* ============================================================
   ps-  |  LISTA DE PESSOAS QUE O SAJAX DEVOLVE
   A lista de dentistas e a de pacientes que aparecem ao lado do
   formulario de inclusao nao sao escritas pela tela: chegam do
   `callback_pesquisa_dentistas` / `callback_pesquisa_pacientes`
   do `callbacks_ajax.js`, com o HTML montado em JavaScript. Por
   isso o desenho mora aqui, e nao no `<style>` de cada tela —
   era la que estavam o `.dv-dentista` e o `.dv-prop-dentista`,
   repetidos em oito arquivos e com valores diferentes.

   **O JS reescreve a className INTEIRA da linha** no hover
   (`tr-grid-ct-ln-sel` no over, `tr-grid-ct-ln1` no out), como
   faz o CL_CAD_SEL na familia sel.php: nenhuma classe de layout
   sobrevive ali. Por isso a linha e estilizada pela estrutura
   (`.ps-ls > div`) e nao por classe propria — o fundo continua
   vindo das `tr-grid-ct-*` que o JS escreve.

   A ficha que abre no clique (`.ps-cd`) **nasce com
   `display:none`**: quem liga e desliga e o `carrega_inf_dentista`
   pelo `style.display`, e sem o `none` inicial ela aparece aberta
   em cima da lista.
   ============================================================ */
.ps-ls > div {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--ln-1);
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-1);
}
/*A linha nasce sem classe nenhuma: o realce de passagem tem de
  valer antes do primeiro hover, quando o JS ainda nao escreveu a
  tr-grid-ct-ln1.*/
.ps-ls > div:hover { background-color: #EFF5FF; }
.ps-ls > div > .ic { flex: none; }
.ps-nm {
	flex: 1 1 auto;
	min-width: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}
.ps-ls > div:hover .ps-nm { color: var(--el-600); }
.ps-sem {
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-3);
	padding: 12px 10px;
	margin: 0px;
}

/* ---------- lista que abre embaixo do campo ----------
   Nas tres telas de pesquisa do dentista (adm-sel, agt-sel,
   crm-sel) a lista nao fica ao lado do formulario: abre embaixo do
   campo, conforme se digita. Na 1.0 era um <div> com
   `position:absolute; left:90px; height:300px; width:350px`
   escritos no HTML de cada tela — a lista caia sempre no mesmo
   ponto da janela, independente de onde o campo estivesse, e a
   altura era fixa mesmo com um resultado so.

   **Quem liga e desliga continua sendo o JS** pelo style.display
   (`callback_pesquisa_dentistas_2` liga, o clique na area vazia
   desliga), entao o `display:none` daqui e so o estado inicial. */
.ps-anc { position: relative; }
.ps-drop {
	display: none;
	position: absolute;
	z-index: 30;
	left: 0px;
	right: 0px;
	top: 100%;
	margin-top: 4px;
	max-height: 320px;
	overflow-y: auto;
	background-color: #FFFFFF;
	border: 1px solid var(--ln-1);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(16,24,40,.16);
	text-align: left;
}
.ps-drop .ps-ls > div:last-child { border-bottom: 0px; }

/* ---------- ficha que abre no clique ----------
   Flutua sobre a tela, e nao dentro da lista: a lista rola por
   dentro (overflow-y:auto) e um painel absoluto ali dentro sairia
   cortado no primeiro registro. Com position:fixed ele se ancora
   na janela — dentro do iframe do casco, na area visivel dele.  */
.ps-cd {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 40;
	width: 420px;
	max-width: calc(100vw - 32px);
	max-height: 84vh;
	overflow-y: auto;
	padding: 16px 18px;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border: 1px solid var(--ln-1);
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(16,24,40,.28);
	text-align: left;
	cursor: default;
}
.ps-cd-tt {
	font-family: var(--ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px 0px 8px 0px;
}
/*Campo com rotulo em cima, como na ficha de propriedades.*/
.ps-f {
	padding: 6px 0px;
	border-top: 1px solid #F0F3F6;
}
.ps-f i {
	display: block;
	font-style: normal;
	font-family: var(--ui);
	font-size: 11px;
	color: var(--tx-3);
	margin-bottom: 1px;
}
.ps-f b {
	display: block;
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-1);
	line-height: 18px;
	word-break: break-word;
}
.ps-sec {
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 600;
	color: var(--tx-3);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 12px 0px 4px 0px;
}
/*O get_contato devolve linhas de tabela prontas: a tabela fica,
  so o desenho muda. O rotulo volta para a esquerda.*/
.ps-ct { width: 100%; border-collapse: collapse; }
.ps-ct td {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-1);
	text-align: left;
	padding: 4px 10px 4px 0px;
	white-space: nowrap;
}
.ps-ct td:first-child {
	font-size: 11px;
	font-weight: 400;
	color: var(--tx-3);
	width: 1%;
}
.ps-foto { margin: 12px 0px 0px 0px; text-align: center; }
.ps-foto img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--ln-1);
	border-radius: 10px;
}
.ps-pe {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ln-1);
}
.ps-bt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0px 14px;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--tx-2);
	white-space: nowrap;
	cursor: pointer;
}
.ps-bt:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }
.ps-bt-pri {
	background-color: var(--el-500);
	border-color: var(--el-500);
	color: #FFFFFF;
}
.ps-bt-pri:hover { background-color: var(--el-600); border-color: var(--el-600); color: #FFFFFF; }

/* ============================================================
   rl-  |  TELA DE RELATORIO  (familia rel*.php)
   As telas que so mostram numero: a matriz de radiologias ou de
   estudos por mes (rel_rad_qtd_ped, rel_rad_qtd_est,
   rel_rad_val_ped, rel_rad_val_est e as seis adm-rel-*), a
   producao dos radiologistas (rel_radiologista_qtd_ser), as
   horas trabalhadas (rel_rad_hrs_trab), os rankings de dentista
   (rel_dentista/rel.php e rel_est.php) e os dois popups.

   Ao contrario do CRUD generico, cada relatorio tem o seu proprio
   conjunto de colunas — mas a moldura e sempre a mesma: cabecalho
   com titulo, cartao de filtro com os campos lado a lado e rotulo
   em cima, e um ou mais cartoes gd- com a tabela rolando por
   dentro. E isso que mora aqui; o que e de uma tela so (a largura
   de uma coluna, um campo especifico) sai das classes gerais
   abaixo. Nenhuma tela da familia tem <style> proprio.

   Nada aqui redefine classe de outro bloco: .tb-shadow-01,
   .gd-card, .gd-card-tt, .gd-rol, .gd-tb, .gd-sem, .gd-bt,
   .gd-up, .gd-down, .ic-*, .txt002, .txt013, .in-tx-txt003 e
   .in-bt-txt003 entram como estao — o que existe sao regras mais
   especificas dentro de .rl-pg / .rl-tb.
   ============================================================ */
.rl-pg {
	width: 100%;
	max-width: 1720px;
	margin: 0px auto;
	padding: 14px 16px 24px 16px;
	box-sizing: border-box;
	text-align: left;
}
/*Janela de altura fixa: a pagina e uma coluna de altura cheia e
  quem rola e a grade, por dentro do cartao. A altura cheia
  precisa comecar no <html>, e por isso a classe vai la: uma regra
  solta em "html, body" nesta folha valeria para as ~470 telas.*/
html.rl-h100, html.rl-h100 body { height: 100%; }
/*Popup: a janela e estreita e o conteudo nao tem por que se
  espalhar; o cartao para de crescer exatamente no fim da janela
  (max-height, nunca height — lista curta fica do tamanho dela).*/
.rl-pg-pop {
	max-width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 14px 16px 16px 16px;
}
.rl-pg-pop .rl-mx {
	flex: 1 1 auto;
	min-height: 0px;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	align-items: start;
}
.rl-pg-pop .rl-mx > .gd-card { max-height: 100%; }
.rl-pg-pop .rl-mx .gd-rol { max-height: none; }

/* ---------- cabecalho ---------- */
.rl-cab {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0px 0px 12px 2px;
}
.rl-cab-tx { min-width: 0px; }
.rl-tt {
	font-family: var(--ui);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
/*Complemento do titulo: e o mesmo texto da barra do menu, sem
  peso, para o nome da tela se ler primeiro.*/
.rl-tt span { font-weight: 400; color: var(--tx-3); }
.rl-sub {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-3);
	margin: 4px 0px 0px 0px;
}

/* ---------- cartao de filtro ----------
   Os campos que na 1.0 vinham numa tabela de rotulo a direita
   ficam lado a lado, com o rotulo em cima, e quebram sozinhos
   quando a janela aperta.                                      */
.rl-flt { margin-bottom: 16px; }
.rl-flt-bd { padding: 14px; box-sizing: border-box; }
.rl-flds {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
}
.rl-fld {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.rl-lb { white-space: nowrap; }
.rl-flds select.in-tx-txt003 { max-width: 280px; }
.rl-in-p { width: 90px; }
/*A largura do campo de data e o par inicio/fim vem do bloco
  CAMPO DE DATA, la em cima.*/
.rl-dt { display: inline-flex; align-items: center; gap: 6px; }
.rl-cal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0px;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	color: var(--tx-3);
	cursor: pointer;
}
.rl-cal:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }
/*Linha de botoes do filtro: fica na base, alinhada com os campos.*/
.rl-fld.rl-bts { flex-direction: row; align-items: center; gap: 10px; }
/*Nota ao lado de um campo (o que entra e o que nao entra na
  conta). Era um <em> solto depois do select.*/
.rl-nota {
	font-family: var(--ui);
	font-size: 11px;
	color: var(--tx-3);
	max-width: 420px;
	line-height: 15px;
}
.rl-pg a.gd-bt, .rl-pg a.rl-bt { text-decoration: none; }
.rl-pg .gd-bt .ic, .rl-pg .rl-bt .ic { color: inherit; cursor: inherit; }
.rl-bt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0px 14px;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--tx-2);
	white-space: nowrap;
	cursor: pointer;
}
.rl-bt:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }

/* ---------- seletor de acesso rapido ----------
   Os seis "Hoje / Ontem / Esta semana / ..." eram seis celulas de
   uma tabela, cada uma com o radio a esquerda e o onClick que
   submete. Viram seis posicoes de um seletor: **o radio continua
   dentro, com o mesmo name e o mesmo value**, e o onClick continua
   sendo o da celula — clicar no radio marca e submete, clicar na
   pilula submete o que ja estava marcado, exatamente como antes.
   Nao vira <label> de proposito: o label so marca o campo depois
   de despachar o clique, e o submit sairia com a posicao velha. */
.rl-sg {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rl-sg-it {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0px 12px;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--tx-2);
	white-space: nowrap;
	cursor: pointer;
}
.rl-sg-it:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }
.rl-sg-it input { cursor: pointer; margin: 0px; }
.rl-sg-on {
	background-color: var(--el-500);
	border-color: var(--el-500);
	color: #FFFFFF;
}
.rl-sg-on:hover { background-color: var(--el-600); border-color: var(--el-600); color: #FFFFFF; }

/* ---------- secoes e grades ---------- */
.rl-sec-tt {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 700;
	color: var(--tx-2);
	margin: 26px 0px 10px 2px;
}
/*Titulo de secao com uma etiqueta ao lado (a explicacao da conta,
  o total do bloco).*/
.rl-sec-tt span {
	font-weight: 500;
	color: var(--tx-3);
	margin-left: 8px;
}
/*Nome da radiologia: o rel_dentista repete o mesmo conjunto de
  rankings para cada uma, e o nome e o que separa um bloco do
  outro. O filete em cima e o que faz o corte se ver.*/
.rl-rad {
	font-family: var(--ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 32px 0px 0px 2px;
	padding-top: 20px;
	border-top: 1px solid var(--ln-2);
}
/*Os cartoes de uma linha esticam de proposito (o stretch padrao da
  grade): a altura de cada lista varia com o dado, e com
  align-items:start o cartao mais baixo parava onde o conteudo
  acabava e abria um degrau ate a linha de baixo. A sobra fica
  dentro do cartao, branca.*/
.rl-g2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.rl-g3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
/*Coluna principal + coluna de apoio (a lista de dentistas e o
  iframe de incluir tarefa do rel_est.php).*/
.rl-g21 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	gap: 16px;
	align-items: start;
}
.rl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1240px) {
	.rl-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
	.rl-g21 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
	.rl-g2, .rl-g3 { grid-template-columns: minmax(0, 1fr); }
}
.rl-esp { margin-top: 16px; }

/* ---------- matriz ----------
   Doze meses em coluna nao cabem em tela nenhuma sem rolar, e
   rolando o nome da linha sai da tela junto: a primeira coluna
   fica grudada na esquerda (position:sticky) e o cabecalho no
   topo, que ja vem do gd-tb. O fundo da celula grudada e
   `inherit` para acompanhar o zebrado e o realce de passagem que
   moram na <tr> — o JS reescreve a className da linha inteira e
   nenhuma classe de layout sobrevive ali.                       */
.rl-mx .gd-rol { max-height: calc(100vh - 260px); }
.rl-tb { width: 100%; border-collapse: collapse; }
.rl-tb tbody td { padding: 5px 9px; }
.rl-tb thead td.td-grid-tt.rl-nm, .rl-tb thead th.rl-nm {
	position: sticky;
	left: 0px;
	z-index: 3;
	text-align: left;
}
/*max-width:0 com width em porcentagem: o nome corta com
  reticencias em vez de empurrar os meses para fora da tela.*/
.rl-tb tbody td.rl-nm, .rl-tb tfoot td.rl-nm {
	position: sticky;
	left: 0px;
	z-index: 1;
	background-color: inherit;
	text-align: left;
	max-width: 0px;
	width: 20%;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
}
.rl-tb tfoot td.rl-nm { background-color: #F2F6F9; }
/*Coluna de mes: o algarismo de largura fixa e o que deixa a
  matriz se ler em coluna.*/
.rl-tb tbody td.rl-vl, .rl-tb tfoot td.rl-vl {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/*Celula da variacao: em cima o mes contra o anterior, embaixo o
  mes contra a media do periodo. Eram dois <font> com <br> no
  meio; as cores agora sao o verde e o vermelho da folha.*/
.rl-tb td.rl-var {
	text-align: right;
	line-height: 15px;
	font-variant-numeric: tabular-nums;
}
.rl-tb td.rl-var span { display: block; font-weight: 600; }
/*Coluna de total da linha, e linha de total da matriz: as duas
  precisam ser lidas como fecho, nao como mais um mes.*/
.rl-tb tbody td.rl-tot, .rl-tb tfoot td.rl-tot {
	font-weight: 700;
	border-left: 1px solid var(--ln-1);
}
.rl-tb tbody td.rl-to {
	background-color: #F2F6F9;
	border-top: 1px solid var(--ln-2);
	font-weight: 700;
}
.rl-tb tbody td.rl-to.rl-nm { background-color: #F2F6F9; }
.rl-tb td.rl-zero { color: #B6C1CB; }
/*Producao do dia contra a meta do radiologista: abaixo, igual e
  acima. Eram tres <font> com cor inline (#B20000, #004000,
  #2626FF); aqui saem do mesmo verde/vermelho/azul da folha.*/
.rl-tb td .rl-mt-ab { color: #B23434; font-weight: 600; }
.rl-tb td .rl-mt-ig { color: #1F7A38; font-weight: 600; }
.rl-tb td .rl-mt-ac { color: var(--el-500); font-weight: 600; }

/* ---------- lista de rotulo e valor ----------
   Meia duzia de numeros que nao formam tabela (o inicio e o fim
   das atividades, as horas trabalhadas). Rotulo a esquerda, valor
   a direita, um por linha.                                      */
.rl-li { padding: 4px 14px 12px 14px; }
.rl-li > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0px;
	border-bottom: 1px solid #F0F3F5;
}
.rl-li > div:last-child { border-bottom: 0px; }
.rl-li i {
	font-style: normal;
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-2);
}
.rl-li b {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-1);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/*O numero que a tela existe para mostrar.*/
.rl-li b.rl-dest {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ---------- mensagem e pe ---------- */
.rl-msg { padding: 10px 12px; text-align: center; }
.rl-pe {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 12px;
	border-top: 1px solid var(--ln-1);
}
.rl-pe-ce { justify-content: center; }
/*Contagem do que a grade mostra: fica na ponta esquerda do pe, do
  lado oposto ao das acoes.*/
.rl-pe-inf { margin-right: auto; }
/*Cartao que so carrega um iframe: sem recuo, para o quadro de
  dentro encostar na borda.*/
.rl-ifr { padding: 0px; box-sizing: border-box; }
.rl-ifr iframe { width: 100%; border: 0px; display: block; }

/* ============================================================
   ge-  |  TELA DE GERENCIAMENTO  (familia ger.php)
   As cinco telas que a 1.0 chamava de gerenciamento: escolher ou
   criar uma campanha (campanha), a arvore de eventos e tarefas
   (crm_evento), a sanfona de questionarios com perguntas e
   respostas (crm_questionario), as duas arvores de categorias com
   avisos e acontecimentos (crm_cat_acon_avis) e o painel de
   geracao do historico (modulo_desenv).

   Ao contrario do CRUD generico, aqui nao ha duas telas iguais:
   cada uma mostra uma estrutura propria, e o que a ger.php tem em
   comum e ser a tela onde varias acoes de cadastro convivem numa
   pagina so. O que se repete — e o que mora aqui — e a moldura:
   cabecalho com titulo, contexto e barra de acoes; cartao de
   campos ou de filtro; grade gd- com as acoes na primeira coluna
   e o nome recuado por nivel; o pe com a mensagem do CRUD.

   O recuo por nivel e o mesmo desenho do fm-nvN (arvore dentro do
   formulario), escrito aqui com o nome ge- em vez de reaproveitar
   o outro: a regra qualificada la e .fm-tb tbody td.fm-nvN, e
   pendurar a tela nessa selecao seria amarra-la ao bloco do
   formulario de cadastro, que muda por outro motivo.

   Nada aqui redefine classe de outro bloco: .tb-shadow-01,
   .gd-card, .gd-card-tt, .gd-rol, .gd-tb, .gd-sem, .gd-bt,
   .gd-acoes, .ic-*, .txt00*, .in-tx-txt003 e .in-bt-txt003 entram
   como estao — o que existe sao regras mais especificas dentro de
   .ge-pg / .ge-tb / .ge-cd.
   ============================================================ */
.ge-pg {
	width: 100%;
	max-width: 1720px;
	margin: 0px auto;
	padding: 14px 16px 24px 16px;
	box-sizing: border-box;
	text-align: left;
}
/*Tela de poucas escolhas (a campanha, o painel de geracao): sem
  teto menor os dois cartoes viram duas faixas de 800px com um
  select no meio.*/
.ge-pg-md { max-width: 1100px; }

/*Tela em que a grade E o corpo da pagina — nao ha nada abaixo dela.
  Aqui o cartao vai ate o fim da janela e quem rola e a lista, por
  dentro dele: com o teto em vh do .ge-gd a grade parava antes do
  fim e sobrava uma faixa cinza embaixo, do tamanho do erro da
  conta. Altura cheia, e nao vh, porque a tela vive dentro do
  iframe do casco, cuja altura o ajusta_iframe() ja calculou.

  A altura precisa comecar no <html>, e por isso a classe vai la:
  uma regra solta em "html, body" nesta folha valeria para as ~470
  telas. Mesmo caminho do html.rl-h100 dos popups de relatorio.*/
html.ge-h100, html.ge-h100 body { height: 100%; }
.ge-pg-al {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding-bottom: 16px;
}
/*O bloco que ocupa a sobra: a grade de duas colunas numa tela, o
  cartao sozinho na outra. O min-height:0 e o que deixa ele
  encolher abaixo do proprio conteudo — sem isso a lista empurra a
  pagina e a rolagem volta para a janela, que e o que se quer
  evitar.*/
.ge-pg-al .ge-mx { flex: 1 1 auto; min-height: 0px; }
/*Os dois cartoes da linha vao ate o fim dela e a sobra fica dentro
  do cartao, branca: e o stretch padrao da grade, e e o que faz as
  duas caixas terminarem juntas mesmo com listas de tamanhos
  diferentes.*/
.ge-pg-al .ge-mx > .gd-card, .ge-pg-al .gd-card.ge-mx { max-height: 100%; }
/*Com a altura vindo de cima, o teto em vh nao manda mais — quem
  limita a rolagem passa a ser o cartao.*/
.ge-pg-al .ge-gd .gd-rol { max-height: none; }

/* ---------- cabecalho e barra de acoes ---------- */
.ge-cab {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0px 0px 12px 2px;
}
.ge-cab-tx { min-width: 0px; }
.ge-tt {
	font-family: var(--ui);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
.ge-sub {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-3);
	margin: 4px 0px 0px 0px;
}
.ge-acoes {
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.ge-bt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 30px;
	padding: 0px 14px;
	background-color: transparent;
	border: 1px solid var(--ln-2);
	border-radius: 8px;
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--tx-2);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.ge-bt:hover { background-color: #EFF5FF; border-color: var(--el-500); color: var(--el-600); }
a.ge-bt { text-decoration: none; }
/*O <input type="button"> nao herda familia nem tamanho do pai.*/
input.ge-bt, button.ge-bt { font-family: var(--ui); font-size: 12px; font-weight: 600; }
/*Dentro do botao o icone nao tem cor propria: acompanha o botao,
  inclusive o branco do primario.*/
.ge-bt .ic { color: inherit; cursor: inherit; }
.ge-bt .ic:hover { color: inherit; }
.ge-pg a.gd-bt { text-decoration: none; }
.ge-pg .gd-bt .ic { color: inherit; cursor: inherit; }
.ge-pg input.gd-bt, .ge-pg button.gd-bt { font-family: var(--ui); font-size: 11px; font-weight: 600; }
.ge-bt-pri {
	background-color: var(--el-500);
	border-color: var(--el-500);
	color: #FFFFFF;
}
.ge-bt-pri:hover { background-color: var(--el-600); border-color: var(--el-600); color: #FFFFFF; }
/*Unico botao com hover vermelho, pelo mesmo motivo do pr-bt-del e
  do fm-bt-del: apaga registro.*/
.ge-bt-del:hover { background-color: #FCEDED; border-color: #E7B7B7; color: #B23434; }

/* ---------- secoes e grades ---------- */
.ge-sec-tt {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 700;
	color: var(--tx-2);
	margin: 26px 0px 10px 2px;
}
/*Duas listas irmas lado a lado (avisos e acontecimentos, escolher
  e criar). Os cartoes esticam de proposito: as duas arvores tem
  alturas diferentes e com align-items:start a mais curta abria um
  vao cinza ate o fim da linha.*/
.ge-g2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.ge-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0px;
}
.ge-esp { margin-top: 16px; }
@media (max-width: 1240px) {
	.ge-g2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- cartao de campos ---------- */
.ge-cd {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px 14px 16px;
}
.ge-cd-tt {
	font-family: var(--ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
.ge-cd-sub {
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-3);
	margin: 3px 0px 0px 0px;
}
/*Campos lado a lado com rotulo em cima, como no cartao de filtro
  das outras familias: na 1.0 vinham empilhados numa tabela de
  rotulo a direita.*/
.ge-flds {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin-top: 12px;
}
.ge-fld {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0px;
}
.ge-lb {
	font-family: var(--ui);
	font-size: 12px;
	font-weight: 500;
	color: var(--tx-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ge-fld select.in-tx-txt003, .ge-fld input.in-tx-txt003 { width: 100%; }
.ge-fld-g { flex: 1 1 340px; }
.ge-flds select.in-tx-txt003 { max-width: 460px; }
/*Fileira de botoes dentro da barra de campos: acompanha a linha
  de baixo dos campos e quebra junto com eles.*/
.ge-fld-ac { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- pe do cartao: as acoes ---------- */
.ge-pe {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0px 0px 0px;
	padding-top: 12px;
	border-top: 1px solid var(--ln-1);
}
.ge-pe-so { border-top: 0px; padding-top: 0px; }
.ge-pe input.in-bt-txt003 { min-width: 110px; }

/* ---------- grade ----------
   A arvore inteira vem de uma vez (nao ha paginacao aqui), entao
   ela rola por dentro do cartao com o cabecalho grudado. As
   classes vao nas celulas, nunca na <tr>: o efeito_grid_ln_01 do
   CL_CAD_SEL reescreve a className da linha inteira no passar do
   mouse, como na familia sel.php.                               */
.ge-gd .gd-rol { max-height: calc(100vh - 300px); }
.ge-gd-p .gd-rol { max-height: calc(100vh - 420px); }
.ge-tb tbody td { vertical-align: middle; }
/*Coluna de acoes: as quatro, cinco ou seis celulas de imagem da
  1.0 viraram uma so, com os icones do catalogo.*/
.ge-tb tbody td.ge-ac {
	text-align: left;
	white-space: nowrap;
	width: 1%;
	cursor: default;
}
.ge-tb tbody td.ge-ac a { text-decoration: none; }
.ge-tb tbody td.ge-ac .ic { margin-right: 10px; }
/*Espaco reservado para o icone que aquela linha nao tem, para as
  acoes de todas as linhas ficarem na mesma coluna. Era uma <td>
  vazia no desenho antigo.*/
.ge-tb tbody td.ge-ac .ge-vg { display: inline-block; width: 16px; margin-right: 10px; vertical-align: middle; }
/*max-width:0 com width em porcentagem: o nome corta com
  reticencias em vez de empurrar a tabela.*/
.ge-tb tbody td.ge-nm {
	text-align: left;
	max-width: 0px;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ge-tb tbody td.ge-sc { cursor: default; }
.ge-tb tbody td.ge-ct { text-align: center; }
/*Arvore dentro da grade: o nivel vira recuo. Na 1.0 cada nivel
  repetia quatro &nbsp; e emendava uma seta-subcat.gif no fim — o
  recuo dependia da fonte e a seta nao clicava em nada.*/
.ge-tb tbody td.ge-nv1 { padding-left: 10px; }
.ge-tb tbody td.ge-nv2 { padding-left: 28px; }
.ge-tb tbody td.ge-nv3 { padding-left: 46px; }
.ge-tb tbody td.ge-nv4 { padding-left: 64px; }
.ge-tb tbody td.ge-nv5 { padding-left: 82px; }
.ge-tb tbody td.ge-nv6 { padding-left: 100px; }
.ge-tb tbody td.ge-nv7 { padding-left: 118px; }
/*Categoria: e o galho da arvore, nao o registro — fica no texto
  normal e o item pendurado nela e que ganha cor.*/
.ge-tb tbody td .ge-cat { font-weight: 600; }
/*Item pendurado numa categoria (o aviso, o acontecimento, a
  tarefa): era um <b style="color:#004F75"> escrito na classe.*/
.ge-tb tbody td .ge-it { color: var(--el-600); font-weight: 700; }
/*Os dois estados do aviso/acontecimento na tela de categorias:
  verde ja esta programado no sistema, vermelho ainda nao. O if
  que decide continua igual, gravando o mesmo hex; um mapa de uma
  linha na tela traduz o hex na classe.*/
.ge-tb tbody td .ge-prg { color: #1F7A38; font-weight: 700; }
.ge-tb tbody td .ge-nprg { color: #B23434; font-weight: 700; }
/*Pergunta obrigatoria: o asterisco que na 1.0 vinha colado no
  nome, em preto, e ninguem via.*/
.ge-tb tbody td .ge-ob { color: #B23434; font-weight: 700; margin-right: 4px; }
/*A resposta como ela aparece para quem responde o questionario —
  o radio, a caixa ou o campo de texto. E amostra, nao formulario:
  quem escreve ali nao manda nada para lugar nenhum.*/
.ge-tb tbody td .ge-rp {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-2);
}
.ge-tb tbody td .ge-rp input.in-tx-txt003 { height: 26px; font-size: 12px; }

/* ---------- sanfona de questionarios ----------
   Cada questionario e um cartao que abre e fecha no clique do
   nome. Quem abre e fecha continua sendo o perguntas() da tela,
   trocando o style.display do dv-per-N entre 'none' e 'block' —
   e o verifica_abas() le exatamente essa string para saber quais
   abas estavam abertas. Por isso o corpo do cartao continua sendo
   um <div> comum, com o display inline, e nao um bloco escondido
   por classe.                                                   */
.ge-qu { margin-bottom: 12px; }
/*O alvo do clique e o nome, nao a faixa inteira: os icones de acao
  moram na mesma faixa e um clique neles nao pode abrir a lista de
  quebra. Por isso o nome ocupa toda a sobra da faixa.*/
.ge-qu-nm {
	flex: 1 1 auto;
	min-width: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}
.ge-qu-nm:hover { color: var(--el-600); }
/*A linha divisoria pertence ao corpo, nao ao titulo: no titulo ela
  aparecia solta no pe do cartao fechado, e somava 2px com a do
  corpo quando ele abria. Regra mais especifica, dentro do .ge-qu —
  a .gd-card-tt continua como esta em todas as outras telas.*/
.ge-qu .gd-card-tt { border-bottom: 0px; }
.ge-qu-bd { border-top: 1px solid var(--ln-1); }
.ge-qu-bd .gd-rol { max-height: calc(100vh - 340px); }

/* ---------- quadro que carrega outra tela ----------
   O painel de geracao mostra o registro escolhido e a base do
   dentista em dois iframes, cuja altura o ajusta_iframe_cont()
   acerta pelo conteudo de um em um segundo. O cartao so da a
   moldura: recuo zero, para o quadro encostar na borda.        */
.ge-ifr { padding: 0px; box-sizing: border-box; }
.ge-ifr iframe { width: 100%; border: 0px; display: block; }

/* ---------- mensagem e pe ---------- */
.ge-rod {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 12px;
	border-top: 1px solid var(--ln-1);
}
.ge-msg {
	margin: 16px 0px 0px 2px;
	font-family: var(--ui);
	font-size: 13px;
}

/* ============================================================
   hs-  |  CRM: FEED, HISTORICO E TAREFA
   As telas em que o CRM conversa com quem atende: o feed de
   avisos e acontecimentos, o feed de tarefas, a arvore de onde
   se escolhe o acontecimento a registrar, a ficha do registro e
   o painel que dispara tarefas para um dentista ou para um grupo
   deles. Ficam em crm_acon_avis/ e crm_tarefa/, quase sempre
   dentro de popup ou de iframe.

   Nada aqui redesenha peca de outro bloco: o cabecalho, o cartao
   de campos, o pe de acoes e a mensagem sao o `fm-` da familia de
   cadastro (as telas SAO formulario); a lista e a `gd-`; os
   icones sao o catalogo `ic-`. O que mora aqui e o que nao existe
   em nenhuma outra familia:

     a arvore de acontecimentos, que abre e fecha por categoria
     raiz e cujas linhas o PHP monta dentro das classes
     CL_CRM_Cat_Acontecimento_Aviso e CL_CRM_Acontecimento_Aviso;
     a sanfona de dentistas do disparo em grupo;
     o quadro lateral que carrega a tela de inclusao;
     a marca de "tem observacao" e as faixas que dividem um feed
     em pendentes, agendadas e vencidas.
   ============================================================ */

/* ---------- secoes e grades ----------
   A ficha do registro e estreita e o que ela puxa (tarefas
   disparadas, historico relacionado) e largo: as duas colunas nao
   sao iguais, e a estreita e a da esquerda.                     */
.hs-g12 {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 16px;
}
.hs-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0px;
}
@media (max-width: 1240px) {
	.hs-g12 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- arvore de acontecimentos ----------
   Na 1.0 cada nivel repetia quatro &nbsp; e emendava uma
   seta-subcat.gif; o recuo dependia da fonte e a seta nao clicava
   em nada. O nivel vira recuo de verdade e o alvo do clique passa
   a ser so o nome da categoria raiz — que e quem abre e fecha.

   **Quem abre e fecha continua sendo o aparecer_dv() da tela**,
   trocando style.display do dv-aparecer-N entre 'none' e 'block':
   por isso o corpo continua sendo um <div> comum com o display
   inline, e nao um bloco escondido por classe.                 */
.hs-arv {
	padding: 4px 2px 6px 2px;
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-1);
}
/*Categoria raiz: e ela que abre a lista, entao e a unica com mao.*/
.hs-cat {
	display: block;
	padding: 7px 10px;
	margin: 2px 0px;
	border-radius: 8px;
	font-weight: 700;
	color: var(--tx-1);
	cursor: pointer;
}
.hs-cat:hover { background-color: #EFF5FF; color: var(--el-600); }
/*Subcategoria: so organiza, nao clica.*/
.hs-sub-cat {
	display: block;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tx-2);
	text-transform: uppercase;
	letter-spacing: .03em;
}
/*O acontecimento em si: o radio e o nome sao um alvo so.*/
.hs-ac {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	border-radius: 8px;
	color: var(--el-600);
	font-weight: 600;
	cursor: pointer;
}
.hs-ac:hover { background-color: #EFF5FF; }
.hs-ac input { cursor: pointer; flex: 0 0 auto; margin: 0px; }
.hs-ac span { min-width: 0px; }
/*O nivel vira recuo. Vale para a categoria e para o acontecimento
  — os dois descem juntos, senao o filho fica a esquerda do pai.*/
.hs-nv1 { margin-left: 0px; }
.hs-nv2 { margin-left: 18px; }
.hs-nv3 { margin-left: 36px; }
.hs-nv4 { margin-left: 54px; }
.hs-nv5 { margin-left: 72px; }
.hs-nv6 { margin-left: 90px; }
/*Teto de rolagem: a arvore de seis niveis passa de qualquer tela.*/
.hs-arv-rol {
	max-height: calc(100vh - 200px);
	min-height: 180px;
	overflow-y: auto;
}

/* ---------- quadro que carrega a tela de inclusao ----------
   O iframe da direita recebe a inc-his.php do acontecimento
   escolhido. O ajusta_iframe_cont() da tela continua acertando a
   altura pelo conteudo de um em um segundo; o cartao so da a
   moldura, com recuo zero para o quadro encostar na borda.     */
.hs-ifr { padding: 0px; box-sizing: border-box; }
.hs-ifr iframe { width: 100%; border: 0px; display: block; }

/* ---------- sanfona de dentistas ----------
   No disparo em grupo cada dentista e uma faixa que abre a lista
   de eventos e tarefas dele. Na 1.0 era uma tabela com um .jpg de
   dentista num fundo azul-marinho, e a faixa inteira era o alvo do
   clique. **Quem abre e fecha continua sendo o appear_dv()**, com
   o mesmo style.display no dv-tar-dnt-N.                       */
.hs-dnt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 700;
	color: var(--tx-1);
	cursor: pointer;
}
.hs-dnt:hover { background-color: #F7FAFD; }
.hs-dnt .ic { color: var(--tx-3); cursor: inherit; }
.hs-dnt:hover .ic { color: var(--el-500); }
.hs-dnt-nm {
	min-width: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*Corpo da sanfona. O display inline que o JS troca manda; a classe
  so guarda o estado inicial e o respiro.*/
.hs-dnt-bd { border-top: 1px solid var(--ln-1); }

/* ---------- feed e listas ----------
   Um feed nao e uma tabela de numeros: e uma lista de coisas que
   aconteceram, em ordem. A grade continua sendo a gd-; o que muda
   sao as colunas que ela ganha aqui.                           */
.hs-gd .gd-rol { max-height: calc(100vh - 210px); }
.hs-gd-p .gd-rol { max-height: calc(100vh - 300px); }
.hs-tb tbody td { vertical-align: middle; }
.hs-tb tbody td.hs-dt {
	text-align: center;
	width: 1%;
	white-space: nowrap;
	color: var(--tx-2);
	font-variant-numeric: tabular-nums;
}
.hs-tb tbody td.hs-ac-td { text-align: center; width: 1%; }
.hs-tb tbody td.hs-nm {
	text-align: left;
	max-width: 0px;
	width: 30%;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.hs-tb tbody tr:hover td.hs-nm { color: var(--el-600); }
/*Aviso de aniversario de SECRETARIA: a coluna continua falando do dentista, e por
  isso ele vem primeiro, apagado, com o nome dela em seguida. Nomes novos, nenhuma
  regra existente tocada — o texto da celula continua sendo o que o hs-nm manda*/
.hs-nm-dnt {
	color: var(--tx-3);
	font-weight: 400;
}
.hs-nm-sct::before {
	content: ' \203A ';
	color: var(--tx-3);
}
/*O que aconteceu: e o dado principal da linha, entao e ele que
  leva a cor de acao. Na 1.0 era um <b style="color: #004F75">.*/
.hs-tb tbody td.hs-tt {
	text-align: left;
	max-width: 0px;
	width: 55%;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.hs-tb tbody td.hs-tt .hs-tx { color: var(--el-600); font-weight: 700; }
.hs-tb tbody tr:hover td.hs-tt .hs-tx { color: var(--el-500); }
.hs-tb tbody td.hs-ct { text-align: center; }
.hs-tb tbody td.hs-cd { text-align: center; width: 1%; color: var(--tx-3); font-variant-numeric: tabular-nums; }
/*O evento que a tarefa cumpre, ao lado do nome dela.*/
.hs-tb tbody td .hs-ev { color: var(--tx-3); font-weight: 400; }
/*Item filho de uma lista de dois ou tres niveis: evento, tarefa e
  agente. O recuo diz o nivel; a cor diz o tipo.*/
.hs-tb tbody td.hs-n1 { padding-left: 10px; }
.hs-tb tbody td.hs-n2 { padding-left: 30px; }
.hs-tb tbody td.hs-n3 { padding-left: 50px; }
.hs-tb tbody td .hs-tar { color: var(--el-600); font-weight: 700; }
.hs-tb tbody td .hs-agt { color: var(--tx-2); }
/*Faixa que divide o feed em blocos — pendentes, agendadas,
  vencidas. Na 1.0 eram duas linhas vazias e um <b> solto no meio
  da tabela, sem nada dizendo onde um bloco acabava.*/
.hs-tb tbody tr.hs-bl td {
	background-color: #F2F6F9;
	border-top: 1px solid var(--ln-2);
	border-bottom: 1px solid var(--ln-2);
	padding: 6px 9px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tx-2);
	text-align: left;
}
/*Estado do registro, escrito por extenso ao lado da linha.*/
.hs-et {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 19px;
	padding: 0px 8px;
	border-radius: 999px;
	background-color: #EEF2F6;
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 600;
	color: var(--tx-2);
	white-space: nowrap;
}
.hs-et-ok { background-color: #E8F6EC; color: #1F7A38; }
.hs-et-al { background-color: #FCEDED; color: #B23434; }
/*Marca de "tem observacao da administracao", colada no nome. Na
  1.0 era a info-icon.png com dois &nbsp; depois.*/
.hs-in { margin-right: 6px; color: var(--tx-3); }

/* ---------- pe centralizado ----------
   "Marcar todos como visualizado" nao age sobre uma linha: age
   sobre a lista inteira, e por isso fica embaixo dela e nao na
   faixa de titulo.                                             */
.hs-pe {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 16px 0px 0px 0px;
}

/* ============================================================
   pn-  |  PAINEL DE QUADROS
   As telas de abertura de cada perfil: a do administrador
   (home/adm.php), a do agente (crm_geral/ini_agente.php) e a de
   incumbencias (crm_geral/ini_incumbencia.php). Nenhuma delas tem
   dado proprio — sao um arranjo de quadros, cada um carregando
   uma tela de feed num iframe.

   Na 1.0 cada quadro vinha em duas molduras: uma faixa de titulo
   na tela de fora e a tabela do feed no quadro de dentro. O
   titulo nao acompanhava a rolagem e as duas molduras nao se
   encaixavam. Agora **o cartao inteiro vem de dentro** (`pn-emb`
   com um `gd-card`), e o que mora aqui e so a distribuicao: a
   grade que arruma os quadros e a altura de cada um.
   ============================================================ */
.pn-pg {
	width: 100%;
	max-width: 1720px;
	margin: 0px auto;
	padding: 14px 16px 24px 16px;
	box-sizing: border-box;
	text-align: left;
}
.pn-cab { margin: 0px 0px 4px 2px; }
.pn-tt {
	font-family: var(--ui);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
.pn-sub {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-3);
	margin: 4px 0px 0px 0px;
}
.pn-sec-tt {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 700;
	color: var(--tx-2);
	margin: 26px 0px 10px 2px;
}
.pn-g2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}
@media (max-width: 1100px) {
	.pn-g2 { grid-template-columns: minmax(0, 1fr); }
}
/*O quadro nao tem moldura propria: quem desenha o cartao e a tela
  de dentro. Aqui so se garante que ele nao estoure a coluna.*/
.pn-qd { min-width: 0px; }
.pn-qd iframe { width: 100%; border: 0px; display: block; }

/*A pagina de quem esta DENTRO de um quadro: os cinco feeds do CRM
  e as duas listas de pendentes da integracao. Ela nao tem
  cabecalho de tela — o cartao ja se apresenta — e o recuo e so o
  que a sombra do cartao precisa para nao sair cortada.*/
.pn-emb {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	text-align: left;
}

/* ============================================================
   hm-  |  PAGINA INSTITUCIONAL
   As telas do diretorio home/ que nao tem dado nenhum: painel de
   controle, termos de uso, politica de privacidade, contato e os
   dois avisos (sistema em atualizacao, conteudo restrito).

   Sao as unicas telas do sistema que uma pessoa de fora pode ler,
   e na 1.0 eram as unicas que carregavam a `slave.css` — uma
   folha a parte, com fonte e cores que nao existem em lugar
   nenhum. Passam a usar a folha compartilhada como todas as
   outras; a `slave.css` deixa de ser referenciada por elas.
   ============================================================ */
.hm-pg {
	width: 100%;
	max-width: 900px;
	margin: 0px auto;
	padding: 32px 16px 40px 16px;
	box-sizing: border-box;
	text-align: left;
}
.hm-tt {
	font-family: var(--ui);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tx-1);
	margin: 0px 0px 4px 0px;
}
.hm-sub {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--tx-3);
	margin: 0px 0px 22px 0px;
}
.hm-cd {
	padding: 22px 24px;
	box-sizing: border-box;
}
.hm-tx {
	font-family: var(--ui);
	font-size: 14px;
	line-height: 24px;
	color: var(--tx-1);
	margin: 0px;
}
.hm-tx + .hm-tx { margin-top: 16px; }
.hm-tx b { font-weight: 700; }
/*Ilustracao da pagina: acompanha a largura e nao passa de um
  terco da altura util, para o texto continuar sendo o assunto.*/
.hm-ilu { margin: 0px 0px 20px 0px; text-align: center; }
.hm-ilu img { max-width: 100%; height: auto; }
/*Aviso de tela inteira: sistema em atualizacao, conteudo
  restrito. Um cartao centrado, sem nada em volta.*/
.hm-av {
	max-width: 620px;
	margin: 48px auto;
	padding: 28px 26px;
	box-sizing: border-box;
	text-align: center;
}
.hm-av-tt {
	font-family: var(--ui);
	font-size: 17px;
	font-weight: 700;
	color: var(--tx-1);
	margin: 14px 0px 8px 0px;
}
.hm-av-tx {
	font-family: var(--ui);
	font-size: 14px;
	line-height: 23px;
	color: var(--tx-2);
	margin: 0px;
}
.hm-av .ic { width: 34px; height: 34px; cursor: default; }
.hm-av .ic:hover { color: inherit; }

/* ============================================================
   rt-  |  ROTINA: A TELA QUE EXECUTA E SE ACOMPANHA
   As telas de PRG/loja/ITF/processos_automaticos: reclassificar as
   sete segmentacoes, gerar o historico de avisos e acontecimentos,
   apagar arquivos antigos, gerar as coordenadas do mapa de calor e
   fechar o pagamento das radiologias.

   Nao sao cadastro nem relatorio. A pessoa dispara uma rotina longa
   e fica olhando ela andar: a tela se ressubmete sozinha de meio em
   meio segundo, de dois em dois, de cinco em cinco ou de dez em dez,
   conforme a rotina, ate chegar ao fim. Na 1.0 isso aparecia como
   duas ou tres tabelas soltas com o texto "GERANDO HISTORICOS" em
   caixa alta, sem dizer o que estava sendo processado nem que a
   pagina ia se recarregar.

   O cabecalho, o cartao, os campos, o pe de acoes e a mensagem sao o
   `fm-` da familia de cadastro; as listas sao a `gd-`; os icones sao
   o catalogo `ic-`. Aqui mora so o que nao existe em nenhuma outra
   familia:
     - o cartao de opcao, para as telas que disparam de dois jeitos
       (so o ultimo mes / a historia toda);
     - o painel de andamento, com a barra que NAO mede — nenhuma
       dessas rotinas sabe dizer quanto falta em porcentagem, e uma
       barra que finge medir mente;
     - a faixa de conclusao.

   Uma coisa que estas telas NAO mostram: a radiologia. O banco em uso
   e escolhido no cabecalho do sistema e e de uma radiologia so, entao
   daquele ponto em diante tudo acontece dentro dela. Repetir o nome em
   cada rotina seria dizer de novo o que a tela inteira ja diz — e os
   lacos que "percorrem as radiologias", herdados do produto de onde
   este framework veio, dao uma volta e param.
   ============================================================ */

/* ---------- opcoes de disparo ---------- */
/*Cada jeito de disparar a rotina e um bloco com nome, explicacao e
  botao proprio. Antes eram dois <input type="submit"> empilhados com
  <br /> no meio, e o campo que parametrizava o segundo aparecia
  depois dele.*/
.rt-ops {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 4px 0px 0px 0px;
}
@media (min-width: 820px) {
	.rt-ops-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.rt-op {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 14px 16px 16px 16px;
	border: 1px solid var(--ln-1);
	border-radius: 10px;
	background-color: #FFFFFF;
}
.rt-op-tt {
	font-family: var(--ui);
	font-size: 14px;
	font-weight: 700;
	color: var(--tx-1);
	margin: 0px;
}
.rt-op-ds {
	font-family: var(--ui);
	font-size: 12px;
	line-height: 19px;
	color: var(--tx-3);
	margin: 5px 0px 0px 0px;
}
/*O <form> fica entre o cartao e o pe — e cada opcao tem o seu, porque
  cada uma posta um "ini" diferente. Sem esta regra o form e um bloco
  comum no meio da coluna flex, o margin-top:auto do pe nao tem contra
  o que empurrar, e o botao da opcao mais curta sobe, deixando o vao
  embaixo em vez de alinhar com o botao da opcao ao lado.*/
.rt-op form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
/*O campo que parametriza a opcao fica dentro dela, acima do botao —
  nao embaixo, como estava.*/
.rt-op-f { margin: 12px 0px 0px 0px; }
.rt-op-f .fm-lb { display: block; margin: 0px 0px 5px 0px; }
.rt-op-pe { margin-top: auto; padding-top: 14px; }

/* ---------- painel de andamento ---------- */
.rt-and { display: flex; flex-direction: column; gap: 14px; }
.rt-and-tt {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tx-1);
	margin: 0px;
}
.rt-and-tt .ic { width: 18px; height: 18px; cursor: default; color: var(--el-500); }
.rt-and-tt .ic:hover { color: var(--el-500); }
/*Barra que anda sem medir: a faixa azul atravessa o trilho em ciclo.
  Nenhuma dessas rotinas sabe a porcentagem restante, entao a barra
  diz "esta trabalhando", nao "falta tanto".*/
.rt-br {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background-color: var(--ln-1);
	overflow: hidden;
}
.rt-br i {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 34%;
	border-radius: 999px;
	background-color: var(--el-500);
	animation: rt-anda 1.5s ease-in-out infinite;
}
@keyframes rt-anda {
	0%   { left: -34%; }
	100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.rt-br i { animation: none; left: 0px; width: 100%; opacity: .45; }
}
/*Os numeros do andamento: o que esta sendo processado agora e o que
  ainda falta. Um por celula, rotulo em cima e valor grande embaixo.*/
.rt-gr {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px 18px;
}
.rt-it {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0px;
}
.rt-lb {
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tx-3);
}
.rt-vl {
	font-family: var(--ui);
	font-size: 19px;
	font-weight: 700;
	color: var(--tx-1);
	font-variant-numeric: tabular-nums;
}
.rt-vl-p { font-size: 15px; font-weight: 600; }
/*A tela se ressubmete sozinha; quem esta olhando precisa saber
  disso, senao fecha a janela no meio.*/
.rt-esp {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ui);
	font-size: 12px;
	color: var(--tx-3);
	margin: 0px;
}
.rt-esp .ic { width: 15px; height: 15px; cursor: default; }
.rt-esp .ic:hover { color: inherit; }

/* ---------- conclusao ---------- */
.rt-fim {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid #CDE6D5;
	border-radius: 10px;
	background-color: #E8F6EC;
}
.rt-fim .ic { width: 20px; height: 20px; cursor: default; color: #1F7A38; }
.rt-fim .ic:hover { color: #1F7A38; }
.rt-fim-tt {
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 700;
	color: #1F7A38;
	margin: 0px;
}

/* ---------- grades da tela de rotina ---------- */
/*minmax(0,1fr) porque as celulas levam grade com nowrap dentro: sem
  ele uma linha comprida estoura a coluna.*/
.rt-g3 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
@media (min-width: 820px) {
	.rt-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
	.rt-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/*Altura de rolagem das grades destas telas: listas de conferencia,
  nao de leitura demorada.*/
.rt-rol-md { max-height: 420px; }
.rt-rol-g { max-height: 560px; }

/* ============================================================
   ap- — TAG DE ACOMPANHAMENTO
   A prioridade com que o USUARIO da sessao acompanha um registro:
   um selo com o numero, de 01 a 10. Serve a qualquer tela que
   liste ou fiche esses registros — hoje a arvore de Categorias e
   Acontecimentos e a ficha do aviso/acontecimento.
   Quem nao acompanha nao ganha selo nenhum: a lista nao pode
   ficar cheia de "nao".
   O selo vem SEMPRE ANTES do texto que ele qualifica, e a
   margem e a direita. Na grade isso nao e gosto: a celula do
   nome corta com reticencias (.ge-nm tem max-width:0 e
   overflow:hidden), entao selo depois de um titulo comprido
   fica fora da area visivel e some.

   A COR E A DA PRIORIDADE — uma classe por degrau, ap-p01 a
   ap-p10 (regra do cliente, 2026-08-27). O matiz e o GRUPO
   (01-03 azul, 04-07 ambar, 08-10 vermelho, a repartição de
   sempre) e o tom cresce dentro dele: a faixa se le de longe e
   cada degrau tem a sua cor. Nos degraus claros o numero e
   escuro, senao nao se le.
   Ate 26-08 o selo era azul em tres intensidades (ap-tag-b, -m,
   -a), por causa da arvore de Categorias e Acontecimentos, onde
   o verde e o vermelho do NOME ja dizem se o aviso esta
   programado. O cliente viu as duas coisas juntas e pediu a cor
   assim mesmo: o selo e um numero dentro de uma pilula, o nome e
   texto, e os dois nao se confundem. As tres classes antigas
   sairam — ninguem mais as escrevia.

   AS MESMAS DEZ CORES ESTAO NO PHP, no arr_cor_acompanhamento da
   CL_CRM_Acontecimento_Aviso e da CL_Dentista: e de la que saem
   a faixa da linha, as barras e a legenda da tela de
   gerenciamento. Folha de estilo nao le PHP — mexer numa cor e
   mexer nos dois lugares.
   ============================================================ */
.ap-tag {
	display: inline-block;
	min-width: 24px;
	box-sizing: border-box;
	margin-right: 8px;
	padding: 0px 6px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	vertical-align: middle;
	cursor: default;
}
/*Os dez degraus. Numero branco, menos nos quatro claros.*/
.ap-p01 { background-color: #A9CDFF; border-color: #A9CDFF; color: var(--tx-1); }
.ap-p02 { background-color: #6BA8FF; border-color: #6BA8FF; color: var(--tx-1); }
.ap-p03 { background-color: #2F8BFF; border-color: #2F8BFF; color: #FFFFFF; }
.ap-p04 { background-color: #F3C67E; border-color: #F3C67E; color: var(--tx-1); }
.ap-p05 { background-color: #EDAE58; border-color: #EDAE58; color: var(--tx-1); }
.ap-p06 { background-color: #E4923A; border-color: #E4923A; color: #FFFFFF; }
.ap-p07 { background-color: #C87A1E; border-color: #C87A1E; color: #FFFFFF; }
.ap-p08 { background-color: #DE7B7B; border-color: #DE7B7B; color: #FFFFFF; }
.ap-p09 { background-color: #C85454; border-color: #C85454; color: #FFFFFF; }
.ap-p10 { background-color: #B23434; border-color: #B23434; color: #FFFFFF; }
/*Na ficha o selo e o rotulo da opcao ("Prioridade 07") sao um par
  so; quem faz o espaco entre eles e o gap do container.*/
.ap-ct { display: inline-flex; align-items: center; gap: 8px; }
.ap-ct .ap-tag { margin-right: 0px; }

/* ==========================================================
   id- IDENTIFICACAO DA TELA
   Etiqueta do canto superior direito que diz que programa
   esta aberto: o CN do link que vai no CL_Login->login(),
   mais o tipo (SEL INC ALT PRP GER REL GRF LST RTN IMP FED
   PNL ETP DEL MAP), mais o desempate quando duas telas
   dividem o mesmo link - 155ALT_convenio e 155ALT_forma_pgm.
   A lista completa esta no ANEXO-ID-TELAS.md.

   Clicar nela abre a janela de nova demanda de desenvolvimento
   (desenv/inc-pop.php), ja com este identificador no campo da
   tela - regra do cliente, 2026-09-16. Quem faz isso e' o
   onclick da propria etiqueta, em cada tela: assim nao depende
   de JS carregado, e a rel_mapa_calor/map.php, que nao carrega
   o CL_FCB.js, funciona igual as outras.

   Tres decisoes que nao sao gosto:
   - "top: 0" com altura de 14px: as paginas (.fm-pg, .sl-pg,
     .pr-pg, .rl-pg, .ge-pg, .pn-pg) comecam com "padding-top:
     14px", entao a etiqueta encosta no comeco do conteudo e
     nao cobre o botao de acao que mora no mesmo canto - que e'
     o que permite que ela receba clique sem roubar nenhum;
   - a area de clique e' so a etiqueta: ela encolhe ao texto
     (nao tem largura), entao o resto da faixa do topo continua
     sendo da tela;
   - "position: fixed": cada tela e um documento (a de dentro
     do iframe tambem), e o canto e o do quadro daquela tela.
   ========================================================== */
.id-tl {
	position: fixed;
	top: 0px;
	right: 0px;
	z-index: 600;
	padding: 1px 6px 2px 8px;
	border-radius: 0px 0px 0px 8px;
	background-color: rgba(255,255,255,0.78);
	font-family: var(--ui);
	font-size: 9px;
	font-weight: 600;
	line-height: 11px;
	letter-spacing: 0.06em;
	color: var(--tx-3);
	white-space: nowrap;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.id-tl:hover {
	background-color: #FFFFFF;
	color: var(--el-600);
	box-shadow: 0 1px 2px rgba(16,24,40,.10);
}