/* Estilos compartilhados entre as telas (sidebar, layout base e peças
   usadas por mais de uma página). Regras exclusivas de uma tela ficam
   nas seções comentadas por tela no fim deste arquivo (o CSP não
   permite <style> inline). */

:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; margin: 0; }
.app { display: flex; align-items: flex-start; }

/* ---- Sidebar recolhida por padrão; expande no toggle ---- */
#sidebar {
  position: sticky; top: 0; height: 100vh; flex: 0 0 auto;
  width: 56px; transition: width .15s ease;
  display: flex; flex-direction: column;
  background: #8881; border-right: 1px solid #8884; overflow: hidden;
}
#sidebar.expandida { width: 210px; }
#sidebar .toggle {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.2rem; padding: .8rem; text-align: left; color: inherit;
}
#sidebar nav { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.side-rodape { border-top: 1px solid #8884; padding: .4rem 0; display: flex; flex-direction: column; gap: .2rem; }
.nav-item {
  display: flex; align-items: center; gap: .7rem; white-space: nowrap;
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font: inherit; padding: .6rem .9rem; text-align: left; width: 100%;
  text-decoration: none; box-sizing: border-box;
}
.nav-item:hover { background: #8882; }
.nav-item.ativo { background: #1a4f9c22; box-shadow: inset 3px 0 0 #1a4f9c; }
.nav-item .ico { font-size: 1.15rem; flex: 0 0 1.4rem; text-align: center; }
.nav-item .rotulo { overflow: hidden; }
#sidebar:not(.expandida) .nav-item .rotulo,
#sidebar:not(.expandida) #usuario,
#sidebar:not(.expandida) #status { display: none; }
#usuario, #status { padding: .2rem .9rem; font-size: .8rem; opacity: .75; white-space: nowrap; overflow: hidden; }
#usuario { font-size: .85rem; opacity: .8; }
#status { margin-left: auto; font-size: .85rem; opacity: .8; }

main { flex: 1; min-width: 0; padding: 1rem; max-width: 1100px; margin-inline: auto; }
header { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
header h1 { font-size: 1.1rem; margin: 0 1rem 0 0; }
input, button, select { font: inherit; padding: .4rem .6rem; }
#vazio { opacity: .6; padding: 2rem 0; text-align: center; }

/* Etiqueta de prioridade (minha-obra e acompanhamento) */
.prio { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #8883; }
.prio.alta { background: #b4231833; color: #b42318; }
.prio.media { background: #9a670033; color: #9a6700; }
.prio.baixa { background: #1a7f3733; color: #1a7f37; }

/* Lista de obras processadas (processadas e acompanhamento) */
.proc-lista { display: flex; flex-direction: column; gap: .4rem; }
.proc-item { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border: 1px solid #8884; border-radius: 8px; cursor: pointer; align-items: baseline; }
.proc-item:hover { background: #8881; }
.proc-item .quando { opacity: .7; font-size: .82rem; white-space: nowrap; }
.proc-item .local { opacity: .7; font-size: .82rem; }

/* Mensagens de formulário/erro (nova-tarefa e acompanhamento) */
.form-msg { font-size: .9rem; }
.form-msg.ok { color: #1a7f37; }
.form-msg.erro { color: #b42318; }

/* ------------------------------------------------------------------ */
/* Estilos por tela (externalizados dos <style> das páginas — o CSP    */
/* de produção não permite mais style inline). Seletores exclusivos    */
/* de cada tela; login escopado em body.login por usar tags genéricas. */
/* ------------------------------------------------------------------ */

/* --- login --- */
body.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
body.login form { display: flex; flex-direction: column; gap: .8rem; width: 280px; border: 1px solid #8884; border-radius: 10px; padding: 1.5rem; }
body.login h1 { font-size: 1.2rem; margin: 0 0 .5rem; }
body.login input { font: inherit; padding: .55rem .7rem; border: 1px solid #8886; border-radius: 6px; }
body.login button { font: inherit; padding: .6rem; border: 0; border-radius: 6px; background: #1a4f9c; color: #fff; cursor: pointer; }
body.login #erro { color: #b42318; font-size: .85rem; min-height: 1rem; }
body.login .senha-campo { display: flex; gap: .4rem; }
body.login .senha-campo input { flex: 1; min-width: 0; }
body.login .mostrar-senha { flex: 0 0 auto; display: flex; align-items: center; background: transparent; border: 1px solid #8886; padding: .3rem .6rem; }
body.login .mostrar-senha img { width: 18px; height: 18px; opacity: .75; }
/* O svg é preto fixo (currentColor não herda dentro de <img>) — inverte no
   escuro, seguindo o SO (auto) ou o override manual do tema.js. */
@media (prefers-color-scheme: dark) {
  body.login .mostrar-senha img { filter: invert(1); }
}
:root[data-tema="dark"] body.login .mostrar-senha img { filter: invert(1); }
:root[data-tema="light"] body.login .mostrar-senha img { filter: none; }

/* --- processadas --- */
.proc-cab { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }

/* --- nova-tarefa --- */
.form-task { max-width: 640px; display: flex; flex-direction: column; gap: 1rem; }
.form-task h2 { font-size: 1.1rem; margin: 0; }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo > label { font-size: .85rem; font-weight: 600; opacity: .85; }
.campo .ajuda { font-size: .78rem; opacity: .6; font-weight: 400; }
.filtro-linha { display: flex; gap: .5rem; align-items: center; }
.filtro-linha select { flex: 0 0 200px; }
.filtro-linha input { flex: 1; }
.filtro-linha .rm { background: #b42318; color: #fff; border: 0; border-radius: 6px; padding: .3rem .6rem; cursor: pointer; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.add-filtro { align-self: flex-start; background: #8882; border: 1px solid #8884; border-radius: 6px; padding: .4rem .8rem; cursor: pointer; }
.criar { background: #1a4f9c; color: #fff; border: 0; border-radius: 6px; padding: .7rem 1.2rem; cursor: pointer; align-self: flex-start; }
.criar:disabled { opacity: .5; cursor: default; }

/* --- minha-obra --- */
#resumo { padding: .6rem .9rem; border: 1px solid #8884; border-radius: 8px; margin-bottom: 1rem; font-size: .95rem; }
.obra { border: 1px solid #8884; border-radius: 8px; overflow: hidden; }
.obra > .cab { padding: .7rem .9rem; background: #8881; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.obra > .cab b { font-size: 1.05rem; }
.obra > .cab .cod { opacity: .7; font-size: .85rem; }
.obra-info { padding: .6rem .9rem .5rem; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 1rem; opacity: .85; }
.obra-info a { color: inherit; }
.imagens { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; padding: 1rem; }
.imagens:empty::after { content: "Sem pendentes nesta obra."; opacity: .6; font-size: .9rem; }
.secao-titulo { padding: 0 1rem; font-size: .82rem; font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.sem-imagem { padding: 1.2rem 1rem; opacity: .7; font-size: .9rem; text-align: center; }
.imagens.ref { padding-top: .3rem; }
.card { border: 1px solid #8884; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.card img { width: 100%; height: 200px; object-fit: cover; background: #8882; cursor: zoom-in; }
#lightbox { position: fixed; inset: 0; background: #000d; display: none; align-items: center; justify-content: center; z-index: 20; cursor: zoom-out; }
#lightbox.show { display: flex; }
#lightbox img { max-width: 75vw; max-height: 75vh; object-fit: contain; box-shadow: 0 8px 40px #000a; border-radius: 6px; }
.card.manual { border-color: #1a7f37; }
/* Aprovada que de fato entra no próximo envio (sera_enviada da api) —
   borda mais grossa pra não se confundir com .manual (mesmo verde). */
.card.sera-enviada { border: 2px solid #1a7f37; }
.meta { padding: .5rem .6rem; font-size: .82rem; flex: 1; }
.meta > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta .origem a { color: inherit; }
.meta .obs { width: 100%; margin-top: .4rem; font: inherit; font-size: .8rem; padding: .3rem .4rem; border: 1px solid #8884; border-radius: 6px; resize: vertical; box-sizing: border-box; background: transparent; color: inherit; }
.badge { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.badge.pendente { background: #8883; }
.badge.aprovada { background: #1a7f3733; color: #1a7f37; }
.badge.rejeitada { background: #b4231833; color: #b42318; }
.nova { background: #1a7f37; color: #fff; }
.acoes { display: flex; }
.acoes button, .acoes a, .acoes span { flex: 1; border: 0; padding: .55rem; cursor: pointer; color: #fff; text-align: center; text-decoration: none; }
.aprovar { background: #1a7f37; }
.rejeitar { background: #b42318; }
.reabrir { background: #9a6700; }
.enviada { background: #6e7781; }
.acoes button:disabled { opacity: .5; cursor: default; }
.acoes span { cursor: default; }
.historico { padding: 0 1rem 1rem; }
.historico summary { cursor: pointer; padding: .4rem 0; font-size: .9rem; opacity: .85; }
.rodape { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-top: 1px solid #8884; flex-wrap: wrap; gap: .5rem; }
.pend-hint { opacity: .7; font-size: .85rem; }
.dropzone { border: 2px dashed #8886; border-radius: 8px; padding: .55rem .9rem; cursor: pointer; font-size: .85rem; opacity: .85; text-align: center; }
.dropzone:hover, .dropzone.over { background: #1a7f3722; border-color: #1a7f37; opacity: 1; }
.dropzone.enviando { opacity: .6; cursor: default; }
.proxima { background: #1a4f9c; color: #fff; border: 0; padding: .6rem 1rem; cursor: pointer; border-radius: 6px; }
.proxima:disabled { opacity: .4; cursor: not-allowed; }
#modal { position: fixed; inset: 0; background: #0007; display: none; align-items: center; justify-content: center; z-index: 9; }
#modal.show { display: flex; }
#modal .caixa { background: Canvas; color: CanvasText; border: 1px solid #8886; border-radius: 10px; padding: 1.2rem; max-width: 360px; }
#modal .botoes { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
#modal button { border-radius: 6px; border: 1px solid #8886; cursor: pointer; }
#modal .ok { background: #9a6700; color: #fff; border: 0; }

/* --- acompanhamento --- */
.painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.6rem; }
.metric { border: 1px solid #8884; border-radius: 10px; padding: .9rem 1rem; }
.metric .n { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.metric .lbl { font-size: .8rem; opacity: .7; margin-top: .25rem; }
.metric.exec { border-color: #1a4f9c66; }
.metric.exec .n { color: #1a4f9c; }
.metric-consolidar { border: 0; border-radius: 10px; padding: .9rem 1rem; background: #1a4f9c; color: #fff; cursor: pointer; font: inherit; font-weight: 700; line-height: 1.2; }
.acomp-secao { margin-bottom: 1.5rem; }
.acomp-secao > h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: 0 0 .5rem; }
.task-lista { display: flex; flex-direction: column; gap: .4rem; }
.task-item { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border: 1px solid #8884; border-radius: 8px; align-items: baseline; }
.task-item.rodando { border-color: #1a4f9c; background: #1a4f9c11; }
.acomp-secao .task-meta { flex: 1; min-width: 0; text-align: left; }
.acomp-secao .tid { font-family: ui-monospace, monospace; font-size: .82rem; font-weight: 600; opacity: .8; margin-bottom: .3rem; letter-spacing: .02em; }
.acomp-secao .filtros { font-size: .9rem; }
.acomp-secao .filtros .lim { opacity: .55; font-size: .82rem; }
.acomp-secao .dir { text-align: right; font-size: .82rem; opacity: .85; white-space: nowrap; flex: 0 0 auto; }
.acomp-secao .dir .prio { margin-bottom: .25rem; }
.task-vazio { opacity: .5; font-size: .88rem; padding: .3rem .2rem; }
.st-badge { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.st-badge.done { background: #1a7f3733; color: #1a7f37; }
.st-badge.failed { background: #b4231833; color: #b42318; }
.task-erro { color: #b42318; font-size: .8rem; margin-top: .3rem; white-space: normal; }
.task-det { border: 1px solid #8884; border-radius: 8px; overflow: hidden; }
.task-det[open] { background: #8881; }
.task-det.rodando { border-color: #1a4f9c; }
.task-det.rodando[open] { background: #1a4f9c11; }
.task-det > summary { cursor: pointer; padding: .6rem .8rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; list-style: none; }
.task-det > summary::-webkit-details-marker { display: none; }
.task-det > summary::before { content: "▸"; opacity: .5; margin-right: .4rem; flex: 0 0 auto; }
.task-det[open] > summary::before { content: "▾"; }
.task-corpo { padding: .1rem .8rem .7rem 1.6rem; }
.task-corpo .proc-lista { gap: .35rem; }
/* item informativo (obra em execução): sem clique, sem cursor de link */
.proc-item.sem-acao { cursor: default; }

/* --- cobertura --- */
/* subpainéis empilhados em coluna única; espaçamento vertical vem do margin-bottom de .cob-secao */
.cobertura-linha { display: grid; grid-template-columns: 1fr; gap: 0; }
.cob-aviso { border: 1px solid #9a670066; background: #9a670018; color: #9a6700; border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1.2rem; font-size: .9rem; }
.cob-secao { margin-bottom: 1.8rem; }
.cob-secao > h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: 0 0 .5rem; }
.cob-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cob-tabela th, .cob-tabela td { padding: .5rem .7rem; border-bottom: 1px solid #8884; text-align: right; }
.cob-tabela th:first-child, .cob-tabela td:first-child { text-align: left; }
.cob-tabela thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
.cob-tabela tr.subtotal td { font-weight: 600; background: #8881; }
.cob-linha-clicavel { cursor: pointer; }
.cob-linha-clicavel:hover { background: #8881; }
.cob-linha-barrada td { box-shadow: inset 0 0 0 1px #b42318; }
.cob-barras { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }
.cob-barra-item { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.cob-barra-rotulo { flex: 0 0 90px; text-align: right; opacity: .8; }
.cob-barra-trilho { flex: 1; height: 10px; border-radius: 999px; background: #8883; overflow: hidden; }
.cob-barra-preenchida { height: 100%; border-radius: 999px; background: #1a4f9c; }
.cob-barra-pct { flex: 0 0 55px; opacity: .8; }
.cob-rodape { border-top: 1px solid #8884; padding-top: .8rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .9rem; }
.cob-total { font-weight: 600; }
.cob-atualizado { opacity: .6; font-size: .82rem; }

/* --- permissões --- */
#grade table { width: 100%; border-collapse: collapse; font-size: .9rem; }
#grade th, #grade td { padding: .5rem .7rem; border-bottom: 1px solid #8884; text-align: center; }
#grade th:first-child, #grade td:first-child { text-align: left; }
#grade thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
#grade input[type="checkbox"] { width: 16px; height: 16px; }
.novo-perfil { margin-top: 1.6rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }