/* =====================================================================
   Opções de interface (Aparência do Sistema e "Minha aparência").
   Tudo é ligado por atributos no <html> — veja AparenciaConfiguracao::atributosHtml().
   ===================================================================== */

/* ---- tamanho da fonte ---- */
/* Automático (padrão): a interface acompanha o tamanho da tela. Em notebooks (telas menores ou mais baixas) tudo que usa rem
   — texto, botões, campos, cartões — encolhe junto; em monitores grandes fica no tamanho normal. Só vale em telas de computador. */
@media (min-width: 992px) and (max-width: 1599.98px), (min-width: 992px) and (max-height: 880px) {
    html[data-fonte-tam="auto"] { font-size: 15px; }
}
@media (min-width: 992px) and (max-width: 1439.98px), (min-width: 992px) and (max-height: 800px) {
    html[data-fonte-tam="auto"] { font-size: 14px; }
    html[data-fonte-tam="auto"][data-menu="padrao"] { --sidebar-largura: 232px; }
}
@media (min-width: 992px) and (max-width: 1279.98px), (min-width: 992px) and (max-height: 720px) {
    html[data-fonte-tam="auto"] { font-size: 13.5px; }
    html[data-fonte-tam="auto"][data-menu="padrao"] { --sidebar-largura: 216px; }
}
html[data-fonte-tam="pequeno"] { font-size: 14px; }
html[data-fonte-tam="grande"] { font-size: 17.5px; }

/* ---- largura do menu lateral ---- */
html[data-menu="estreita"] { --sidebar-largura: 218px; }
html[data-menu="ampla"] { --sidebar-largura: 290px; }

/* ---- densidade ---- */
html[data-densidade="compacta"] .ls-item { padding-top: .4rem; padding-bottom: .4rem; gap: .7rem; }
html[data-densidade="compacta"] .ls-lista { gap: .35rem; }
html[data-densidade="compacta"] .ls-kpi { padding: .6rem .9rem; }
html[data-densidade="compacta"] .ls-kpis { gap: .6rem; margin-bottom: .9rem; }
html[data-densidade="compacta"] .ls-cabecalho { margin-bottom: .8rem; }
html[data-densidade="compacta"] .ls-cartao { padding: .85rem 1rem; }
html[data-densidade="compacta"] .ls-atalho { padding: .6rem .9rem; }
html[data-densidade="compacta"] .table > :not(caption) > * > * { padding-top: .3rem; padding-bottom: .3rem; }
html[data-densidade="compacta"] .card-painel.p-4 { padding: 1rem !important; }
html[data-densidade="compacta"] .app-nav-row, html[data-densidade="compacta"] .app-nav-link--sub { padding-top: .35rem; padding-bottom: .35rem; }
html[data-densidade="compacta"] .form-control, html[data-densidade="compacta"] .form-select { padding-top: .3rem; padding-bottom: .3rem; }

html[data-densidade="espacosa"] .ls-item { padding-top: 1.1rem; padding-bottom: 1.1rem; gap: 1.3rem; }
html[data-densidade="espacosa"] .ls-lista { gap: .8rem; }
html[data-densidade="espacosa"] .ls-kpi { padding: 1.3rem 1.5rem; }
html[data-densidade="espacosa"] .ls-kpis { gap: 1.2rem; margin-bottom: 1.8rem; }
html[data-densidade="espacosa"] .ls-cabecalho { margin-bottom: 1.6rem; }
html[data-densidade="espacosa"] .ls-cartao { padding: 1.7rem 1.8rem; }
html[data-densidade="espacosa"] .ls-atalho { padding: 1.25rem 1.4rem; }
html[data-densidade="espacosa"] .table > :not(caption) > * > * { padding-top: .85rem; padding-bottom: .85rem; }
html[data-densidade="espacosa"] .app-nav-row, html[data-densidade="espacosa"] .app-nav-link--sub { padding-top: .65rem; padding-bottom: .65rem; }

/* ---- cantos ---- */
html[data-cantos="retos"] {
    --raio-sm: 2px; --raio-md: 3px; --raio-lg: 4px;
}
html[data-cantos="retos"] :is(.card-painel, .stat-card, .card, .ls-kpi, .ls-item, .ls-cartao, .ls-atalho, .ls-detalhe, .ls-vazio, .ls-foco, .ls-select, .ls-busca, .ls-visao, .ls-visao button,
    .ls-acao, .ls-sinal, .ls-mais, .ls-btn-filtros, .ls-filtros-menu, .ls-paginacao a, .ls-atalho__icone, .ls-kpi-icone, .cl-kpi, .cl-item, .cl-foco, .cl-busca, .cl-acao, .cl-sinal,
    .btn, .form-control, .form-select, .input-group-text, .modal-content, .dropdown-menu, .alert, .badge, .nav-link, .tm, .tm-rail, .cf-card, .cf-icone, .kanban-cartao, .kanban-coluna, .legal-cartao, .tag-pill, .app-nav-row, .app-nav-link--sub) { border-radius: 3px !important; }
html[data-cantos="suaves"] {
    --raio-sm: .35rem; --raio-md: .5rem; --raio-lg: .7rem;
}
html[data-cantos="suaves"] :is(.card-painel, .stat-card, .card, .ls-kpi, .ls-item, .ls-cartao, .ls-atalho, .ls-detalhe, .ls-vazio, .cl-kpi, .cl-item, .modal-content, .tm, .cf-card, .kanban-cartao, .kanban-coluna, .legal-cartao) { border-radius: .6rem !important; }
html[data-cantos="suaves"] :is(.ls-foco, .ls-select, .ls-busca, .ls-visao, .ls-btn-filtros, .ls-paginacao a, .cl-foco, .cl-busca, .btn, .form-control, .form-select, .dropdown-menu, .alert, .tag-pill) { border-radius: .45rem !important; }
html[data-cantos="suaves"] :is(.ls-acao, .ls-sinal, .ls-mais, .badge, .cl-acao, .cl-sinal) { border-radius: .4rem !important; }

/* ---- animações ---- */
html[data-animacoes="off"] *, html[data-animacoes="off"] *::before, html[data-animacoes="off"] *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    html[data-animacoes="on"] *, html[data-animacoes="on"] *::before, html[data-animacoes="on"] *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- controles da tela de opções ---- */
.ap-opcoes { display: grid; gap: 1.2rem; }
.ap-opcao__titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.ap-opcao__titulo i { color: var(--cor-primaria); }
.ap-opcao__titulo b { font-size: .92rem; }
.ap-opcao__titulo span { font-size: .78rem; color: var(--cor-texto-secundario); flex-basis: 100%; }
.ap-segmentos { display: flex; flex-wrap: wrap; gap: .5rem; }
.ap-seg { margin: 0; cursor: pointer; position: relative; }
.ap-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ap-seg span { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 99px; border: 1px solid var(--cor-borda); background: var(--cor-superficie); font-size: .84rem; font-weight: 600; color: var(--cor-texto-secundario); transition: border-color .15s, background .15s, color .15s; }
.ap-seg:hover span { border-color: var(--cor-primaria); }
.ap-seg input:checked + span { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.ap-seg input:focus-visible + span { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.ap-bolinha { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); display: inline-block; }
.ap-paletas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.ap-amostra { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; padding: 0; transition: transform .15s; }
.ap-amostra:hover { transform: scale(1.12); }