/*
  Casca do AsturMaker: barra superior e sidebar, no desenho do PDF.

  Estratégia deliberada: o posicionamento estrutural (fixed, largura, transform
  de abrir/fechar) continua a ser do Dashmix, para o botão de hambúrguer e o
  `Dashmix.layout('sidebar_toggle')` continuarem a funcionar sem reescrita.
  Aqui só se redefine o conteúdo e as cores, sempre por token, para o tema
  escuro acompanhar.
*/

/* ───────────────────────── barra superior ───────────────────────── */

/*
  Especificidade deliberada. Em tema escuro o Dashmix acrescenta
  `page-header-dark` ao #page-container e a sua regra
  (#page-container.page-header-dark #page-header) vale (2,1,0) — batia a minha
  e deixava a barra azul-escura com texto azul-escuro por cima. Esta vale
  (2,2,0). Mesma razão para a sidebar, logo abaixo.
*/
#page-container.am-app #page-header.am-topbar {
  background: var(--am-surface);
  border-bottom: 1px solid var(--am-border);
  box-shadow: none;
}

#page-container.am-app #page-header.am-topbar .am-topbar__section,
#page-container.am-app #page-header.am-topbar .am-topbar__burger,
#page-container.am-app #page-header.am-topbar .am-topbar__icon-btn {
  color: var(--am-text-muted);
}

#page-container.am-app #page-header.am-topbar .am-topbar__section.is-active {
  background: var(--am-primary-soft);
  color: var(--am-primary);
}

#page-container.am-app #page-header.am-topbar .am-topbar__brand {
  color: var(--am-text);
}

.am-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--am-space-2);
  height: 56px;
  padding: 0 var(--am-space-4);
}

.am-topbar__burger,
.am-topbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--am-radius-sm);
  background: transparent;
  color: var(--am-text-muted);
  cursor: pointer;
  transition: background var(--am-transition), color var(--am-transition);
}

.am-topbar__burger:hover,
.am-topbar__icon-btn:hover {
  background: var(--am-surface-hover);
  color: var(--am-text);
}

.am-topbar__burger:focus-visible,
.am-topbar__icon-btn:focus-visible,
.am-topbar__section:focus-visible,
.am-topbar__brand:focus-visible {
  outline: 2px solid var(--am-primary);
  outline-offset: 2px;
}

.am-topbar__sections {
  display: flex;
  align-items: center;
  gap: var(--am-space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.am-topbar__sections::-webkit-scrollbar {
  display: none;
}

.am-topbar__section {
  display: inline-flex;
  align-items: center;
  gap: var(--am-space-2);
  padding: var(--am-space-2) var(--am-space-3);
  border-radius: var(--am-radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--am-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--am-transition), color var(--am-transition);
}

.am-topbar__section:hover {
  background: var(--am-surface-hover);
  color: var(--am-text);
}

/* A aba ativa carrega a cor de marca; as outras ficam neutras. */
.am-topbar__section.is-active {
  background: var(--am-primary-soft);
  color: var(--am-primary);
}

.am-topbar__section i {
  font-size: 0.875rem;
  opacity: 0.85;
}

.am-topbar__spacer {
  flex: 1 1 auto;
  min-width: var(--am-space-2);
}

/* ───────────────────────── busca ───────────────────────── */

.am-topbar__search {
  position: relative;
  flex: 0 1 320px;
  min-width: 150px;
}

.am-topbar__search-icon {
  position: absolute;
  left: var(--am-space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  color: var(--am-text-subtle);
  pointer-events: none;
}

.am-app .am-topbar__search-input {
  width: 100%;
  height: 36px;
  padding: 0 var(--am-space-3) 0 2rem;
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  background: var(--am-bg);
  color: var(--am-text);
  font-size: 0.8125rem;
  transition: border-color var(--am-transition), background var(--am-transition);
}

.am-app .am-topbar__search-input::placeholder {
  color: var(--am-text-subtle);
}

.am-app .am-topbar__search-input:focus {
  outline: none;
  border-color: var(--am-primary);
  background: var(--am-surface);
}

.am-topbar__brand {
  flex-shrink: 0;
  padding-left: var(--am-space-2);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--am-text);
  text-decoration: none;
}

.am-topbar__brand span {
  color: var(--am-primary);
}

/* Seis secções (com GESTIÓN e EMPRESA) não cabem com ícones e marca em
   portáteis: a última aba ficava cortada. Por ordem, sai o ícone das abas,
   depois a marca (já está no topo da sidebar) e a busca encolhe, depois a
   letra das abas. Abaixo de 992 px as abas saem de todo (a sidebar tem-nas). */
@media (max-width: 1599px) {
  .am-topbar__section i { display: none; }
  .am-topbar__section { padding: var(--am-space-2) 0.625rem; }
  .am-topbar__search { flex-basis: 260px; }
}

@media (max-width: 1439px) {
  .am-topbar__brand { display: none; }
  .am-topbar__search { flex: 1 1 160px; min-width: 120px; }
}

@media (max-width: 1199px) {
  .am-topbar__section { padding: var(--am-space-2) 0.5rem; font-size: 0.75rem; letter-spacing: 0.02em; }
  .am-topbar__search { min-width: 96px; }
}

/* Entre 992 e 1099 px (com a sidebar aberta) quem cede é a busca, até ficar
   só a lupa: as abas não encolhem. */
@media (min-width: 992px) and (max-width: 1099px) {
  .am-topbar__sections { flex-shrink: 0; }
  .am-topbar__section { padding: var(--am-space-2) 0.375rem; letter-spacing: 0; }
  .am-topbar__search { min-width: 44px; }
}

@media (max-width: 991px) {
  .am-topbar__sections {
    display: none;
  }
}

@media (max-width: 575px) {
  .am-topbar__search {
    display: none;
  }
}

/* ───────────────────────── sidebar ───────────────────────── */

#page-container.am-app #sidebar.am-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--am-surface);
  border-right: 1px solid var(--am-border);
  color: var(--am-text);
}

#page-container.am-app #sidebar.am-sidebar .am-sidebar__logo {
  color: var(--am-text);
}

#page-container.am-app #sidebar.am-sidebar .am-sidebar__link {
  color: var(--am-text-muted);
}

#page-container.am-app #sidebar.am-sidebar .am-sidebar__link.is-active {
  color: var(--am-primary);
}

#page-container.am-app #sidebar.am-sidebar .am-sidebar__link--danger {
  color: var(--am-danger);
}

.am-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--am-space-4);
  border-bottom: 1px solid var(--am-border);
  flex-shrink: 0;
}

.am-sidebar__logo {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--am-text);
  text-decoration: none;
}

.am-sidebar__logo span {
  color: var(--am-primary);
}

.am-sidebar__close {
  border: 0;
  background: transparent;
  color: var(--am-text-muted);
  font-size: 1rem;
  cursor: pointer;
}

.am-sidebar__scroll {
  flex: 1 1 auto;
  /* Sem isto o filho flex cresce até ao conteúdo (min-height: auto) e, em
     ecrãs de 720-800 px, empurrava o rodapé (notificações, tema, sair) para
     fora da vista em vez de rolar a lista. */
  min-height: 0;
  overflow-y: auto;
  padding: var(--am-space-4) var(--am-space-3);
}

.am-sidebar__label {
  margin: 0 0 var(--am-space-2);
  padding: 0 var(--am-space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am-text-subtle);
}

.am-sidebar__label + .am-sidebar__list {
  margin-bottom: var(--am-space-5);
}

/* Lista estável (nav.ejs): grupos fixos, só o destaque muda. */
.am-sidebar__list.am-sidebar__group {
  margin-bottom: var(--am-space-4);
}

.am-sidebar__group .am-sidebar__link {
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
}

.am-sidebar__label i {
  margin-right: 0.25rem;
  font-size: 0.625rem;
}

/* A secção onde se está: o rótulo acende, para ler "onde estou" de relance. */
.am-sidebar__label.is-current {
  color: var(--am-primary);
}

.am-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.am-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--am-space-3);
  width: 100%;
  padding: var(--am-space-2) var(--am-space-3);
  border: 0;
  border-radius: var(--am-radius-sm);
  background: transparent;
  color: var(--am-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--am-transition), color var(--am-transition);
}

.am-sidebar__link:hover {
  background: var(--am-surface-hover);
  color: var(--am-text);
}

.am-sidebar__link:focus-visible {
  outline: 2px solid var(--am-primary);
  outline-offset: -2px;
}

/* Estado ativo: barra de cor à esquerda, não um bloco cheio — mantém a
   densidade da lista e diz onde se está sem gritar. */
.am-sidebar__link.is-active {
  background: var(--am-primary-soft);
  color: var(--am-primary);
  box-shadow: inset 2px 0 0 var(--am-primary);
}

.am-sidebar__link i {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  font-size: 0.875rem;
}

.am-sidebar__link-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.am-sidebar__link-text small {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--am-text-subtle);
}

.am-sidebar__link--danger {
  color: var(--am-danger);
}

.am-sidebar__link--danger:hover {
  background: var(--am-danger-soft);
  color: var(--am-danger);
}

.am-sidebar__badge {
  margin-left: auto;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--am-warning);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

/* Mensagens do chat por ler: azul, para não se confundir com os processos. */
.am-sidebar__badge--info { background: var(--am-primary); }

.am-sidebar__foot {
  flex-shrink: 0;
  padding: var(--am-space-3);
  border-top: 1px solid var(--am-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ───────────────────────── painel de notificações ───────────────────────── */

.am-notif {
  position: fixed;
  left: var(--am-space-3);
  bottom: 4.5rem;
  z-index: 1040;
  width: min(320px, calc(100vw - 2rem));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-lg);
  padding: var(--am-space-3);
}

.am-notif__title {
  margin: 0 0 var(--am-space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--am-text-subtle);
}

/* "En curso" vem depois dos avisos: precisa de ar antes do seu título. */
.am-notif__title--grupo {
  margin-top: var(--am-space-4);
}

.am-notif__item {
  display: block;
  padding: var(--am-space-2) 0;
  border-bottom: 1px solid var(--am-border);
  color: inherit;
  text-decoration: none;
  font-size: 0.8125rem;
}

/* Um aviso não tem barra de progresso: distingue-se pela marca à esquerda. */
.am-notif__item--aviso {
  padding-left: var(--am-space-3);
  border-left: 3px solid var(--am-primary);
}

.am-notif__item--aviso.is-error {
  border-left-color: var(--am-danger);
}

.am-notif__item:last-child {
  border-bottom: 0;
}

.am-notif__item-name {
  display: block;
  font-weight: 600;
  color: var(--am-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-notif__item-stage {
  color: var(--am-text-muted);
}

.am-notif__bar {
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--am-border);
  overflow: hidden;
}

.am-notif__bar span {
  display: block;
  height: 100%;
  background: var(--am-primary);
}

.am-notif__empty {
  color: var(--am-text-muted);
  font-size: 0.8125rem;
  margin: 0;
}

/* ───────────────────────── redes sociales ───────────────────────── */

.am-rrss-group {
  margin-bottom: var(--am-space-5);
}

.am-rrss-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-space-3);
  flex-wrap: wrap;
}

.am-rrss-group__meta {
  display: flex;
  align-items: center;
  gap: var(--am-space-3);
}

.am-rrss-count {
  font-size: 0.8125rem;
  color: var(--am-text-muted);
}

.am-rrss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--am-space-4);
}

.am-rrss-card {
  margin: 0;
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  overflow: hidden;
  background: var(--am-surface);
  display: flex;
  flex-direction: column;
}

/* A miniatura tem altura fixa e o conteúdo define a do resto: assim todos os
   cartões da linha alinham sem esticar sobre espaço vazio. */
.am-rrss-card__thumb {
  display: block;
  height: 140px;
  background: var(--am-bg);
}

.am-rrss-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.am-rrss-card__body {
  padding: var(--am-space-3);
  border-top: 1px solid var(--am-border);
}

/* Linha cujo ficheiro já não está no servidor: em vez de uma imagem partida,
   diz-se o que se passa, e o cartão continua a poder apagar-se. */
.am-rrss-card__missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--am-space-2);
  color: var(--am-text-muted);
  font-size: 0.8125rem;
}
.am-rrss-card__missing .fa { font-size: 1.5rem; opacity: .5; }
.am-rrss-card.is-missing { border-style: dashed; }

.am-rrss-card__acciones {
  display: flex;
  gap: var(--am-space-1);
  margin-top: var(--am-space-2);
}

.am-rrss-aviso {
  margin: 0 0 var(--am-space-3);
  font-size: 0.875rem;
  color: var(--am-text-muted);
}

.am-rrss-card__name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--am-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-rrss-card__desc {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--am-text-muted);
}

.am-rrss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-space-2);
}

.am-rrss-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--am-space-2);
  padding: var(--am-space-2) var(--am-space-3);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  background: var(--am-surface);
  color: var(--am-text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color var(--am-transition), color var(--am-transition);
}

.am-rrss-chip:hover {
  border-color: var(--am-primary);
  color: var(--am-primary);
}

/* Botão de submeter a busca: presente para o teclado e para leitores de ecrã,
   fora do fluxo visual porque o campo já explica o que faz. */
.am-topbar__search-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.am-topbar__search-submit:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 0 var(--am-space-2);
  clip: auto;
  padding: var(--am-space-1) var(--am-space-2);
  border: 1px solid var(--am-primary);
  border-radius: var(--am-radius-sm);
  background: var(--am-surface);
  color: var(--am-primary);
  font-size: 0.75rem;
}

/* ───────────────────────── transição entre páginas ─────────────────────────
   O app é multi-página: cada clique era um "piscar" — a página velha some,
   branco, a nova pinta de uma vez. Com View Transitions entre documentos
   (Chrome/Edge 126+, Safari 18.2+; os outros simplesmente ignoram) o
   conteúdo faz um cross-fade curto e a moldura (sidebar + barra superior)
   fica parada, porque tem nome próprio e é igual nas duas páginas. */

@view-transition {
  navigation: auto;
}

#page-container.am-app #sidebar.am-sidebar {
  view-transition-name: am-sidebar;
}

#page-container.am-app #page-header.am-topbar {
  view-transition-name: am-topbar;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
  animation-timing-function: ease-out;
}

/* A moldura não anima: é o ponto fixo que diz "continuas no mesmo sítio". */
::view-transition-group(am-sidebar),
::view-transition-group(am-topbar),
::view-transition-old(am-sidebar),
::view-transition-new(am-sidebar),
::view-transition-old(am-topbar),
::view-transition-new(am-topbar) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ───────────────────────── barra de progresso da navegação ─────────────────
   astur-shell.js põe html.am-nav-pending quando um clique numa ligação
   interna demora mais de 150 ms a trocar de página (VM longe, página
   pesada). Sem isto, o clique parecia não ter feito nada e as pessoas
   clicavam de novo. */

.am-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

.am-nav-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  background: var(--am-primary);
  border-radius: 0 3px 3px 0;
  transform: translateX(-100%);
}

html.am-nav-pending .am-nav-progress {
  opacity: 1;
}

html.am-nav-pending .am-nav-progress::before {
  animation: am-nav-progress 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes am-nav-progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
  html.am-nav-pending .am-nav-progress::before {
    animation: none;
    width: 100%;
    transform: none;
    opacity: 0.6;
  }
}


/* ── Buscador de la cabecera: las sugerencias cuelgan de la caja ─────── */
.am-sugerencias--buscar {
  left: 0; right: 0; top: calc(100% + 4px);
  max-height: 420px;
  padding: .25rem 0;
}
.am-sugerencias__grupo {
  margin: .4rem 0 .15rem;
  padding: 0 .7rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--am-text-muted);
}
.am-sugerencias--buscar a {
  display: flex; flex-direction: column; gap: 1px;
  padding: .4rem .7rem;
  color: var(--am-text);
  text-decoration: none;
  font-size: .875rem;
}
.am-sugerencias--buscar a small { color: var(--am-text-muted); font-size: .75rem; }
.am-sugerencias--buscar a:hover,
.am-sugerencias--buscar a:focus { background: var(--am-surface-hover); outline: none; }
.am-sugerencias__mas {
  border-top: 1px solid var(--am-border);
  margin-top: .25rem;
  font-weight: 600;
  color: var(--am-primary, var(--am-text)) !important;
}