/*
 * Complemento das folhas do une.org.br para as páginas estáticas: o que o Vuetify fazia por JavaScript
 * (tema, "celular" abaixo de 1264 px, menus, gaveta, cabeçalho que encolhe) feito em CSS.
 */

/* Tema (o Vuetify gerava isto em tempo de execução) */
.v-application a { color: #0e66b3; }
.v-application .primary { background-color: #0e66b3 !important; border-color: #0e66b3 !important; }
.v-application .primary--text { color: #0e66b3 !important; caret-color: #0e66b3 !important; }
body { margin: 0; }
.une-invisivel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cabeçalho: 128 px, encolhe para 56 px ao rolar (v-app-bar--shrink-on-scroll; medido no site em 14/10/2026).
   Abas e menus acompanham pela altura herdada (height: inherit do tema). */
.une-topo, .une-topo .v-toolbar__content { height: 128px; transition: height .2s; }
.une-topo.une-encolhido, .une-topo.une-encolhido .v-toolbar__content { height: 56px; }
.une-logo { display: flex; align-items: center; }
/* A logo ocupa sempre 177 px de largura e encolhe só na altura, contida, como o v-img do site. */
.une-logo img { display: block; height: 100%; max-height: 94px; width: 177px; object-fit: contain; }

/* Abas e menus suspensos */
/* Só zera o que o navegador põe em <button>; tamanho e peso da fonte vêm da regra .v-tab do Vuetify. */
.une-topo button.v-tab { background: none; border: 0; font-family: inherit; cursor: pointer; }
footer .une-logo-rodape { display: block; }
.une-topo .une-sublinhado { position: relative; }
.une-topo .une-sublinhado::after { background: #0e66b3 !important; }
.une-topo .v-tab--active::after, .une-topo .une-sublinhado::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; }
.une-menu { position: relative; display: flex; }
/* A faixa das abas do Vuetify corta o que passa dela (overflow: hidden e contain: content, que recorta a
   pintura); no site o menu é desenhado fora dela, por JavaScript. Aqui ele fica dentro da aba, então a faixa
   precisa deixá-lo aparecer. */
.une-topo .v-slide-group__wrapper { overflow: visible; contain: none; }
.une-submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; z-index: 8; border-radius: 0 0 4px 4px; overflow: hidden;
  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); }
.une-menu:hover .une-submenu, .une-menu:focus-within .une-submenu, .une-menu.une-aberto .une-submenu { display: block; }

/* Gaveta (menu do celular) */
.une-gaveta { transform: translateX(100%); visibility: hidden; transition: transform .2s, visibility .2s; }
.une-gaveta.une-aberta { transform: translateX(0); visibility: visible; }
.une-cortina { position: fixed; inset: 0; z-index: 6; background: rgba(33, 33, 33, .46); }
.une-gaveta button.v-list-group__header { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.une-gaveta .v-list-group--active > .v-list-group__header .v-list-group__header__append-icon .v-icon { transform: rotate(-180deg); }

/* "Celular" do Vuetify: abaixo de 1264 px */
.une-so-mobile { display: none !important; }
.une-so-mobile-bloco { display: none !important; }
@media (max-width: 1263.98px) {
  .une-so-desktop { display: none !important; }
  .une-so-mobile { display: flex !important; }
  .une-so-desktop-bloco { display: none !important; }
  .une-so-mobile-bloco { display: block !important; }
  /* Precisa vencer `.v-application .d-flex { display: flex !important }` do Vuetify (o site tira o d-flex no celular). */
  .v-application .une-item.d-flex { display: block !important; }
  .une-item .une-item-imagem { max-width: 100% !important; margin-right: 0 !important; }
  .une-paginacao { text-align: center; }
  /* Cartões de Publicações e Moções: centralizados no "celular", como o site faz por JavaScript. */
  .une-centro-celular { justify-content: center !important; }
}
/* Portal de Gestão: centralizado abaixo de 600 px (o "extra small" do Vuetify). */
@media (max-width: 599.98px) { .une-centro-xs { justify-content: center !important; } }

/* Paginação numerada com links (no site são botões): mesma caixa e cor do botão do Vuetify. */
.v-pagination a.v-pagination__item, .v-pagination a.v-pagination__navigation, .v-pagination span.v-pagination__navigation {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.v-application .v-pagination a.v-pagination__item { color: rgba(0, 0, 0, .87); }
/* No site os botões são <button>, que pegam a fonte Poppins da regra `button, h1, h2, h3` do tema; aqui são links. */
.v-application a.v-btn, .v-application a.v-pagination__item { font-family: Poppins, sans-serif; }
/* E lá o botão do cartão fica dentro do link, então o Vuetify não o aperta para 8 px como filho de .v-card__actions. */
.v-application .v-card__actions > a.v-btn.v-btn { padding: 0 16px; }

/* Conteúdo vindo do editor e do WordPress */
.post-content img { max-width: 100%; height: auto; }
.post-content [data-embed] iframe, .post-content iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.post-content table { border-collapse: collapse; display: block; overflow-x: auto; }
.post-content th, .post-content td { border: 1px solid #e0e0e0; padding: 8px; }
.une-relacionados:empty { min-height: 320px; }

/* Downloads (/a-une/downloads/): grade de cartões da mesma largura, com a capa, o título no topo e "download"
   no pé (16/10/2026; o une.org.br desenha os cartões sem capa e com o título solto). */
.une-downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; width: 100%; flex: 1 1 100%; }
.une-download { display: flex; flex-direction: column; height: 100%; }
.une-download-capa { aspect-ratio: 185 / 130; background: #f5f5f5; overflow: hidden; border-radius: 4px 4px 0 0; }
.une-download-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v-application .une-download .v-card__title { flex: 1 1 auto; align-items: flex-start; font-size: 1rem; line-height: 1.4; word-break: normal; }
.une-download .v-card__actions { padding: 0 16px 16px; }
@media (max-width: 599px) {
  .une-downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .v-application .une-download .v-card__title { font-size: 0.875rem; padding: 12px; }
  .une-download .v-card__actions { padding: 0 12px 12px; }
}