/* ============================================================
   Manual Mibo Smart - Folha de estilo padronizada
   Layout inspirado no Manual da Plataforma GDI (Intelbras).
   Estrutura: header fixo + menu lateral + conteudo em cards.
   ============================================================ */

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

/* Paleta de cores (equivalente ao :root do repositorio GDI) */
:root {
    --branco: rgba(251, 251, 251, 1);
    --branco2: rgba(225, 239, 233, 1);
    --branco3: rgba(246, 246, 246, 1);
    --branco4: rgba(225, 239, 233, 0.5);
    --cinza: rgba(194, 194, 194, 1);
    --preto: rgba(22, 49, 52, 1);
    --preto2: rgba(22, 49, 52, 0.3);
    --preto3: rgba(22, 49, 52, 0.5);
    --preto4: rgba(22, 49, 52, 0.7);
    --preto5: rgba(22, 49, 52, 0.1);
    --preto6: rgba(22, 49, 52, 0.8);
    --verde: rgba(0, 178, 107, 1);
    --verde2: rgba(4, 158, 97, 1);
    --verde3: rgba(0, 178, 107, 0.1);
    --verde4: rgba(219, 235, 228, 1);
    --amarelo: rgba(255, 208, 79, 1);
    --vermelho: rgba(238, 74, 74, 1);
    --corFundo: #163134;
    --corPrimaria: #00B26B;
    --corSecundaria: #E1EFE9;
    --fonte: "Intelbras Sans", "Segoe UI", "Nunito Sans", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

body {
    font-family: var(--fonte);
    line-height: 1.6;
    color: var(--preto);
    background-color: var(--branco3);
    display: flex;
    list-style-type: none;
}

/* ===================== Header fixo ===================== */
header {
    width: 100%;
    height: 80px;
    min-height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px 0 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    position: fixed;
    top: 0;
    background-color: #fff;
}

header .logo-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

header .logo-area img.brand {
    height: 34px;
    width: auto;
}

header .logo-area .title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

header .logo-area .title-group h1 {
    font-size: 14pt;
    line-height: 16pt;
    font-family: var(--fonte);
    font-weight: 700;
    color: var(--preto);
    margin: 0;
    padding: 0;
}

header .logo-area .title-group span {
    font-size: 10pt;
    line-height: 12pt;
    font-family: var(--fonte);
    font-weight: 400;
    color: var(--verde);
}

/* botao de menu (mobile) */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: var(--preto);
    cursor: pointer;
}

/* ===================== Menu lateral ===================== */
aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-width: 300px;
    width: 300px;
    padding: 24px 0 40px 0;
    position: fixed;
    top: 80px;
    left: 0;
    height: calc(100vh - 80px);
    background-color: #fff;
    border-right: 1px solid var(--branco4);
    overflow-y: auto;
    z-index: 999;
}

aside .nav-group-title {
    font-size: 8.5pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--preto3);
    padding: 18px 24px 6px 24px;
}

aside ul {
    list-style-type: none;
    width: 100%;
}

aside ul li {
    cursor: pointer;
}

aside ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    font-size: 10.5pt;
    font-family: var(--fonte);
    font-weight: 500;
    color: var(--preto3);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* Links do menu lateral nunca sublinhados (inclusive :hover) */
aside a,
aside a:hover {
    text-decoration: none;
}

aside ul li a.sub {
    padding-left: 40px;
    font-size: 10pt;
    font-weight: 400;
}

aside ul li a:hover {
    color: var(--preto4);
    background-color: var(--preto5);
    border-left-color: var(--preto5);
}

aside ul li a.ativo {
    color: var(--verde);
    background-color: var(--verde3);
    border-left-color: var(--verde);
}

aside ul li a .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: transparent;
    border-radius: 5px;
    font-size: 1.05rem;
    flex-shrink: 0;
}

aside ul li a.ativo .nav-icon {
    background-color: var(--verde3);
}

/* ===================== Conteudo principal ===================== */
main {
    margin-left: 300px;
    margin-top: 80px;
    padding: 40px;
    max-width: 980px;
    width: calc(100% - 300px);
}

section {
    background: #fff;
    border-radius: 10px;
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    scroll-margin-top: 100px;
}

/* Titulo principal de secao: h1 e h2 dividem o mesmo estilo */
section > h1,
section h2 {
    color: var(--preto);
    font-size: 1.6rem;
    font-family: var(--fonte);
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--verde3);
    line-height: 1.3;
}

/* h1 secundario dentro do conteudo (alguns manuais possuem 2 h1) */
section h1 {
    font-size: 1.35rem;
    color: var(--preto6);
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 20px;
    margin-bottom: 12px;
}

section > h1:first-child {
    font-size: 1.6rem;
    color: var(--preto);
    border-bottom: 2px solid var(--verde3);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
}

h3 {
    color: var(--preto6);
    font-size: 1.2rem;
    font-family: var(--fonte);
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 12px;
    padding-left: 0;
}

h4 {
    color: var(--preto4);
    font-size: 1.05rem;
    font-family: var(--fonte);
    font-weight: 600;
    margin-top: 18px;
    margin-bottom: 8px;
}

h5 {
    color: var(--preto4);
    font-size: 0.98rem;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 6px;
}

h6 {
    font-size: 0.9rem;
    margin: 12px 0;
}

p {
    margin-bottom: 15px;
    color: var(--preto4);
    font-family: var(--fonte);
    font-size: 10.5pt;
    line-height: 1.7;
}

span {
    color: inherit;
}

a {
    color: var(--verde2);
    text-decoration: underline;
}

a:hover {
    color: var(--verde);
}

ul,
ol {
    margin-bottom: 15px;
    padding-left: 25px;
}

li {
    margin-bottom: 8px;
    color: var(--preto4);
    font-size: 10.5pt;
    line-height: 1.7;
}

em {
    color: inherit;
}

sup {
    font-size: 0.7em;
}

hr {
    border: 0;
    border-top: 1px solid var(--branco4);
    margin: 24px 0;
}

/* ===================== Imagens e midia ===================== */
section img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    vertical-align: middle;
}

/* icones inline (setas, teclas) nao devem ganhar borda/raio grande */
section p img,
section li img {
    border-radius: 4px;
}

figure {
    margin: 15px 0;
    max-width: 100%;
}

figure img {
    max-width: 100%;
    height: auto;
}

video {
    max-width: 100%;
    border-radius: 12px;
    border: 4px solid var(--verde3);
    background: #000;
    margin: 10px 0;
}

/* ===================== Vídeo em mockup de celular =====================
   O PNG do mockup tem a área da tela transparente; o vídeo fica atrás
   e a moldura (opaca) por cima recorta o vídeo no formato do aparelho.
   Retângulo da tela medido no PNG: esq. 8,71% / dir. 91,36% /
   topo 3,57% / base 96,43% (o vídeo é posto um pouco maior para
   encaixar sob a moldura). Proporção do PNG: 3008x5796. */
.device-mockup {
    position: relative;
    display: inline-block;
    width: 300px;
    max-width: 100%;
    aspect-ratio: 3008 / 5796;
    margin: 16px 0;
    vertical-align: top;
}

.device-mockup video {
    position: absolute;
    top: 3%;
    left: 8%;
    width: 84%;
    height: 94%;
    max-width: none;
    object-fit: cover;
    background: #000;
    border: none;
    border-radius: 0;
    margin: 0;
    z-index: 1;
}

.device-mockup .device-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    border: none;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
    z-index: 2;
}

embed {
    border-radius: 8px;
    border: 1px solid var(--branco4);
    min-height: 600px;
}

/* Placeholder / moldura de screenshot (padrao GDI) */
.screenshot-placeholder {
    border: 3px solid var(--verde);
    border-radius: 8px;
    padding: 0;
    text-align: center;
    margin: 20px 0;
    color: var(--preto4);
    overflow: hidden;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--branco3);
}

/* ===================== Tabelas ===================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.9rem;
    font-family: var(--fonte);
}

th,
td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid var(--branco4);
}

th {
    background: var(--verde3);
    color: var(--preto);
    font-weight: 600;
}

tbody tr:hover {
    background: var(--branco3);
}

/* ===================== Caixas de destaque ===================== */
.info-box {
    background: var(--verde3);
    border-left: 4px solid var(--verde);
    padding: 15px 20px;
    border-radius: 4px;
    margin: 15px 0;
    color: var(--preto6);
}

.warning-box {
    background: rgba(255, 208, 79, 0.12);
    border-left: 4px solid var(--amarelo);
    padding: 15px 20px;
    border-radius: 4px;
    margin: 15px 0;
    color: var(--preto6);
}

.success-box {
    background: var(--verde4);
    border-left: 4px solid var(--verde2);
    padding: 15px 20px;
    border-radius: 4px;
    margin: 15px 0;
    color: var(--preto6);
}

.danger-box {
    background: rgba(238, 74, 74, 0.08);
    border-left: 4px solid var(--vermelho);
    padding: 15px 20px;
    border-radius: 4px;
    margin: 15px 0;
    color: var(--preto6);
}

/* ===================== Passos numerados ===================== */
.step {
    display: flex;
    align-items: flex-start;
    margin: 20px 0;
    gap: 15px;
}

.step-number {
    background: var(--verde);
    color: #fff;
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
    padding-top: 4px;
}

.step-content h4 {
    margin-top: 0 !important;
    margin-bottom: 8px;
}

/* ===================== Botoes (legado .a-button / GDI) ===================== */
.btn-verde,
.a-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--verde);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    margin: 4px 4px;
    cursor: pointer;
    font-family: var(--fonte);
    font-size: 10.5pt;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 300ms linear;
}

.btn-verde:hover,
.a-button:hover {
    background-color: var(--verde2);
    color: #fff !important;
}

/* Conteudo legado que era exibido/ocultado via jQuery: sempre visivel */
.a-div,
div5,
div6,
div7,
div8 {
    display: block;
    margin-top: 10px;
}

.inline-code {
    background: var(--verde3);
    color: var(--corFundo);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: var(--fonte);
}

center {
    display: block;
    text-align: center;
}

/* ===================== Responsivo ===================== */
@media (max-width: 900px) {
    .menu-toggle {
        display: inline-flex;
    }

    aside {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    aside.aberto {
        transform: translateX(0);
    }

    main {
        margin-left: 0;
        width: 100%;
        padding: 20px;
    }

    header {
        padding: 0 20px;
    }

    header .logo-area .title-group h1 {
        font-size: 12pt;
    }

    section {
        padding: 24px;
    }
}