/* Tipografia de Leitura */
.fonte-leitura {
    font-family: 'Arial', Helvetica, sans-serif;
    font-size: 1.125rem;
    line-height: 1.9;
    color: #334155;
}
.dark .fonte-leitura {
    color: #e2e8f0;
}

/* Estilo dos Marca-textos - Claro */
.hl-green, .hl-blue, .hl-yellow, .hl-red {
    border-radius: 0.375rem;
    padding: 0.15rem 0.4rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.hl-green { background-color: #dcfce7; color: #166534; box-shadow: inset 0 -2px 0 #86efac; }
.hl-blue { background-color: #e0f2fe; color: #075985; box-shadow: inset 0 -2px 0 #7dd3fc; }
.hl-yellow { background-color: #fef08a; color: #854d0e; box-shadow: inset 0 -2px 0 #fde047; }
.hl-red { background-color: #ffe4e6; color: #9f1239; box-shadow: inset 0 -2px 0 #fda4af; }

/* Dark Mode: Syntax Highlighting Leve */
.dark .hl-green { background-color: transparent; color: #4ade80; box-shadow: none; padding: 0; font-weight: 400; }
.dark .hl-blue { background-color: transparent; color: #38bdf8; box-shadow: none; padding: 0; font-weight: 400; }
.dark .hl-yellow { background-color: transparent; color: #facc15; box-shadow: none; padding: 0; font-weight: 400; }
.dark .hl-red { background-color: transparent; color: #fb7185; box-shadow: none; padding: 0; font-weight: 400; }

/* Esconder Scrollbar nativa das Tabs no celular mas permitir o scroll */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Scrollbar Customizada Geral */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #444746; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Transição de Tabs */
.tab-btn { position: relative; white-space: nowrap; }
.tab-active { color: #4f46e5; font-weight: 600; }
.dark .tab-active { color: #818cf8; }
.tab-active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background-color: #4f46e5; border-radius: 3px 3px 0 0; }
.dark .tab-active::after { background-color: #818cf8; }

/* Largura Expansiva da Sidebar no Desktop */
.sidebar-expanded {
    width: 92% !important;
}
@media (min-width: 768px) {
    .sidebar-expanded {
        width: 520px !important;
    }
}
@media (min-width: 1024px) {
    .sidebar-expanded {
        width: 600px !important;
    }
}