/*
  THESIS: one uniform clipboard of pendentes grouped by obra; refuses the
  project-management default of stats cards, type columns and kanban.
  OWN-WORLD: concrete-grey ground, white obra sheets, charcoal ink; hi-vis
  yellow only where you act or what is selected; red only for late or
  urgent; people are circles, obras are squares.
  STORY: open, see per obra what is late and whose it is, tick it or add one
  in seconds.
  FIRST VIEWPORT: app bar with obra switcher and filter chips; stacked obra
  sheets of rows (tick circle, text, due tag, avatar); yellow "Novo" pill
  bottom-right on phones, sidebar button on PC.
  FORM: plain grouped list (inset-grouped heritage) with native-feeling
  sheets; #1 of own list; concept seed not rolled (Operate surface, user asked
  for simplicity).
*/

/* ---------- tokens ---------- */

:root {
  color-scheme: light dark;

  --fundo: #e2e5e8;
  --superficie: #ffffff;
  --superficie-2: #f6f7f8;
  --linha: #dcdfe3;
  --linha-forte: #c3c8ce;
  --linha-controlo: #7d848c;
  --texto: #17191c;
  --texto-2: #4b5157;
  --texto-3: #5f666d;
  --inverso: #17191c;
  --sobre-inverso: #ffffff;
  --sinal: #ffd02e;
  --sinal-forte: #f5c100;
  --sinal-suave: #fff4c2;
  --sinal-texto: #6f5400;
  --sobre-sinal: #17191c;
  --sinal-no-inverso: #ffd02e;
  --alarme: #c8261e;
  --alarme-suave: #fce9e7;
  --sobre-alarme: #ffffff;
  --ok: #1d7a4b;
  --ok-suave: #e4f3ea;
  --sobre-ok: #ffffff;
  --foco: #17191c;
  --fundo-camada: rgba(12, 14, 16, 0.44);
  --sombra-flutuante: 0 10px 30px rgba(18, 20, 22, 0.18), 0 2px 8px rgba(18, 20, 22, 0.1);
  /* Papel dos post-its: o único amarelo que não é "sinal". */
  --postit: #fff3b0;
  --postit-borda: #e3cf6a;

  --fonte: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --raio-xs: 6px;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 18px;
  --t-rapida: 140ms;
  --t-media: 220ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  --seguro-topo: env(safe-area-inset-top, 0px);
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-esq: env(safe-area-inset-left, 0px);
  --seguro-dir: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #101214;
    --superficie: #1a1d20;
    --superficie-2: #22262a;
    --linha: #30353a;
    --linha-forte: #464c52;
    --linha-controlo: #7a828a;
    --texto: #eceef0;
    --texto-2: #b6bcc2;
    --texto-3: #979ea5;
    --inverso: #eceef0;
    --sobre-inverso: #101214;
    --sinal: #ffd23f;
    --sinal-forte: #ffdc66;
    --sinal-suave: #3a3312;
    --sinal-texto: #ffe07a;
    --sobre-sinal: #17191c;
    --sinal-no-inverso: #6f5400;
    --alarme: #ff7b70;
    --alarme-suave: #3b1d1b;
    --sobre-alarme: #101214;
    --ok: #4cc38a;
    --ok-suave: #16301f;
    --sobre-ok: #101214;
    --foco: #ffd23f;
    --fundo-camada: rgba(0, 0, 0, 0.6);
    --sombra-flutuante: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    --postit: #332d10;
    --postit-borda: #5e5322;
  }
}

.cor-0 { --cor: #2f5bd3; }
.cor-1 { --cor: #0e7c66; }
.cor-2 { --cor: #b4441b; }
.cor-3 { --cor: #7a45c2; }
.cor-4 { --cor: #a8325e; }
.cor-5 { --cor: #2b7a2e; }
.cor-6 { --cor: #8a5a14; }
.cor-7 { --cor: #1f6f8b; }
.cor-8 { --cor: #5b6470; }
.cor-9 { --cor: #9c3d2e; }

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fundo);
}

/* No iPhone, segue o tamanho de letra escolhido nas Definições. */
@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

html.com-camada,
html.com-camada body {
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  touch-action: manipulation;
}

button:disabled {
  cursor: default;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.icone {
  flex: none;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 100;
  background: var(--inverso);
  color: var(--sobre-inverso);
  padding: 10px 14px;
  border-radius: var(--raio-sm);
  font-weight: 700;
}

.saltar:focus {
  top: calc(8px + var(--seguro-topo));
}

.foco-teclado {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;
  pointer-events: none;
}

.so-impressao {
  display: none;
}

.selecionavel {
  user-select: all;
  overflow-wrap: anywhere;
}

/* ---------- arranque ---------- */

.arranque {
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

.arranque__marca {
  width: 64px;
  height: 64px;
  border-radius: var(--raio-lg);
  background: var(--sinal) url('/icones/favicon.svg') center / 100% no-repeat;
  animation: pulsar 1.2s ease-in-out infinite;
}

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--raio-md);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    background-color var(--t-rapida),
    border-color var(--t-rapida),
    transform var(--t-rapida);
}

.botao:active:not(:disabled) {
  transform: scale(0.98);
}

.botao:disabled {
  opacity: 0.45;
}

.botao--primario {
  min-height: 48px;
  padding: 0 20px;
  background: var(--sinal);
  color: var(--sobre-sinal);
}

.botao--secundario {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--linha-forte);
}

.botao--quieto {
  background: transparent;
  color: var(--texto-2);
  padding: 0 12px;
}

.botao--pequeno {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.875rem;
  border-radius: var(--raio-sm);
}

.botao--largo {
  width: 100%;
}

@media (hover: hover) {
  .botao--primario:hover:not(:disabled) {
    background: var(--sinal-forte);
  }
  .botao--secundario:hover:not(:disabled) {
    background: var(--superficie-2);
  }
  .botao--quieto:hover:not(:disabled) {
    background: var(--superficie-2);
    color: var(--texto);
  }
}

.botao-icone {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--raio-md);
  color: var(--texto-2);
  transition: background-color var(--t-rapida), color var(--t-rapida);
}

.botao-icone:disabled {
  opacity: 0.4;
}

.botao-icone--pequeno {
  width: 36px;
  height: 36px;
}

.botao-icone--claro {
  color: #fff;
}

.botao-icone--escuro {
  width: 48px;
  height: 48px;
  background: var(--inverso);
  color: var(--sobre-inverso);
}

@media (pointer: coarse) {
  .botao--pequeno {
    min-height: 44px;
  }
  .botao-icone--pequeno {
    width: 44px;
    height: 44px;
  }
}

@media (hover: hover) {
  .botao-icone:hover:not(:disabled) {
    background: color-mix(in srgb, var(--texto) 8%, transparent);
    color: var(--texto);
  }
  .botao-icone--claro:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }
}

.botao-texto {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  font-weight: 600;
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linha-forte);
}

.botao-texto--pequeno {
  padding: 2px;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.botao-texto--pequeno::after {
  content: '';
  position: absolute;
  inset: -12px -6px;
}

.botao-texto--bloco {
  display: flex;
  width: 100%;
  padding: 14px 4px;
  text-decoration: none;
}

.botao-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* ---------- avatares e obras ---------- */

.avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cor);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.avatar--mini {
  width: 22px;
  height: 22px;
  font-size: 0.625rem;
}

.avatar--grande {
  width: 52px;
  height: 52px;
  font-size: 1.125rem;
}

.quadrado {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--raio-sm);
  background: var(--cor);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
}

.quadrado--mini {
  width: 22px;
  height: 22px;
  border-radius: var(--raio-xs);
  font-size: 0.625rem;
}

.quadrado--grande {
  width: 44px;
  height: 44px;
  border-radius: var(--raio-md);
  font-size: 1rem;
}

/* Pessoas da equipa são círculos (com contorno se o nome foi escrito à mão);
   Administrativo, Contabilidade, Equipa e os atalhos usam um ícone. */
.quadrado--circulo {
  border-radius: 50%;
}

.quadrado--contorno {
  background: var(--superficie);
  color: var(--cor);
  box-shadow: inset 0 0 0 2px var(--cor);
}

.quadrado--area {
  background: var(--inverso);
  color: var(--sobre-inverso);
}

.quadrado--postit {
  background: var(--postit);
  color: var(--texto);
  box-shadow: inset 0 0 0 1px var(--postit-borda);
}

.quadrado--euro {
  font-size: 1.125rem;
}

.quadrado--mini.quadrado--euro {
  font-size: 0.75rem;
}

.quadrado--grande.quadrado--euro {
  font-size: 1.375rem;
}

@media (prefers-color-scheme: dark) {
  .quadrado--contorno {
    background: transparent;
    color: var(--texto);
  }
}

/* ---------- chips ---------- */

.chip {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color var(--t-rapida),
    color var(--t-rapida),
    border-color var(--t-rapida);
}

.chip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  bottom: -3px;
}

.chip--data::after {
  content: none;
}

.chip[aria-pressed='true'] {
  background: var(--inverso);
  border-color: var(--inverso);
  color: var(--sobre-inverso);
}

.chip:has(.avatar),
.chip:has(.quadrado) {
  padding-left: 6px;
}

.chip__n {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--texto-3);
}

.chip[aria-pressed='true'] .chip__n {
  color: inherit;
  opacity: 0.8;
}

.chip--alerta:not([aria-pressed='true']) .chip__n {
  color: var(--alarme);
}

.chip__texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

.chip--escolha {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 38px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: var(--raio-xl);
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}

.chip--acao {
  border-style: dashed;
  color: var(--texto);
}

.chip--data .chip__data {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.chip--atrasado[aria-pressed='true'],
.chip--urgente-ativo,
.chip--urgente[aria-pressed='true'] {
  background: var(--alarme-suave);
  border-color: var(--alarme);
  color: var(--alarme);
}

@media (hover: hover) {
  .chip:not([aria-pressed='true']):hover {
    border-color: var(--texto-2);
    color: var(--texto);
  }
}

/* ---------- página ---------- */

.pagina {
  min-height: 100dvh;
}

.principal {
  min-width: 0;
}

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fundo);
  padding: calc(6px + var(--seguro-topo)) max(12px, var(--seguro-dir)) 0 max(12px, var(--seguro-esq));
  border-bottom: 1px solid var(--linha);
}

.topo__linha {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
}

.topo__voltar {
  margin-left: -8px;
  color: var(--texto);
}

/* Nomes compridos passam para a linha seguinte (nunca cortados). */
.topo__titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.topo__titulo > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.topo__marca {
  flex: none;
  border-radius: var(--raio-xs);
}

.topo__acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.topo__linha:has(.procura) .topo__acoes {
  margin-left: 4px;
}

.procura {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px 0 12px;
  background: var(--superficie);
  border: 1px solid var(--linha-controlo);
  border-radius: var(--raio-md);
}

.procura:focus-within {
  border-color: var(--foco);
  box-shadow: 0 0 0 1px var(--foco);
}

.procura__icone {
  color: var(--texto-3);
}

.procura__entrada {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-size: 1.0625rem;
}

.procura__entrada:focus {
  outline: none;
}

.procura__entrada::-webkit-search-cancel-button {
  display: none;
}

.procura__entrada::placeholder {
  color: var(--texto-3);
}

.ligacao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: var(--raio-sm);
  background: var(--superficie);
  border: 1px solid var(--linha);
  color: var(--texto-2);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

.ligacao span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ligacao--sem-rede {
  background: var(--sinal-suave);
  border-color: transparent;
  color: var(--sinal-texto);
}

.filtros {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * max(12px, var(--seguro-esq))) 0 calc(-1 * max(12px, var(--seguro-dir)));
  padding: 4px 40px 12px max(12px, var(--seguro-esq));
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.filtros::-webkit-scrollbar {
  display: none;
}

.filtros__separador {
  flex: none;
  width: 1px;
  height: 22px;
  background: var(--linha-forte);
  margin: 0 2px;
}

.lista {
  max-width: 800px;
  margin: 0 auto;
  padding: 14px max(12px, var(--seguro-dir)) calc(112px + var(--seguro-baixo)) max(12px, var(--seguro-esq));
}

/* ---------- grupos (uma folha por obra) ---------- */

.grupo {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-md);
  margin-bottom: 18px;
  overflow: clip;
}

.grupo__topo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 6px 8px;
  border-bottom: 1px solid var(--linha);
}

.grupo__nome {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px;
  border-radius: var(--raio-sm);
}

.grupo__nome:disabled {
  opacity: 1;
}

.grupo__texto {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.grupo__nome h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.grupo__resumo {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-3);
}

.resumo-alarme {
  color: var(--alarme);
  font-weight: 700;
}

.grupo__arquivada {
  font-weight: 500;
  color: var(--texto-3);
}

.grupo__vazio {
  padding: 18px 16px;
  color: var(--texto-2);
}

@media (hover: hover) {
  .grupo__nome:not(:disabled):hover {
    background: color-mix(in srgb, var(--texto) 5%, transparent);
  }
}

/* Categorias dentro de uma obra ou área (fecham-se tocando no nome). */
.seccao + .seccao {
  border-top: 1px solid var(--linha);
}

.seccao__topo {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 6px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
}

.seccao--recolhida .seccao__topo {
  border-bottom: 0;
}

.seccao__nome {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 6px;
  border-radius: var(--raio-sm);
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: left;
}

.seccao__nome .icone {
  color: var(--texto-2);
}

.seccao__texto {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.seccao__n {
  color: var(--texto-3);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .seccao__nome:hover {
    background: color-mix(in srgb, var(--texto) 5%, transparent);
  }
}

.lista__nova-categoria {
  margin: 0 0 18px;
}

.lista__acao {
  margin: 0 0 18px;
}

/* ---------- linha (um pendente) ---------- */

.linhas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.linha {
  position: relative;
  display: flex;
  align-items: flex-start;
  transition: background-color var(--t-rapida);
}

.linhas > li + li > .linha::before {
  content: '';
  position: absolute;
  top: 0;
  left: 54px;
  right: 0;
  border-top: 1px solid var(--linha);
}

.visto {
  flex: none;
  width: 54px;
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding-top: 15px;
  min-height: 60px;
}

.visto__circulo {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--linha-controlo);
  color: transparent;
  transition:
    background-color var(--t-rapida),
    border-color var(--t-rapida),
    color var(--t-rapida),
    transform var(--t-rapida);
}

.visto:active .visto__circulo {
  transform: scale(0.88);
}

.visto[aria-checked='true'] .visto__circulo {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--sobre-ok);
}

@media (hover: hover) {
  .visto:hover .visto__circulo {
    border-color: var(--ok);
    color: color-mix(in srgb, var(--ok) 70%, transparent);
  }
  .visto[aria-checked='true']:hover .visto__circulo {
    color: var(--sobre-ok);
  }
  .linha:hover {
    background: color-mix(in srgb, var(--texto) 3%, transparent);
  }
}

.linha__corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 0;
  text-align: left;
}

.linha__corpo:focus-visible {
  outline-offset: -2px;
  border-radius: var(--raio-xs);
}

.linha__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.linha__titulo {
  font-size: 1.0625rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.linha--feita .linha__titulo {
  color: var(--texto-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--texto-3) 70%, transparent);
}

.linha--acabada .visto__circulo {
  animation: marcar 320ms var(--curva);
}

.linha--acabada {
  animation: sair 1600ms linear forwards;
}

.linha--aberta {
  background: var(--sinal-suave);
}

.linha__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 0.9375rem;
  color: var(--texto-2);
}

.linha__avatar {
  margin-top: -2px;
}

.linha__pessoa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--raio-xs);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.etiqueta--atrasado,
.etiqueta--urgente {
  color: var(--alarme);
  background: var(--alarme-suave);
}

.etiqueta--hoje {
  color: var(--sinal-texto);
  background: var(--sinal-suave);
}

.etiqueta--breve,
.etiqueta--futuro {
  color: var(--texto-2);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.etiqueta--alarme {
  color: var(--texto);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}

.contador {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--texto-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.contador--local {
  color: var(--sinal-texto);
}

.contador--feito {
  color: var(--ok);
}

/* ---------- botão Novo (telemóvel) ---------- */

.fab {
  position: fixed;
  right: max(16px, var(--seguro-dir));
  bottom: calc(16px + var(--seguro-baixo));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  padding: 0 24px 0 18px;
  border-radius: 999px;
  background: var(--sinal);
  color: var(--sobre-sinal);
  font-size: 1.0625rem;
  font-weight: 800;
  box-shadow: var(--sombra-flutuante);
  transition: transform var(--t-rapida), background-color var(--t-rapida);
}

.fab:active {
  transform: scale(0.96);
}

/* ---------- vazio e esqueleto ---------- */

.vazio {
  text-align: center;
  padding: 48px 16px;
  color: var(--texto-2);
}

.vazio > p {
  font-size: 1.0625rem;
  margin-bottom: 20px;
}

.vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.esqueleto__grupo {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  padding: 18px 16px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.esqueleto__barra {
  height: 14px;
  border-radius: var(--raio-xs);
  background: var(--superficie-2);
  animation: pulsar-suave 1.4s ease-in-out infinite;
}

.esqueleto__barra--titulo {
  width: 45%;
  height: 18px;
}

.esqueleto__barra--curta {
  width: 60%;
}

/* ---------- página inicial: post-its e atalhos ---------- */

.postits {
  margin-bottom: 22px;
}

.postits__topo {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 -4px 8px 0;
}

.postits__titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-left: -6px;
  padding: 4px 6px;
  border-radius: var(--raio-sm);
  text-align: left;
}

.postits__titulo h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.postits__n {
  color: var(--texto-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .postits__titulo:hover {
    background: color-mix(in srgb, var(--texto) 5%, transparent);
  }
}

.postits__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 10px;
}

.postits__vazio {
  padding: 16px;
  border: 1px dashed var(--postit-borda);
  border-radius: var(--raio-md);
  color: var(--texto-2);
}

.postit {
  display: flex;
  align-items: flex-start;
  min-height: 104px;
  background: var(--postit);
  border: 1px solid var(--postit-borda);
  border-radius: var(--raio-sm);
}

.postit__corpo {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0 12px 12px;
  text-align: left;
}

.postit__texto {
  font-size: 1.0625rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.postit__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.visto.postit__visto {
  width: 48px;
  min-height: 0;
  padding-top: 10px;
}

.postit--feito .postit__texto {
  color: var(--texto-2);
  text-decoration: line-through;
}

.postit--acabado .visto__circulo {
  animation: marcar 320ms var(--curva);
}

.postit--acabado {
  animation: sair 1600ms linear forwards;
}

.postits__barra {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 12px;
  background: var(--postit);
  border: 1px solid var(--postit-borda);
  border-radius: var(--raio-md);
  font-weight: 700;
  text-align: left;
}

.postits__nome {
  flex: 1;
}

.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mosaico__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 120px;
  padding: 14px;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-md);
  text-align: left;
  transition: background-color var(--t-rapida), transform var(--t-rapida);
}

.mosaico__item--largo {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  min-height: 76px;
}

.mosaico__item:active {
  transform: scale(0.98);
}

.mosaico__texto,
.cartao__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mosaico__nome {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mosaico__resumo,
.cartao__resumo {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .mosaico__item:hover,
  .cartao:hover {
    background: var(--superficie-2);
  }
}

@media (min-width: 760px) {
  .mosaico {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- obras: uma linha por obra ---------- */

.cartoes {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cartao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 10px 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-md);
  text-align: left;
  transition: background-color var(--t-rapida);
}

.cartao__nome {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cartao__seta {
  color: var(--texto-3);
}

/* ---------- lateral (PC) ---------- */

.lateral {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px 14px;
  background: var(--superficie-2);
  border-right: 1px solid var(--linha);
}

.lateral__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  font-weight: 800;
  font-size: 1.0625rem;
}

.lateral__marca img {
  border-radius: var(--raio-xs);
}

.lateral__obras {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.lateral__gerir {
  text-decoration: none;
  color: var(--texto-2);
  padding: 8px 10px;
}

.lateral__eu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--raio-md);
  border-top: 1px solid var(--linha);
  font-weight: 600;
  text-align: left;
}

.lateral__eu-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  .lateral__eu:hover {
    background: var(--superficie);
  }
}

.obras-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.obras-nav__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 10px;
  border-radius: var(--raio-sm);
  font-weight: 600;
  text-align: left;
}

.obras-nav__item[aria-current] {
  background: var(--sinal-suave);
}

.obras-nav__nome {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.obras-nav__n {
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@media (hover: hover) {
  .obras-nav__item:not([aria-current]):hover {
    background: color-mix(in srgb, var(--texto) 5%, transparent);
  }
}

/* ---------- camadas e folhas ---------- */

.camada {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--vv-topo, 0px);
  height: var(--vv-altura, 100dvh);
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.camada__fundo {
  position: absolute;
  inset: 0;
  background: var(--fundo-camada);
  animation: aparecer var(--t-media) ease-out;
}

.folha {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100% - max(20px, var(--seguro-topo) + 8px));
  background: var(--superficie);
  outline: none;
}

.folha--baixo {
  border-radius: var(--raio-xl) var(--raio-xl) 0 0;
  box-shadow: var(--sombra-flutuante);
  animation: subir var(--t-media) var(--curva);
  transition: transform var(--t-media) var(--curva);
}

.folha--a-arrastar {
  transition: none;
}

.folha__arrastar {
  flex: none;
  touch-action: none;
}

.folha--detalhe,
.folha--novo {
  height: calc(100% - max(20px, var(--seguro-topo) + 8px));
}

.folha__pega {
  flex: none;
  width: 40px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: var(--linha-forte);
}

.folha__topo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 4px 8px 4px 20px;
}

.folha__titulo {
  flex: 1;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.folha__fechar {
  margin-left: auto;
}

.folha__corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px 28px;
}

.folha__rodape {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + var(--seguro-baixo));
  border-top: 1px solid var(--linha);
  background: var(--superficie);
}

.folha__rodape .botao--primario {
  flex: 0 1 auto;
}

@media (min-width: 760px) {
  .camada--baixo {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .folha--baixo {
    width: min(580px, 100%);
    max-height: min(88dvh, 920px);
    border-radius: var(--raio-lg);
    animation: surgir var(--t-media) var(--curva);
  }
  .folha--detalhe,
  .folha--novo {
    height: auto;
  }
  .folha--baixo .folha__pega {
    display: none;
  }
  .folha--baixo .folha__topo {
    padding-top: 8px;
  }
  .folha__rodape {
    padding-bottom: 12px;
    border-radius: 0 0 var(--raio-lg) var(--raio-lg);
  }
}

/* Detalhe em tablets: gaveta à direita. */
@media (min-width: 760px) and (max-width: 1179px) {
  .camada--baixo:has(> .folha--detalhe) {
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
  }
  .folha--detalhe.folha--baixo {
    width: 480px;
    height: 100%;
    max-height: none;
    border-radius: 0;
    animation: deslizar var(--t-media) var(--curva);
  }
  .folha--detalhe .folha__rodape {
    border-radius: 0;
    padding-bottom: calc(12px + var(--seguro-baixo));
  }
}

/* Detalhe no PC: painel fixo à direita, a lista continua utilizável. */
.camada--lateral {
  top: 0;
  left: auto;
  width: 460px;
  height: 100dvh;
  z-index: 40;
}

.folha--lateral {
  height: 100%;
  max-height: none;
  border-left: 1px solid var(--linha);
  animation: deslizar var(--t-media) var(--curva);
}

.folha--lateral .folha__rodape {
  padding-bottom: 12px;
}

/* ---------- formulários ---------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formulario__acoes {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.formulario__acoes--esquerda {
  justify-content: flex-start;
}

.rotulo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.entrada {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--linha-controlo);
  border-radius: var(--raio-md);
  background: var(--superficie);
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 400;
}

.entrada::placeholder {
  color: var(--texto-3);
}

.entrada:focus {
  outline: none;
  border-color: var(--foco);
  box-shadow: 0 0 0 1px var(--foco);
}

.area-texto {
  display: block;
  resize: none;
  overflow: hidden;
}

.entrada--titulo {
  min-height: 60px;
  font-size: 1.25rem;
  font-weight: 600;
}

.entrada--notas {
  min-height: 96px;
}

.entrada-com-botao {
  display: flex;
  gap: 8px;
}

.linha-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.caixa {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto-2);
  cursor: pointer;
}

.caixa input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--texto);
}

.erro {
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  background: var(--alarme-suave);
  color: var(--alarme);
  font-weight: 600;
}

.nota {
  margin: 8px 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--texto-2);
}

.estado-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--ok);
  font-weight: 700;
}

.aviso-simples {
  padding: 24px 0;
  color: var(--texto-2);
}

.campo {
  margin-top: 22px;
}

.formulario > .campo {
  margin-top: 2px;
}

.campo__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.campo__rotulo {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--texto-2);
}

.campo--solto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.escolhas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nova-obra {
  display: flex;
  align-items: center;
  gap: 8px;
}

.interruptor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  cursor: pointer;
}

.interruptor + .interruptor {
  border-top: 1px solid var(--linha);
}

.interruptor input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.interruptor__texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.interruptor__rotulo {
  font-weight: 600;
}

.interruptor__descricao {
  font-size: 0.875rem;
  color: var(--texto-2);
  line-height: 1.4;
}

.interruptor__trilho {
  flex: none;
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: var(--linha-controlo);
  transition: background-color var(--t-rapida);
}

.interruptor__botao {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--t-media) var(--curva);
}

.interruptor input:checked + .interruptor__trilho {
  background: var(--ok);
}

.interruptor input:checked + .interruptor__trilho .interruptor__botao {
  transform: translateX(20px);
}

.interruptor input:focus-visible + .interruptor__trilho {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.interruptor--desativado {
  opacity: 0.5;
  cursor: default;
}

/* ---------- detalhe ---------- */

.detalhe__obra {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-2);
  font-weight: 600;
}

.detalhe__obra span:last-child {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Vista só de leitura de um pendente */
.ver__titulo {
  margin: 4px 0 16px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.ver__titulo--feito {
  color: var(--texto-2);
  text-decoration: line-through;
}

.ver__dados {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-top: 1px solid var(--linha);
}

.ver__dado {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
}

.ver__dado dt {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto-2);
}

.ver__dado dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ver__data {
  font-weight: 500;
  color: var(--texto-2);
}

.ver__notas {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.detalhe__feito {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 12px;
  padding: 8px 12px;
  border-radius: var(--raio-sm);
  background: var(--ok-suave);
  color: var(--ok);
  font-weight: 700;
}

.detalhe__criado {
  margin-top: 28px;
  font-size: 0.875rem;
  color: var(--texto-3);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.galeria--pequena {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  margin: 14px 0 0;
}

.galeria__item {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linha);
  color: var(--texto-3);
}

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galeria__item--envio img {
  opacity: 0.55;
}

.galeria__progresso {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.galeria__progresso::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--sinal);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left center;
  transition: transform 200ms linear;
}

.galeria__remover::after {
  content: '';
  position: absolute;
  inset: -7px;
}

.galeria__espera {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 4px;
  border-radius: var(--raio-xs);
  background: var(--sinal-suave);
  color: var(--sinal-texto);
  font-size: 0.75rem;
  font-weight: 700;
}

.galeria__remover {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
}

.ficheiros {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
}

.ficheiros__item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
}

.ficheiros__item + .ficheiros__item {
  border-top: 1px solid var(--linha);
}

.ficheiros__ligacao {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px;
  text-decoration: none;
}

.ficheiros__nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.ficheiros__tamanho {
  color: var(--texto-3);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.anexos__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cronologia {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.evento--registo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 7px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--texto-2);
}

.evento--registo strong {
  color: var(--texto);
  font-weight: 600;
}

.evento__ponto {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--linha-forte);
}

.evento--comentario {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.evento--comentario .avatar {
  margin-top: 8px;
}

.evento__balao {
  flex: 1;
  min-width: 0;
  padding: 9px 12px 10px;
  border-radius: 4px var(--raio-md) var(--raio-md) var(--raio-md);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.evento__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 0.875rem;
  color: var(--texto-3);
}

.evento__cabeca strong {
  font-size: 0.875rem;
  color: var(--texto);
}

.evento__local {
  color: var(--sinal-texto);
  font-weight: 600;
}

.evento__texto {
  margin: 3px 0 2px;
  font-size: 1rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comentar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.comentar__texto {
  flex: 1;
  min-height: 48px;
  max-height: 180px;
  overflow-y: auto !important;
}

.carregando {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  color: var(--texto-2);
}

.carregando__ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sinal);
  animation: pulsar 1s ease-in-out infinite;
}

/* ---------- ver foto ---------- */

.camada--foto {
  z-index: 60;
  background: #000;
  justify-content: stretch;
}

.ver-foto {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #fff;
}

.ver-foto__topo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: calc(6px + var(--seguro-topo)) 8px 6px 16px;
}

.ver-foto__info {
  flex: 1;
  font-size: 0.9375rem;
  opacity: 0.85;
}

.ver-foto__imagem {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
}

.ver-foto__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 8px calc(8px + var(--seguro-baixo));
  font-variant-numeric: tabular-nums;
}

/* ---------- menu e folhas secundárias ---------- */

.menu__perfil {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 0 18px;
}

.menu__nome {
  font-size: 1.125rem;
  font-weight: 700;
}

.menu__utilizador {
  margin-top: 2px;
  color: var(--texto-2);
}

.menu {
  list-style: none;
  margin: 0 0 14px;
  padding: 4px;
  border-radius: var(--raio-md);
  background: var(--superficie-2);
}

.menu__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 12px;
  border-radius: var(--raio-sm);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
}

.menu__item .icone {
  color: var(--texto-2);
}

.menu__rotulo {
  flex: 1;
}

.menu__detalhe {
  color: var(--texto-3);
  font-size: 0.875rem;
  font-weight: 500;
}

@media (hover: hover) {
  .menu__item:hover {
    background: var(--superficie);
  }
}

.menu__rodape {
  margin: 18px 0 4px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--texto-3);
}

.obras-lista,
.pessoas,
.atividade {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.obra-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
}

.obra-linha__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.obra-linha__nome {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obra-linha__n {
  font-size: 0.875rem;
  color: var(--texto-3);
}

.obra-linha__form {
  flex: 1;
  display: flex;
  gap: 8px;
}

.pessoa {
  border-bottom: 1px solid var(--linha);
}

.pessoa__cabeca {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 0;
  text-align: left;
}

.pessoa__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pessoa__nome {
  font-weight: 700;
}

.pessoa__detalhe {
  font-size: 0.875rem;
  color: var(--texto-2);
}

.pessoa--inativa .pessoa__nome,
.pessoa--inativa .avatar {
  opacity: 0.55;
}

.pessoa__acoes {
  padding: 0 0 14px 42px;
}

.pessoa__acoes .linha-form {
  margin: 8px 0 0;
}

.pessoa__remover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
}

.pessoa__remover .nota {
  margin: 0;
}

.cartao-info {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--raio-md);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.cartao-info > p {
  line-height: 1.5;
}

.credenciais {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 14px 0 16px;
}

.credenciais dt {
  color: var(--texto-2);
}

.credenciais dd {
  margin: 0;
  font-weight: 700;
  user-select: all;
  overflow-wrap: anywhere;
}

.cores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 0;
}

.cores legend {
  margin-bottom: 8px;
}

.cores__opcao {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cor);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.cores__opcao input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.cores__opcao:has(input:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.bloco {
  margin: 0 0 22px;
}

.bloco__titulo {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--texto-2);
}

.bloco--destaque {
  padding: 14px 16px;
  border-radius: var(--raio-md);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.passos {
  margin: 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.5;
}

.passos .icone {
  display: inline-block;
  vertical-align: -3px;
}

.atividade__item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}

.atividade__item:disabled {
  opacity: 0.6;
}

.atividade__item .avatar {
  margin-top: 1px;
}

.atividade__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.4;
}

.atividade__texto em {
  font-style: normal;
  font-weight: 600;
}

.atividade__citacao {
  color: var(--texto-2);
  overflow-wrap: anywhere;
}

.atividade__meta {
  font-size: 0.875rem;
  color: var(--texto-3);
}

@media (hover: hover) {
  .atividade__item:not(:disabled):hover {
    background: color-mix(in srgb, var(--texto) 4%, transparent);
  }
}

/* ---------- entrar ---------- */

.entrada-pagina {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: calc(24px + var(--seguro-topo)) 16px calc(24px + var(--seguro-baixo));
}

.entrada-pagina__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.entrada-pagina__marca img {
  border-radius: var(--raio-md);
}

.entrada-pagina__marca h1 {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}

.entrada-pagina__cartao {
  width: min(420px, 100%);
  padding: 24px 20px;
  border-radius: var(--raio-lg);
  background: var(--superficie);
  border: 1px solid var(--linha);
}

.entrada-pagina__titulo {
  font-size: 1.25rem;
}

.estado-sem-rede {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 1.125rem;
  font-weight: 700;
}

/* ---------- avisos ---------- */

.avisos {
  position: fixed;
  left: 50%;
  bottom: calc(88px + var(--seguro-baixo));
  transform: translateX(-50%);
  z-index: 70;
  width: min(560px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.com-camada .avisos {
  bottom: auto;
  top: calc(10px + var(--seguro-topo));
}

.aviso {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 6px 6px 6px 16px;
  border-radius: var(--raio-md);
  background: var(--inverso);
  color: var(--sobre-inverso);
  box-shadow: var(--sombra-flutuante);
  animation: surgir var(--t-media) var(--curva);
}

.aviso--erro {
  background: var(--alarme);
  color: var(--sobre-alarme);
}

.aviso__texto {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.aviso__acao {
  flex: none;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  color: var(--sinal-no-inverso);
  font-weight: 800;
}

.aviso--erro .aviso__acao {
  color: var(--sobre-alarme);
  text-decoration: underline;
}

.aviso__fechar {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-sm);
  opacity: 0.75;
}

.atualizacao {
  position: fixed;
  top: calc(8px + var(--seguro-topo));
  left: 50%;
  transform: translateX(-50%);
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: var(--raio-md);
  background: var(--inverso);
  color: var(--sobre-inverso);
  font-weight: 600;
  box-shadow: var(--sombra-flutuante);
}

/* ---------- áreas: lista lateral, gerir e histórico ---------- */

.obras-nav__secao {
  margin-top: 6px;
}

.obras-nav__item--area .obras-nav__nome {
  font-weight: 700;
}

.obras-nav--sub {
  padding-left: 16px;
}

.obras-nav--sub .obras-nav__item {
  min-height: 44px;
  font-weight: 500;
}

.campo-grupo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.formulario > .campo-grupo {
  margin-top: 2px;
}

.campo-grupo > .campo {
  margin-top: 0;
}

.campo-grupo--destacar > .campo:first-child {
  animation: destacar 1.2s ease-out;
  border-radius: var(--raio-md);
}

@keyframes destacar {
  0%,
  45% {
    background: var(--alarme-suave);
    box-shadow: 0 0 0 8px var(--alarme-suave);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 8px transparent;
  }
}

.separadores {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: var(--raio-md);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.separadores__item {
  flex: 1;
  min-height: 44px;
  padding: 0 6px;
  border-radius: var(--raio-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--texto-2);
  text-align: center;
}

.separadores__item[aria-selected='true'] {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}

.historico__cabeca {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.historico__nomes {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.historico__grupo {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historico__resumo {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--texto-2);
}

.historico__data {
  position: sticky;
  top: -4px;
  z-index: 1;
  margin: 12px 0 0;
  padding: 8px 0 6px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--texto-2);
}

.historico__dia .atividade {
  margin-bottom: 4px;
}

.historico__dia + .botao {
  margin-top: 12px;
}

/* ---------- alarmes ---------- */

.chip--alarme {
  color: var(--texto);
  border-color: var(--linha-controlo);
}

.alarme__pendente {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.aviso-notificacoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--raio-sm);
  background: var(--sinal-suave);
  color: var(--sinal-texto);
  font-size: 0.9375rem;
  font-weight: 600;
}

.aviso-notificacoes > span {
  flex: 1 1 12rem;
}

.formulario--sem-alarme .campo--destacar {
  animation: destacar 1.2s ease-out;
  border-radius: var(--raio-md);
}

/* Confirmação de algo que não se pode desfazer (eliminar de vez). */
.botao--perigo {
  background: var(--alarme);
  border-color: var(--alarme);
  color: var(--sobre-alarme);
}

.galeria__ficheiro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 6px;
  color: var(--texto-2);
}

.galeria__ficheiro span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

/* ---------- lixo ---------- */

.lixo {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lixo__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.lixo__texto {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lixo__titulo {
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.lixo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.lixo__acoes {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.lixo__total {
  font-weight: 700;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- PC ---------- */

@media (min-width: 1180px) {
  .pagina {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .pagina--com-detalhe {
    padding-right: 460px;
  }
  .lateral {
    position: sticky;
    top: 0;
    height: 100dvh;
  }
  .topo {
    padding: 14px 28px 0;
  }
  .topo__linha {
    gap: 12px;
    min-height: 56px;
  }
  .topo__titulo {
    font-size: 1.5rem;
    letter-spacing: -0.015em;
  }
  .topo .procura {
    flex: 0 1 320px;
  }
  .filtros {
    margin: 0 -28px;
    padding: 4px 28px 14px;
  }
  .lista {
    padding: 20px 28px 48px;
  }
  .avisos {
    bottom: 24px;
  }
}

/* ---------- movimento ---------- */

@keyframes subir {
  from {
    transform: translateY(100%);
  }
}

@keyframes deslizar {
  from {
    transform: translateX(100%);
  }
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
}

@keyframes pulsar {
  50% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

@keyframes pulsar-suave {
  50% {
    opacity: 0.55;
  }
}

/* O visto enche-se com um pequeno ressalto; a linha fica visível um
   instante (com "Anular" no aviso) e esbate-se antes de sair da lista. */
@keyframes marcar {
  0% {
    transform: scale(0.75);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes sair {
  0%,
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ---------- impressão ---------- */

@media print {
  @page {
    margin: 14mm;
  }
  :root {
    --fundo: #fff;
    --superficie: #fff;
    --texto: #000;
    --texto-2: #333;
    --texto-3: #555;
    --linha: #bbb;
  }
  html,
  body {
    background: #fff;
    color: #000;
  }
  .topo,
  .fab,
  .lateral,
  .camada,
  .avisos,
  .atualizacao,
  .saltar,
  .grupo__topo .botao-icone,
  .seccao__topo .botao-icone,
  .lista__nova-categoria,
  .lista__acao,
  .vazio__acoes {
    display: none !important;
  }
  .so-impressao {
    display: block !important;
  }
  .impressao-topo {
    margin-bottom: 12px;
    font-size: 11pt;
  }
  .pagina,
  .pagina--com-detalhe {
    display: block;
    padding: 0;
  }
  .lista {
    max-width: none;
    padding: 0;
  }
  .grupo {
    border-color: #999;
    break-inside: auto;
    margin-bottom: 10px;
  }
  .linha {
    break-inside: avoid;
  }
  .visto {
    padding-top: 12px;
    min-height: 0;
  }
  .visto__circulo {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1.5px solid #000;
  }
  .linha__corpo {
    padding: 10px 10px 10px 0;
  }
  .linha__titulo {
    display: block;
    -webkit-line-clamp: unset;
    font-size: 11pt;
  }
  .linha__meta {
    font-size: 9pt;
  }
}

/* ---------- topo: data por cima do título (Hoje e Semana) ---------- */

.topo__nomes {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topo__subtitulo {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--texto-3);
}

/* ---------- arrastar (tocar, segurar e mover) ---------- */

.arrastavel > [data-arrastar] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.arrastar-origem {
  opacity: 0.3;
}

.arrastar-fantasma {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-flutuante);
  opacity: 0.97;
  transition: none;
}

html.a-arrastar,
html.a-arrastar * {
  cursor: grabbing !important;
  -webkit-user-select: none;
  user-select: none;
}