/* =========================================================================
   Documentação do PAX — estilo específico, sobre os tokens de site.css.
   Carregar SEMPRE depois de site.css.
   ========================================================================= */

.docs-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 34px;
    align-items: start;
    padding: 116px 0 70px;
}

/* ---------- Barra lateral ---------- */
.sidebar {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 22px 20px;
    scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 3px; }

.sidebar h3 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ciano);
    margin-bottom: 16px;
}
.sidebar .section-title {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--texto-fraco);
    font-weight: 600;
    margin: 20px 0 8px;
}
.sidebar ul { list-style: none; }
.sidebar li { margin-bottom: 2px; }
.sidebar a {
    display: block;
    padding: 7px 11px;
    border-radius: 8px;
    color: var(--texto-suave);
    text-decoration: none;
    font-size: .9rem;
    border-left: 2px solid transparent;
    transition: background .2s, color .2s, border-color .2s;
}
.sidebar a:hover { background: var(--superficie-alta); color: var(--texto); }
.sidebar a.ativo {
    background: rgba(59, 130, 246, .14);
    color: var(--ciano);
    border-left-color: var(--ciano);
}

/* ---------- Conteúdo ---------- */
.content {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 44px 46px 54px;
    min-width: 0;
}
.content section { padding: 0; margin-bottom: 54px; scroll-margin-top: 92px; }
.content section:last-child { margin-bottom: 0; }

.content h1 {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--borda);
}
.content h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    margin: 46px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--borda);
}
.content h3 { font-size: 1.12rem; color: var(--ciano); margin: 30px 0 12px; }
.content h4 { font-size: 1rem; margin: 22px 0 10px; }
.content p, .content li { color: var(--texto-suave); font-size: .97rem; }
.content p { margin-bottom: 15px; }
.content ul, .content ol { margin: 0 0 18px 22px; }
.content li { margin-bottom: 8px; }
.content strong { color: var(--texto); }
.content a { color: var(--ciano); }

.content code, .content kbd {
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: .87em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--texto);
}

/* ---------- Tabelas ---------- */
.content table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    overflow: hidden;
    font-size: .93rem;
    display: block;
    overflow-x: auto;      /* tabela larga rola sozinha, não estoura a página */
    white-space: nowrap;
}
.content th {
    background: rgba(59, 130, 246, .14);
    color: var(--texto);
    text-align: left;
    padding: 12px 15px;
    font-weight: 600;
}
.content td { padding: 11px 15px; border-top: 1px solid var(--borda); color: var(--texto-suave); }
.content tr:hover td { background: var(--superficie-alta); }

/* ---------- Caixas de destaque ---------- */
.info-box, .warning-box, .success-box {
    border-radius: var(--raio-sm);
    padding: 17px 21px;
    margin: 22px 0;
    border: 1px solid;
    font-size: .95rem;
}
.info-box    { background: rgba(59, 130, 246, .10); border-color: rgba(59, 130, 246, .3); }
.warning-box { background: rgba(251, 191, 36, .09); border-color: rgba(251, 191, 36, .3); }
.success-box { background: rgba(52, 211, 153, .09); border-color: rgba(52, 211, 153, .3); }
.info-box p:last-child, .warning-box p:last-child, .success-box p:last-child { margin-bottom: 0; }

/* ---------- Cartões de recurso ---------- */
.feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.feature-card {
    background: var(--superficie-alta);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 22px;
}
.feature-card .icon { font-size: 1.7rem; margin-bottom: 10px; display: block; }
.feature-card h4 { margin: 0 0 8px; color: var(--texto); }
.feature-card p { font-size: .91rem; margin: 0; }

/* ---------- Passo a passo ---------- */
.steps { counter-reset: passo; margin: 22px 0; }
.step { position: relative; padding-left: 50px; margin-bottom: 22px; }
.step::before {
    counter-increment: passo;
    content: counter(passo);
    position: absolute; left: 0; top: -2px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--gradiente);
    color: #05121f;
    font-weight: 700;
    font-size: .92rem;
}
.step h4 { margin: 0 0 6px; }
.step p:last-child { margin-bottom: 0; }

/* ---------- Aplicativos ---------- */
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 24px 0; }
.app-box {
    border-radius: var(--raio-sm);
    padding: 22px;
    border: 1px solid var(--borda-forte);
    background: var(--superficie-alta);
}
.app-box h4 { margin: 0 0 8px; color: var(--texto); }
.app-box p { font-size: .91rem; margin: 0; }
.app-box.webpax  { border-color: rgba(59, 130, 246, .4);  background: rgba(59, 130, 246, .09); }
.app-box.apppax  { border-color: rgba(52, 211, 153, .4);  background: rgba(52, 211, 153, .08); }
.app-box.appass  { border-color: rgba(34, 211, 238, .4);  background: rgba(34, 211, 238, .08); }
.app-box.avisos  { border-color: rgba(251, 191, 36, .4);  background: rgba(251, 191, 36, .08); }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
    .docs-layout { grid-template-columns: 1fr; padding-top: 96px; }
    .sidebar { position: static; max-height: none; }
    .content { padding: 30px 22px 38px; }
}