MediaWiki:Vector-2022.css: Difference between revisions

Latest revision as of 09:38, 8 April 2026

/* Remove o ícone original vazio que está a criar o espaço no Logout */
#pt-logout a .vector-icon {
  display: none !important;
}

/* Ajuste fino do espaçamento no link do logout */
#pt-logout a {
  gap: 0px !important; /* Remove qualquer espaço residual entre elementos */
}

/* Garante que o teu ícone (::before) tenha a margem correta */
#pt-logout a::before {
  margin-right: 8px !important; /* Ajusta este valor (ex: 4px) para aproximar mais */
}

/* 1. Remove sublinhados, bordas e sombras de todos os menus (incluindo Logout) */
#p-personal li a,
#p-user-menu-content li a,
#p-user-menu-logout li a,
#p-views li a,
#p-personal li a::before,
#p-user-menu-logout li a::before,
#p-views li a::before {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* 2. Garante que o link em si não sublinha no hover */
#p-personal li a:hover,
#p-user-menu-content li a:hover,
#p-user-menu-logout li a:hover,
#p-views li a:hover {
  text-decoration: none !important;
}

/* 3. Força o sublinhado APENAS no span (texto) no hover */
#p-personal li a:hover span,
#p-user-menu-content li a:hover span,
#p-user-menu-logout li a:hover span,
#p-views li a:hover span {
  text-decoration: underline !important;
}

/* 2. CONFIGURAÇÃO PARA A ESTRELA (BARRA SUPERIOR) */
#ca-watch .vector-icon,
#ca-unwatch .vector-icon {
  display: none !important;
}

#ca-watch a::before,
#ca-unwatch a::before {
  font-family: "Material Symbols Rounded" !important; /* Usando a Rounded que importaste */
  font-size: 24px;
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  font-variation-settings:
    "FILL" 0,
    "wght" 400;
}

#ca-watch a::before {
  content: "star";
  font-variation-settings: "FILL" 0;
}
#ca-unwatch a::before {
  content: "star";
  font-variation-settings: "FILL" 1;
} /* Estrela preenchida */

/* 3. CONFIGURAÇÃO PARA O MENU DROPDOWN (PERFIL) */
#p-personal .vector-icon,
#p-user-menu-content .vector-icon {
  display: none !important;
}

#p-personal li a::before,
#p-user-menu-content li a::before {
  font-family: "Material Symbols Outlined" !important;
  font-size: 20px;
  color: #000000;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  text-align: center;
  font-variation-settings: "FILL" 0;
}

/* Ícones específicos usando os nomes das Symbols */
#pt-userpage a::before {
  content: "person";
}
#pt-mytalk a::before {
  content: "chat_bubble";
}
#pt-preferences a::before {
  content: "settings";
}
#pt-watchlist a::before {
  content: "visibility";
}
#pt-mycontris a::before {
  content: "history_edu";
}

#pt-logout a::before {
  content: "logout" !important;
  font-family: "Material Symbols Outlined" !important;
  font-size: 20px !important;
  color: #000000 !important;
  margin-right: 10px;
  text-transform: none;
}

/* 1. Esconde o ícone original teimoso */
#ca-watch .vector-icon,
#ca-unwatch .vector-icon {
  display: none !important;
}

/* 2. Cria o novo ícone usando Material Icons */
#ca-watch a::before,
#ca-unwatch a::before {
  font-family: "Material Symbols Rounded";
  content: "bookmark_add"; /* Ícone da estrela vazia */
  font-size: 20px;
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

/* 3. Muda para a estrela cheia quando a página já está vigiada */
#ca-unwatch a::before {
  content: "bookmark_remove"; /* Ícone da estrela preenchida */
}

/* Se houver texto ao lado do ícone no hover, também fica branco */
.cdx-button--weight-quiet.cdx-button--fake-button--enabled:hover span {
  color: #ffffff !important;
}

/* Ajuste específico para os itens da lista do menu de utilizador */
.vector-menu-content-list .vector-icon {
  display: inline-block !important;
  visibility: visible !important;
}

/* Cor do texto apenas para botões com fundo escuro (framed) */
.oo-ui-buttonElement-framed
  > .oo-ui-buttonElement-button
  > .oo-ui-labelElement-label {
  color: #ffffff !important;
}

/* Forçar ícones brancos em botões com fundo escuro (Atronia Style) */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled
  > .oo-ui-buttonElement-button
  > .oo-ui-iconElement-icon {
  filter: brightness(0) invert(1) !important;
}

/* Caso o botão tenha um indicador (setinha de dropdown), também fica branco */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled
  > .oo-ui-buttonElement-button
  > .oo-ui-indicatorElement-indicator {
  filter: brightness(0) invert(1) !important;
}

/**********************************************************/
/* Esconder secções de Width e Color no menu de aparência */
/**********************************************************/

#skin-client-prefs-vector-feature-limited-width,
#skin-client-prefs-skin-theme {
  display: none !important;
}

/* =========================================
   ATRONIA TYPOGRAPHY SYSTEM
   ========================================= */

/* ---------- BASE BODY FONT ---------- */
.mw-parser-output {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400;
}

/* ---------- PAGE TITLE ---------- */
.mw-page-title-main {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600;
}

/* ---------- MAIN SECTIONS (== Datasheet ==) ---------- */
.mw-parser-output h1,
.mw-parser-output h2 {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600;
}

/* ---------- SUBTITLES (=== Features === etc) ---------- */
.mw-parser-output h3,
.mw-parser-output h4 {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500;
}

/* ---------- SMALL HEADINGS ---------- */
.mw-parser-output h5,
.mw-parser-output h6 {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500;
}

/* ===== ATRONIA Search Clean & Stable ===== */

/* ===== NAVBAR NORMAL ===== */
#p-search .cdx-search-input {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #dcdcdc;
  background: #ffffff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#p-search .cdx-text-input__input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#p-search .cdx-button {
  background: #ffffff;
  color: #1b2826;
  border-left: 1px solid #e0e0e0;
  border-radius: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

#p-search .cdx-button:hover {
  background: #92ff00;
  color: #1b2826;
}

/* ===== NAVBAR STICKY (SCROLL) ===== */
.vector-sticky-header .cdx-search-input {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #dcdcdc;
  background: #ffffff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.vector-sticky-header .cdx-text-input__input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vector-sticky-header .cdx-button {
  background: #ffffff;
  color: #1b2826;
  border-left: 1px solid #e0e0e0;
  border-radius: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

/* .vector-sticky-header .cdx-button:hover {
    background: #92ff00;
    color: #1B2826;
} */

/* ========================================================= */
/* Hide namespace / wordmark text in header */
/* ========================================================= */

.skin-vector .mw-logo-wordmark {
  display: none !important;
}

/* ========================================================= */
/* ============== FULL WIDTH (SEM BARRAS LATERAIS) ========== */
/* ========================================================= */

/* Fundo geral branco (remove o “cinza” lateral) */
html,
body {
  background: #ffffff !important;
}

/* Header topo a ocupar 100% */
.skin-vector-2022 .mw-header,
.skin-vector-2022 .mw-header-container {
  max-width: none !important;
  width: 100% !important;
}

/* Sticky header (navbar secundária) a ocupar 100% */
.skin-vector-2022 .vector-sticky-header {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Garante que o “miolo” do sticky header também não fica limitado */
.skin-vector-2022 .vector-sticky-header .vector-sticky-header-inner,
.skin-vector-2022 .vector-sticky-header .vector-sticky-header-content {
  max-width: none !important;
  width: 100% !important;
}

/* ========================================================= */
/* AUMENTAR LARGURA DO LAYOUT (SEM PARTIR ESTRUTURA) */
/* ========================================================= */

.skin-vector-2022 .mw-page-container {
  max-width: 1800px !important;
}

.skin-vector-2022 .mw-header-container {
  max-width: 1800px !important;
}

/* ========================================================= */
/* ================= LOGO CONFIG ============================ */
/* ========================================================= */

.skin-vector-2022 .mw-header-start {
  flex-wrap: nowrap !important;
}

.skin-vector-2022 .mw-logo-icon {
  max-height: 48px !important;
  height: 38px !important;
  max-width: 200px !important;
  width: auto !important;
}

.skin-vector-2022 .mw-logo-wordmark img {
  height: 32px !important;
  width: auto !important;
}

/* ========================================================= */
/* ================= FONT CONFIG ============================ */
/* ========================================================= */

@font-face {
  font-family: "Wiki Font Title";
  src: url("/resources/assets/Nohemi-VF.ttf") format("truetype");
}

@font-face {
  font-family: "Wiki Font Subtitle";
  src: url("/resources/assets/Rubik-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Wiki Font Body";
  src: url("/resources/assets/Roboto-Regular.ttf") format("truetype");
}

.mw-body-content {
  font-family: "Wiki Font Body", sans-serif;
}

.mw-page-title-main {
  font-family: "Wiki Font Title", sans-serif;
}

.mw-headline {
  font-family: "Wiki Font Subtitle", sans-serif;
}

/* ========================================================= */
/* ================= HEADER ATRONIA ========================= */
/* ========================================================= */

/* Background */
.skin-vector-2022 .mw-header,
.skin-vector-2022 .vector-sticky-header {
  background-color: #1b2826 !important;
  border-bottom: none !important;
  color: #ffffff !important;
}

/* Links + title */
.skin-vector-2022 .mw-header a,
.skin-vector-2022 .vector-sticky-header a,
.skin-vector-2022 .vector-sticky-header .mw-page-title-main {
  color: #ffffff !important;
}

/* ========================================================= */
/* ================= DROPDOWN RESET ========================= */
/* ========================================================= */

.skin-vector-2022 .vector-dropdown-content {
  background-color: #ffffff !important;
}

.skin-vector-2022 .vector-dropdown-content a {
  color: #202122 !important;
}

/* ===== CORRIGIR ÍCONES DO DROPDOWN ===== */

/* ===== FORÇAR COR DA SETA (DROPDOWN ARROW) ===== */

.skin-vector-2022 .mw-header .vector-dropdown-label::after,
.skin-vector-2022 .vector-sticky-header .vector-dropdown-label::after {
  background-color: #ffffff !important;
}

/* ========================================================= */
/* FIX DEFINITIVO DO HOVER DOS ICON BUTTONS (CODEx) */
/* ========================================================= */

.skin-vector-2022 .mw-header .cdx-button:hover,
.skin-vector-2022 .vector-sticky-header .cdx-button:hover {
  mix-blend-mode: normal !important;
  background-color: rgba(146, 255, 0, 0.3) !important; /* ← reduzido */
}

/* ========================================================= */
/* HOVER USER DROPDOWN - ATRONIA GREEN */
/* ========================================================= */

.skin-vector-2022 #vector-user-links-dropdown-label:hover,
.skin-vector-2022 #vector-user-links-dropdown-label:focus,
.skin-vector-2022 #vector-user-links-dropdown-label:focus-visible {
  background-color: rgba(146, 255, 0, 0.3) !important;
}

.skin-vector-2022 #vector-user-links-dropdown-label:hover::before,
.skin-vector-2022 #vector-user-links-dropdown-label:focus::before,
.skin-vector-2022 #vector-user-links-dropdown-label:focus-visible::before {
  background-color: rgba(146, 255, 0, 0.3) !important;
  opacity: 1 !important;
}

.skin-vector-2022
  #vector-user-links-dropdown.vector-dropdown:hover
  .vector-dropdown-label,
.skin-vector-2022
  #vector-user-links-dropdown.vector-dropdown:hover
  .vector-dropdown-label::before {
  background-color: rgba(146, 255, 0, 0.3) !important;
}

/* ========================================================= */
/* ================= ATRONIA LINK SYSTEM =================== */
/* ========================================================= */

/* ===== Variáveis globais ===== */

:root {
  --color-progressive: #1b2826 !important;
  --color-progressive--hover: #12201f !important; /* ligeiramente mais escuro */
  --color-visited: #1b2826 !important;
}

/* ========================================================= */
/* ================= LINKS GERAIS =========================== */
/* ========================================================= */

a,
.mw-body-content a,
.mw-parser-output a {
  color: #1b2826 !important;
  text-decoration-color: #1b2826 !important;
}

/* Hover */
a:hover,
.mw-body-content a:hover,
.mw-parser-output a:hover {
  color: #12201f !important;
  text-decoration-color: #12201f !important;
}

/* Visitados */
a:visited,
.mw-body-content a:visited {
  color: #1b2826 !important;
  text-decoration-color: #1b2826 !important;
}

/* Underline styling */
a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ========================================================= */
/* ================= TABS (Read / Edit / History) ========= */
/* ========================================================= */

.vector-menu-tabs .vector-menu-item a {
  color: #1b2826 !important;
}

.vector-menu-tabs .vector-menu-item.selected a {
  border-bottom-color: #1b2826 !important;
}

/* ========================================================= */
/* ================= SIDEBAR ================================ */
/* ========================================================= */

.vector-menu-portal .vector-menu-content a {
  color: #1b2826 !important;
}

.vector-menu-portal .vector-menu-content a:hover {
  color: #12201f !important;
}

/* ========================================================= */
/* ================= DROPDOWNS ============================== */
/* ========================================================= */

.vector-dropdown-content a {
  color: #1b2826 !important;
}

.vector-dropdown-content a:hover {
  color: #12201f !important;
}

/* ========================================================= */
/* ================= PARSER OUTPUT ========================== */
/* ========================================================= */

.mw-parser-output a {
  color: #1b2826 !important;
}

.mw-parser-output a:hover {
  color: #12201f !important;
}

/* ========================================================= */
/* ================= OOUI ATRONIA GREEN ==================== */
/* ========================================================= */

/* Botões principais (Save changes) */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  background-color: #f5f5f5 !important;
  border-color: #1b2826 !important;
  color: #ffffff !important;
}

/* Hover botão */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled
  > .oo-ui-buttonElement-button:hover {
  background-color: #12201f !important;
  border-color: #12201f !important;
}

/* Checkbox e radio selecionados */
.oo-ui-checkboxInputWidget input:checked + span,
.oo-ui-radioInputWidget input:checked + span {
  background-color: #1b2826 !important;
  border-color: #1b2826 !important;
}

/* Hover checkbox/radio */
.oo-ui-checkboxInputWidget input:hover + span,
.oo-ui-radioInputWidget input:hover + span {
  border-color: #1b2826 !important;
}

/* Labels ao lado */
.oo-ui-labelElement-label {
  color: #1b2826 !important;
}

/* Links dentro de forms */
.oo-ui-widget a {
  color: #1b2826 !important;
}

/* ========================================================= */
/* OOUI BOTÕES — HOVER COMPLETO (ATRONIA STYLE) */
/* ========================================================= */

/* Estado normal */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  background-color: #1b2826 !important;
  border-color: #1b2826 !important;
  color: #ffffff !important;
  transition: all 150ms ease;
}

/* Hover completo (mais claro) */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled
  > .oo-ui-buttonElement-button:hover {
  background-color: #2d4d49 !important;
  border-color: #2d4d49 !important;
}

/* ========================================================= */
/* ESCONDER LOGO "Powered by MediaWiki" */
/* ========================================================= */

#footer-poweredbyico {
  display: none !important;
}

/* ========================================================= */
/* CODEx RADIO — ATRONIA (Selecionado mais grosso) */
/* ========================================================= */

/* Estado normal */
.cdx-radio__icon {
  border: 2px solid #1b2826 !important;
  background-color: transparent !important;
}

/* Hover */
.cdx-radio:hover .cdx-radio__icon {
  border-color: #12201f !important;
}

/* Selecionado → mais grosso */
.cdx-radio__input:checked + .cdx-radio__icon {
  border: 6px solid #1b2826 !important;
  background-color: transparent !important;
}

/* Bolinha interna */
.cdx-radio__input:checked + .cdx-radio__icon::after {
  background-color: #1b2826 !important;
  width: 8px !important;
  height: 8px !important;
}

/* ========================================================= */
/* ATRONIA — Ajuste do grid para estilo Teltonika           */
/* ========================================================= */

@media screen and (min-width: 1120px) {
  .skin-vector-2022 .mw-body {
    /* Remove o template default do Vector */
    grid-template-columns: minmax(0, 1fr) min-content !important;
  }
}

/* ========================================================= */
/* ATRONIA — Appearance hover verde neon 30%                */
/* ========================================================= */

/* Estado normal (navbar verde escuro sólido) */
#vector-appearance-dropdown .cdx-button {
  background: #1b2826 !important;
  color: #ffffff !important;
}

/* Hover real (input invisível recebe hover) */
#vector-appearance-dropdown .vector-dropdown-checkbox:hover + .cdx-button {
  background: rgba(146, 255, 0, 0.3) !important;
  color: #1b2826 !important;
}

/* Estado ativo (dropdown aberto) */
#vector-appearance-dropdown .vector-dropdown-checkbox:checked + .cdx-button {
  background: rgba(146, 255, 0, 0.3) !important;
  color: #1b2826 !important;
}

/* ========================================================= */
/* ATRONIA — Sticky header dropdown hover fix               */
/* ========================================================= */

/* Estado normal */
#vector-user-links-dropdown-sticky-header .cdx-button {
  background: #1b2826 !important;
  color: #ffffff !important;
}

/* Hover real (input invisível) */
#vector-user-links-dropdown-sticky-header
  .vector-dropdown-checkbox:hover
  + .cdx-button {
  background: rgba(146, 255, 0, 0.3) !important;
  color: #1b2826 !important;
}

/* Estado ativo */
#vector-user-links-dropdown-sticky-header
  .vector-dropdown-checkbox:checked
  + .cdx-button {
  background: rgba(146, 255, 0, 0.3) !important;
  color: #1b2826 !important;
}

/* ========================================================= */
/* ATRONIA — Texto preto na popup "menu has moved"          */
/* ========================================================= */

.vector-popup-notification,
.vector-popup-notification p,
.vector-popup-notification .oo-ui-popupWidget-body {
  color: #000000 !important;
}

/* ========================================================= */
/* ATRONIA — Texto preto no dropdown colapsado Appearance   */
/* ========================================================= */

/* Título "Appearance" */
.vector-pinnable-header-label {
  color: #000000 !important;
}

/* Conteúdo interno do dropdown */
#vector-appearance-dropdown .vector-dropdown-content,
#vector-appearance-dropdown .vector-dropdown-content * {
  color: #000000 !important;
}

/* ========================================================= */
/* ATRONIA — Texto preto nos resultados da pesquisa         */
/* ========================================================= */

.cdx-typeahead-search,
.cdx-menu,
.cdx-menu-item,
.cdx-menu-item__content,
.cdx-menu-item__text,
.cdx-search-result-title,
.cdx-search-result-description {
  color: #000000 !important;
}

/* Garantir também nos links */
.cdx-menu-item__content a {
  color: #000000 !important;
}

/* =========================================
   ATRONIA TYPOGRAPHY SYSTEM
   ========================================= */

/* ---------- BASE BODY FONT ---------- */
.mw-parser-output {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400;
}

/* ---------- PAGE TITLE ---------- */
.mw-page-title-main {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600;
}

/* ---------- MAIN SECTIONS (== Datasheet ==) ---------- */
.mw-parser-output h1,
.mw-parser-output h2 {
  font-family: "Rubik", sans-serif !important;
  font-weight: 600;
}

/* ---------- SUBTITLES (=== Features === etc) ---------- */
.mw-parser-output h3,
.mw-parser-output h4 {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500;
}

/* ---------- SMALL HEADINGS ---------- */
.mw-parser-output h5,
.mw-parser-output h6 {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500;
}

/* ===== ATRONIA Search Clean & Stable ===== */

/* ===== NAVBAR NORMAL ===== */
#p-search .cdx-search-input {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #dcdcdc;
  background: #ffffff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#p-search .cdx-text-input__input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#p-search .cdx-button {
  background: #ffffff;
  color: #1b2826;
  border-left: 1px solid #e0e0e0;
  border-radius: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

#p-search .cdx-button:hover {
  background: #92ff00;
  color: #1b2826;
}

/* ===== NAVBAR STICKY (SCROLL) ===== */
.vector-sticky-header .cdx-search-input {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #dcdcdc;
  background: #ffffff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.vector-sticky-header .cdx-text-input__input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vector-sticky-header .cdx-button {
  background: #ffffff;
  color: #1b2826;
  border-left: 1px solid #e0e0e0;
  border-radius: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.vector-sticky-header .cdx-button:hover {
  background: #92ff00;
  color: #1b2826;
}

/* ========================================================= */
/* Hide namespace / wordmark text in header */
/* ========================================================= */

.skin-vector .mw-logo-wordmark {
  display: none !important;
}

/* ========================================================= */
/* ============== FULL WIDTH (SEM BARRAS LATERAIS) ========== */
/* ========================================================= */

/* Fundo geral branco (remove o “cinza” lateral) */
html,
body {
  background: #ffffff !important;
}

/* Header topo a ocupar 100% */
.skin-vector-2022 .mw-header,
.skin-vector-2022 .mw-header-container {
  max-width: none !important;
  width: 100% !important;
}

/* Sticky header (navbar secundária) a ocupar 100% */
.skin-vector-2022 .vector-sticky-header {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Garante que o “miolo” do sticky header também não fica limitado */
.skin-vector-2022 .vector-sticky-header .vector-sticky-header-inner,
.skin-vector-2022 .vector-sticky-header .vector-sticky-header-content {
  max-width: none !important;
  width: 100% !important;
}

/* ========================================================= */
/* AUMENTAR LARGURA DO LAYOUT (SEM PARTIR ESTRUTURA) */
/* ========================================================= */

.skin-vector-2022 .mw-page-container {
  max-width: 1800px !important;
}

.skin-vector-2022 .mw-header-container {
  max-width: 1800px !important;
}

/* ========================================================= */
/* ================= LOGO CONFIG ============================ */
/* ========================================================= */

.skin-vector-2022 .mw-header-start {
  flex-wrap: nowrap !important;
}

.skin-vector-2022 .mw-logo-icon {
  max-height: 48px !important;
  height: 38px !important;
  max-width: 200px !important;
  width: auto !important;
}

.skin-vector-2022 .mw-logo-wordmark img {
  height: 32px !important;
  width: auto !important;
}

/* ========================================================= */
/* ================= FONT CONFIG ============================ */
/* ========================================================= */

@font-face {
  font-family: "Wiki Font Title";
  src: url("/resources/assets/Nohemi-VF.ttf") format("truetype");
}

@font-face {
  font-family: "Wiki Font Subtitle";
  src: url("/resources/assets/Rubik-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Wiki Font Body";
  src: url("/resources/assets/Roboto-Regular.ttf") format("truetype");
}

.mw-body-content {
  font-family: "Wiki Font Body", sans-serif;
}

.mw-page-title-main {
  font-family: "Wiki Font Title", sans-serif;
}

.mw-headline {
  font-family: "Wiki Font Subtitle", sans-serif;
}

/* ========================================================= */
/* ================= HEADER ATRONIA ========================= */
/* ========================================================= */

/* Background */
.skin-vector-2022 .mw-header,
.skin-vector-2022 .vector-sticky-header {
  background-color: #1b2826 !important;
  border-bottom: none !important;
  color: #ffffff !important;
}

/* Links + title */
.skin-vector-2022 .mw-header a,
.skin-vector-2022 .vector-sticky-header a,
.skin-vector-2022 .vector-sticky-header .mw-page-title-main {
  color: #ffffff !important;
}

/* ========================================================= */
/* ================= DROPDOWN RESET ========================= */
/* ========================================================= */

.skin-vector-2022 .vector-dropdown-content {
  background-color: #ffffff !important;
}

.skin-vector-2022 .vector-dropdown-content a {
  color: #202122 !important;
}

/* ===== FORÇAR COR DA SETA (DROPDOWN ARROW) ===== */

.skin-vector-2022 .mw-header .vector-dropdown-label::after,
.skin-vector-2022 .vector-sticky-header .vector-dropdown-label::after {
  background-color: #ffffff !important;
}

/* ========================================================= */
/* FIX DEFINITIVO DO HOVER DOS ICON BUTTONS (CODEx) */
/* ========================================================= */

.skin-vector-2022 .mw-header .cdx-button:hover,
.skin-vector-2022 .vector-sticky-header .cdx-button:hover {
  mix-blend-mode: normal !important;
  background-color: rgba(146, 255, 0, 0.3) !important; /* ← reduzido */
}

/* ========================================================= */
/* HOVER USER DROPDOWN - ATRONIA GREEN */
/* ========================================================= */

.skin-vector-2022 #vector-user-links-dropdown-label:hover,
.skin-vector-2022 #vector-user-links-dropdown-label:focus,
.skin-vector-2022 #vector-user-links-dropdown-label:focus-visible {
  background-color: rgba(146, 255, 0, 0.3) !important;
}

.skin-vector-2022 #vector-user-links-dropdown-label:hover::before,
.skin-vector-2022 #vector-user-links-dropdown-label:focus::before,
.skin-vector-2022 #vector-user-links-dropdown-label:focus-visible::before {
  background-color: rgba(146, 255, 0, 0.3) !important;
  opacity: 1 !important;
}

.skin-vector-2022
  #vector-user-links-dropdown.vector-dropdown:hover
  .vector-dropdown-label,
.skin-vector-2022
  #vector-user-links-dropdown.vector-dropdown:hover
  .vector-dropdown-label::before {
  background-color: rgba(146, 255, 0, 0.3) !important;
}

/* ========================================================= */
/* ================= ATRONIA LINK SYSTEM =================== */
/* ========================================================= */

/* ===== Variáveis globais ===== */

:root {
  --color-progressive: #1b2826 !important;
  --color-progressive--hover: #12201f !important; /* ligeiramente mais escuro */
  --color-visited: #1b2826 !important;
}

/* ========================================================= */
/* ================= LINKS GERAIS =========================== */
/* ========================================================= */

a,
.mw-body-content a,
.mw-parser-output a {
  color: #1b2826 !important;
  text-decoration-color: #1b2826 !important;
}

/* Hover */
a:hover,
.mw-body-content a:hover,
.mw-parser-output a:hover {
  color: #12201f !important;
  text-decoration-color: #12201f !important;
}

/* Visitados */
a:visited,
.mw-body-content a:visited {
  color: #1b2826 !important;
  text-decoration-color: #1b2826 !important;
}

/* Underline styling */
a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ========================================================= */
/* ================= TABS (Read / Edit / History) ========= */
/* ========================================================= */

.vector-menu-tabs .vector-menu-item a {
  color: #1b2826 !important;
}

.vector-menu-tabs .vector-menu-item.selected a {
  border-bottom-color: #1b2826 !important;
}

/* ========================================================= */
/* ================= SIDEBAR ================================ */
/* ========================================================= */

.vector-menu-portal .vector-menu-content a {
  color: #1b2826 !important;
}

.vector-menu-portal .vector-menu-content a:hover {
  color: #12201f !important;
}

/* ========================================================= */
/* ================= DROPDOWNS ============================== */
/* ========================================================= */

.vector-dropdown-content a {
  color: #1b2826 !important;
}

.vector-dropdown-content a:hover {
  color: #12201f !important;
}

/* ========================================================= */
/* ================= PARSER OUTPUT ========================== */
/* ========================================================= */

.mw-parser-output a {
  color: #1b2826 !important;
}

.mw-parser-output a:hover {
  color: #12201f !important;
}

/* ========================================================= */
/* ================= OOUI ATRONIA GREEN ==================== */
/* ========================================================= */

/* Botões principais (Save changes) */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  background-color: #f5f5f5 !important;
  border-color: #1b2826 !important;
  color: #ffffff !important;
}

/* Hover botão */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled
  > .oo-ui-buttonElement-button:hover {
  background-color: #12201f !important;
  border-color: #12201f !important;
}

/* Checkbox e radio selecionados */
.oo-ui-checkboxInputWidget input:checked + span,
.oo-ui-radioInputWidget input:checked + span {
  background-color: #1b2826 !important;
  border-color: #1b2826 !important;
}

/* Hover checkbox/radio */
.oo-ui-checkboxInputWidget input:hover + span,
.oo-ui-radioInputWidget input:hover + span {
  border-color: #1b2826 !important;
}

/* Labels ao lado */
.oo-ui-labelElement-label {
  color: #1b2826 !important;
}

/* Links dentro de forms */
.oo-ui-widget a {
  color: #1b2826 !important;
}

/* ========================================================= */
/* OOUI BOTÕES — HOVER COMPLETO (ATRONIA STYLE) */
/* ========================================================= */

/* Estado normal */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  background-color: #1b2826 !important;
  border-color: #1b2826 !important;
  color: #ffffff !important;
  transition: all 150ms ease;
}

/* Hover completo (mais claro) */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled
  > .oo-ui-buttonElement-button:hover {
  background-color: #2d4d49 !important;
  border-color: #2d4d49 !important;
}

/* ========================================================= */
/* ESCONDER LOGO "Powered by MediaWiki" */
/* ========================================================= */

#footer-poweredbyico {
  display: none !important;
}

/* ========================================================= */
/* CODEx RADIO — ATRONIA (Selecionado mais grosso) */
/* ========================================================= */

/* Estado normal */
.cdx-radio__icon {
  border: 2px solid #1b2826 !important;
  background-color: transparent !important;
}

/* Hover */
.cdx-radio:hover .cdx-radio__icon {
  border-color: #12201f !important;
}

/* Selecionado → mais grosso */
.cdx-radio__input:checked + .cdx-radio__icon {
  border: 6px solid #1b2826 !important;
  background-color: transparent !important;
}

/* Bolinha interna */
.cdx-radio__input:checked + .cdx-radio__icon::after {
  background-color: #1b2826 !important;
  width: 8px !important;
  height: 8px !important;
}

/* ========================================================= */
/* ATRONIA — Ajuste do grid para estilo Teltonika           */
/* ========================================================= */

@media screen and (min-width: 1120px) {
  .skin-vector-2022 .mw-body {
    /* Remove o template default do Vector */
    grid-template-columns: minmax(0, 1fr) min-content !important;
  }
}

/* ========================================================= */
/* ATRONIA — Appearance hover verde neon 30%                */
/* ========================================================= */

/* Estado normal (navbar verde escuro sólido) */
#vector-appearance-dropdown .cdx-button {
  background: #1b2826 !important;
  color: #ffffff !important;
}

/* Estado ativo (dropdown aberto) */
#vector-appearance-dropdown .vector-dropdown-checkbox:checked + .cdx-button {
  background: rgba(146, 255, 0, 0.3) !important;
  color: #1b2826 !important;
}

/* ========================================================= */
/* ATRONIA — Sticky header dropdown hover fix               */
/* ========================================================= */

/* Estado normal */
#vector-user-links-dropdown-sticky-header .cdx-button {
  background: #1b2826 !important;
  color: #ffffff !important;
}

/* Hover real (input invisível) */
#vector-user-links-dropdown-sticky-header
  .vector-dropdown-checkbox:hover
  + .cdx-button {
  background: rgba(146, 255, 0, 0.3) !important;
  color: #1b2826 !important;
}

/* Estado ativo */
#vector-user-links-dropdown-sticky-header
  .vector-dropdown-checkbox:checked
  + .cdx-button {
  background: rgba(146, 255, 0, 0.3) !important;
  color: #1b2826 !important;
}

/* ========================================================= */
/* ATRONIA — Texto preto na popup "menu has moved"          */
/* ========================================================= */

.vector-popup-notification,
.vector-popup-notification p,
.vector-popup-notification .oo-ui-popupWidget-body {
  color: #000000 !important;
}

/* ========================================================= */
/* ATRONIA — Texto preto no dropdown colapsado Appearance   */
/* ========================================================= */

/* Título "Appearance" */
.vector-pinnable-header-label {
  color: #000000 !important;
}

/* Conteúdo interno do dropdown */
#vector-appearance-dropdown .vector-dropdown-content,
#vector-appearance-dropdown .vector-dropdown-content * {
  color: #000000 !important;
}

/* ========================================================= */
/* ATRONIA — Texto preto nos resultados da pesquisa         */
/* ========================================================= */

.cdx-typeahead-search,
.cdx-menu,
.cdx-menu-item,
.cdx-menu-item__content,
.cdx-menu-item__text,
.cdx-search-result-title,
.cdx-search-result-description {
  color: #000000 !important;
}

/* Garantir também nos links */
.cdx-menu-item__content a {
  color: #000000 !important;
}

/* =========================================================
   ATRONIA WIKI - OMNI-FIX (FORÇADO NO CONTENT)
   ========================================================= */

/* ---------- FONTES ---------- */
@font-face {
  font-family: "Wiki Font Title";
  src: url("/resources/assets/Nohemi-VF.ttf") format("truetype");
}
@font-face {
  font-family: "Wiki Font Subtitle";
  src: url("/resources/assets/Rubik-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Wiki Font Body";
  src: url("/resources/assets/Roboto-Regular.ttf") format("truetype");
}

/* ---------- BASE & LAYOUT ---------- */
html,
body {
  background: #ffffff !important;
}
.mw-body-content {
  font-family: "Wiki Font Body", sans-serif;
}
.mw-page-title-main {
  font-family: "Wiki Font Title", sans-serif;
  font-weight: 600;
}
.mw-headline {
  font-family: "Wiki Font Subtitle", sans-serif;
}

.skin-vector-2022 .mw-page-container {
  max-width: 1800px !important;
}
.skin-vector-2022 .mw-header,
.vector-sticky-header {
  background-color: #1b2826 !important;
  color: #ffffff !important;
}

/* ========================================================= */
/* ATRONIA — Texto branco nos botões da Toolbar OOUI        */
/* ========================================================= */

.oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link,
.oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-title,
.oo-ui-tool.oo-ui-widget-enabled .oo-ui-labelElement-label {
  color: #ffffff !important;
}

/* ========================================================= */
/* VISUAL EDITOR DROPDOWN — Forçar texto preto              */
/* ========================================================= */

.oo-ui-popupToolGroup-active-tools
  .oo-ui-tool.oo-ui-widget-enabled
  .oo-ui-tool-title,
.oo-ui-popupToolGroup-active-tools
  .oo-ui-tool.oo-ui-widget-enabled
  .oo-ui-labelElement-label {
  color: #000000 !important;
}

/* Mixed specification table */

.mix-table {
  text-align: center;
}

.mix-table th {
  text-align: center;
}

.mix-table td {
  text-align: center;
}

/* header */
.wikitable.mix-table tr:first-child th {
  background: #1b2826 !important;
  color: #ffffff !important;
  text-align: center;
  font-weight: 600;
}

/* largura fixa */
.wikitable.mix-table {
  table-layout: fixed;
  width: 100%;
}

.wikitable.mix-table th:nth-child(1),
.wikitable.mix-table td:nth-child(1) {
  width: 34%;
}

.wikitable.mix-table th:nth-child(2),
.wikitable.mix-table td:nth-child(2),
.wikitable.mix-table th:nth-child(3),
.wikitable.mix-table td:nth-child(3) {
  width: 33%;
}

/* ===================================================== */
/* ATRONIA - Wikitable ultra compacta centrada           */
/* ===================================================== */

.vector-body .wikitable {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff !important;
  font-size: 13px;
  border: none;
}

/* HEADER */
.vector-body .wikitable th {
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  border-bottom: 2px solid #3a3a3a;
  border-right: 1px solid #3a3a3a;
  background: #ffffff !important;
}

/* CELULAS */
.vector-body .wikitable td {
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  border-bottom: 1px solid #3a3a3a;
  border-right: 1px solid #3a3a3a;
  background: #ffffff !important;
}

/* ===================================================== */
/* ATRONIA - Fix real: conteúdo interno da wikitable     */
/* ===================================================== */

/* aplica a TODAS as wikitables no corpo */
.vector-body .mw-body-content table.wikitable td,
.vector-body .mw-body-content table.wikitable th {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 6px 10px !important;
  line-height: 1.3 !important;
}

/* MUITO importante: o VE coloca <p> dentro das células com margens */
.vector-body .mw-body-content table.wikitable td > p,
.vector-body .mw-body-content table.wikitable th > p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* força também spans/links dentro da célula */
.vector-body .mw-body-content table.wikitable td *,
.vector-body .mw-body-content table.wikitable th * {
  text-align: center !important;
}

/* se a 1ª coluna estiver a levar estilo diferente, isto elimina */
.vector-body .mw-body-content table.wikitable td:first-child,
.vector-body .mw-body-content table.wikitable th:first-child {
  text-align: center !important;
}

/* ======================================= */
/* ATRONIA - Tech Table FIX FINAL         */
/* ======================================= */

.vector-body .mw-body-content table.wikitable.tech-table td {
  text-align: left !important;
}

.vector-body .mw-body-content table.wikitable.tech-table th {
  background: #1b2826 !important;
  color: #ffffff !important;
}

/* ===================================================== */
/* ATRONIA - LED TABLE (Real Color Bars)                */
/* ===================================================== */

/* Garantir que só afeta a tabela LED */
.vector-body .mw-body-content table.wikitable.led-table {
  border-collapse: collapse;
}

/* Barra vertical base */
.vector-body .mw-body-content table.wikitable.led-table td[class^="led-"] {
  width: 18px;
  padding: 0 !important;
  border-right: 1px solid #3a3a3a;
}

/* CORES REAIS */

.vector-body .mw-body-content table.wikitable.led-table td.led-cyan {
  background: #00bcd4 !important;
}

.vector-body .mw-body-content table.wikitable.led-table td.led-blue {
  background: #1565c0 !important;
}

.vector-body .mw-body-content table.wikitable.led-table td.led-green {
  background: #00c853 !important;
}

.vector-body .mw-body-content table.wikitable.led-table td.led-orange {
  background: #ff6f00 !important;
}

.vector-body .mw-body-content table.wikitable.led-table td.led-red {
  background: #d50000 !important;
}

.vector-body .mw-body-content table.wikitable.pinout-table td:nth-child(1),
.vector-body .mw-body-content table.wikitable.pinout-table td:nth-child(3) {
  text-align: center !important;
}

.vector-body .mw-body-content .two-tables {
  display: flex;
  gap: 12px; /* ↓ menos espaço entre tabelas */
  align-items: flex-start; /* topo */
}

.vector-body .mw-body-content .two-tables .wikitable {
  width: 50%;
  margin: 0; /* remove margens extra */
}

.vector-body .mw-body-content .image-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.vector-body .mw-body-content .image-row figure {
  margin: 0;
}

.vector-body .mw-body-content .image-row img {
  width: 100%;
  height: auto;
}

.atronia-navbar {
  background: #1b2826;
  padding: 10px 20px;
}

.atronia-navbar a {
  color: white;
  margin-right: 20px;
  text-decoration: none;
}

/* ========================================================= */
/* ATRONIA — Navbar mais alta (mais respiração)             */
/* ========================================================= */

.vector-header-container .mw-header {
  min-height: 72px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Sticky header também */
.vector-sticky-header {
  min-height: 72px !important;
}

/* Alinhar conteúdo verticalmente */
.vector-header-start,
.vector-header-end {
  align-items: center !important;
}

/* ========================================================= */
/* ATRONIA — Navbar mais alta (mais respiração)             */
/* ========================================================= */

.vector-header-container .mw-header {
  min-height: 72px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Sticky header também */
.vector-sticky-header {
  min-height: 72px !important;
}

/* Alinhar conteúdo verticalmente */
.vector-header-start,
.vector-header-end {
  align-items: center !important;
}

/* ========================================================= */
/* ATRONIA — Texto branco nos botões da Toolbar OOUI        */
/* ========================================================= */

.oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link,
.oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-title,
.oo-ui-tool.oo-ui-widget-enabled .oo-ui-labelElement-label {
  color: #ffffff !important;
}

/* ========================================================= */
/* VISUAL EDITOR DROPDOWN — Forçar texto preto              */
/* ========================================================= */

.oo-ui-popupToolGroup-active-tools
  .oo-ui-tool.oo-ui-widget-enabled
  .oo-ui-tool-title,
.oo-ui-popupToolGroup-active-tools
  .oo-ui-tool.oo-ui-widget-enabled
  .oo-ui-labelElement-label {
  color: #000000 !important;
}

/* Mixed specification table */

.mix-table {
  text-align: center;
}

.mix-table th {
  text-align: center;
}

.mix-table td {
  text-align: center;
}

/* header */
.wikitable.mix-table tr:first-child th {
  background: #1b2826 !important;
  color: #ffffff !important;
  text-align: center;
  font-weight: 600;
}

/* largura fixa */
.wikitable.mix-table {
  table-layout: fixed;
  width: 100%;
}

.wikitable.mix-table th:nth-child(1),
.wikitable.mix-table td:nth-child(1) {
  width: 34%;
}

.wikitable.mix-table th:nth-child(2),
.wikitable.mix-table td:nth-child(2),
.wikitable.mix-table th:nth-child(3),
.wikitable.mix-table td:nth-child(3) {
  width: 33%;
}

/* ===================================================== */
/* ATRONIA - Wikitable ultra compacta centrada           */
/* ===================================================== */

.vector-body .wikitable {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff !important;
  font-size: 13px;
  border: none;
}

/* HEADER */
.vector-body .wikitable th {
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  border-bottom: 2px solid #3a3a3a;
  border-right: 1px solid #3a3a3a;
  background: #ffffff !important;
}

/* CELULAS */
.vector-body .wikitable td {
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  border-bottom: 1px solid #3a3a3a;
  border-right: 1px solid #3a3a3a;
  background: #ffffff !important;
}

/* ===================================================== */
/* ATRONIA - Fix real: conteúdo interno da wikitable     */
/* ===================================================== */

/* aplica a TODAS as wikitables no corpo */
.vector-body .mw-body-content table.wikitable td,
.vector-body .mw-body-content table.wikitable th {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 6px 10px !important;
  line-height: 1.3 !important;
}

/* MUITO importante: o VE coloca <p> dentro das células com margens */
.vector-body .mw-body-content table.wikitable td > p,
.vector-body .mw-body-content table.wikitable th > p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* força também spans/links dentro da célula */
.vector-body .mw-body-content table.wikitable td *,
.vector-body .mw-body-content table.wikitable th * {
  text-align: center !important;
}

/* se a 1ª coluna estiver a levar estilo diferente, isto elimina */
.vector-body .mw-body-content table.wikitable td:first-child,
.vector-body .mw-body-content table.wikitable th:first-child {
  text-align: center !important;
}

/* ======================================= */
/* ATRONIA - Tech Table FIX FINAL         */
/* ======================================= */

.vector-body .mw-body-content table.wikitable.tech-table td {
  text-align: left !important;
}

.vector-body .mw-body-content table.wikitable.tech-table th {
  background: #1b2826 !important;
  color: #ffffff !important;
}

/* ===================================================== */
/* ATRONIA - LED TABLE (Real Color Bars)                */
/* ===================================================== */

/* Garantir que só afeta a tabela LED */
.vector-body .mw-body-content table.wikitable.led-table {
  border-collapse: collapse;
}

/* Barra vertical base */
.vector-body .mw-body-content table.wikitable.led-table td[class^="led-"] {
  width: 18px;
  padding: 0 !important;
  border-right: 1px solid #3a3a3a;
}

/* CORES REAIS */

.vector-body .mw-body-content table.wikitable.led-table td.led-cyan {
  background: #00bcd4 !important;
}

.vector-body .mw-body-content table.wikitable.led-table td.led-blue {
  background: #1565c0 !important;
}

.vector-body .mw-body-content table.wikitable.led-table td.led-green {
  background: #00c853 !important;
}

.vector-body .mw-body-content table.wikitable.led-table td.led-orange {
  background: #ff6f00 !important;
}

.vector-body .mw-body-content table.wikitable.led-table td.led-red {
  background: #d50000 !important;
}

.vector-body .mw-body-content table.wikitable.pinout-table td:nth-child(1),
.vector-body .mw-body-content table.wikitable.pinout-table td:nth-child(3) {
  text-align: center !important;
}

.vector-body .mw-body-content .two-tables {
  display: flex;
  gap: 12px; /* ↓ menos espaço entre tabelas */
  align-items: flex-start; /* topo */
}

.vector-body .mw-body-content .two-tables .wikitable {
  width: 50%;
  margin: 0; /* remove margens extra */
}

.vector-body .mw-body-content .image-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.vector-body .mw-body-content .image-row figure {
  margin: 0;
}

.vector-body .mw-body-content .image-row img {
  width: 100%;
  height: auto;
}

.atronia-navbar {
  background: #1b2826;
  padding: 10px 20px;
}

.atronia-navbar a {
  color: white;
  margin-right: 20px;
  text-decoration: none;
}

/* ============================= */
/* NOVOS ICONS DO MATERIAL ICONS */
/* ============================= */

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-userAvatar {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-userAvatar::before {
  content: "account_circle";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;
  line-height: 1;

  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;

  color: white; /* or currentColor */
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-appearance {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-appearance::before {
  content: "build";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;

  color: white; /* or currentColor */
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-watchlist {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-watchlist::before {
  content: "bookmark";

  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-menu {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-menu::before {
  content: "menu";

  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-search {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-search::before {
  content: "search";

  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-wikimedia-wikiText {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-wikimedia-wikiText::before {
  content: "code";

  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-wikimedia-edit {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-wikimedia-edit::before {
  content: "edit";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}

/* Força o ícone a ficar na posição original e remove animações de rotação */
.mw-watchlink .vector-icon {
  transform: none !important;
  transition: none !important;
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-unStar {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-unStar::before {
  content: "bookmark_remove";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-wikimedia-history {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-wikimedia-history::before {
  content: "history";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-speechBubbles {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-speechBubbles::before {
  content: "chat";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}

/* Remove MediaWiki mask system */
.mw-ui-icon-wikimedia-listBullet {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
.mw-ui-icon-wikimedia-listBullet::before {
  content: "menu";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}
.mw-ui-icon-wikimedia-ellipsis {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
  width: 2rem !important;

}
/* Inject Material icon */
.mw-ui-icon-wikimedia-ellipsis::before {
  content: "account_circle";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;
  line-height: 1;

  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;

  color: white; /* or currentColor */
}
.mw-ui-icon-wikimedia-ellipsis::after {
  content: "keyboard_arrow_down";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}
/* Remove MediaWiki mask system */
#vector-page-titlebar-toc-label > .mw-ui-icon-wikimedia-listBullet {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
#vector-page-titlebar-toc-label > .mw-ui-icon-wikimedia-listBullet::before {
  content: "menu";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: #1b2826; /* or currentColor */
}

/* Remove MediaWiki mask system */
#vector-sticky-header-toc-label > .mw-ui-icon-wikimedia-listBullet {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
}

/* Inject Material icon */
#vector-sticky-header-toc-label > .mw-ui-icon-wikimedia-listBullet::before {
  content: "menu";

  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;

  display: inline-block;

  line-height: 1;
  letter-spacing: normal;

  color: white; /* or currentColor */
}

/* Estado HOVER (Passar o rato) */
#vector-page-titlebar-toc-checkbox:hover + #vector-page-titlebar-toc-label {
  background-color: #1b2826 !important;
}

#vector-page-titlebar-toc-checkbox:hover
  + #vector-page-titlebar-toc-label
  .vector-icon {
  filter: brightness(0) invert(1) !important; /* Torna o ícone branco */
  opacity: 1 !important;
}

#vector-page-titlebar-toc-checkbox:hover
  + #vector-page-titlebar-toc-label
  .vector-dropdown-label-text {
  color: #ffffff !important; /* Texto branco */
}

/* Estado CHECKED (Quando o menu está aberto) */
#vector-page-titlebar-toc-checkbox:checked + #vector-page-titlebar-toc-label {
  background-color: #1b2826 !important;
}

#vector-page-titlebar-toc-checkbox:checked
  + #vector-page-titlebar-toc-label
  .vector-icon {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

#vector-page-titlebar-toc-checkbox:checked
  + #vector-page-titlebar-toc-label
  .vector-dropdown-label-text {
  color: #ffffff !important;
}

.vector-dropdown-checkbox:hover {
  background-color: rgba(146, 255, 0, 0.3) !important;
}

/* ========================================================= */
/* REMOVE HOVER BACKGROUND — MAIN MENU BUTTON               */
/* ========================================================= */
#vector-page-titlebar-toc-label .cdx-button:hover,
#vector-sticky-header-toc-label .cdx-button:hover,
#vector-main-menu-dropdown .cdx-button:hover,
#vector-main-menu-dropdown .cdx-button:focus,
#vector-main-menu-dropdown .cdx-button:active {
  background: rgba(146, 255, 0, 0.3) !important;
  box-shadow: none !important;
}

#vector-main-menu-dropdown .cdx-button::before {
  display: none !important;
}

#vector-sticky-header-toc-checkbox .cdx-button::before {
  display: none !important;
}

#vector-main-menu-dropdown .vector-dropdown-checkbox:hover + .cdx-button {
  background: rgba(146, 255, 0, 0.3) !important;
}

#vector-sticky-header-toc-checkbox
  .vector-dropdown-checkbox:hover
  + .cdx-button {
  background-color: red !important;
}

#vector-sticky-header-toc-checkbox
  .vector-dropdown-checkbox:hover
  + .cdx-button {
  background: rgba(146, 255, 0, 0.3) !important;
}


/*==========================================================*/
/*                        MOBILE                            */
/*==========================================================*/

.search-toggle {
    background: transparent !important;
    border-left: none !important;
}

/* --- FORÇAR LOGO NO MOBILE (Vector 2022) --- */
@media screen and (max-width: 720px) {
    /* 1. Garante que o container do logo é visível */
    .mw-header .mw-logo {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        height: 32px !important; /* Ajusta conforme necessário */
    }

    /* 2. Força a exibição da imagem do logo */
    /* A Vector 2022 muitas vezes esconde o <img> original no mobile */
    .mw-logo-icon, 
    .mw-logo-container img {
        display: block !important;
        width: 120px !important; /* Largura do logo ATRONIA no tele */
        height: auto !important;
    }

    /* 3. Ajusta o espaço entre o menu e o logo */
    .mw-header-start {
        gap: 10px !important;
    }
}




/* AJUSTE DO TAMANHO DO LOGO NO MOBILE */
@media screen and (max-width: 720px) {
    .mw-header .mw-logo-icon {
        width: 120px !important;  /* Ajusta este valor para o tamanho que gostares */
        height: auto !important;
        max-height: 24px !important; /* Limita a altura para não empurrar o cabeçalho */
        margin-left: 5px !important;
    }

    /* Garante que o container do logo não estique o topo */
    .mw-header .mw-logo {
        padding: 0 !important;
        margin: 0 !important;
        align-items: center !important;
    }
}




/* --- REDUZIR ALTURA DA ZONA ROXA (Cabeçalho) --- */
@media screen and (max-width: 720px) {
    /* 1. Remove a altura mínima e reduz o padding vertical */
    .mw-header {
        min-height: 50px !important; /* Estava em 72px ou mais */
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        height: auto !important;
    }

    /* 2. Ajusta o container do topo para não forçar espaço extra */
    .vector-header-container {
        height: auto !important;
        min-height: 50px !important;
    }

    /* 3. Centraliza verticalmente o logo e os ícones para ficarem perfeitos */
    .mw-header-start, 
    .vector-header-end {
        align-items: center !important;
        display: flex !important;
    }
}