/* casca-stitch.css — o que o Tailwind do CDN não cobre na casca única (card Logiccos/quadro#104, etapa 4):
   sidebar aberta no celular / fixada no desktop e o botão Tema do menu do perfil nos dois estados. */
#casca-aside.gaveta-aberta, #casca-aside.fixada { width: 16rem; }
#casca-aside.gaveta-aberta { transform: none; }
:is(#casca-aside.gaveta-aberta, #casca-aside.fixada) .opacity-0 { opacity: 1; }
:is(#casca-aside.gaveta-aberta, #casca-aside.fixada) .hidden.sidebar-expanded-show { display: block; }
:is(#casca-aside.gaveta-aberta, #casca-aside.fixada) .sidebar-collapsed-show { display: none; }
#btn-tema[aria-pressed="false"] { justify-content: flex-start; }
#btn-tema[aria-pressed="false"] > span { background: rgb(var(--st-outline)); box-shadow: none; }
/* nenhum controle nativo sem tema (dono, 07/10): selects, campos e caixas seguem a paleta do Stitch */
select, input, textarea { color-scheme: dark; }
:root[data-tema="claro"] select, :root[data-tema="claro"] input, :root[data-tema="claro"] textarea { color-scheme: light; }
:root :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea):not(.bg-transparent) {
  background-color: rgb(var(--st-surface-container-lowest)); color: rgb(var(--st-on-surface));
  border: 1px solid rgb(var(--st-outline-variant) / 0.7); border-radius: 0.375rem; }
:root select.bg-transparent { color: rgb(var(--st-on-surface)); }
select option { background-color: rgb(var(--st-surface-container)); color: rgb(var(--st-on-surface)); }
select:focus, input:focus, textarea:focus { outline: none; border-color: rgb(var(--st-primary-container)); box-shadow: 0 0 0 1px rgb(var(--st-primary-container) / 0.5); }
input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--st-primary-container)); }
::placeholder { color: rgb(var(--st-on-surface-variant) / 0.7); }

/* ---- utilidades visuais das telas do Stitch (verbatim do bloco <style> das telas geradas) ---- */
.bg-grid-mesh { background-size: 24px 24px; background-image: radial-gradient(rgb(var(--st-primary) / 0.04) 1px, transparent 1px); }
.card-glass { background: rgb(var(--st-surface-container-low) / 0.72); backdrop-filter: blur(14px);
  border: 1px solid rgb(var(--st-outline-variant) / 0.35); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.card-glass:hover { border-color: rgb(var(--st-primary-container) / 0.35); box-shadow: 0 4px 24px -2px rgb(var(--st-primary-container) / 0.08); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgb(var(--st-surface-container-lowest)); }
::-webkit-scrollbar-thumb { background: rgb(var(--st-surface-container-high)); border-radius: 4px; }
[hidden] { display: none !important; }

/* gráficos SVG dos indicadores (lib/grafico.js) na paleta do Stitch */
.botao-janela { color: rgb(var(--st-on-surface-variant)); transition: color .15s, background-color .15s; }
.botao-janela:hover { color: rgb(var(--st-on-surface)); background-color: rgb(var(--st-surface-container-high) / 0.3); }
.botao-janela[aria-pressed="true"] { font-weight: 600; background-color: rgb(var(--st-surface-container-high)); color: rgb(var(--st-primary-container)); border: 1px solid rgb(var(--st-primary-container) / 0.3); }
.grafico { margin: 8px 0 0; }
.grafico figcaption { font-size: 12px; color: rgb(var(--st-on-surface-variant)); margin-bottom: 4px; }
.grafico-svg { width: 100%; height: auto; display: block; }
.grafico-svg .grade { stroke: rgb(var(--st-outline-variant) / 0.6); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico-svg .eixo { fill: rgb(var(--st-on-surface-variant)); font-size: 11px; }
.grafico .legenda-grafico { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin-top: 6px; font-size: 11px; color: rgb(var(--st-on-surface-variant)); }
.grafico .legenda-grafico li { display: flex; align-items: center; gap: 6px; }
.grafico .legenda-cor { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.status-ok { color: rgb(var(--st-secondary)); }
.status-erro { color: rgb(var(--st-error)); }
.status-acao:empty { display: none; }