/* ============================================================
   COMPONENTES — partes reutilizadas em todas as telas
   ============================================================ */

/* Topo ---------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: 100%;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  height: var(--altura-topo);
  padding: 0 var(--espaco-4);
  background: var(--cor-fundo);
}

.topo__marca { display: flex; align-items: center; flex: none; }
.topo__simbolo { height: 32px; width: auto; }

.topo__obra {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: 7px var(--espaco-3);
  border-radius: var(--raio-redondo);
  background: var(--cor-papel);
  box-shadow: var(--sombra);
  color: var(--cor-texto-claro);
}

.topo__obra-texto { flex: 1; min-width: 0; text-align: left; }
.topo__obra-texto .rotulo { font-size: 10px; letter-spacing: 0.08em; }

.topo__obra-nome {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto);
  line-height: 1.2;
}

.topo__acoes { display: flex; align-items: center; gap: var(--espaco-2); flex: none; }

.topo__botao {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-redondo);
  background: var(--cor-papel);
  color: var(--cor-primaria);
  box-shadow: var(--sombra);
}

.topo__botao--extra { display: none; }

.topo__nova {
  min-height: 42px;
  padding: 0 var(--espaco-3);
  border-radius: var(--raio-redondo);
  box-shadow: var(--sombra-marca);
}

.topo__nova span { display: none; }

/* Menu lateral (computador) ------------------------------ */

.lateral { display: none; }

.lateral__marca {
  display: flex;
  align-items: center;
  height: 84px;
  padding: 0 var(--espaco-5);
}

.lateral__marca img { height: 32px; width: auto; }

.lateral__destaque { padding: 0 var(--espaco-4) var(--espaco-2); }

.lateral__grupo { padding: var(--espaco-4) var(--espaco-4) 0; }

.lateral__titulo-grupo {
  padding: 0 var(--espaco-3) var(--espaco-2);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-mini);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.lateral__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: 100%;
  padding: 12px var(--espaco-3);
  border-radius: var(--raio-pequeno);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  text-align: left;
  transition: background var(--transicao), color var(--transicao);
}

.lateral__item:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

.lateral__item[aria-current="page"] { background: #fff; color: var(--cor-primaria); }
.lateral__item[aria-current="page"] .icone { color: var(--cor-secundaria); }

.lateral__rodape {
  margin-top: auto;
  padding: var(--espaco-5) var(--espaco-4);
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--texto-mini);
}

/* Barra inferior flutuante (celular) --------------------- */

.barra-inferior {
  position: fixed;
  left: var(--espaco-3);
  right: var(--espaco-3);
  bottom: calc(var(--espaco-3) + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  height: var(--altura-barra-inferior);
  padding: 0 var(--espaco-2);
  background: var(--cor-primaria);
  border-radius: var(--raio-redondo);
  box-shadow: var(--sombra-alta);
}

.barra-inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--fonte-titulo);
  font-size: 11px;
  font-weight: 700;
}

.barra-inferior__item[aria-current="page"] { color: #fff; }

.barra-inferior__item[aria-current="page"] .icone {
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--raio-redondo);
  padding: 3px;
  box-sizing: content-box;
}

.barra-inferior__central {
  flex: none;
  width: 58px; height: 58px;
  margin: 0 var(--espaco-1);
  display: grid;
  place-items: center;
  border-radius: var(--raio-redondo);
  background: var(--cor-secundaria);
  color: #fff;
  box-shadow: var(--sombra-marca);
}

.barra-inferior__central .icone { width: 26px; height: 26px; stroke-width: 2.4; }

/* Ícones -------------------------------------------------- */

.icone {
  width: 22px; height: 22px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone--pequeno { width: 18px; height: 18px; }
.icone--grande { width: 26px; height: 26px; }

/* Quadradinho de ícone ----------------------------------- */

.ficha-icone {
  width: 48px; height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-pequeno);
  background: var(--tom-azul-fundo);
  color: var(--tom-azul-frente);
}

.ficha-icone--laranja { background: var(--tom-laranja-fundo); color: var(--tom-laranja-frente); }
.ficha-icone--verde { background: var(--tom-verde-fundo); color: var(--tom-verde-frente); }
.ficha-icone--amarelo { background: var(--tom-amarelo-fundo); color: var(--tom-amarelo-frente); }
.ficha-icone--roxo { background: var(--tom-roxo-fundo); color: var(--tom-roxo-frente); }

/* Cabeçalho de tela -------------------------------------- */

.cabecalho-tela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin: var(--espaco-2) 0 var(--espaco-4);
}

.cabecalho-tela__texto { min-width: 0; }
.cabecalho-tela h1 { font-size: var(--texto-titulo); }
.cabecalho-tela p { margin: 2px 0 0; color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }

/* Cartões ------------------------------------------------- */

.cartao {
  background: var(--cor-papel);
  border-radius: var(--raio);
  padding: var(--espaco-4);
  margin-bottom: var(--espaco-3);
  box-shadow: var(--sombra);
}

.cartao__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-3);
}

.cartao__topo h3 { font-size: var(--texto-medio); }

.cartao__acao {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--cor-secundaria-escura);
}

/* Grade de números --------------------------------------- */

.grade-numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-3);
}

.numero {
  background: var(--cor-papel);
  border-radius: var(--raio);
  padding: var(--espaco-4);
  box-shadow: var(--sombra);
}

.numero__valor {
  display: block;
  margin-top: var(--espaco-1);
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-grande);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.numero__nota { font-size: var(--texto-mini); color: var(--cor-texto-claro); font-weight: 600; }

/* Barra de progresso ------------------------------------- */

.progresso {
  height: 10px;
  border-radius: var(--raio-redondo);
  background: var(--cor-linha);
  overflow: hidden;
}

.progresso__preenchido {
  height: 100%;
  border-radius: var(--raio-redondo);
  background: var(--cor-secundaria);
  transition: width var(--transicao);
}

.progresso--claro { background: rgba(255, 255, 255, 0.2); }

/* Etiquetas ---------------------------------------------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--raio-redondo);
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-mini);
  font-weight: 700;
  white-space: nowrap;
}

.etiqueta--sucesso { background: var(--cor-sucesso-clara); color: #0c7d52; }
.etiqueta--alerta { background: var(--cor-alerta-clara); color: #b06a0c; }
.etiqueta--erro { background: var(--cor-erro-clara); color: #b53434; }
.etiqueta--info { background: var(--cor-info-clara); color: #24568f; }
.etiqueta--neutra { background: var(--cor-primaria-clara); color: var(--cor-primaria); }

/* Botões -------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 52px;
  padding: 0 var(--espaco-5);
  border-radius: var(--raio-pequeno);
  background: var(--cor-papel);
  color: var(--cor-primaria);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-base);
  font-weight: 800;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), background var(--transicao);
}

.botao:active { transform: scale(0.97); }

.botao--principal { background: var(--cor-primaria); color: #fff; }
.botao--principal:hover { background: var(--cor-primaria-escura); }

.botao--marca { background: var(--cor-secundaria); color: #fff; box-shadow: var(--sombra-marca); }
.botao--marca:hover { background: var(--cor-secundaria-escura); }

.botao--fantasma { background: transparent; box-shadow: none; color: var(--cor-texto-suave); }
.botao--fantasma:hover { background: var(--cor-papel); }

.botao--perigo { background: var(--cor-erro-clara); color: var(--cor-erro); box-shadow: none; }

.botao--largo { width: 100%; }
.botao--pequeno { min-height: 42px; padding: 0 var(--espaco-4); font-size: var(--texto-pequeno); }

/* Filtros ------------------------------------------------- */

.filtros {
  display: flex;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-4);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}

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

.filtro {
  flex: none;
  padding: 10px var(--espaco-4);
  border-radius: var(--raio-redondo);
  background: var(--cor-papel);
  color: var(--cor-texto-suave);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  box-shadow: var(--sombra);
}

.filtro[aria-pressed="true"] { background: var(--cor-primaria); color: #fff; }

/* Busca --------------------------------------------------- */

.busca {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: 0 var(--espaco-4);
  height: 52px;
  margin-bottom: var(--espaco-3);
  background: var(--cor-papel);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra);
  color: var(--cor-texto-claro);
}

.busca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; }

/* Listas de registros ------------------------------------ */

.lista { display: flex; flex-direction: column; gap: var(--espaco-3); }

.registro {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: 100%;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--cor-papel);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-align: left;
  transition: transform var(--transicao);
}

.registro:active { transform: scale(0.99); }

.registro__marca {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-pequeno);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
}

.registro__corpo { flex: 1; min-width: 0; }

.registro__titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.3;
}

.registro__nota {
  display: block;
  margin-top: 2px;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-suave);
}

.registro__lado { text-align: right; flex: none; }

.registro__valor {
  display: block;
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Caixa de marcar ---------------------------------------- */

.caixa {
  width: 28px; height: 28px;
  flex: none;
  border: 2px solid var(--cor-linha-forte);
  border-radius: 10px;
  background: var(--cor-papel);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background var(--transicao), border-color var(--transicao);
}

.caixa[aria-checked="true"] {
  background: var(--cor-sucesso);
  border-color: var(--cor-sucesso);
  color: #fff;
}

/* Formulários -------------------------------------------- */

.campo { margin-bottom: var(--espaco-4); }

.campo label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--cor-texto);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px var(--espaco-4);
  border: 2px solid var(--cor-linha);
  border-radius: var(--raio-pequeno);
  background: var(--cor-papel-suave);
  outline: none;
  transition: border-color var(--transicao), background var(--transicao);
}

.campo textarea { min-height: 100px; resize: vertical; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--cor-secundaria);
  background: var(--cor-papel);
}

.campo__dica { margin-top: 6px; font-size: var(--texto-mini); color: var(--cor-texto-claro); }

.campo--duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-3); }

/* Modal --------------------------------------------------- */

.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 26, 38, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: surgir 160ms ease;
}

.modal {
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--cor-papel);
  border-radius: 28px 28px 0 0;
  padding: var(--espaco-4) var(--espaco-4) calc(var(--espaco-5) + env(safe-area-inset-bottom));
  animation: subir 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.modal__puxador {
  width: 48px; height: 5px;
  margin: 0 auto var(--espaco-4);
  border-radius: var(--raio-redondo);
  background: var(--cor-linha-forte);
}

.modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
}

.modal__topo h2 { font-size: var(--texto-grande); }

.modal__acoes { display: flex; gap: var(--espaco-3); margin-top: var(--espaco-5); }
.modal__acoes .botao { flex: 1; }

@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(28px); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .modal-fundo, .modal { animation: none; }
}

/* Notificações -------------------------------------------- */

.notificacoes {
  position: fixed;
  left: var(--espaco-4);
  right: var(--espaco-4);
  bottom: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom) + var(--espaco-4));
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  pointer-events: none;
}

.notificacao {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-pequeno);
  background: var(--cor-primaria);
  color: #fff;
  font-size: var(--texto-pequeno);
  font-weight: 600;
  box-shadow: var(--sombra-alta);
  animation: subir 200ms ease;
}

.notificacao--sucesso { background: #0f8d5e; }
.notificacao--erro { background: #b53434; }
.notificacao--alerta { background: #b06a0c; }

/* Estado vazio -------------------------------------------- */

.estado-vazio {
  padding: var(--espaco-6) var(--espaco-4);
  text-align: center;
  background: var(--cor-papel);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.estado-vazio .ficha-icone { margin: 0 auto var(--espaco-3); width: 60px; height: 60px; }
.estado-vazio p { color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
.estado-vazio .botao { margin-top: var(--espaco-4); }