/* =============================================================================
   PORTAL V2 — CSS Global
   Pipeline: pipeline-redesign-portal-institucional / Sprint 1 (TASK-003)
   =============================================================================
   Contém:
   - Modo alto contraste via classe .high-contrast em <html>
   - scroll-margin-top para âncoras (compensar stack sticky ~136px)
   - HTMX loading indicator
   - Font fallback da barra de emergência
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Âncoras com scroll-margin-top (DEC-050)
   Stack sticky: accessibility_bar (32px) + emergency_bar (~40px) + header (64px) = 136px
   --------------------------------------------------------------------------- */
:target,
[id]:target,
.scroll-target,
#main-content {
  scroll-margin-top: 136px;
}

/* ---------------------------------------------------------------------------
   HTMX Loading Indicator
   Elemento marcado com .htmx-indicator fica oculto por padrão.
   Quando a request está em andamento (.htmx-request), torna-se visível.
   --------------------------------------------------------------------------- */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Skeleton em bloco: opacity sozinha ainda reserva altura */
div.htmx-indicator:not(.htmx-request) {
  height: 0;
  overflow: hidden;
}

.htmx-request > div.htmx-indicator,
.htmx-request div.htmx-indicator,
div.htmx-indicator.htmx-request {
  height: auto;
  overflow: visible;
}

/* ---------------------------------------------------------------------------
   Alto contraste (TASK-003)
   Classe .high-contrast aplicada em <html> via Alpine portalConfig().
   Meta: AAA (>= 7:1) em modo alto contraste.
   --------------------------------------------------------------------------- */
.high-contrast,
.high-contrast * {
  --hc-bg:     #000000;
  --hc-text:   #ffffff;
  --hc-accent: #ffff00;
  --hc-border: #ffffff;
  --hc-link:   #ffff00;
  --hc-muted:  #dddddd;
}

/* Fundos */
.high-contrast body,
.high-contrast main,
.high-contrast section,
.high-contrast article,
.high-contrast aside,
.high-contrast .bg-white,
.high-contrast .bg-gray-50,
.high-contrast .bg-gray-100,
.high-contrast .bg-violet-50,
.high-contrast .bg-violet-100 {
  background-color: var(--hc-bg) !important;
  color: var(--hc-text) !important;
}

/* Textos */
.high-contrast p,
.high-contrast span,
.high-contrast li,
.high-contrast td,
.high-contrast th,
.high-contrast label {
  color: var(--hc-text) !important;
}

/* Headings */
.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast h4,
.high-contrast h5,
.high-contrast h6 {
  color: var(--hc-text) !important;
}

/* Links */
.high-contrast a:not([class*="bg-"]) {
  color: var(--hc-link) !important;
  text-decoration: underline !important;
}

/* Bordas */
.high-contrast .border,
.high-contrast [class*="border-"] {
  border-color: var(--hc-border) !important;
}

/* Cards e superfícies */
.high-contrast .rounded-xl,
.high-contrast .rounded-lg,
.high-contrast .shadow-sm,
.high-contrast .shadow-md {
  background-color: var(--hc-bg) !important;
  border: 1px solid var(--hc-border) !important;
  box-shadow: none !important;
}

/* Inputs */
.high-contrast input,
.high-contrast textarea,
.high-contrast select {
  background-color: var(--hc-bg) !important;
  color: var(--hc-text) !important;
  border: 2px solid var(--hc-border) !important;
}

/* Botões primários — mantém fundo mas com borda forte */
.high-contrast button,
.high-contrast [role="button"] {
  outline: 2px solid var(--hc-border) !important;
}

/* Barra de acessibilidade em alto contraste */
.high-contrast .portal-accessibility-bar {
  background-color: var(--hc-bg) !important;
  border-bottom: 2px solid var(--hc-border) !important;
}

/* Header em alto contraste */
.high-contrast .portal-header {
  background-color: var(--hc-bg) !important;
  border-bottom: 2px solid var(--hc-border) !important;
}

/* Barra de emergência — preserva fundo vermelho mas reforça contraste */
.high-contrast .portal-emergency-bar {
  background-color: #8b0000 !important;
  border-bottom: 2px solid var(--hc-text) !important;
}

/* Footer em alto contraste */
.high-contrast footer {
  background-color: var(--hc-bg) !important;
  border-top: 2px solid var(--hc-border) !important;
}

.high-contrast footer * {
  color: var(--hc-text) !important;
}

/* Badges e chips */
.high-contrast .badge,
.high-contrast [class*="bg-violet-1"],
.high-contrast [class*="bg-rose-1"],
.high-contrast [class*="bg-green-5"],
.high-contrast [class*="bg-red-5"],
.high-contrast [class*="bg-amber-5"],
.high-contrast [class*="bg-blue-5"] {
  background-color: var(--hc-bg) !important;
  color: var(--hc-accent) !important;
  border: 1px solid var(--hc-accent) !important;
}

/* Foco — reforço em alto contraste */
.high-contrast :focus-visible {
  outline: 3px solid var(--hc-accent) !important;
  outline-offset: 2px !important;
}

/* Ícones funcionais */
.high-contrast svg:not([aria-hidden="true"]) {
  color: var(--hc-text) !important;
  fill: currentColor;
}

/* Texto muted em alto contraste */
.high-contrast .text-gray-400,
.high-contrast .text-gray-500,
.high-contrast .text-gray-600,
.high-contrast .text-gray-700 {
  color: var(--hc-muted) !important;
}

.high-contrast .text-foreground {
  color: var(--hc-text) !important;
}

.high-contrast .text-violet-300,
.high-contrast .text-violet-400,
.high-contrast [class*="text-muted"] {
  color: var(--hc-muted) !important;
}

/* Destaque portal (item ativo / menu aberto) */
.high-contrast [class*="text-portal-primary"] {
  color: var(--hc-accent) !important;
}

/* Nav do header — botões e links legíveis */
.high-contrast .portal-header nav button,
.high-contrast .portal-header nav a:not([class*="bg-"]) {
  color: var(--hc-text) !important;
}

.high-contrast .portal-header nav button[class*="text-portal-primary"],
.high-contrast .portal-header nav a[class*="text-portal-primary"],
.high-contrast .portal-header nav a.font-semibold {
  color: var(--hc-accent) !important;
}

/* Galeria de notícia — botão que envolve a miniatura (abre modal) */
button.news-img-trigger {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}

button.news-img-trigger:hover img {
  opacity: 0.92;
}

/* Font fallback — Inter não carregou */
@font-face {
  font-family: 'Inter';
  src: local('Inter');
  font-display: swap;
}