/* ════════════════════════════════════════════════════════════
   Identidade visual LuariX — refinamento das cores do Material
   Índigo profundo (marca) + ciano (destaque), claro e escuro
   ════════════════════════════════════════════════════════════ */

/* ── Tema claro ── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #461B80;              /* Roxo Escuro LuariX */
  --md-primary-fg-color--light: #8A2EFF;       /* Lunar LuariX */
  --md-primary-fg-color--dark: #0A0830;        /* Deep Blue LuariX */
  --md-accent-fg-color: #2DA8FF;               /* Cyano LuariX */
  --md-accent-fg-color--transparent: rgba(45, 168, 255, 0.16);
  --md-default-bg-color: #f1f5f9;              /* Fundo claro LuariX */
}

/* ── Tema escuro ── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #8A2EFF;              /* Lunar LuariX */
  --md-primary-fg-color--light: #a78bfa;
  --md-primary-fg-color--dark: #461B80;
  --md-accent-fg-color: #2DA8FF;               /* Cyano LuariX */
  --md-accent-fg-color--transparent: rgba(45, 168, 255, 0.16);
  --md-default-bg-color: #07071a;              /* Fundo escuro profundo LuariX */
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body, input, button, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ── Acabamento premium (Estilo Painel LuariX) ── */
.md-header {
  background-color: #07071a !important; /* Deep Blue LuariX */
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Linha divisória inferior sutil */
  height: 4.5rem !important; /* Um pouco mais de respiro */
}

.md-header__inner {
  height: 100%;
}

/* Divisória vertical após a logo, idêntica ao painel do sistema */
.md-header__button.md-logo {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding-right: 1.5rem;
  margin-right: 1rem;
}

.md-header__button.md-logo img {
  height: 2.5rem !important; /* Tamanho exato para encaixar no header de 4.5rem */
  width: auto;
}

.md-typeset table:not([class]) {
  border-radius: 12px;
  overflow: hidden;
}

.md-typeset .admonition {
  border-radius: 10px;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  letter-spacing: -0.01em;
  font-weight: 600 !important; /* Mais forte que o normal, mas não é um negrito pesadão (700+) */
}

/* ── Estilo Mockup para as seções do Menu Lateral ── */
.md-nav__item--section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Linhas divisórias sutis */
}

.md-nav__item--section > .md-nav__link,
.md-nav__item--section > .md-nav__title {
  font-weight: 600 !important;
  font-size: 0.8rem; /* Tamanho um pouco mais contido */
  color: var(--md-default-fg-color) !important; /* Branco/Cinza claro por padrão */
  margin-top: 0 !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Quando a seção está ativa (página atual), muda para o Roxo Premium */
.md-nav__item--section.md-nav__item--active > .md-nav__link,
.md-nav__item--section.md-nav__item--active > .md-nav__title {
  color: #a78bfa !important; /* Roxo claro/neon da identidade visual */
}

/* ════════════════════════════════════════════════════
   TOQUES PREMIUM LUARIX
   ════════════════════════════════════════════════════ */

/* 1. Scrollbar moderna e fina */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--md-primary-fg-color--light);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--md-accent-fg-color);
}

/* 2. Blocos de Código (Code Blocks) com bordas suaves e sombra interna */
.md-typeset pre {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 3. Estilização Premium para Alertas (Admonitions) */
.md-typeset .admonition {
  border: 1px solid rgba(138, 46, 255, 0.15); /* Borda sutil na cor da marca */
  border-left: 4px solid var(--md-admonition-icon--color, var(--md-primary-fg-color));
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  background: var(--md-default-bg-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.md-typeset .admonition:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* 4. Transições suaves em links de texto e efeito Hover */
.md-typeset a {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.md-typeset a:hover {
  text-shadow: 0 0 8px var(--md-accent-fg-color--transparent);
}

/* 5. Linha de progresso no topo (SPA navigation) usando cor Cyano */
.md-progress {
  background-color: var(--md-accent-fg-color) !important;
}

/* ════════════════════════════════════════════════════
   LIGHTBOX — clique na imagem para ver em tamanho original
   ════════════════════════════════════════════════════ */
.md-content img {
  cursor: zoom-in;
  transition: box-shadow 0.2s ease;
}
.md-content img:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.lx-lightbox {
  /* ⚠️ Offsets EXPLÍCITOS (top/right/bottom/left) — nunca `inset: 0`:
     o shorthand `inset` não é suportado em WebViews/Chrome Android antigos,
     e sem offsets o position:fixed cai para a posição estática, renderizando
     o overlay no FIM da página (bug relatado no mobile). */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100vh;   /* fallback browsers sem dvh */
  height: 100dvh;  /* barra de endereço dinâmica no mobile */
  z-index: 2147483000; /* acima de qualquer camada do Material (header/drawer ~3, consent 5) */
  background: rgba(4, 5, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* rolagem suave dentro do overlay (iOS) */
  overscroll-behavior: contain;
  cursor: zoom-out;
  animation: lx-in 0.16s ease;
}
.lx-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
  cursor: zoom-in;
  transition: max-width 0.18s ease, max-height 0.18s ease;
}
.lx-lightbox.lx-full img {
  /* Tamanho original (1:1) — com rolagem no overlay */
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.lx-lightbox-close {
  /* Offsets explícitos também aqui (nunca `inset`) — ver nota no .lx-lightbox */
  position: fixed;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  z-index: 2147483001;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lx-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(90deg);
}
.lx-lightbox-hint {
  /* Offsets explícitos também aqui (nunca `inset`) — ver nota no .lx-lightbox */
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2147483001;
}
body.lx-locked {
  overflow: hidden;
  /* Travamento do scroll de fundo também no <html> (iOS ignora overflow em body) */
}
html.lx-locked {
  overflow: hidden;
}
.lx-lightbox.lx-out {
  opacity: 0;
  transition: opacity 0.16s ease;
}
@keyframes lx-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 600px) {
  .lx-lightbox { padding: 12px; }
  .lx-lightbox-hint { display: none; }
}

/* ════════════════════════════════════════════════════
   CORREÇÕES PREMIUM PARA MOBILE
   ════════════════════════════════════════════════════ */
@media screen and (max-width: 76.1875em) {
  /* Fundo do topo do menu lateral (Gaveta) no mobile */
  .md-nav__source,
  .md-nav--primary .md-nav__title {
    background-color: #07071a !important;
    color: #ffffff !important;
  }
  
  /* Fundo da tela de pesquisa no mobile */
  .md-search__outer,
  .md-search__form,
  .md-search__inner {
    background-color: #07071a !important;
  }
  
  /* Ícones de menu e pesquisa no mobile */
  .md-header__button {
    color: #ffffff !important;
  }
  
  /* Reduzir um pouco a logo no mobile para não espremer os botões */
  .md-header__button.md-logo img {
    height: 2rem !important; 
  }
  
  /* Ocultar a linha divisória da logo no mobile se o espaço ficar muito apertado */
  .md-header__button.md-logo {
    border-right: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
}