/* Base e componentes simples (botoes, campos, cartao, chip, segmentado, tabela). */
/* A barra lateral mantem o efeito mesmo com "reduzir movimento" do Windows (pedido do Lucas). */
/* Sem deslocamento nem laço, mas a mudança de estado continua visível: cor, fundo, contorno e opacidade trocam em 150 ms. */
@media (prefers-reduced-motion: reduce) { :not(.side):not(.side *), :not(.side):not(.side *)::before, :not(.side):not(.side *)::after { animation: none !important; transition-property: color, background-color, border-color, box-shadow, opacity !important; transition-duration: .15s !important; transition-delay: 0s !important; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--color-bg); }
body { color: var(--color-text); font: calc(14px * var(--fs, 1))/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-heading); }
button, input, select, textarea { font-family: inherit; }
a { color: var(--color-accent-300); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.card { background: var(--color-surface); border-radius: 14px; box-shadow: var(--shadow-sm), 0 1px 2px rgba(3, 31, 41, .04); }
/* Sobretitulo neutro (D2): o ciano fica para o que age. */
.eyebrow { font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-300); }
.lbl { font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neutral-300); }
.muted { color: var(--color-neutral-300); }

.btn { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; font: 600 calc(13.5px * var(--fs, 1)) var(--font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn .ph, .btn .ph-fill { font-size: calc(17px * var(--fs, 1)); }
.btn-p { background: var(--color-brand); color: var(--on-brand); box-shadow: 0 6px 16px rgba(10, 120, 150, .22); }
.btn-p:hover { background: var(--color-accent-700); }
.btn-s { background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-divider); }
.btn-s:hover { background: var(--color-accent-900); }
.btn-g { background: transparent; color: var(--color-accent-300); }
.btn-g:hover { background: var(--color-accent-900); }
.btn-d { background: var(--c-err-forte); color: var(--on-brand); }
.btn-d:hover { background: var(--c-err-forte-hover); }
.ibtn { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--color-neutral-300); cursor: pointer; display: inline-grid; place-items: center; position: relative; transition: background-color .15s ease, color .15s ease; }
.ibtn:hover { background: var(--color-accent-900); color: var(--color-accent-300); }
.ibtn .ph, .ibtn .ph-fill { font-size: calc(20px * var(--fs, 1)); }

.inp { height: 40px; width: 100%; padding: 0 12px; border: 0; border-radius: 10px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-field); color: var(--color-text); font: calc(14px * var(--fs, 1)) var(--font-body); outline: none; transition: box-shadow .15s ease; }
.inp:focus { box-shadow: inset 0 0 0 2px var(--color-focus); }
/* Controles nativos no tema (D5): seta desenhada no select, marca na cor da marca, botao de arquivo como o secundario. */
select.inp { padding-right: 34px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235d7480' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: calc(14px * var(--fs, 1)); text-overflow: ellipsis; cursor: pointer; }
[data-theme="escuro"] select.inp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23b9d4dd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-focus); }
input[type="file"]::file-selector-button { height: 32px; margin-right: 10px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-divider); font: 600 calc(12.5px * var(--fs, 1)) var(--font-body); cursor: pointer; }
textarea.inp { height: 76px; padding: 10px 12px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-placeholder); opacity: 1; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld > .inp { min-width: 0; max-width: 100%; }
.fld > span { font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--color-neutral-300); }
.fld .erro { display: none; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--c-err); }
.fld.tem-erro .inp { box-shadow: inset 0 0 0 2px var(--c-err); }
.fld.tem-erro .erro { display: flex; align-items: center; gap: 6px; }
.fld.tem-erro .inp { animation: shakeA .4s ease both; }

.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; white-space: nowrap; }
.chip .ph, .chip .ph-fill { font-size: calc(13px * var(--fs, 1)); }
.chip.ok { background: var(--c-ok-soft); color: var(--c-ok); }
.chip.warn { background: var(--c-warn-soft); color: var(--c-warn); }
.chip.err { background: var(--c-err-soft); color: var(--c-err); }
/* Situacao informativa nao age: mesmo par neutro (Regra do Ciano que Age, D3). */
.chip.info { background: var(--c-muted-soft); color: var(--c-muted); }
.chip.neutro { background: var(--c-muted-soft); color: var(--c-muted); }
/* Selo de situacao no cabecalho da pagina (fundo da pagina, nao do cartao): contorno leve para nao sumir no tema claro. */
.acoes > .chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); }

/* Segmentado (D4): claro com trilho neutro e inativo #3f5a66 (>= 4,5:1); escuro com a marcada em #1a4a5a e anel ciano. */
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--c-muted-soft); box-shadow: inset 0 0 0 1px var(--color-divider); gap: 2px; }
.seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--c-muted); font: 600 calc(12.5px * var(--fs, 1)) var(--font-body); cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.seg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgba(3, 31, 41, .1), 0 0 0 1px var(--color-divider); }
[data-theme="escuro"] .seg { background: #0b2f3b; }
[data-theme="escuro"] .seg button { color: #b9d4dd; }
[data-theme="escuro"] .seg button[aria-pressed="true"] { background: #1a4a5a; color: #f2f8fa; box-shadow: inset 0 0 0 1px rgba(95, 208, 238, .45); }

.tbl { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fs, 1)); }
.tbl th { height: 40px; padding: 0 14px; text-align: left; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-neutral-300); border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.tbl td { height: 56px; padding: 6px 14px; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.tbl tr.rw { cursor: pointer; transition: background-color .12s ease; }
.tbl tr.rw:hover { background: var(--color-accent-900); }
.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { display: block; height: 8px; border-radius: 4px; background: var(--color-neutral-800); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 4px; }
.tab { height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--color-neutral-300); font: 600 calc(13.5px * var(--fs, 1)) var(--font-body); cursor: pointer; margin-bottom: -1px; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--color-accent-300); box-shadow: inset 0 -2px 0 var(--color-focus); }

/* Barra de rolagem do tema (mesma do Orcamentos): fina, com trilho na cor de fundo e pino arredondado. */
* { scrollbar-width: thin; scrollbar-color: var(--color-neutral-500) var(--color-bg); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: var(--color-bg); }
*::-webkit-scrollbar-thumb { background: var(--color-neutral-500); border: 2px solid var(--color-bg); border-radius: 7px; }
*::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-300); }
*::-webkit-scrollbar-corner { background: var(--color-bg); }