/* Documentação: estilos dark aplicados ao README técnico completo (diagramas Mermaid escuros). */

.doc-hero {
    border-left: 3px solid var(--aed-teal, #2dd4bf);
}

.doc-layout {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.doc-sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-width: none; /* Oculta no Firefox */
    -ms-overflow-style: none; /* Oculta no IE/Edge antigo */
}

/* Oculta no Chrome, Safari e Edge moderno */
.doc-sidebar::-webkit-scrollbar {
    display: none;
}

.doc-toc-group {
    color: var(--aed-text-faint, #5b6679);
    font-family: var(--aed-font-display, "Space Grotesk", sans-serif);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin: 0.9rem 0 0.35rem;
    text-transform: uppercase;
}

.doc-toc-link {
    align-items: center;
    color: var(--aed-text-secondary, #8b97ad);
    display: flex;
    gap: 0.55rem;
    min-height: 2.35rem;
    text-decoration: none;
    padding: 0.5rem 0.65rem;
    border-radius: 0.55rem;
    margin-bottom: 0.16rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.doc-toc-icon {
    color: var(--aed-text-faint, #5b6679);
    flex: 0 0 auto;
    font-size: 1.12rem;
}

.doc-toc-group-sumario .doc-toc-icon { color: var(--aed-teal, #2dd4bf); }
.doc-toc-group-modulos .doc-toc-icon { color: var(--aed-risk-didactic, #60a5fa); }
.doc-toc-group-diagramas .doc-toc-icon { color: #a5b4fc; }
.doc-toc-group-operacao .doc-toc-icon { color: var(--aed-risk-attention, #f59e0b); }
.doc-toc-group-projeto .doc-toc-icon { color: #c4b5fd; }

.doc-toc-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--aed-text, #eef2f8);
}

.doc-toc-link:hover .doc-toc-icon,
.doc-toc-link.active .doc-toc-icon {
    color: var(--aed-teal, #2dd4bf);
}

.doc-toc-link.active {
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.4);
    color: var(--aed-teal, #2dd4bf);
    font-weight: 600;
}

.doc-toc-nivel-1 { padding-left: 0.65rem; }
.doc-toc-nivel-2 {
    font-size: 0.84rem;
    min-height: 2.15rem;
    padding-left: 1.15rem;
}

.doc-content-wrap {
    min-width: 0;
}

.doc-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

.doc-meta-pill {
    align-items: center;
    background: var(--aed-teal-dim, rgba(45, 212, 191, 0.12));
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 999px;
    color: var(--aed-teal, #2dd4bf);
    display: inline-flex;
    font-family: var(--aed-font-display, "Space Grotesk", sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.4rem;
    padding: 0.38rem 0.68rem;
}

.doc-meta-pill .material-symbols-outlined {
    font-size: 1rem;
}

/* ---- Markdown renderizado ---- */
.markdown-doc {
    line-height: 1.7;
    color: var(--aed-text-secondary, #8b97ad);
}

.markdown-doc h1,
.markdown-doc h2,
.markdown-doc h3,
.markdown-doc h4 {
    font-family: var(--aed-font-display, "Space Grotesk", sans-serif);
    color: var(--aed-text, #eef2f8);
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    scroll-margin-top: 1.2rem;
    line-height: 1.25;
}

.markdown-doc h1 { font-size: 1.7rem; }
.markdown-doc h2 {
    font-size: 1.3rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--aed-border, rgba(255, 255, 255, 0.08));
}
.markdown-doc h3 { font-size: 1.08rem; color: var(--aed-teal, #2dd4bf); }
.markdown-doc h4 { font-size: 0.98rem; color: #8aa8ff; }

.markdown-doc p { margin: 0.6rem 0; }
.markdown-doc strong { color: var(--aed-text, #eef2f8); }

.markdown-doc a {
    color: var(--aed-teal, #2dd4bf);
    text-decoration: none;
    border-bottom: 1px solid rgba(45, 212, 191, 0.3);
}
.markdown-doc a:hover { border-bottom-color: var(--aed-teal, #2dd4bf); }

.markdown-doc ul,
.markdown-doc ol { padding-left: 1.3rem; }
.markdown-doc li { margin: 0.25rem 0; }
.markdown-doc li::marker { color: var(--aed-teal, #2dd4bf); }

/* Código inline e blocos */
.markdown-doc code {
    font-family: var(--aed-font-mono, "JetBrains Mono", monospace);
    color: var(--aed-teal, #2dd4bf);
    background: rgba(45, 212, 191, 0.08);
    padding: 0.05rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.88em;
}

.markdown-doc pre {
    background: #05070c;
    border: 1px solid var(--aed-border, rgba(255, 255, 255, 0.08));
    border-radius: 0.6rem;
    padding: 0.9rem 1rem;
    overflow-x: auto;
    margin: 0.9rem 0;
}

.markdown-doc pre code {
    color: #cbd5e1;
    background: transparent;
    padding: 0;
    font-size: 0.84rem;
    line-height: 1.6;
}

/* Tabelas dark */
.markdown-doc .table-responsive {
    border: 1px solid var(--aed-border, rgba(255, 255, 255, 0.08));
    border-radius: 0.7rem;
    margin: 1rem 0;
    overflow-x: auto;
}

.markdown-doc table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin: 0;
}

.markdown-doc th,
.markdown-doc td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--aed-border, rgba(255, 255, 255, 0.08));
    text-align: left;
}

.markdown-doc thead th {
    background: var(--aed-card-bottom, #0a0e16);
    color: var(--aed-text-faint, #5b6679);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.markdown-doc tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

/* Blockquote */
.markdown-doc blockquote {
    border-left: 3px solid var(--aed-teal, #2dd4bf);
    background: rgba(45, 212, 191, 0.05);
    margin: 0.9rem 0;
    padding: 0.5rem 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
    color: var(--aed-text-secondary, #8b97ad);
}

.markdown-doc img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    border: 1px solid var(--aed-border, rgba(255, 255, 255, 0.07));
}

.markdown-doc hr {
    border: none;
    border-top: 1px solid var(--aed-border, rgba(255, 255, 255, 0.08));
    margin: 1.4rem 0;
}

/* Diagramas Mermaid — DARK (era #fff, causava as caixas brancas) */
.markdown-doc .mermaid {
    background: #0a0e16;
    border: 1px solid var(--aed-border, rgba(255, 255, 255, 0.08));
    border-radius: 0.7rem;
    padding: 1rem;
    margin: 1.1rem 0;
    text-align: center;
    overflow-x: auto;
}

.markdown-doc .mermaid svg { max-width: 100%; height: auto; }

@media (max-width: 62em) {
    .doc-layout { grid-template-columns: 1fr; }
    .doc-sidebar { position: static; max-height: none; }
}