/* Workshop Pro — interface
   Neutros frios (grafite e cinzentos), azul como cor de ação e vermelho só para alertas.
   Texto em IBM Plex Sans; títulos e números em Barlow Semi Condensed (letra de sinalética de oficina). */
:root {
  --fundo: #ffffff;
  --superficie: #ffffff;
  --superficie-2: #f5f5f5;
  --linha: #e1e1e1;
  --linha-forte: #d1d1d1;
  --texto: #242424;
  --texto-2: #616161;
  --texto-3: #8a8a8a;
  --acento: #0f6cbd;
  --acento-forte: #115ea3;
  --acento-suave: #ebf3fc;
  --perigo: #d13438;
  --perigo-suave: #fdf3f4;
  --grafite: #242424;
  --lateral: #1b1a19;
  --lateral-texto: #c8c6c4;
  --raio: 8px;
  --raio-g: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06);
  --letra: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --letra-titulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--letra);
  color: var(--texto);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --fundo: #141414; --superficie: #1f1f1f; --superficie-2: #242424; --linha: #333333; --linha-forte: #424242;
    --texto: #f5f5f5; --texto-2: #c7c7c7; --texto-3: #9a9a9a;
    --acento: #479ef5; --acento-forte: #62abf5; --acento-suave: #092b42;
    --perigo: #f1707a; --perigo-suave: #3a1f1d; --grafite: #f5f5f5; --lateral: #0b0b0b;
  }
}
:root[data-tema='escuro'] {
    --fundo: #141414; --superficie: #1f1f1f; --superficie-2: #242424; --linha: #333333; --linha-forte: #424242;
    --texto: #f5f5f5; --texto-2: #c7c7c7; --texto-3: #9a9a9a;
    --acento: #479ef5; --acento-forte: #62abf5; --acento-suave: #092b42;
    --perigo: #f1707a; --perigo-suave: #3a1f1d; --grafite: #f5f5f5; --lateral: #0b0b0b;
  }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img { max-width: 100%; }

.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

/* ---------- Lateral ---------- */
.lateral { background: var(--lateral); color: var(--lateral-texto); padding: 22px 12px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; padding: 0 8px 26px; text-decoration: none; }
.marca img { display: block; height: 57px; width: auto; max-width: 100%; }
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--acento); display: grid; place-items: center; color: #fff; font-size: 15px; }
nav { display: flex; flex-direction: column; gap: 1px; }
nav a, nav span { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 6px; text-decoration: none; color: inherit; font-weight: 500; position: relative; }
nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
nav a.ativo { background: rgba(255, 255, 255, .07); color: #fff; }
nav a.ativo::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
nav a.ativo svg { color: #62abf5; }
nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
nav .breve { opacity: .42; cursor: default; }
.rodape-lateral { margin-top: auto; font-size: 12px; color: #6f7784; padding: 0 10px; }
.rodape-lateral::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #6f7784; margin-right: 7px; vertical-align: 1px; }
.rodape-lateral.ok::before { background: #5b84f0; }
.rodape-lateral.erro::before { background: #f2675c; }

/* ---------- Principal ---------- */
main { padding: 22px 18px 32px; min-width: 0; }
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
h1 { margin: 0; font-family: var(--letra-titulo); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: 0; }
.sub { margin: 4px 0 0; color: var(--texto-2); }
.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { border: 1px solid transparent; border-radius: 6px; padding: 8px 14px; font-weight: 550; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1.35; }
.btn.primario { background: var(--acento); color: #fff; box-shadow: 0 1px 0 rgba(16, 24, 40, .08); }
.btn.primario:hover { background: var(--acento-forte); }
.btn.secundario { background: var(--superficie); border-color: var(--linha-forte); color: var(--texto); }
.btn.secundario:hover { background: var(--superficie-2); border-color: var(--texto-3); }
.btn.texto { background: none; color: var(--texto-2); padding-inline: 8px; }
.btn.texto:hover { color: var(--texto); }
.btn.perigo { color: var(--perigo); }
.btn.pequeno { padding: 5px 11px; font-size: 13px; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .sep:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros input { flex: 1 1 320px; }
input, select, textarea { background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 6px; padding: 8px 11px; width: 100%; }
input:hover, select:hover, textarea:hover { border-color: var(--texto-3); }
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px var(--acento-suave); }
.filtros select { width: auto; }
textarea { resize: vertical; }

.tabela-wrap { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--texto-3); padding: 10px 16px; border-bottom: 1px solid var(--linha); background: var(--superficie-2); user-select: none; white-space: nowrap; }
.tabela th[data-ordem] { cursor: pointer; }
.tabela th[data-ordem]:hover { color: var(--texto); }
.tabela th.ordenado { color: var(--texto); }
.tabela th.ordenado::after { content: " ↑"; }
.tabela th.ordenado.desc::after { content: " ↓"; }
.tabela td { padding: 12px 16px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover { background: #f6f8fd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .tabela tbody tr:hover { background: #1b2130; }
}
:root[data-tema='escuro'] .tabela tbody tr:hover { background: #1b2130; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.cod { font-variant-numeric: tabular-nums; color: var(--texto-3); font-size: 13px; }
.nome { font-weight: 560; }
.etiqueta { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--acento-suave); color: var(--acento-forte); margin-left: 6px; vertical-align: 1px; }
.etiqueta.cinza { background: var(--superficie-2); color: var(--texto-3); border: 1px solid var(--linha); }
.sec { color: var(--texto-2); font-size: 13px; }
.vazio { padding: 56px 16px; text-align: center; color: var(--texto-2); }

.paginacao { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; color: var(--texto-2); }

/* Miniaturas de fotografias reais nas listas */
.tabela td.col-foto { width: 64px; padding-right: 0; }
.mini { position: relative; display: block; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--superficie-2) center / 22px no-repeat; border: 1px solid var(--linha); }
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini .n-fotos { position: absolute; right: 2px; bottom: 2px; background: rgba(15, 17, 21, .78); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 2px 4px; border-radius: 3px; }
.mini.sem { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bac4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M21 17l-5-5-8 7'/%3E%3C/svg%3E"); }

/* ---------- Painel lateral da ficha ---------- */
.painel-fundo { position: fixed; inset: 0; background: rgba(15, 17, 21, .4); z-index: 10; }
.painel { position: fixed; top: 0; right: 0; height: 100vh; width: min(720px, 100vw); background: var(--superficie); z-index: 11; transform: translateX(100%); transition: transform .22s ease, visibility 0s .22s; visibility: hidden; display: flex; flex-direction: column; }
.painel.largo { width: min(920px, 100vw); }
.painel.aberto { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: -12px 0 40px rgba(15, 17, 21, .18); }
.painel form { display: flex; flex-direction: column; width: 100%; }
.painel-topo { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 26px 8px; }
.painel-topo h2 { margin: 2px 0 0; font-family: var(--letra-titulo); font-weight: 700; font-size: 24px; line-height: 1.15; }
.codigo { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.fechar { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--texto-3); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.fechar:hover { color: var(--texto); background: var(--superficie-2); }

.separadores { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.sep { background: none; border: 0; padding: 10px 6px; margin: 0 4px; color: var(--texto-2); font-weight: 550; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.sep.ativo { color: var(--texto); border-bottom-color: var(--acento); }
.sep .n { font-size: 11px; color: var(--texto-3); }
.sep.com-erro { color: var(--perigo); }

.painel-corpo { padding: 20px 26px; overflow-y: auto; flex: 1; }
.grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 550; color: var(--texto-2); }
.campo.largo { grid-column: 1 / -1; }
.campo input, .campo textarea { font-weight: 400; color: var(--texto); font-size: 14px; }
.campo.erro input { border-color: var(--perigo); }
.campo .msg-erro { color: var(--perigo); font-weight: 500; font-size: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.check input { width: auto; }
.tipo-escolha { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 8px; padding: 3px; margin-bottom: 16px; }
.tipo-escolha label { padding: 5px 14px; border-radius: 6px; cursor: pointer; color: var(--texto-2); font-weight: 550; }
.tipo-escolha input { display: none; }
.tipo-escolha label:has(input:checked) { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ajuda { color: var(--texto-2); margin: 0 0 14px; }
.cartao-linha { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; margin-bottom: 12px; background: var(--superficie-2); position: relative; }
.cartao-linha .remover { margin-top: 10px; background: none; border: 0; color: var(--perigo); font-size: 13px; cursor: pointer; padding: 0; }
.aviso-erro { background: var(--perigo-suave); color: var(--perigo); padding: 10px 12px; border-radius: 6px; margin-bottom: 16px; font-weight: 500; border-left: 3px solid var(--perigo); }

.painel-rodape { display: flex; justify-content: space-between; gap: 8px; padding: 14px 26px; border-top: 1px solid var(--linha); background: var(--superficie-2); }
.painel-rodape .dir, .painel-rodape .esq { display: flex; gap: 8px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--grafite); color: #fff; padding: 10px 16px; border-radius: 6px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 20; box-shadow: var(--sombra); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .toast { color: #0f1115; }
}
:root[data-tema='escuro'] .toast { color: #0f1115; }
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: var(--perigo); color: #fff; }

/* ---------- Núcleo multi-módulo ---------- */
nav a span { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.n, .tabela th.n { text-align: right; }
.cortar { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; }
.tabela a { color: var(--acento-forte); text-decoration: none; font-weight: 600; }
.tabela a:hover { text-decoration: underline; }
.mt { margin-top: 12px; }
code { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 4px; padding: 0 4px; font-size: 12.5px; }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin-bottom: 14px; overflow-x: auto; }
.abas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; color: var(--texto-2); font-weight: 550; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.abas button:hover { color: var(--texto); }
.abas button.ativo { color: var(--texto); border-bottom-color: var(--acento); }
.abas .n { margin-left: 6px; font-size: 11.5px; color: var(--texto-2); background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.abas button.ativo .n { background: var(--acento-suave); border-color: transparent; color: var(--acento-forte); }
.abas .n:empty { display: none; }

.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.etiqueta.vermelho { background: var(--perigo-suave); color: var(--perigo); margin-left: 0; }
.etiqueta.amarelo { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--linha-forte); margin-left: 0; }
.vermelho-t { color: var(--perigo); font-weight: 600; }

/* Estados das ordens: só cinzentos, azul e vermelho */
.estado { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; vertical-align: 1px; border: 1px solid transparent; }
.e-registado { background: var(--superficie); color: var(--texto); border-color: var(--linha-forte); border-style: dashed; }
.e-planeado { background: var(--acento-suave); color: var(--acento-forte); }
.e-curso { background: var(--acento); color: #fff; }
.e-concluido { background: var(--grafite); color: var(--superficie); }
.e-tratado { background: var(--superficie-2); color: var(--texto-3); border-color: var(--linha); }
.e-cancelado { background: var(--perigo-suave); color: var(--perigo); text-decoration: line-through; }
.e-cancelado-s { background: var(--perigo-suave); color: var(--perigo); }
.ea { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); vertical-align: 1px; }
h1 .estado, h1 .ea { font-family: var(--letra); font-size: 13px; vertical-align: 6px; margin-left: 4px; }

.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 14px; }
.cartao > h3, .painel-corpo h3 { font-size: 15px; color: var(--texto); margin: 0 0 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.painel-corpo h3 { margin: 22px 0 10px; }
.cartao h3 + .grelha, .cartao .campo + .campo { margin-top: 0; }
.ficha-lateral .campo { margin-bottom: 10px; }
.cartao h3:not(:first-child) { margin-top: 18px; }
.btn.texto.pequeno { padding: 2px 6px; font-size: 12.5px; color: var(--acento-forte); }
.barra-def { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.barra-def p { margin: 0; }
.info-empresa { margin-top: 16px; }

.voltar { color: var(--texto-2); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 6px; }
.voltar:hover { color: var(--acento-forte); }
.ficha-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ficha-lateral { position: sticky; top: 16px; }
.info-cliente { margin: 10px 0 2px; font-size: 13px; }
.info-cliente a { color: var(--acento-forte); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 6px; padding: 7px 11px; cursor: pointer; background: var(--superficie-2); font-weight: 560; font-size: 13.5px; }
.chip input { display: none; }
.chip span { font-weight: 400; font-size: 12px; }
.chip.sel { border-color: var(--acento); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }

.tabela-scroll { overflow-x: auto; margin: 0 -4px 10px; }
.tabela-edit { width: 100%; border-collapse: collapse; }
.tabela-edit th { text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-3); padding: 4px; white-space: nowrap; }
.tabela-edit td { padding: 3px 4px; vertical-align: top; }
.tabela-edit input, .tabela-edit select { padding: 6px 8px; font-size: 13.5px; min-width: 0; }
.tabela-edit select { min-width: 120px; }
.tabela-edit input[type=date] { min-width: 132px; }
.tabela-edit input[type=time] { min-width: 92px; }
.tabela-edit .curto { width: 72px; }
.tabela-edit .medio { width: 120px; }
.tabela-edit td.n { padding-top: 10px; white-space: nowrap; font-weight: 560; }
.tabela-edit td.erro input, .tabela-edit td.erro select { border-color: var(--perigo); }
.tabela-edit .msg-erro { display: block; color: var(--perigo); font-size: 11.5px; }
.tabela-edit textarea.auto { resize: none; overflow: hidden; min-height: 34px; padding: 6px 8px; font-size: 13.5px; line-height: 1.4; }
.remover-x { background: none; border: 0; color: var(--texto-3); font-size: 20px; line-height: 1; padding: 6px 6px; cursor: pointer; border-radius: 6px; }
.remover-x:hover { color: var(--perigo); background: var(--perigo-suave); }
#f-prop .tabela-edit .curto { width: 62px; }
#f-prop .tabela-edit .medio { width: 96px; }

.totais { margin-left: auto; margin-top: 8px; min-width: 260px; border-collapse: collapse; }
.totais td { padding: 3px 4px; color: var(--texto-2); }
.totais td.n { color: var(--texto); }
.totais tr.total td { border-top: 2px solid var(--texto); padding-top: 8px; font-family: var(--letra-titulo); font-size: 20px; font-weight: 700; color: var(--texto); }

.historico { list-style: none; margin: 0; padding: 0; font-size: 13px; max-height: 280px; overflow: auto; }
.historico li { padding: 7px 0 7px 14px; border-left: 2px solid var(--linha); display: flex; flex-direction: column; position: relative; }
.historico li::before { content: ""; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--linha-forte); }
.historico .sec { font-size: 12px; }
.assinatura { max-width: 100%; background: #fff; border: 1px solid var(--linha); border-radius: 6px; }
.tela-assinatura { width: 100%; height: auto; aspect-ratio: 640 / 260; background: #fff; border: 1px dashed var(--texto-3); border-radius: 8px; touch-action: none; cursor: crosshair; }

.lista-simples { list-style: none; padding: 0; margin: 0 0 6px; }
.lista-simples li { padding: 7px 0; border-bottom: 1px solid var(--linha); }
.lista-simples a, .lista-ordens a { color: var(--acento-forte); font-weight: 600; text-decoration: none; }
.lista-simples a:hover, .lista-ordens a:hover { text-decoration: underline; }

.ac-wrap { position: relative; }
.ac-lista { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; box-shadow: var(--sombra); z-index: 30; max-height: 300px; overflow: auto; min-width: min(260px, 90vw); }
.ac-item { padding: 8px 11px; cursor: pointer; display: flex; flex-direction: column; font-weight: 400; color: var(--texto); }
.ac-item b { font-weight: 560; }
.ac-item span { font-size: 12px; color: var(--texto-3); }
.ac-item.sel, .ac-item:hover { background: var(--acento-suave); }
.ac-vazio { padding: 10px 12px; color: var(--texto-3); }

/* ---------- Painel (início) ---------- */
/* Faixa de números: um só bloco dividido, não cartões soltos */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 18px; overflow: hidden; }
.kpi { padding: 14px 18px 16px; text-decoration: none; color: var(--texto-2); display: flex; flex-direction: column-reverse; gap: 2px; border-left: 1px solid var(--linha); font-size: 13px; font-weight: 500; }
.kpi:first-child { border-left: 0; }
.kpi b { font-family: var(--letra-titulo); font-size: 38px; line-height: 1; color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi:hover { background: var(--superficie-2); }
.kpi:hover span { color: var(--acento-forte); }
.kpi.destaque b { color: var(--acento); }
.kpi.alerta { box-shadow: inset 0 3px 0 var(--perigo); }
.kpi.alerta b { color: var(--perigo); }

/* Mosaico das fotografias mais recentes dos trabalhos */
.obra { margin-bottom: 18px; }
.obra-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.obra-topo h2 { margin: 0; font-size: 16px; font-weight: 600; }
.obra-topo a { color: var(--acento-forte); font-size: 13px; text-decoration: none; font-weight: 550; }
.mosaico { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-rows: 170px 170px; gap: 6px; border-radius: var(--raio-g); overflow: hidden; }
.mosaico a { position: relative; display: block; overflow: hidden; background: #2a2f38; color: #fff; text-decoration: none; }
.mosaico a:first-child { grid-row: span 2; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.mosaico a:hover img { transform: scale(1.04); }
.mosaico .legenda { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(10, 12, 16, .82)); font-size: 12.5px; line-height: 1.35; }
.mosaico .legenda b { display: block; font-size: 13.5px; font-weight: 600; }
.mosaico a:first-child .legenda { padding: 40px 16px 14px; font-size: 13.5px; }
.mosaico a:first-child .legenda b { font-family: var(--letra-titulo); font-size: 22px; font-weight: 700; }
.mosaico .legenda .estado { margin-top: 5px; }
@media (prefers-reduced-motion: reduce) { .mosaico img { transition: none; } .mosaico a:hover img { transform: none; } }

.painel-grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.lista-ordens { list-style: none; margin: 0; padding: 0; }
.lista-ordens li { padding: 9px 0; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.lista-ordens li:last-child { border-bottom: 0; }
.lista-ordens .estado { align-self: flex-start; }

/* ---------- Utilizador e avisos ---------- */
.utilizador { margin-top: auto; padding: 14px 10px 12px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.utilizador b { color: #fff; font-weight: 600; }
.utilizador span { color: #7a828f; font-size: 12px; }
.utilizador button { background: none; border: 0; padding: 0; color: var(--lateral-texto); cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.utilizador button:hover { color: #fff; }
.utilizador + .rodape-lateral { margin-top: 8px; }
.aviso { background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); border-left: 3px solid var(--texto-3); border-radius: 6px; padding: 9px 12px; margin-bottom: 14px; font-weight: 500; }
.aviso.ok { border-left-color: var(--acento); background: var(--acento-suave); color: var(--acento-forte); border-color: transparent; border-left-color: var(--acento); }
.aviso a { color: inherit; font-weight: 650; }
.a-trabalhar { display: inline-block; margin: 8px 0 0; padding: 4px 10px; font-size: 13px; }
.versoes { font-size: 13px; color: var(--texto-2); margin-top: 4px; }
.versoes a { color: var(--acento-forte); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.galeria figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; background: var(--superficie-2); border: 1px solid var(--linha); }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.galeria figcaption { font-size: 11px; color: var(--texto-3); padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galeria .remover-x { position: absolute; top: 4px; right: 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; padding: 2px 7px; }
.carregar { cursor: pointer; }
.progresso { height: 8px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progresso span { display: block; height: 100%; background: var(--acento); transition: width .4s; }

/* ---------- Ecrãs mais pequenos ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(4) { border-left: 0; }
  .kpi:nth-child(n+4) { border-top: 1px solid var(--linha); }
  .mosaico { grid-template-columns: 2fr 1fr 1fr; }
  .mosaico a:nth-child(n+6) { display: none; }
}
@media (max-width: 1080px) {
  .ficha-grelha { grid-template-columns: minmax(0, 1fr); }
  .ficha-lateral { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 14px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .lateral { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; align-items: center; padding: 8px 12px; gap: 6px; overflow-x: auto; }
  .marca { padding: 0 8px 0 0; }
  .marca img { height: 42px; }
  nav { flex-direction: row; }
  nav a span { display: none; }
  nav a { padding: 9px; }
  nav a.ativo::before { left: 7px; right: 7px; top: auto; bottom: -8px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  nav .breve, .rodape-lateral, .utilizador { display: none; }
  main { padding: 18px 16px 32px; }
  h1 { font-size: 27px; }
  .esc-m { display: none; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 120px 120px; }
  .mosaico a:first-child { grid-column: span 2; grid-row: auto; }
  .mosaico a:nth-child(n+6) { display: none; }
}
@media (max-width: 560px) {
  .esc-s { display: none; }
  .grelha { grid-template-columns: 1fr; }
  .painel-topo, .painel-corpo, .painel-rodape { padding-inline: 16px; }
  .acoes-topo #btn-exportar { display: none; }
  .ficha-topo .acoes-topo { width: 100%; }
  .ficha-topo .acoes-topo .btn { flex: 1; justify-content: center; }
  .cartao { padding: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { border-left: 0; border-top: 1px solid var(--linha); }
  .kpi:nth-child(-n+2) { border-top: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--linha); }
  .kpi b { font-size: 32px; }
  .tabela td.col-foto { width: 52px; padding-left: 12px; }
  .mini { width: 40px; height: 40px; }
}

/* ---------- Grelha (ordens de trabalho, ao estilo do OutSmart) ---------- */
.grelha-filtros { align-items: center; }
.menu-colunas { position: relative; }
.menu-colunas-caixa { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 290px; max-height: min(70vh, 520px); overflow: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px; }
.menu-colunas-caixa p { margin: 0 0 8px; }
.menu-colunas-caixa ul { list-style: none; margin: 0 0 8px; padding: 0; }
.menu-colunas-caixa li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px; border-bottom: 1px solid var(--linha); }
.menu-colunas-caixa label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.menu-colunas-caixa input { width: auto; }
.menu-colunas-caixa .mover button { background: none; border: 1px solid var(--linha); border-radius: 4px; width: 26px; height: 24px; cursor: pointer; color: var(--texto-2); }
.menu-colunas-caixa .mover button:hover { border-color: var(--acento); color: var(--acento-forte); }

.grelha-wrap { background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); overflow: auto; max-height: calc(100vh - 260px); min-height: 220px; }
.tg { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 960px; }
.tg th, .tg td { border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 9px 10px; text-align: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.tg th:last-child, .tg td:last-child { border-right: 0; }
.tg thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie-2); border-bottom: 1px solid var(--linha-forte); font-size: 12.5px; font-weight: 600; color: var(--texto-2); white-space: normal; line-height: 1.3; }
.tg tfoot th { position: sticky; bottom: 0; z-index: 2; background: var(--superficie-2); border-top: 1px solid var(--linha-forte); border-bottom: 0; font-size: 12.5px; font-weight: 500; color: var(--texto-3); line-height: 1.3; }
.tg th button { all: unset; cursor: pointer; display: block; padding-right: 14px; position: relative; }
.tg th button:hover { color: var(--texto); }
.tg th button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tg th.ordenavel button::after { content: "↕"; position: absolute; right: 0; top: 0; color: var(--linha-forte); font-size: 11px; }
.tg th.ordenado { color: var(--texto); background: var(--acento-suave); }
.tg th.ordenado.asc button::after { content: "↑"; color: var(--acento); }
.tg th.ordenado.desc button::after { content: "↓"; color: var(--acento); }
.tg th { position: relative; }
.tg .redim { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 3; }
.tg .redim:hover { background: var(--acento); opacity: .35; }
.tg .col-sel { width: 38px; text-align: center; padding-inline: 0; }
.tg .col-sel input { width: 16px; height: 16px; margin: 2px 0 0; cursor: pointer; accent-color: var(--acento); }
.tg tbody tr { cursor: pointer; }
.tg tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
/* cores por estado, como no OutSmart: registadas a vermelho, concluídas a cinzento */
.tg tbody tr.l-registado td { background: #fbd9d5; }
.tg tbody tr.l-planeado td { background: #eaf0fd; }
.tg tbody tr.l-em_curso td { background: #d9e4fb; }
.tg tbody tr.l-concluido td { background: #dde0e5; }
.tg tbody tr.l-tratado td { background: #f2f3f5; color: var(--texto-2); }
.tg tbody tr.l-cancelado td { background: #f4f5f7; color: var(--texto-3); text-decoration: line-through; }
.tg tbody tr.l-urgente td:first-child { box-shadow: inset 4px 0 0 var(--perigo); }
.tg tbody tr:hover td { filter: brightness(.97); }
.tg tbody tr.sel td { background: #c9d7fa; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .tg tbody tr.l-registado td { background: #3a2220; }
  :root:not([data-tema='claro']) .tg tbody tr.l-planeado td { background: #1a2236; }
  :root:not([data-tema='claro']) .tg tbody tr.l-em_curso td { background: #1c2a48; }
  :root:not([data-tema='claro']) .tg tbody tr.l-concluido td { background: #262a31; }
  :root:not([data-tema='claro']) .tg tbody tr.l-tratado td { background: #1a1d23; }
  :root:not([data-tema='claro']) .tg tbody tr.sel td { background: #24345c; }
}
:root[data-tema='escuro'] .tg tbody tr.l-registado td { background: #3a2220; }
:root[data-tema='escuro'] .tg tbody tr.l-planeado td { background: #1a2236; }
:root[data-tema='escuro'] .tg tbody tr.l-em_curso td { background: #1c2a48; }
:root[data-tema='escuro'] .tg tbody tr.l-concluido td { background: #262a31; }
:root[data-tema='escuro'] .tg tbody tr.l-tratado td { background: #1a1d23; }
:root[data-tema='escuro'] .tg tbody tr.sel td { background: #24345c; }
.tg td .cortar { max-width: none; }
.tg td.col-foto { padding: 6px 8px; }

.grelha-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.grelha-info { display: flex; align-items: center; gap: 16px; color: var(--texto-2); flex-wrap: wrap; }
.por-pagina { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.por-pagina select { width: auto; padding: 4px 8px; }
.paginas { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 6px; overflow: hidden; background: var(--superficie); }
.paginas button { border: 0; border-right: 1px solid var(--linha); background: none; padding: 6px 11px; cursor: pointer; color: var(--texto); font-variant-numeric: tabular-nums; }
.paginas button:last-child { border-right: 0; }
.paginas button:hover:not(:disabled) { background: var(--superficie-2); }
.paginas button.atual { background: var(--acento); color: #fff; font-weight: 600; }
.paginas button:disabled { color: var(--texto-3); cursor: default; }
.paginas .reticencias { padding: 6px 8px; color: var(--texto-3); border-right: 1px solid var(--linha); }

.acoes-lote { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 -4px 16px rgba(16, 24, 40, .06); }
.acoes-lote .botoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.acoes-lote .btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 860px) {
  .grelha-wrap { max-height: none; }
  .acoes-lote { position: static; }
}

/* barra de topo da grelha, como no OutSmart */
.tg-titulo { margin: 0 0 14px; }
.tg-cartao { background: none; border: 0; padding: 0; }
.tg-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tg-abas { display: flex; gap: 4px; flex-wrap: wrap; }
.tg-abas button { background: none; border: 1px solid transparent; border-radius: 6px; padding: 7px 12px; color: var(--acento-forte); font-weight: 550; cursor: pointer; white-space: nowrap; }
.tg-abas button:hover { background: var(--acento-suave); }
.tg-abas button.ativo { background: var(--acento); color: #fff; }
.tg-abas .n { margin-left: 6px; font-size: 11.5px; padding: 0 6px; border-radius: 999px; background: var(--acento-suave); color: var(--acento-forte); font-variant-numeric: tabular-nums; }
.tg-abas button.ativo .n { background: rgba(255, 255, 255, .22); color: #fff; }
.tg-abas .n:empty { display: none; }
.tg-ferramentas { display: flex; gap: 6px; align-items: center; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.icone { padding: 8px 9px; }
.btn.secundario.ativo { border-color: var(--acento); color: var(--acento-forte); background: var(--acento-suave); }
.tg-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; padding: 12px; margin-bottom: 12px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio); }
.tg-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 550; color: var(--texto-2); }
.tg-filtros select, .tg-filtros input { width: auto; min-width: 180px; }
.tg-controlos { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tg-pesquisa { display: flex; align-items: center; gap: 8px; }
.tg-pesquisa label { display: flex; align-items: center; gap: 8px; color: var(--texto-2); }
.tg-pesquisa input { width: min(320px, 60vw); }
.menu-exportar { position: relative; }
.menu-exportar-caixa { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px; box-shadow: var(--sombra); min-width: 190px; padding: 4px; }
.menu-exportar-caixa a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--texto); text-decoration: none; }
.menu-exportar-caixa a:hover { background: var(--acento-suave); }
.tg-contagem { margin: 0 0 8px; font-size: 13px; }
.est-tec { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.tg-cartao .acoes-lote { border-radius: var(--raio); }
@media (max-width: 860px) { .tg-pesquisa input { width: 100%; } .tg-pesquisa, .tg-pesquisa label { flex: 1; } }
.tg a { color: var(--acento-forte); text-decoration: none; font-weight: 600; }
.tg a:hover { text-decoration: underline; }
.paginas button[aria-label] { font-size: 20px; line-height: 1; padding: 4px 14px; }
.paginas .pag-atual { padding: 6px 12px; border-right: 1px solid var(--linha); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* grelha com linhas mais escuras */
.tg { --linha-grelha: #b9bfc8; }
.tg th, .tg td { border-right-color: var(--linha-grelha); border-bottom-color: var(--linha-grelha); }
.tg thead th { border-bottom: 1px solid #9aa1ac; }
.grelha-wrap { border-color: #9aa1ac; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .tg { --linha-grelha: #3c434e; }
  :root:not([data-tema='claro']) .tg thead th { border-bottom-color: #4d5562; }
  :root:not([data-tema='claro']) .grelha-wrap { border-color: #4d5562; }
}
:root[data-tema='escuro'] .tg { --linha-grelha: #3c434e; }
:root[data-tema='escuro'] .tg thead th { border-bottom-color: #4d5562; }
:root[data-tema='escuro'] .grelha-wrap { border-color: #4d5562; }

/* linhas mais baixas: menos espaço e texto numa só linha (o texto completo aparece ao passar o rato) */
.tg td { padding: 4px 8px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; }
.tg thead th { padding: 6px 8px; }
.tg td .cortar { display: inline; -webkit-line-clamp: unset; white-space: nowrap; }
.tg td .estado, .tg td .ea { padding: 0 6px; font-size: 11.5px; line-height: 18px; }
.tg td .div, .tg td div { display: inline; }
.tg td.col-sel { padding: 2px 0; }
.tg .col-sel input { margin: 0; }
.tg td.col-foto { padding: 2px 6px; width: 76px; }
.tg td.col-foto .mini { width: 60px; height: 60px; }

/* utilizador com fotografia redonda */
.utilizador { flex-direction: row; align-items: center; gap: 10px; }
.utilizador .quem { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.utilizador .quem b, .utilizador .quem span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utilizador .avatar { position: relative; flex: none; width: 63px; height: 63px; border-radius: 50%; padding: 0; border: 2px solid rgba(255, 255, 255, .18); background: #2a2f38; color: #fff; cursor: pointer; overflow: visible; display: grid; place-items: center; }
.utilizador .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.utilizador .avatar span { font-family: var(--letra-titulo); font-weight: 700; font-size: 16px; letter-spacing: .02em; text-decoration: none; color: #fff; }
.utilizador .avatar i { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--acento); display: grid; place-items: center; border: 2px solid var(--lateral); }
.utilizador .avatar i svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.utilizador .avatar:hover { border-color: var(--acento); }
.utilizador .avatar:focus-visible { outline: 2px solid #8eabf7; outline-offset: 2px; }
.utilizador .avatar { overflow: visible; background: #3a414c; }
.utilizador .avatar svg.silhueta { width: 100%; height: 100%; border-radius: 50%; fill: #aeb6c2; display: block; clip-path: circle(50%); }

/* menu da fotografia e janela da câmara */
.utilizador { position: relative; }
.av-menu { position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 40; min-width: 220px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 10px 30px rgba(15, 17, 21, .3); padding: 4px; display: flex; flex-direction: column; }
.utilizador .av-menu button { text-decoration: none; color: var(--texto); font-size: 14px; text-align: left; padding: 9px 12px; border-radius: 6px; }
.utilizador .av-menu button:hover { background: var(--acento-suave); color: var(--acento-forte); }
.utilizador .av-menu button.perigo { color: var(--perigo); }
.utilizador .av-menu button.perigo:hover { background: var(--perigo-suave); }
.dlg-camara { border: 0; border-radius: var(--raio-g); padding: 18px; width: min(520px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.dlg-camara::backdrop { background: rgba(15, 17, 21, .55); }
.dlg-camara h2 { margin: 0 0 12px; font-family: var(--letra-titulo); font-size: 24px; }
.dlg-camara video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #111; transform: scaleX(-1); display: block; margin: 0 auto; max-width: 360px; }
.dlg-camara .acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---------- Painel da esquerda em tema suave ---------- */
:root { --lateral: #f3f2f1; --lateral-texto: #424242; --lateral-linha: #e1dfdd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) { --lateral: #1b1a19; --lateral-texto: #c8c6c4; --lateral-linha: #333333; }
}
:root[data-tema='escuro'] { --lateral: #1b1a19; --lateral-texto: #c8c6c4; --lateral-linha: #333333; }
.lateral { border-right: 1px solid var(--lateral-linha); }
.marca { color: var(--texto); }
.marca picture { display: block; }
nav a, nav span { color: var(--lateral-texto); }
nav a:hover { background: #ebebeb; color: var(--texto); }
nav a.ativo { background: var(--acento-suave); color: var(--acento-forte); box-shadow: inset 0 0 0 1px #cfe4fa; }
nav a.ativo svg { color: var(--acento); }
.rodape-lateral { color: #7a828f; }
.utilizador { border-top: 1px solid var(--lateral-linha); }
.utilizador b { color: var(--texto); }
.utilizador span, .utilizador .quem span { color: #7a828f; }
.utilizador button { color: var(--texto-2); }
.utilizador button:hover { color: var(--acento-forte); }
.utilizador .avatar { background: #dfe4ec; border-color: #ffffff; box-shadow: 0 0 0 1px var(--lateral-linha); }
.utilizador .avatar svg.silhueta { fill: #9aa3b0; }
.utilizador .avatar i { border-color: var(--lateral); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
  :root:not([data-tema='claro']) nav a.ativo { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: none; }
  :root:not([data-tema='claro']) .utilizador b { color: #fff; }
  :root:not([data-tema='claro']) .utilizador .avatar { background: #3a414c; border-color: rgba(255, 255, 255, .18); box-shadow: none; }
}
:root[data-tema='escuro'] nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
:root[data-tema='escuro'] nav a.ativo { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: none; }
:root[data-tema='escuro'] .utilizador b { color: #fff; }
:root[data-tema='escuro'] .utilizador .avatar { background: #3a414c; border-color: rgba(255, 255, 255, .18); box-shadow: none; }
@media (max-width: 860px) { .lateral { border-right: 0; border-bottom: 1px solid var(--lateral-linha); } }

/* logótipo conforme o tema (automático, claro ou escuro) */
.logo-escuro { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .logo-claro { display: none !important; }
  :root:not([data-tema='claro']) .logo-escuro { display: block !important; }
}
:root[data-tema='escuro'] .logo-claro { display: none !important; }
:root[data-tema='escuro'] .logo-escuro { display: block !important; }
:root[data-tema='escuro'] { color-scheme: dark; }
:root[data-tema='claro'] { color-scheme: light; }
.escolha-tema { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.escolha-tema label { display: flex; flex-direction: column; gap: 8px; width: 150px; padding: 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio); cursor: pointer; font-weight: 550; }
.escolha-tema label:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); background: var(--acento-suave); color: var(--acento-forte); }
.escolha-tema input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-tema label:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.amostra-tema { height: 64px; border-radius: 6px; border: 1px solid var(--linha); display: grid; grid-template-columns: 30% 1fr; overflow: hidden; }
.amostra-tema i { display: block; }
.amostra-tema.claro i:first-child { background: #f3f5f9; } .amostra-tema.claro i:last-child { background: #fff; }
.amostra-tema.escuro i:first-child { background: #0b0d10; } .amostra-tema.escuro i:last-child { background: #171a20; }
.amostra-tema.auto i:first-child { background: linear-gradient(135deg, #f3f5f9 50%, #0b0d10 50%); } .amostra-tema.auto i:last-child { background: linear-gradient(135deg, #fff 50%, #171a20 50%); }

.grelha-wrap { max-height: calc(100vh - 210px); }
.acoes-lote .sec[data-nsel] { font-weight: 600; color: var(--acento-forte); }

/* ações em grupo numa faixa compacta por cima da tabela, com deslize horizontal */
.acoes-lote.compacta { position: static; margin: 0 0 8px; padding: 0; background: none; border: 0; box-shadow: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.acoes-lote.compacta .botoes { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; order: 0; }
.acoes-lote.compacta [data-nsel] { order: 1; white-space: nowrap; font-size: 13px; }
.acoes-lote.compacta [data-nsel]:empty { display: none; }
.acoes-lote.compacta .btn { white-space: nowrap; }

.tg-acoes { display: flex; align-items: center; gap: 10px; }
.tg-acoes select { width: auto; min-width: 230px; font-weight: 550; }
.tg-acoes select:disabled { color: var(--texto-3); background: var(--superficie-2); cursor: not-allowed; }
.tg-acoes [data-nsel] { font-weight: 600; color: var(--acento-forte); white-space: nowrap; }

/* ---------- Mais compacto: letra mais pequena e painel lateral mais estreito ---------- */
body { font-size: 13px; }
.app { grid-template-columns: 184px 1fr; }
.lateral { padding: 16px 8px 12px; }
.marca { padding: 0 6px 18px; }
.marca img { height: 45px; }
nav a, nav span { padding: 7px 8px; gap: 9px; font-size: 13px; }
nav svg { width: 16px; height: 16px; }
nav a.ativo::before { left: -8px; }
.utilizador { padding: 10px 4px 8px; gap: 8px; font-size: 12px; }
.utilizador .avatar { width: 51px; height: 51px; }
.utilizador .avatar i { width: 18px; height: 18px; right: -2px; bottom: -2px; }
.utilizador .avatar i svg { width: 11px; height: 11px; }
.rodape-lateral { font-size: 11px; padding: 0 6px; }
h1 { font-size: 26px; }
.tg-titulo { margin-bottom: 10px; }
.tg { font-size: 12.5px; }
.tg thead th { font-size: 12px; }
.tg td .estado, .tg td .ea { font-size: 11px; }
.btn { padding: 6px 12px; }
.btn.icone { padding: 6px 7px; }
input, select, textarea { padding: 6px 10px; }
.tg-abas button { padding: 6px 10px; }
@media (max-width: 860px) { .app { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ficha da ordem ao estilo do OutSmart ---------- */
.fo-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.fo-topo h1 { display: flex; align-items: center; gap: 8px; }
.fo-botoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fo-estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--linha-forte); border-radius: 6px; padding: 2px 4px 2px 10px; }
.fo-estado select { border: 0; background: transparent; font-weight: 600; color: var(--texto); padding: 4px 6px; width: auto; }
.fo-grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fo-largo { grid-column: 1 / -1; }
.fo-coluna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fo-coluna .cartao, .fo-grelha > .cartao { margin-bottom: 0; }
.fo-linha { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--linha); min-height: 38px; }
.fo-linha:last-child { border-bottom: 0; }
.fo-rot { font-weight: 600; color: var(--texto); }
.fo-val input, .fo-val select { width: 100%; }
.fo-val .fo-curto { width: 120px; }
.fo-val .fo-destaque { color: var(--perigo); font-weight: 600; }
.fo-abas { display: flex; gap: 0; border-bottom: 1px solid var(--linha); margin: -4px 0 14px; overflow-x: auto; }
.fo-abas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; color: var(--texto-3); font-weight: 600; letter-spacing: .01em; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.fo-abas button:hover { color: var(--texto); }
.fo-abas button.ativo { color: var(--acento-forte); border-bottom-color: var(--acento); }
.fo-aviso { margin: 10px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--perigo-suave); color: var(--perigo); font-size: 13px; }
.fo-lista { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 12px; margin: 14px 0 0; }
.fo-lista dt { font-weight: 600; }
.fo-lista dd { margin: 0; overflow-wrap: anywhere; }
.fo-lista a { color: var(--acento-forte); font-weight: 600; }
.ficha-os textarea { width: 100%; }
.interruptor { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interruptor span { position: absolute; inset: 0; border-radius: 999px; background: var(--linha-forte); transition: background .15s; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.interruptor input:checked + span { background: var(--acento); }
.interruptor input:checked + span::after { transform: translateX(20px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { display: flex; align-items: center; gap: 14px; padding: 6px 0; position: relative; }
.linha-tempo li b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: #fff; box-shadow: 0 0 0 3px var(--acento-suave); }
.linha-tempo li span { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 6px; padding: 8px 12px; flex: 1; }
@media (max-width: 1080px) { .fo-grelha { grid-template-columns: minmax(0, 1fr); } .fo-linha { grid-template-columns: 150px minmax(0, 1fr); } }
@media (max-width: 560px) { .fo-linha, .fo-lista { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.fo-abas, .tg-abas, .abas { scrollbar-width: none; }
.fo-abas::-webkit-scrollbar, .tg-abas::-webkit-scrollbar, .abas::-webkit-scrollbar { display: none; }
.ficha-os .chips { flex-direction: column; }
.ficha-os .chip { flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
.ficha-os .chip .mini { width: 64px; height: 64px; flex: none; }
.ficha-os .chip .obj-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ficha-os .chip .obj-txt span { font-weight: 400; font-size: 12px; color: var(--texto-2); }

/* fotografias dos técnicos */
.tec-nome { display: inline-flex; align-items: center; gap: 8px; }
.av-mini, .av-grande { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: #dfe4ec; }
.av-mini { width: 28px; height: 28px; }
.av-grande { width: 88px; height: 88px; box-shadow: 0 0 0 1px var(--linha); }
.av-mini img, .av-grande img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-mini svg.silhueta, .av-grande svg.silhueta { width: 100%; height: 100%; fill: #9aa3b0; display: block; }
.foto-tec-linha { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-weight: 400; }
.foto-tec-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.dlg-camara video.retangular { border-radius: 8px; aspect-ratio: auto; max-width: 100%; }

/* ---------- Letra Verdana em todo o programa; painel da esquerda mais carregado ---------- */
:root { --letra: Verdana, Geneva, Tahoma, sans-serif; --letra-titulo: Verdana, Geneva, Tahoma, sans-serif; }
body, button, input, select, textarea { font-family: var(--letra); }
body { font-size: 12.5px; }
h1 { font-size: 23px; font-weight: 700; letter-spacing: -.01em; }
.kpi b, .totais tr.total td { font-weight: 700; }
.kpi b { font-size: 32px; }
.tg { font-size: 12px; }
.tg thead th { font-size: 11.5px; }
nav a, nav span { font-weight: 700; color: #262c36; font-size: 12.5px; }
nav a svg { stroke-width: 2.1; }
nav a.ativo { color: var(--acento-forte); }
.utilizador b { font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) nav a, :root:not([data-tema='claro']) nav span { color: #d5dae2; } }
:root[data-tema='escuro'] nav a, :root[data-tema='escuro'] nav span { color: #d5dae2; }
.app { grid-template-columns: 206px 1fr; }
@media (max-width: 860px) { .app { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Letra Tahoma em todo o programa ---------- */
:root { --letra: Tahoma, Verdana, Geneva, sans-serif; --letra-titulo: Tahoma, Verdana, Geneva, sans-serif; }
body { font-size: 13px; }
.tg { font-size: 12.5px; }
.tg thead th { font-size: 12px; }
nav a, nav span { font-size: 13px; }

/* ---------- Letra tipo Mac: SF nos Apple, Inter (auto-alojada) no resto ---------- */
:root { --letra: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --letra-titulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { font-size: 13.5px; }
.tg { font-size: 13px; }
.tg thead th { font-size: 12.5px; }
nav a, nav span { font-size: 13.5px; font-weight: 600; }
h1 { font-weight: 700; }
.empresa-form .grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.empresa-form .campo.largo { grid-column: span 3; }
.empresa-acoes { display: flex; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 860px) { .empresa-form .grelha { grid-template-columns: minmax(0, 1fr); } .empresa-form .campo.largo { grid-column: auto; } }
.logo-empresa { display: flex; align-items: center; gap: 16px; padding: 12px; margin: 4px 0 16px; border: 1px dashed var(--linha-forte); border-radius: var(--raio); flex-wrap: wrap; }
.logo-empresa p { margin: 2px 0 8px; }
.logo-previa { width: 220px; height: 80px; display: grid; place-items: center; background: #fff; border: 1px solid var(--linha); border-radius: 6px; padding: 6px; }
.logo-previa img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.nav-fundo { margin-top: auto; padding-bottom: 6px; }
.nav-fundo + .utilizador { margin-top: 0; }
@media (max-width: 860px) { .nav-fundo { margin-top: 0; padding: 0; } }
.tg tbody tr.l-atrasada td { background: #fbd9d5; }
:root[data-tema="escuro"] .tg tbody tr.l-atrasada td { background: #3a2220; }

/* Legenda de cores no rodapé da grelha (Activos) */
.grelha-rodape-esq { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.grelha-legenda { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.grelha-legenda .leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-2); }
.grelha-legenda .leg-cor { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--borda); flex: 0 0 auto; }
.grelha-legenda .leg-cor.l-atrasada { background: #fbd9d5; }
.grelha-legenda .leg-cor.l-tratado { background: #f2f3f5; }
:root:not([data-tema='claro']) .grelha-legenda .leg-cor.l-atrasada { background: #3a2220; }
:root:not([data-tema='claro']) .grelha-legenda .leg-cor.l-tratado { background: #1a1d23; }
:root[data-tema='escuro'] .grelha-legenda .leg-cor.l-atrasada { background: #3a2220; }
:root[data-tema='escuro'] .grelha-legenda .leg-cor.l-tratado { background: #1a1d23; }

/* ---------- Faixa de cabeçalho da barra lateral (destaca o logo, estilo Outlook) ---------- */
:root { --lateral-cabecalho: #dcdad8; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) { --lateral-cabecalho: #2b2a28; } }
:root[data-tema='escuro'] { --lateral-cabecalho: #2b2a28; }
@media (min-width: 861px) {
  .lateral { padding-top: 0; }
  .marca {
    background: var(--lateral-cabecalho);
    margin: 0 -8px 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--lateral-linha);
    justify-content: flex-start;
  }
}

/* Opção de numeração das ordens (Definições › Empresa) */
.bloco-numeracao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 14px 12px; margin-top: 6px; }
.bloco-numeracao legend { font-weight: 600; font-size: 13px; padding: 0 6px; color: var(--texto); }
.bloco-numeracao .radio-op { display: flex; gap: 9px; align-items: flex-start; padding: 6px 2px; cursor: pointer; }
.bloco-numeracao .radio-op input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.bloco-numeracao .radio-op span { flex: 1; }
.bloco-numeracao .radio-op span { font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.bloco-numeracao .radio-op b { color: var(--texto); font-weight: 600; }

/* ---------- Utilidades (biblioteca de documentos) ---------- */
.ut-upload { margin-bottom: 18px; }
.ut-upload .ut-upload-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ut-upload [data-ficheiro-nome] { font-size: 13px; }
.ut-upload .ut-nota { margin: 8px 0 0; font-size: 12px; }
.ut-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; }
.ut-vazio { padding: 20px 0; }
.ut-cartao { display: flex; gap: 12px; align-items: flex-start; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; }
.ut-icone { flex: 0 0 auto; width: 46px; height: 56px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: #fff; text-decoration: none; position: relative; }
.ut-icone::after { content: ""; position: absolute; top: 0; right: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: rgba(255,255,255,.55) transparent; border-right-color: transparent; }
.ut-icone.ut-pdf { background: #d13438; }
.ut-icone.ut-doc { background: #2b579a; }
.ut-icone.ut-xls { background: #217346; }
.ut-icone.ut-img { background: #8a6d00; }
.ut-icone.ut-zip { background: #6b7380; }
.ut-icone.ut-gen { background: #4b5563; }
.ut-corpo { flex: 1 1 auto; min-width: 0; }
.ut-corpo h4 { margin: 0 0 3px; font-size: 15px; }
.ut-desc { margin: 0 0 4px; font-size: 13px; color: var(--texto-2); }
.ut-meta { margin: 0; font-size: 12px; word-break: break-word; }
.ut-botoes { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: 0 0 auto; }
@media (max-width: 560px) { .ut-botoes { flex-direction: row; align-items: center; } }

/* ---------- Consola de Gestão (SaaS) ---------- */
.cns-novo { margin-bottom: 18px; }
.cns-modulos { border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 12px 10px; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cns-modulos legend { font-weight: 600; font-size: 12px; padding: 0 6px; color: var(--texto); }
.cns-mod { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cns-nota { margin-left: 12px; font-size: 12px; }
.cns-titulo-lista { margin: 18px 0 10px; }
.cns-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 12px; }
.cns-cartao { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; }
.cns-cartao.inativo { opacity: .6; }
.cns-corpo { min-width: 0; }
.cns-corpo h4 { margin: 0 0 4px; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cns-corpo code { background: var(--superficie-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.cns-mods-txt { margin: 6px 0 0; font-size: 13px; color: var(--texto-2); }
.cns-botoes { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: 0 0 auto; }

/* Consola: tabela de clientes + atalho de entrar */
.cns-tabela .cns-col-entrar { width: 42px; text-align: center; padding-left: 8px; padding-right: 0; }
.cns-entrar { background: var(--acento-suave); color: var(--acento-forte); border: 1px solid #cfe4fa; border-radius: 6px; width: 30px; height: 30px; display: inline-grid; place-items: center; cursor: pointer; }
.cns-entrar:hover { background: var(--acento); color: #fff; border-color: var(--acento); }
.cns-tabela code { background: var(--superficie-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.cns-tabela .cns-acoes-td { text-align: right; }
.cns-trocador { margin-bottom: 16px; }
.trocador-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trocador-rot { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto); }
.trocador-linha select { min-width: 200px; padding: 6px 8px; border: 1px solid var(--linha-forte); border-radius: 6px; background: var(--superficie); color: var(--texto); }
.etiqueta.verde { background: #e6f4ea; color: #1b6e3c; }
:root:not([data-tema='claro']) .etiqueta.verde { background: #10331f; color: #6fd297; }
:root[data-tema='escuro'] .etiqueta.verde { background: #10331f; color: #6fd297; }

/* ---------- Ficha da OT: fundo cinza + cartões destacados (visual moderno) ---------- */
main:has(.ficha-ordem) { background: var(--superficie-2); }
.ficha-ordem .cartao {
  border-radius: 12px;
  border: 1px solid var(--linha);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .06);
  padding: 16px 20px 18px;
}
:root:not([data-tema='claro']) main:has(.ficha-ordem) .cartao,
:root[data-tema='escuro'] main:has(.ficha-ordem) .cartao { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
/* cabeçalho de cada secção: etiqueta clara e linha separadora */
.ficha-ordem .cartao > h3:first-child {
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-2); font-weight: 700;
}
/* barra de topo da ficha assente no cinza */
.ficha-ordem .fo-topo { margin-bottom: 18px; }

/* Manuais em PDF na ficha de Activos */
.man-pdf { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.man-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie-2); flex-wrap: wrap; }
.man-item .man-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.man-item .man-info a { color: var(--acento-forte); font-weight: 600; overflow-wrap: anywhere; }
.man-item .man-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* ---------- Botões: estilo moderno "soft" (inspirado em iOS/macOS, identidade própria) ---------- */
:root { --btn-sec-top: #ffffff; --btn-sec-bot: #eef0f3; --btn-sec-borda: #d4d8df; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) { --btn-sec-top: #2b313b; --btn-sec-bot: #222730; --btn-sec-borda: #3a414c; } }
:root[data-tema='escuro'] { --btn-sec-top: #2b313b; --btn-sec-bot: #222730; --btn-sec-borda: #3a414c; }

.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease, box-shadow .16s ease, background-color .16s ease, filter .16s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }

/* Primário: cor da marca com brilho subtil no topo e sombra tingida */
.btn.primario {
  background-color: var(--acento);
  background-image: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(16, 24, 40, .14), 0 3px 8px rgba(15, 108, 189, .28);
}
.btn.primario:hover { background-color: var(--acento-forte); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(16, 24, 40, .16), 0 6px 16px rgba(15, 108, 189, .34); transform: translateY(-1px); }
.btn.primario:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22); transform: translateY(1px) scale(.99); }

/* Secundário: superfície com gradiente suave, bordo fino e sombra leve */
.btn.secundario {
  background-image: linear-gradient(var(--btn-sec-top), var(--btn-sec-bot));
  background-color: var(--btn-sec-top);
  border-color: var(--btn-sec-borda);
  color: var(--texto);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1.5px rgba(16, 24, 40, .06);
}
:root:not([data-tema='claro']) .btn.secundario, :root[data-tema='escuro'] .btn.secundario { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 1.5px rgba(0, 0, 0, .25); }
.btn.secundario:hover { filter: brightness(.98); border-color: var(--texto-3); transform: translateY(-1px); }
:root:not([data-tema='claro']) .btn.secundario:hover, :root[data-tema='escuro'] .btn.secundario:hover { filter: brightness(1.12); }

/* Texto: sem relevo, só cantos e realce ao passar */
.btn.texto { border-radius: 8px; box-shadow: none; background-image: none; }
.btn.texto:hover { background: var(--superficie-2); transform: none; }
.btn.texto:active { transform: none; }

.btn.pequeno { border-radius: 8px; }
.btn:disabled { transform: none; box-shadow: none; filter: saturate(.8); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; } }

/* ---------- Fonte tipo Mac: SF nos Apple; Inter (auto-alojada, livre) no Windows ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fontes/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fontes/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fontes/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fontes/inter-700.woff") format("woff"); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; }

/* ---------- Abas estilo "pasta/binder" na ficha da OT ---------- */
:root { --aba-inativa: #e7eaee; --aba-inativa-h: #dde1e6; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) { --aba-inativa: #262b33; --aba-inativa-h: #2e343d; } }
:root[data-tema='escuro'] { --aba-inativa: #262b33; --aba-inativa-h: #2e343d; }
.ficha-ordem .cartao > .fo-abas {
  gap: 5px;
  margin: -16px -20px 16px;
  padding: 11px 14px 0;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
  border-radius: 12px 12px 0 0;
}
.ficha-ordem .cartao > .fo-abas button {
  background: var(--aba-inativa);
  border: 1px solid var(--linha);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 9px 18px;
  margin: 0 0 -1px;
  color: var(--texto-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ficha-ordem .cartao > .fo-abas button:hover { background: var(--aba-inativa-h); color: var(--texto); }
.ficha-ordem .cartao > .fo-abas button.ativo {
  background: var(--superficie);
  color: var(--acento-forte);
  border-color: var(--linha);
  border-bottom: 1px solid var(--superficie);
  z-index: 2;
  box-shadow: 0 -2px 4px rgba(16, 24, 40, .05);
}
:root:not([data-tema='claro']) .ficha-ordem .cartao > .fo-abas button, :root[data-tema='escuro'] .ficha-ordem .cartao > .fo-abas button { box-shadow: none; }

/* Menu para alocar um equipamento do cliente à ordem (quadro Activos) */
.fo-add-obj { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.fo-add-obj select { width: 100%; font-weight: 400; }