/**
 * =============================================================================
 * Folha de Estilo Personalizada - Morador Online Documentation
 * =============================================================================
 */


/**
 * 1.0 Variáveis Globais (Paleta de Cores)
 * -----------------------------------------------------------------------------
 * Declaramos as cores da marca aqui para reutilização em todo o site.
 */
:root {
  --mo-purple: #9C19C0;
  --mo-blue:   #6272A5;
  --mo-green:  #15E4BB;
  --mo-error:  #ED2E7E;
  --mo-success:#19AC8F;
  --mo-warning:#F4B740;
}


/**
 * 2.0 Overrides do Tema Principal
 * -----------------------------------------------------------------------------
 * Define as cores primárias e de destaque para o tema Material.
 */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--mo-purple);
  --md-accent-fg-color:  var(--mo-blue);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--mo-purple);
  --md-accent-fg-color:  var(--mo-green);
}


/**
 * 3.0 Estilização de Componentes
 * =============================================================================
 */

/**
 * 3.1 Admonitions (Blocos Estáticos `!!!`)
 * -----------------------------------------------------------------------------
 * Estiliza os blocos de destaque como `!!! info`, `!!! warning`, etc.
 */
.md-typeset .admonition {
  border-width: 1px;
  border-style: solid;
  border-radius: 0.2rem;
}

/* --- TIPO: Neutro (Azul Secundário) --- */
.md-typeset .admonition.info,
.md-typeset .admonition.question,
.md-typeset .admonition.note,
.md-typeset .admonition.summary {
  border-color: var(--mo-blue);
}
.md-typeset .admonition.info .admonition-title,
.md-typeset .admonition.question .admonition-title,
.md-typeset .admonition.note .admonition-title,
.md-typeset .admonition.summary .admonition-title {
  background-color: rgba(98, 114, 165, 0.1);
}

/* --- TIPO: Dica (Roxo Principal) --- */
.md-typeset .admonition.tip {
  border-color: var(--mo-purple);
}
.md-typeset .admonition.tip .admonition-title {
  background-color: rgba(156, 25, 192, 0.1);
}

/* --- TIPO: Sucesso (Verde Sucesso) --- */
.md-typeset .admonition.success {
  border-color: var(--mo-success);
}
.md-typeset .admonition.success .admonition-title {
  background-color: rgba(25, 172, 143, 0.1);
}

/* --- TIPO: Aviso (Amarelo Aviso) --- */
.md-typeset .admonition.warning {
  border-color: var(--mo-warning);
}
.md-typeset .admonition.warning .admonition-title {
  background-color: rgba(244, 183, 64, 0.1);
}

/* --- TIPO: Perigo/Erro (Vermelho Erro) --- */
.md-typeset .admonition.danger,
.md-typeset .admonition.error {
  border-color: var(--mo-error);
}
.md-typeset .admonition.danger .admonition-title,
.md-typeset .admonition.error .admonition-title {
  background-color: rgba(237, 46, 126, 0.1);
}


/**
 * 4.0 Estilização de Conteúdo
 * =============================================================================
 */

/**
 * 4.0.1 Layout - Aumenta largura da área de conteúdo
 * -----------------------------------------------------------------------------
 */
.md-grid {
  max-width: 100%;
}

/* Ajusta o menu lateral esquerdo para não ficar colado na borda */
.md-sidebar--primary {
  padding-left: 1.5rem;
}

/* Ajusta o menu lateral direito para não ficar colado na borda */
.md-sidebar--secondary {
  padding-right: 1.5rem;
}

/**
 * 4.1 Imagens (Padrão Global)
 * -----------------------------------------------------------------------------
 * Define um estilo padrão para todas as imagens no conteúdo.
 */
.md-content img {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  max-width: min(100%, 700px); 
  height: auto;
  max-height: 550px;
}

/**
 * 4.2 Classes Modificadoras de Imagem
 * -----------------------------------------------------------------------------
 * Classes para sobrescrever o tamanho padrão de imagens específicas.
 */
.md-content img.img-small {
  max-width: min(100%, 250px);
}

.md-content img.img-medium {
  max-width: min(100%, 375px);
}

.md-content img.img-large {
  max-width: min(100%, 500px);
}
.md-content img.img-full {
  max-width: 100%;
}