/* Pedacos do reset.css do Portal Modelo, aplicados SO' no cromo do tema.
 *
 * O reset original (interlegis.portalmodelo.theme/static/styles/reset.css) e'
 * global e agressivo: "* { margin:0; padding:0 }" e, principalmente,
 * "li { display:inline }". No Plone 4 isso era inofensivo porque o resto da
 * pagina vinha do base.css do Plone 4. No Plone 6 a area de conteudo e'
 * Bootstrap 5 (via barceloneta.min.css) e um reset desses destroi listagens,
 * portlets, paginacao e formularios.
 *
 * Entao aqui vai so' o que o temabase.css e o style.css realmente precisam,
 * escopado ao cabecalho, ao menu e ao rodape. Cuidado ao mexer: zerar o
 * padding do proprio #portal-siteactions apaga o padding-top: 1em que o
 * temabase.css usa para descolar as acoes do topo.
 */

/* Tipografia dos titulos do PM3. No 8180 todos os niveis de heading usam
   -0.05em (por exemplo, -1.6px em 32px e -0.832px em 16.64px). Sem esta
   regra, o Plone 6 deixa letter-spacing: normal e os titulos parecem
   artificialmente espaçados. */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.05em;
}

#portal-siteactions,
#portal-personaltools,
#main-navigation ul,
#footer-total ul {
  list-style: none;
}

#portal-siteactions li,
#portal-personaltools li,
#main-navigation li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O reset do PM3 tira o sublinhado de todo link; no cromo isso importa. */
#portal-siteactions a:link,
#portal-siteactions a:visited,
#main-navigation a:link,
#main-navigation a:visited,
#portal-breadcrumbs a:link,
#portal-breadcrumbs a:visited {
  text-decoration: none;
}

/* Caixa de busca: o Plone 6 entrega #portal-searchbox com as classes
   "d-flex flex-column" do Bootstrap, o que a espalha pela largura do
   cabecalho e a joga para cima das site actions. No PM3 ela e' um bloco de
   20em flutuando a' direita, na linha de baixo. As medidas abaixo sao as
   mesmas que o navegador calcula no 8180: 256px de largura, fonte 12.8px. */
#portal-searchbox {
  display: block !important;
  float: right;
  clear: right;
  width: 20em;
  font-size: 80%;
}

#portal-searchbox form {
  display: block !important;
}

#portal-searchbox input.searchField {
  /* O .form-control do Bootstrap deixa o campo display:block, e ai' o botao
     da lupa (position:absolute sem top) cai para a linha de baixo. No PM3 o
     campo e' inline-block e a lupa fica dentro dele, encostada a' direita. */
  display: inline-block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 0 !important;
  padding: 0 40px 0 0 !important;
  text-indent: 1em;
  font-size: 1em;
}

#portal-searchbox .searchButton {
  top: 0;
  padding: 0 !important;
}

/* ===================== BUSCA =====================
 * O formulario de busca do Plone 6 ganhou classes Bootstrap e passou a
 * ocupar toda a largura. No PM3 ele e' uma linha centralizada, seguida por
 * um titulo menor com a largura da coluna principal. Esta primeira ponte
 * alinha apenas a linha de entrada e o titulo; resultados e filtros ficam
 * em bloco separado para serem comparados depois.
 */
#searchform > .input-group {
  display: block;
  width: 100%;
  height: 62.265px;
  margin: 12.8px 0 0;
  text-align: center;
}

#searchform > .input-group .searchPage.form-control {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 360px !important;
  height: 33px;
  margin: 8.235px 0 0;
  padding: 0;
  border: 2px inset #767676;
  border-radius: 0;
  background: #ffffe0;
  color: #000;
  font-family: "Lucida Grande", Arial, FreeSans, sans-serif;
  font-size: 200%;
  line-height: normal;
}

#searchform > .input-group .input-group-btn {
  display: inline-block;
  vertical-align: top;
}

#searchform > .input-group input[type="submit"] {
  box-sizing: border-box;
  width: 100px;
  height: 30px;
  margin: 9.7px 0 0 6px;
  padding: 5px 12px;
  border: 0;
  border-radius: 3.2px;
  background: #68544d;
  color: #fff;
  font-family: "Lucida Grande", Arial, FreeSans, sans-serif;
  font-size: 16px;
  line-height: normal;
}

#searchform > .mt-3 {
  width: 65%;
  margin-top: 57.8px !important;
  margin-left: 12.8px;
  border-bottom: 1px solid #3259a7;
}

#searchform #search-term {
  width: 100%;
  margin: 0 17.408px 10.88px 0;
  padding: 0;
  border: 0;
  color: #3259a7;
  font-family: "Helvetica Neue", Arial, FreeSans, sans-serif;
  font-size: 21.76px;
  font-weight: 400;
  line-height: 32.64px;
}

#searchform #search-term .text-muted {
  color: #3259a7 !important;
  font-weight: 700;
}

/* A faixa de contagem/filtros do PM3 e' uma barra simples com duas linhas
   finas; no Plone 6 ela nasce como um d-flex sem respiro. */
#searchform > .d-flex {
  box-sizing: border-box;
  width: calc(100% - 25.6px);
  height: 87.765px;
  margin: 12.8px 12.8px 0;
  padding: 12.8px 0;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}

#searchform > .d-flex .nav-link {
  padding: 0;
  color: #333;
  font-size: 12.8px;
  line-height: 19.2px;
  text-decoration: none;
}

#searchform > .d-flex #results-count {
  display: inline;
}

#searchform > .d-flex #search-results-number {
  display: inline;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #333;
  font-size: 12.8px;
  font-weight: 700;
  line-height: 19.2px;
}

#searchform > .d-flex #search-filter,
#searchform > .d-flex #search-sort {
  margin-right: 0 !important;
  font-size: 12.8px;
  line-height: 19.2px;
}

#searchform > .d-flex #search-filter > a,
#searchform > .d-flex #search-sort > a {
  color: #333;
  font-size: 12.8px;
  line-height: 19.2px;
}

#searchform > .d-flex #search-filter > a::after,
#searchform > .d-flex #search-sort > a::after {
  color: #333;
}

/* Lista de resultados: remove o card/numeração do Bootstrap e recupera o
   ritmo compacto do searchResults do Plone 4. */
#search-results-wrapper {
  margin: 0 12.8px;
}

#search-results {
  box-sizing: border-box;
  width: 100%;
  min-height: 56.312px;
  margin: 0;
  padding: 12.8px;
  color: #333;
  font-size: 12.8px;
  line-height: 19.2px;
}

#search-results .alert {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #333;
  font-size: 12.8px;
  line-height: 19.2px;
}

#search-results .searchResults {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

#search-results .searchResults > li {
  display: block;
  box-sizing: border-box;
  min-height: 0;
  margin: 0 0 12.8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12.8px;
  line-height: 19.2px;
}

#search-results .searchResults > li::before {
  display: none;
}

#search-results .searchResults > li > div {
  margin: 0 !important;
}

#search-results .result-title,
#search-results .result-title a {
  color: #142943;
  font-size: 12.8px;
  font-weight: 700;
  line-height: 19.2px;
  text-decoration: none;
}

/* O PM3 identifica os arquivos PDF com o pequeno simbolo antes do titulo.
   O template do Plone 6 agora preserva essa mesma marca sem alterar o ritmo
   da lista de resultados. */
#search-results .result-title .result-icon {
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
  vertical-align: -3px;
}

#search-results .searchResults small {
  display: block;
  margin-left: 25.6px;
  color: #666 !important;
  font-size: 10.24px;
  line-height: 15.36px;
}

#search-results .searchResults cite {
  display: block;
  margin-left: 25.6px;
  color: #333 !important;
  font-size: 12.8px;
  line-height: 19.2px;
}

/* A barra antiga usa links pequenos e neutros, com o proximo lote encostado
   a' direita; o componente Bootstrap atual e' muito alto e azul. */
#search-results-wrapper nav {
  display: block !important;
  width: 100%;
  margin: 0;
}

#search-results-wrapper .pagination {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 12.8px;
  line-height: 19.2px;
}

#search-results-wrapper .pagination .page-item {
  display: inline;
  margin: 0;
  padding: 0;
}

#search-results-wrapper .pagination .page-link {
  display: inline-block;
  min-width: 1.5em;
  margin: 0;
  padding: 0 0.35em;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  background: transparent;
  color: #333;
  font-size: 12.8px;
  line-height: 19.2px;
  text-align: center;
  text-decoration: none;
}

#search-results-wrapper .pagination .page-item.active .page-link {
  border-color: transparent;
  background: transparent;
  color: #333;
}

#search-results-wrapper .pagination .page-item.active .page-link::before {
  content: "[";
}

#search-results-wrapper .pagination .page-item.active .page-link::after {
  content: "]";
}

#search-results-wrapper .pagination .page-item.next {
  float: right;
}

#search-results-wrapper .pagination .page-item.next .page-link {
  width: auto;
  border-color: #d9d9d9;
  text-align: left;
}

/* O PM3 mantém o RSS da busca apenas como link alternativo no <head>; não
   exibe um convite adicional ao final da lista. */
#searchform #rss-subscription {
  display: none !important;
}

/* O Bootstrap desenha o breadcrumb com fundo cinza e cantos arredondados; o
   PM3 mostra so' os links separados por barra, sem caixa.
   NAO trocar o display do <ol>: ele e' flex de proposito no Bootstrap, e' o
   que mantem tudo numa linha so'. Forcar display:block faz cada item cair
   numa linha (o caminho de pao vira um bloco de seis linhas). */
#portal-breadcrumbs .breadcrumb {
  margin: 0;
  padding: 0;
  background: none;
}

/* Botao de menu mobile injetado pelo function.js: so' aparece em tela
   pequena, como no PM3. */
.menu-button {
  display: none;
}

@media (max-width: 767px) {
  .menu-button {
    display: block;
  }
}

/* ===================== COLUNAS LATERAIS / PORTLETS =====================
 *
 * Duas coisas mudaram do Plone 4 para o Plone 6:
 *
 * a) o tamanho de fonte. O base.css do Plone 4 punha as colunas laterais a
 *    80% (12.8px); no Plone 6 nao ha' esse base e tudo herda os 16px do
 *    corpo. Medindo os dois sites lado a lado, era a diferenca visual mais
 *    grosseira -- todo o texto das colunas 25% maior que no PM3.
 *
 * b) o markup. O portlet era
 *       <dl class="portlet"><dt class="portletHeader">…<dd class="portletItem">
 *    e virou
 *       <div class="card portlet"><div class="card-header">…<div class="card-body">
 *    O style.css do tema so' conhece a forma antiga, entao o cabecalho perdeu
 *    o caixa-alta e a faixa dourada, e o cartao do Bootstrap acrescentou uma
 *    borda e um canto arredondado que o PM3 nao tem.
 *
 * Os valores abaixo sao os que o navegador calcula no 8180.
 */
#column-one .portlet,
#column-two .portlet {
  display: block;
  font-size: 90%;
  margin: 0 0 1em;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: normal;
}

/* Botoes contextuais de gerenciamento de portlets. As medidas sao as do
 * 8180: 207px de caixa, 3.2/6.4px de padding, raio 6.4px, fundo #ddd e fonte
 * Open Sans de 12.8px. O JS so' os cria quando a toolbar fornece o link com
 * permissao e token para a coluna correspondente. */
#column-one .managePortletsLink,
#column-two .managePortletsLink {
  box-sizing: content-box;
  display: block;
  margin: 0 0 1em;
  padding: 0.25em 0.5em;
  border: 0;
  border-radius: 0.5em;
  color: #333333;
  background: #dddddd;
  font-family: "Open Sans", sans-serif;
  font-size: 80%;
  line-height: normal;
  text-align: center;
}

#column-one .managePortletsLink a,
#column-two .managePortletsLink a {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #10233b !important;
  background: transparent;
  font: inherit;
  line-height: normal;
  text-decoration: none;
}

/* O Bootstrap/Barceloneta sublinha links no conteudo. O Portal Modelo nao:
   cor e mudanca de estado bastam para identificar o link. */
#content a,
#content a:link,
#content a:visited,
#column-one a,
#column-two a,
#portal-breadcrumbs a,
#footer-total a {
  text-decoration: none;
}

/* No portlet de navegacao, o workflow privado e' uma informacao editorial:
 * o PM3 pinta o link inteiro de vermelho puro. Cobrir tambem hover/focus
 * impede que a regra azul do Barceloneta esconda o estado ao interagir. */
#column-one a.state-private,
#column-one a.state-private:link,
#column-one a.state-private:visited,
#column-one a.state-private:hover,
#column-one a.state-private:focus {
  color: #ff0000 !important;
}

/* Layouts do Products.windowZ restaurados no tipo Dexterity Window. */
body.template-window_left_view #column-one,
body.template-window_left_view #portal-column-one,
body.template-window_both_view #column-one,
body.template-window_both_view #portal-column-one,
body.template-window_right_view #column-two,
body.template-window_right_view #portal-column-two,
body.template-window_both_view #column-two,
body.template-window_both_view #portal-column-two {
  display: none !important;
}

/* ===================== BARRAS DE GERENCIAMENTO =====================
 * O Plone 6 entrega uma toolbar vertical fixa. Aqui o mesmo markup e'
 * apresentado nas duas barras horizontais do PM3:
 *   Conteudo, Visao, Edicao, Compartilhamento
 *   Acoes, Exibicao, Adicionar item, Estado
 */
/* O Barceloneta reserva 40px no topo do body quando a toolbar esta' na
   variante superior. Como o Diazo ja' move #edit-bar para dentro da coluna
   central, essa reserva vira uma faixa branca inutil acima do cabecalho. */
body.plone-toolbar-top,
body.plone-toolbar-top-expanded {
  padding-top: 0 !important;
}

#edit-bar {
  display: block;
  position: relative;
  width: 100%;
  min-height: 5.3em;
  margin: 0 0 1em;
  font-size: 80%;
  z-index: 1040;
}

#edit-zone.pat-toolbar {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#edit-zone .toolbar-header,
#edit-zone .toolbar-collapse,
#edit-zone .toolbar-expand,
#edit-zone .border-top.my-2,
#edit-zone #contentview-history,
#edit-zone #plone-contentmenu-portletmanager {
  display: none !important;
}

#edit-zone > ul.plone-toolbar-main {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
  /* A primeira faixa verde do PM3 ocupa toda a largura do frame, mesmo
     depois do ultimo item. A segunda linha continua transparente e recebe
     apenas os menus verde-escuros da direita. */
  background: linear-gradient(#75ad0a, #75ad0a) top / 100% 30.72px no-repeat;
  border-radius: 10px 10px 0 0;
}

/* Arredondamento simetrico das duas faixas: a superior ocupa o frame todo;
   na inferior, Acoes e Estado sao as extremidades visiveis. */
#edit-zone #contentview-folderContents {
  border-radius: 10px 0 0 0;
}

#edit-zone #plone-contentmenu-actions {
  border-radius: 0 0 0 10px;
}

#edit-zone #plone-contentmenu-workflow {
  border-radius: 0 0 10px 0;
}

/* Estado privado: no PM3 o rotulo da faixa permanece branco e o valor e'
   destacado por um badge circular vermelho. Escopar ao link principal evita
   contaminar o cabecalho e os itens do dropdown. */
#edit-zone #plone-contentmenu-workflow > a.nav-link {
  color: #ffffff !important;
}

#edit-zone #plone-contentmenu-workflow > a.nav-link .label-state-private {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.18em 0.45em;
  border-radius: 999px;
  color: #ffffff !important;
  background: #d9534f;
  text-align: center;
  line-height: 1.2;
}

/* Estado publicado: o PM3 usa texto branco dentro de um badge azul-petroleo,
 * nao o texto azul solto que nasce da combinacao Barceloneta + style.css. */
#edit-zone #plone-contentmenu-workflow > a.nav-link .label-state-published {
  padding: 0 6.4px;
  border: 1px solid #436976;
  border-radius: 6.4px;
  color: #ffffff !important;
  background: #436976;
}

#edit-zone > ul.plone-toolbar-main > li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

#edit-zone #contentview-folderContents { order: 1; }
#edit-zone #contentview-view { order: 2; }
#edit-zone #contentview-edit { order: 3; }
#edit-zone #contentview-compose,
#edit-zone #contentview-compose-escola { order: 4; }
#edit-zone #contentview-layoutedit,
#edit-zone #contentview-layoutedit-escola { order: 5; }
#edit-zone #contentview-local_roles { order: 6; }

/* O pseudo-elemento abre a segunda linha depois de Compartilhamento. */
#edit-zone > ul.plone-toolbar-main::after {
  content: "";
  order: 7;
  flex: 0 0 100%;
  height: 0;
}

#edit-zone #plone-contentmenu-actions { order: 8; }
#edit-zone #plone-contentmenu-display { order: 9; }
#edit-zone #plone-contentmenu-factories { order: 10; }
#edit-zone #plone-contentmenu-workflow { order: 11; }

#edit-zone #contentview-folderContents,
#edit-zone #contentview-view,
#edit-zone #contentview-edit,
#edit-zone #contentview-compose,
#edit-zone #contentview-compose-escola,
#edit-zone #contentview-layoutedit,
#edit-zone #contentview-layoutedit-escola,
#edit-zone #contentview-local_roles {
  background: #75ad0a;
}

#edit-zone #plone-contentmenu-actions,
#edit-zone #plone-contentmenu-display,
#edit-zone #plone-contentmenu-factories,
#edit-zone #plone-contentmenu-workflow {
  background: #5c9400;
}

#edit-zone > ul > li > a.nav-link {
  display: block;
  margin: 0;
  padding: 0.45em 0.9em;
  border: 0;
  border-radius: 0;
  color: #ffffff !important;
  background: transparent;
  text-decoration: none;
  line-height: 1.5;
  width: auto !important;
  min-width: 0 !important;
}

#edit-zone .toolbar-label,
#header-banner .personaltools-wrapper .toolbar-label {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap;
}

#edit-zone .personaltools-wrapper {
  display: none !important;
}

#edit-zone #plone-contentmenu-actions {
  margin-left: auto !important;
}

#edit-zone > ul > li > a.nav-link:hover,
#edit-zone > ul > li > a.nav-link:focus,
#edit-zone > ul > li > a.nav-link.active {
  color: #ffffff !important;
  background: #436976;
}

#edit-zone > ul > li > a.nav-link svg {
  display: none;
}

#edit-zone .dropdown-menu {
  position: absolute !important;
  z-index: 1100;
  font-size: 1em;
}

/* Ferramentas do usuario voltam ao canto superior direito do cabecalho. */
#header-banner .personaltools-wrapper {
  display: block;
  position: relative;
  float: right;
  margin: 0 0 0 0.5em;
  padding: 0;
  border-radius: 0 0 0.5em 0.5em;
  background: #414959;
  font-size: 80%;
  z-index: 50;
}

#header-banner .personaltools-wrapper > a {
  padding: 0.35em 0.75em;
  border-radius: inherit;
  background: inherit;
  color: #ffffff;
  text-decoration: none;
}

#header-banner .personaltools-wrapper > a:hover,
#header-banner .personaltools-wrapper > a:focus,
#header-banner .personaltools-wrapper > a[aria-expanded="true"] {
  background: #414959;
  color: #ffffff;
}

#header-banner .personaltools-wrapper svg {
  display: none;
}

#header-banner .personaltools-wrapper .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: auto !important;
  right: 0 !important;
  transform: none !important;
  min-width: 13em;
  margin-top: 0;
  padding: 0.35em 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #ffffff;
  color: #212529;
  z-index: 1100;
}

#header-banner .personaltools-wrapper .dropdown-header,
#header-banner .personaltools-wrapper .dropdown-menu a,
#header-banner .personaltools-wrapper .dropdown-menu a:link,
#header-banner .personaltools-wrapper .dropdown-menu a:visited {
  color: #212529 !important;
}

#header-banner .personaltools-wrapper .dropdown-menu a:hover,
#header-banner .personaltools-wrapper .dropdown-menu a:focus {
  background: #4882c9;
  color: #ffffff !important;
}

#column-one .portlet > .card-header,
#column-two .portlet > .card-header {
  padding: 0;
  border: 0;
  border-bottom: 3px solid #fabc05;
  border-radius: 0;
  background: #f1f1f1;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 18px;
}

#column-one .portlet > .card-header a,
#column-two .portlet > .card-header a {
  color: #000;
  text-decoration: none;
}

#column-one .portlet > .card-body,
#column-two .portlet > .card-body {
  padding: 0;
}

#column-one .portlet .navTree,
#column-two .portlet .navTree {
  margin: 0;
  padding: 0;
  list-style: none;
}

#column-one .portlet .navTreeItem,
#column-two .portlet .navTreeItem {
  border-bottom: 1px dotted #dddddd;
  line-height: 2;
}

#column-one .portlet .navTree > .navTreeItem:last-child,
#column-two .portlet .navTree > .navTreeItem:last-child {
  border-bottom: 0;
}

/* O Plone 6 injeta um <svg class="plone-icon"> em cada link da navegacao
   lateral; o PM3 nao tem icone nenhum ali. */
#column-one .portlet .navTree a > svg.plone-icon,
#column-two .portlet .navTree a > svg.plone-icon {
  display: none;
}

/* ARMADILHA DO <nav>: o temabase.css tem, para o menu principal,
 *     nav li { float: left; position: relative; }
 *     nav ul { float: right; }
 * No Plone 4 o unico <nav> da pagina era o menu. No Plone 6 o Barceloneta usa
 * <nav> tambem no corpo do portlet de navegacao (<nav class="card-body">) e no
 * caminho de pao (<nav id="portal-breadcrumbs">) -- e ai' os itens da coluna
 * lateral passavam a flutuar, encolhendo para a largura do texto (72px em vez
 * dos 207px da coluna). Era o que deixava os separadores curtos e a navegacao
 * "fora de padrao".
 *
 * Aqui as regras voltam ao normal em todo <nav> e sao reaplicadas so' no menu.
 */
nav ul,
nav li {
  float: none;
  position: static;
}

#main-navigation ul {
  float: right;
}

#main-navigation li {
  float: left;
  position: relative;
}

/* Cabecalho do portlet: no PM3 o proprio link e' um bloco com fundo e
   respiro; no Plone 6 ele nasce inline dentro do .card-header. */
#column-one .portlet > .card-header a,
#column-two .portlet > .card-header a {
  display: block;
  padding: 0.7em 1em;
  background: rgba(230, 230, 230, 0.67);
  border-radius: 5px 5px 0 0;
}

/* ===================== BLOCO "ULTIMAS NOTICIAS" =====================
 *
 * Mesmas duas causas da coluna lateral: o bloco todo roda a 80% no PM3
 * (12.8px) e os titulos vinham do base.css do Plone 4, nao do Bootstrap.
 * Sem isso o h3 sai com os 28px do Barceloneta, sublinhado, e a miniatura
 * para de flutuar a' esquerda -- que era a diferenca mais visivel da home.
 *
 * Numeros conferidos contra o 8180: item 12.8px, cabecalho 16.64px/700,
 * titulo 16px/700 sem sublinhado, miniatura 128x96 flutuando a' esquerda.
 */
.cover-collection-tile {
  font-size: 80%;
}

.cover-collection-tile .tile-header h2 {
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 0.5em;
}

.cover-collection-tile .collection-item {
  line-height: 1.5;
  min-height: 96px;
}

.cover-collection-tile .collection-item > .news-thumb {
  display: block;
  float: left;
  width: 128px;
  height: 96px;
  margin: 0 1em 0.5em 0;
  overflow: hidden;
  background: #eeeeee;
}

.cover-collection-tile .collection-item > .news-thumb img {
  display: block;
  float: none !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: contain;
  object-position: center;
}

.cover-collection-tile .collection-item p {
  margin: 0 0 0.1em;
  line-height: 1.4;
}

.cover-collection-tile .collection-item h3 {
  margin: 0;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.5;
  color: #444444;
}

.cover-collection-tile .collection-item h3 a {
  font-weight: 700;
  text-decoration: none;
}

.cover-collection-tile .visualClear {
  clear: both;
}

/* ===================== CARROSSEL DA HOME =====================
 *
 * O PM3 usa a Galleria com o tema "tema-pm3". Os valores abaixo sao copiados
 * de galleria-theme/galleria.tema-pm3.css, que continua no pacote do tema:
 *
 *   .galleria-info       gradiente transparente -> preto 90%, padding 10% 0 1.8em
 *   .galleria-info-text  padding 0 30px
 *   .galleria-info-title font: bold 2.5em/1.1, margem inferior 10px, link branco
 *   palco                450px de altura
 *
 * Com o bloco a 80% (12.8px), 2.5em da' os 32px que o navegador mostra no
 * 8180. Sem isso a legenda saia com 20px, sem faixa e cortada na base.
 */
.cover-carousel-tile {
  font-size: 80%;
}

.cover-carousel-tile .carousel-item {
  height: 450px;
}

.cover-carousel-tile .carousel-item > a {
  display: block;
  height: 100%;
}

.cover-carousel-tile .carousel-media {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #eeeeee;
}

/* A camada decorativa só é usada nas imagens verticais. Nos demais slides o
   carrossel conserva exatamente o preenchimento original do PM3. */
.cover-carousel-tile .carousel-media-backdrop {
  display: none;
  position: absolute;
  z-index: 0;
  inset: -18px;
  width: calc(100% + 36px) !important;
  height: calc(100% + 36px) !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: blur(18px);
  opacity: 0.45;
}

.cover-carousel-tile .carousel-media-portrait .carousel-media-backdrop {
  display: block;
}

.cover-carousel-tile .carousel-media-foreground {
  position: relative;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.cover-carousel-tile .carousel-media-portrait .carousel-media-foreground {
  object-fit: contain;
}

.cover-carousel-tile .carousel-caption {
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10% 30px 1.8em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
  text-align: left;
}

.cover-carousel-tile .carousel-caption h2 {
  margin: 0 0 10px;
  font: bold 2.5em/1.1 "Open Sans", arial, sans-serif;
}

/* O #content prefixando e' necessario: o style.css tem
   "#content a:link { color: #10233b }", que por especificidade (id) vence
   qualquer seletor so' de classe. O proprio CSS da Galleria resolve o mesmo
   problema do mesmo jeito (#content .tema-pm3 .galleria-info-title a). */
#content .cover-carousel-tile .carousel-caption h2 a,
#content .cover-carousel-tile .carousel-caption h2 a:link,
#content .cover-carousel-tile .carousel-caption h2 a:visited {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

#content .cover-carousel-tile .carousel-caption h2 a:hover {
  color: #ffffff !important;
  border-bottom: 2px solid #ffffff;
}

/* A Galleria do PM3 nao mostra marcadores de slide; as setas ficam sobre a
   imagem. Aqui as setas continuam visiveis (melhor em toque) e os pontos
   saem, para nao brigarem com a legenda. */
.cover-carousel-tile .carousel-indicators {
  display: none;
}

/* A composição mantém a grade de 16 colunas do collective.cover. */
.cmm-home .cmm-layout-row,
.cmm-cover-compose .cmm-layout-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.cmm-home .cmm-layout-column,
.cmm-cover-compose .cmm-layout-column {
  min-width: 0;
  padding: 0 6px;
}

.cmm-home .cmm-layout-row,
.cmm-cover-compose .cmm-layout-row {
  margin-right: -6px;
  margin-left: -6px;
}

.cmm-home .cover-banner-tile,
.cmm-home .cover-banner-tile img,
.cmm-home .cmm-embedded-content {
  display: block;
  width: 100%;
  max-width: 100%;
}

.cmm-home .cmm-embedded-content {
  min-height: 420px;
  border: 0;
}

@media (max-width: 767px) {
  .cover-carousel-tile .carousel-item {
    height: 14em;
  }
  .cover-carousel-tile .carousel-caption h2 {
    font-size: 1.5em;
  }
}

/* As listagens oficiais de resumo não podem deixar a altura natural de uma
   foto vertical aumentar a linha inteira. A moldura mantém o ritmo da lista;
   contain preserva a imagem completa, com fundo neutro nas sobras. */
#content-core .listing-summary-image-col {
  display: flex;
  align-items: flex-start;
}

#content-core .listing-summary-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eeeeee;
}

#content-core .listing-summary-thumb .listing-summary-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Caminho de pao: o Bootstrap poe um fundo cinza que o PM3 nao tem, e o PM3
   esconde a trilha quando so' existe a Pagina Inicial (visibility:hidden na
   home). O :has() reproduz esse comportamento. */
#portal-breadcrumbs .breadcrumb {
  background: none;
}

#portal-breadcrumbs:has(.breadcrumb-item:only-child) {
  visibility: hidden;
}

/* ===================== PAGINAS DE CONTEUDO =====================
 *
 * O corpo do texto tambem rodava a 80% no Plone 4 (12.8px). E o Barceloneta
 * mostra a imagem principal da noticia em largura cheia acima do titulo,
 * enquanto o PM3 a poe flutuando a' direita, com 200px, ao lado do primeiro
 * paragrafo. Medidas conferidas contra o 8180.
 *
 * Atencao ao mexer: a home NAO tem #content-core (a view @@pagina-inicial
 * preenche o slot "main"), entao os 80% daqui nao se somam aos 80% dos
 * blocos do carrossel e das ultimas noticias.
 */
#content-core {
  font-size: 80%;
}

/* Alguns textos importados do PM3 trazem indevidamente outro #content-core
   dentro do corpo rico. Sem esta protecao, os 80% acima se acumulam e o
   texto cai de 12.8px para 10.24px. Mantemos o tamanho herdado no wrapper
   interno; paginas com markup normal nao sao atingidas. */
#content-core #content-core {
  font-size: 100%;
}

#content > header h1,
#content h1.documentFirstHeading {
  margin: 0 0 0.5em;
  padding: 0;
  font-family: "Helvetica Neue", Arial, FreeSans, sans-serif;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 1px solid #3259a7;
}

/* A lead image do Plone 6 nasce acima do titulo. O template newsitem.pt do
 * tema a renderiza novamente no inicio de #content-core, onde ficava no PM3. */
body.portaltype-news-item #viewlet-above-content-title #section-leadimage {
  display: none;
}

body.portaltype-news-item #content > header h1 {
  box-sizing: content-box;
  font-family: "Helvetica Neue", Arial, FreeSans, sans-serif;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.5;
}

body.portaltype-news-item #content > header .lead {
  box-sizing: content-box;
  margin: 0 0 1em;
  font-family: "Helvetica Neue", Arial, FreeSans, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #4d4d4d;
}

#section-leadimage .newsImageContainer,
#content .newsImageContainer {
  display: block;
  float: right;
  width: 200px;
  margin: 0 0 0.5em 1em;
}

body.portaltype-news-item #content-core > .newsImageContainer {
  box-sizing: content-box;
  float: right;
  width: 200px;
  margin: 0 1em 0.5em 0;
  font-size: 100%;
  line-height: 1.5;
}

body.portaltype-news-item #content-core > .newsImageContainer img {
  box-sizing: content-box;
  display: inline;
  width: 200px;
  height: auto;
  vertical-align: text-bottom;
}

#section-leadimage .newsImageContainer img,
#content .newsImageContainer img {
  width: 200px;
  height: auto;
  margin: 0;
}

/* O caminho de pao do Barceloneta vem com fundo cinza e quebrando em duas
   linhas; no PM3 e' uma linha so', sem fundo. */
/* display:block para o <nav> ter a largura toda disponivel; como
   inline-block o navegador encolhe a caixa e o caminho quebra em duas
   linhas. */
#portal-breadcrumbs {
  display: block;
  background: none;
  font-size: 80%;
  line-height: normal;
}

#portal-breadcrumbs .container {
  padding: 0;
  max-width: none;
}

/* Sem isto os itens encolhem como flex-items e cada nome quebra em duas
   linhas ("Sobre a / Camara"). */
#portal-breadcrumbs .breadcrumb-item {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ARMADILHA DO <header> (irma da armadilha do <nav>): o style.css estiliza o
 * elemento nu --
 *     header { background: linear-gradient(...) !important; color: #fff;
 *              float: left; width: 100%; }
 * -- porque no Plone 4 o unico <header> da pagina era o do tema. O Plone 6
 * usa <header> tambem dentro de <article id="content">, e o titulo da noticia
 * aparecia sobre uma faixa marrom, em branco no branco.
 */
#content header,
#main-content header {
  background: none !important;
  color: inherit;
  float: none;
  width: auto;
}

#content header a:link,
#content header a:visited {
  color: #10233b;
}

/* Respiro entre os itens do caminho de pao (o flex:0 0 auto acima os deixa
   colados). */
#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5em;
}

#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  padding-right: 0.5em;
}

/* ===================== MENU GLOBAL (a faixa amarela) =====================
 *
 * Duas divergencias contra o 8180, as duas de heranca do Bootstrap:
 *
 * a) ALTURA. A faixa saia com 61px contra os 45px do PM3. O Bootstrap poe
 *    "margin-bottom: 1rem" em toda <ul>, e o <ul> do menu herdava os 16px.
 *
 * b) COR. No Plone 6 cada item do menu sai como
 *    <a class="state-published nav-link">, e o style.css do tema tem
 *        .state-published { color: #10233b !important; }
 *    -- regra escrita para os links do CONTEUDO, quando no Plone 4 o menu nao
 *    recebia classe de estado. Resultado: todos os itens ficavam azul-escuro
 *    sobre o amarelo, e so' a "Pagina Inicial" continuava branca, porque ela
 *    e' o proprio portal e sai como "state-None".
 *    O seletor abaixo tem id + elemento + classe, entao vence a regra do
 *    style.css sem precisar mexer nela.
 */
#main-navigation ul {
  margin: 0;
}

#main-navigation li a,
#main-navigation li a:link,
#main-navigation li a:visited,
#main-navigation li a[class*="state-"] {
  color: #ffffff !important;
}

/* ===================== CAMINHO DE PAO =====================
 *
 * A ARMADILHA DO <nav> DE NOVO (irma da 6.16), agora no caminho de pao.
 *
 * O temabase.css traz, para o menu principal, "nav li a { display: block }".
 * No Plone 4 o unico <nav> da pagina era o menu; no Barceloneta 6 o caminho de
 * pao TAMBEM e' um <nav>, entao o <a> de cada item virava bloco.
 *
 * Com o <a> em bloco, o separador "/" (que no Bootstrap e' um ::before com
 * float:left) ficava sozinho na primeira linha e o link ia para a segunda, e
 * o float entao se sobrepunha ao fim do item anterior. Era exatamente o
 * "Portal Transparenci/ Licitacoes" com a barra comendo a ultima letra, e o
 * caminho de pao com 36px de altura em vez dos 18px do 8180.
 *
 * Voltando o link a inline (como no PM3), o "/" e o texto dividem a mesma
 * linha e nada se sobrepoe.
 */
#portal-breadcrumbs .breadcrumb-item > a,
#portal-breadcrumbs .breadcrumb-item > span {
  display: inline;
}

#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  float: none;
}

/* "Voce esta aqui:" -- o PM3 tem esse rotulo (#breadcrumbs-you-are-here) e o
 * Barceloneta 6 nao tem viewlet equivalente. Como o site e' so' pt-br, vem
 * pelo CSS mesmo. */
#portal-breadcrumbs .breadcrumb::before {
  content: "Você está aqui:";
  /* O ::before de um container flex vira um flex item. Sem o "flex: 0 0 auto"
     ele encolhe, o rotulo quebra em duas linhas e, como o alinhamento padrao
     e' stretch, TODOS os itens do caminho de pao passam a ter 36px de altura
     em vez de 18px. */
  flex: 0 0 auto;
  white-space: nowrap;
  padding-right: 0.5em;
}

/* O primeiro elemento do caminho no Barceloneta fica encostado na borda
 * inferior do menu. No PM3 o texto comeca 1.2em abaixo da faixa; o padding
 * reproduz esse respiro sem alterar a trilha horizontal. */
#portal-breadcrumbs {
  padding-top: 1.2em;
}

/* Continua a sequencia visual "Contraste | A+ | A- | Acessar" usando a
 * mesma medida dos separadores definidos no style.css para A+ e A-. */
#portal-siteactions li#siteaction-login::before {
  content: "|";
  margin-left: 0.15em;
  margin-right: 0.45em;
}

/* ===================== RODAPE =====================
 * No PM3, "invisible" significa tabela sem bordas. No Bootstrap 5 a mesma
 * classe aplica visibility:hidden !important, ocultando todo o conteudo de
 * /footer-page embora ele continue no HTML. A primeira regra resolve essa
 * colisao. As demais neutralizam apenas dentro do rodape o reset global do
 * Bootstrap (border-box, entrelinha e espacamento de tabelas/listas),
 * recuperando as medidas computadas do 8180. */
#footer-info table.invisible {
  visibility: visible !important;
}

#footer-total,
#footer-info,
#footer-info .layout-wrapper,
#footer-info tbody,
#footer-info tr,
#footer-info th,
#footer-info td,
#footer-info ul,
#footer-info li,
#footer-info a,
#footer-colophon,
#footer-colophon .layout-wrapper,
#footer-colophon .colophon-item,
#footer-colophon .colophon-logo,
#footer-colophon .colophon-info {
  box-sizing: content-box;
  line-height: normal;
}

#footer-info table.invisible {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 0;
}

#footer-info table.invisible th,
#footer-info table.invisible td {
  padding: 0.5em 1em;
  border: 0;
  vertical-align: top;
}

#footer-info table.invisible ul {
  margin: 0;
  padding: 0;
}

/* O viewlet antigo acrescentava <p class="visualClear"> depois da tabela;
 * sua altura efetiva era 2em. O viewlet novo nao precisa desse elemento para
 * limpar floats, mas conserva aqui o mesmo intervalo antes do colophon. */
#footer-info {
  margin-bottom: 2em;
}

/* ===================== LISTAGENS DE PASTA (tabular_view) =====================
 *
 * O PM3 desenha <table class="listing"> com o zebrado do Plone 4 (linha impar
 * #eee), celulas de 6.4px/12.8px e texto #333. O Plone 6 usa
 * .table.table-striped do Bootstrap: zebrado por variavel, celulas de 8px e
 * texto preto. Medidas conferidas contra o 8180.
 *
 * O seletor e' ".table-responsive > table" de proposito: e' o wrapper que so'
 * o template de listagem gera. Mirar em "table.table" pegaria tambem as
 * tabelas escritas pelos editores dentro do texto das paginas.
 */
#content-core .table-responsive > table.table {
  --bs-table-striped-bg: #eeeeee;
  --bs-table-striped-color: #333333;
  --bs-table-color: #333333;
  margin-bottom: 12.8px;
  /* O .table do Bootstrap e' "width: 100%"; a table.listing do Plone 4 encolhe
     para o conteudo. Na pasta de Licitacoes isso e' a diferenca entre uma
     tabela de 127px (8180) e uma de 691px ocupando a coluna inteira. */
  width: auto;
}

#content-core .table-responsive > table.table > :not(caption) > * > * {
  padding: 6.4px 12.8px;
}

/* O Plone 6 gera na primeira coluna o icone real do tipo/MIME (inclusive o
 * PDF). Ele chegou a ser ocultado para reduzir a tabela ao numero de colunas
 * do PM3, mas os icones sao uma pista visual util e precisam aparecer de
 * modo consistente em todas as listagens tabulares. */
#content-core .table-responsive > table.table > thead > tr > th:first-child,
#content-core .table-responsive > table.table > tbody > tr > td:first-child {
  display: table-cell;
  width: 16px;
  padding-left: 6.4px;
  padding-right: 6.4px;
  text-align: center;
}

/* O Bootstrap aplica .text-nowrap nas celulas da tabela. Em titulos longos
 * isso fazia a tabela aumentar a coluna central de 691 para 941px e avancar
 * sobre as laterais. A segunda coluna e' sempre o titulo; ela pode quebrar,
 * enquanto as colunas compactas (icone e tipo) continuam em uma linha. */
body.template-tabular_view #content-core .table-responsive > table.table > thead > tr > th:nth-child(2),
body.template-tabular_view #content-core .table-responsive > table.table > tbody > tr > td:nth-child(2) {
  max-width: min(520px, 60vw);
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Padrao e Sumaria usam estruturas diferentes, mas os titulos dos objetos
 * devem ter o mesmo peso 700 empregado por Todo o conteudo. */
body.template-listing_view #content-core .entries article.row > .col > .mb-1:first-child > a.url,
body.template-summary_view #content-core > article.row h2 > a.url {
  font-weight: 700;
}

/* O folder_listing do PM3 mostra cada filho como titulo + descricao. No
   listing_view do Plone 6 o mesmo item vinha com uma assinatura repetida e
   margens do Bootstrap. A regra e' exclusiva dessa view. */
body.template-listing_view #content-core .entries article.row {
  display: block;
  margin: 0 0 12.8px !important;
  padding: 0;
}

body.template-listing_view #content-core .entries article.row > .col {
  padding: 0;
}

body.template-listing_view #content-core .entries article.row > .col > .mb-1:nth-child(2) {
  display: none;
}

body.template-listing_view #content-core .entries article.row > .col > .mb-1:first-child > a.url {
  color: #436976;
  font-family: Arial, FreeSans, sans-serif;
  font-size: 12.8px;
  line-height: 19.2px;
}

body.template-listing_view #content-core .entries article.row > .col > p {
  margin: 0 0 12.8px 25.6px;
  color: #000;
  font-family: Arial, FreeSans, sans-serif;
  font-size: 12.8px;
  line-height: 19.2px;
}

/* O album_view do Plone 6 usa cartoes em tres colunas; o summary_view do PM3
   apresenta os mesmos itens empilhados, sem borda, como tiles de texto. */
body.template-album_view #content-core > .row {
  display: block;
  margin: 0;
}

body.template-album_view #content-core > .row > .col {
  display: block;
  width: auto;
  margin: 0 0 12.8px;
  padding: 0;
}

body.template-album_view #content-core .card {
  display: block;
  height: auto !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.template-album_view #content-core .card-body {
  padding: 0;
}

body.template-album_view #content-core .card-title {
  margin: 0;
  color: #205c90;
  font-family: "Helvetica Neue", Arial, FreeSans, sans-serif;
  font-size: 22.4px;
  font-weight: 700;
  line-height: 33.6px;
}

body.template-album_view #content-core .card-text {
  margin: 0 0 12.8px;
  color: #000;
  font-family: Arial, FreeSans, sans-serif;
  font-size: 12.8px;
  line-height: 19.2px;
}

body.template-album_view #content-core .card-link {
  position: static;
  display: block;
  color: #436976;
  font-family: Arial, FreeSans, sans-serif;
  font-size: 0;
  line-height: 20.48px;
}

body.template-album_view #content-core .card-link::after {
  content: "Leia mais…";
  position: static;
  display: inline-block;
  inset: auto;
  z-index: auto;
  font-size: 12.8px;
}

/* Album legado para pastas de arquivos. O PM3 mantém título e assinatura
   na mesma linha e recua somente a descrição. PDFs recebem um ícone explícito,
   pois o Plone 6 não inclui mais o marcador do tipo no summary listing. */
body.template-album_view #content-core .album-pm3-item {
  display: block;
  margin: 0 0 12.8px;
  line-height: 19.2px;
}

body.template-album_view #content-core .album-pm3-heading,
body.template-album_view #content-core .album-pm3-title,
body.template-album_view #content-core .album-pm3-byline,
body.template-album_view #content-core .album-pm3-byline > div,
body.template-album_view #content-core .album-pm3-byline .mb-1 {
  display: inline;
  margin: 0 !important;
}

body.template-album_view #content-core .album-pm3-title,
body.template-album_view #content-core .album-pm3-title > a {
  font-size: 12.8px;
  font-weight: 700;
  line-height: 19.2px;
}

body.template-album_view #content-core .album-pm3-pdf-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
}

body.template-album_view #content-core .album-pm3-description {
  display: block;
  margin-left: 25.6px;
  font-size: 12.8px;
  line-height: 19.2px;
}

/* O mapa do site do PM3 e' uma arvore tipografica, sem os marcadores do
   Bootstrap. Os separadores pontilhados ficam apenas entre os blocos de
   primeiro nivel. */
body.template-sitemap #content > h1.documentFirstHeading {
  margin: 0 0 17.152px;
  border: 0;
  color: #000;
  font-size: 25.6px;
  line-height: 38.4px;
}

body.template-sitemap #content > .documentDescription {
  margin: 0;
  color: #666;
  font-family: "Helvetica Neue", Arial, FreeSans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

body.template-sitemap #content-core {
  margin: 0;
}

body.template-sitemap #portal-sitemap,
body.template-sitemap #portal-sitemap ul,
body.template-sitemap #portal-sitemap li {
  list-style: none;
}

body.template-sitemap #portal-sitemap {
  margin: 0;
  padding: 0;
  color: #000;
  font-family: Arial, FreeSans, sans-serif;
  font-size: 16.64px;
  font-weight: 700;
  line-height: 19.2px;
}

body.template-sitemap #portal-sitemap > li {
  margin: 0;
  padding: 4.16px 16.64px;
  font-size: 16.64px;
  font-weight: 700;
  line-height: 29.952px;
}

body.template-sitemap #portal-sitemap > li:not(:first-child) {
  border-top: 1px dotted #ddd;
}

body.template-sitemap #portal-sitemap > li > a {
  display: block;
  padding: 0;
  color: #436976 !important;
  font-family: Arial, FreeSans, sans-serif;
  font-size: 16.64px;
  font-weight: 700;
  line-height: 29.952px;
}

body.template-sitemap #portal-sitemap ul {
  margin: 0 0 0 28.288px;
  padding: 3.536px 0;
  font-size: 14.144px;
  font-weight: 400;
  line-height: 29.952px;
}

body.template-sitemap #portal-sitemap ul li {
  margin: 0 0 3.536px;
  padding: 0;
  font-size: 14.144px;
  line-height: 21.216px;
}

body.template-sitemap #portal-sitemap ul a {
  display: block;
  padding: 0;
  color: #436976 !important;
  font-family: Arial, FreeSans, sans-serif;
  font-size: 14.144px;
  line-height: 21.216px;
}

/* ===================== ASSINATURA =====================
 * O PM3 esconde o autor e mostra so' as datas -- o style.css do tema tem
 * ".documentAuthor { display: none }". No Plone 6 o autor sai em
 * <span class="label-by-author">, que aquela regra nao alcanca.
 */
#section-byline .label-by-author {
  display: none;
}

#section-byline {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 10.88px;
  font-weight: 400;
  line-height: 19.2px;
  color: #666666;
}

/* ===================== TODO O CONTEUDO (full_view) =====================
 * No PM3 esta listagem usa itens compactos: titulo 16,64/24,96 em negrito,
 * assinatura da pasta acima da listagem, sem bloco de autor por item, e
 * intervalo de 20px. O template de resumo reutilizado no Plone 6 traz
 * margens e uma caixa de metadados vazia do Bootstrap. Estes valores foram
 * medidos na URL publica /portaltransparencia/convenios-parcerias/2026/. */
body.template-full_view #content-core > article.row > .col > .mb-3 {
  display: none;
}

body.template-full_view #content-core > article.row {
  margin-bottom: 20px !important;
  line-height: 1.4;
}

body.template-full_view #content-core > article.row h2 {
  margin: 0;
  font-size: 16.64px;
  font-weight: 700;
  line-height: 24.96px;
}

body.template-full_view #content-core > article.row > .col > .mb-1:last-child {
  margin-bottom: 0 !important;
}

body.template-full_view #content-core .full-view-file {
  margin: 0;
  line-height: 19.2px;
}

body.template-full_view #content-core .full-view-file img {
  margin-right: 4px;
  vertical-align: middle;
}

body.template-full_view #content-core .full-view-file .discreet {
  color: #666666;
}

/* ===================== OUVIDORIA (claim) =====================
 * O formulario antigo usa selects compactos, campos pessoais estreitos e
 * uma area de detalhes menor. O Plone 6 aplica .form-control/.form-select
 * do Bootstrap em largura total; limitar somente esta tela recupera a
 * proporcao do portal 8180 sem interferir nos demais formularios.
 */
body.template-claim #content-core #formfield-form-widgets-kind select,
body.template-claim #content-core #formfield-form-widgets-area select,
body.template-claim #content-core #formfield-form-widgets-state select {
  display: inline-block;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 2px 4px;
  border: 1px solid #777;
  border-radius: 3px;
  appearance: auto;
  -webkit-appearance: menulist;
  background-image: none;
  background-color: #d6d6d6;
  color: #333;
  font-size: 13px;
  line-height: 16px;
}

body.template-claim #content-core #formfield-form-widgets-kind label,
body.template-claim #content-core #formfield-form-widgets-area label,
body.template-claim #content-core #formfield-form-widgets-state label {
  display: block;
}

body.template-claim #content-core label .required::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  background: #f00;
  content: "";
  transform: none;
  vertical-align: middle;
}

body.template-claim #content-core #formfield-form-widgets-title input,
body.template-claim #content-core #formfield-form-widgets-description textarea {
  border: 1px solid #777;
  border-radius: 0;
}

body.template-claim #content-core #formfield-form-widgets-description textarea {
  height: 360px;
}

body.template-claim #content-core #formfield-form-widgets-name input,
body.template-claim #content-core #formfield-form-widgets-cpf input,
body.template-claim #content-core #formfield-form-widgets-rg input,
body.template-claim #content-core #formfield-form-widgets-email input,
body.template-claim #content-core #formfield-form-widgets-address input,
body.template-claim #content-core #formfield-form-widgets-postal_code input,
body.template-claim #content-core #formfield-form-widgets-city input {
  width: 260px;
  max-width: 100%;
  height: auto;
  padding: 2px 4px;
  border: 1px solid #777;
  border-radius: 0;
  font-size: 13px;
  line-height: 16px;
}

/* Na pagina publica, o PM3 deixa o titulo da tabela afastado da consulta,
 * mas proximo da propria tabela. */
body.portaltype-ombudsoffice:not(.template-claim) #content-core > form[action*="search-claim"] + h2 {
  margin-top: 18px;
  margin-bottom: 4px;
}

body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-chart {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 400px;
  height: 300px;
  margin: 8px 0 18px;
  padding: 18px 10px 34px 32px;
  border-bottom: 1px solid #777;
  border-left: 1px solid #777;
  background: transparent;
}

body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-chart-item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  flex-direction: column;
}

body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-chart-count {
  min-height: 18px;
  color: #444;
  font-size: 12px;
  line-height: 18px;
}

body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-chart-bar {
  display: block;
  width: 70%;
  min-height: 0;
  border-radius: 3px 3px 0 0;
  background: #436976;
}

body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-chart-bar.state-accepted {
  background: #fabc05;
}

body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-chart-bar.state-pending,
body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-chart-bar.state-moving {
  background: #7a8a99;
}

body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-chart-bar.state-rejected {
  background: #a64b4b;
}

body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-chart-label {
  position: absolute;
  bottom: -29px;
  width: 82px;
  overflow-wrap: anywhere;
  color: #444;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
}

body.portaltype-ombudsoffice:not(.template-claim) .ombudsman-stats-table {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Contato: mensagem obrigatoria com tres vezes a altura original (38px) e
 * o mesmo marcador quadrado usado no formulario da Ouvidoria. */
body.template-contact-info #form-widgets-message {
  height: 114px;
}

body.template-contact-info #content-core label .required::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  background: #f00;
  content: "";
  transform: none;
  vertical-align: middle;
}

/* Os controles Grande/Normal/Pequeno de accessibility-info usam as mesmas
 * classes e proporções do Plone 4/Portal Modelo 3. */
body.largeText {
  font-size: 125%;
}

body.smallText {
  font-size: 85%;
}

/* Chamado da Ouvidoria: recuperar a escala tipografica e as celulas do PM3.
 * No Plone 6 o Bootstrap sobe o texto herdado para 16px, nao limpa o float
 * das duas fieldsets e deixa os commentBody sem o contorno original. */
body.portaltype-claim.template-view #content {
  font-size: 80%;
  line-height: 1.5;
}

body.portaltype-claim.template-view #content .documentByLine {
  font-size: 0.85em;
}

body.portaltype-claim.template-view #content h1.documentFirstHeading {
  margin-bottom: 0.5em;
  font-size: 2.5em;
  line-height: 1.5;
}

body.portaltype-claim.template-view #content-core {
  margin-bottom: 0;
  font-size: 1em;
}

body.portaltype-claim.template-view .visualClear {
  clear: both;
}

body.portaltype-claim.template-view #content h2 {
  margin: 0;
  font-size: 1.3em;
  line-height: 1.5;
  font-weight: 700;
}

body.portaltype-claim.template-view #content h3 {
  margin: 0;
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 700;
}

/* No PM3, os campos de identificacao do chamado e os metadados de cada
 * resposta usam rótulos em negrito. */
body.portaltype-claim.template-view #content label.horizontal {
  font-weight: 700;
}

/* O formulario novo do Plone 6 aplica float e largura de coluna a textarea.
 * O formulario do PM3 empilha a caixa de texto abaixo do procedimento e a
 * deixa com a largura integral da coluna. */
body.portaltype-claim.template-view #content form[action*="add-response"] label.horizontal {
  display: inline;
}

body.portaltype-claim.template-view #content form[action*="add-response"] select {
  display: inline-block;
  float: none;
}

body.portaltype-claim.template-view #content form[action*="add-response"] textarea {
  display: block;
  float: none;
  box-sizing: content-box;
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
  font: 12.8px Monaco, "Courier New", Courier, monospace;
  line-height: normal;
}

body.portaltype-claim.template-view #content form[action*="add-response"] button {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border-radius: 4px;
  font: 14px/20px Arial, FreeSans, sans-serif;
}

body.portaltype-claim.template-view #content .claimTitle .commentBody,
body.portaltype-claim.template-view #content .claimResponse .commentBody {
  box-sizing: border-box;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  box-shadow: 0 0 0.5em #888;
  font-size: 1em;
  line-height: 1.4;
}

/* Campos RichText com seletor de MIME: o TinyMCE recebe 800px pelo registro
 * acima; quando o editor troca para text/x-web-textfile, o mesmo campo volta
 * a ser uma textarea e precisa conservar exatamente a mesma altura. */
#content .field:has(select.pat-textareamimetypeselector) textarea {
  box-sizing: border-box;
  height: 800px;
  min-height: 800px;
  resize: vertical;
}

/* TinyMCE aplica a altura final como estilo inline no contêiner. Reforçamos
 * os dois nomes de classe usados pelas versões moderna e legada do editor,
 * para que o modo text/html tenha a mesma altura efetiva do textarea. */
#content .field:has(select.pat-textareamimetypeselector) .tox-tinymce,
#content .field:has(select.pat-textareamimetypeselector) .mce-tinymce {
  height: 800px !important;
  min-height: 800px !important;
}

#content .field:has(select.pat-textareamimetypeselector) .tox-edit-area,
#content .field:has(select.pat-textareamimetypeselector) .tox-edit-area__iframe,
#content .field:has(select.pat-textareamimetypeselector) .mce-iframe-container {
  min-height: 800px !important;
}