/* GCL — identidade da Escola de Produtividade.
   Marinho é a cor sólida, ciano é o acento, laranja aparece pouco e só onde
   há urgência ou dinheiro em jogo. Bebas Neue é da marca pessoal do João e
   NÃO entra aqui. */

:root {
  --marinho: #033067;
  --marinho-claro: #164a8c;
  --marinho-escuro: #02224a;
  --violeta: #2A3078;
  --ciano: #09A9DF;
  --ciano-claro: #e6f6fd;
  --laranja: #EC6707;
  --laranja-claro: #fdf0e5;

  --verde: #0E8A5F;
  --verde-claro: #e6f5ef;
  --vermelho: #C62828;
  --vermelho-claro: #fdeaea;
  --amarelo: #B26A00;
  --amarelo-claro: #fdf4e3;

  --fundo: #F5F8FB;
  --branco: #ffffff;
  --tinta: #16202e;
  --tinta-2: #4a5a6e;
  --tinta-3: #7a8aa0;
  --linha: #e3e9f0;
  --linha-forte: #cdd7e3;

  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(3, 48, 103, .06), 0 4px 16px rgba(3, 48, 103, .05);
  --sombra-alta: 0 8px 32px rgba(3, 48, 103, .14);
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --barra: 68px;
}

* { box-sizing: border-box; }
/* `display:flex` nas caixas de aviso vence o display:none padrão do atributo. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .6rem; }
a { color: var(--marinho); }
img { max-width: 100%; }

/* ------------------------------------------------------------------ splash */

.carregando { display: grid; place-items: center; min-height: 100vh; }
.splash { display: grid; gap: .8rem; place-items: center; color: var(--tinta-3); font-size: .85rem; }
.splash img { opacity: .85; animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ------------------------------------------------------------------- login */

.login { min-height: 100vh; display: grid; grid-template-columns: 1fr; place-items: center; padding: 1.5rem; }
.login-caixa { width: 100%; max-width: 380px; }
.login-marca { display: grid; place-items: center; gap: 1rem; margin-bottom: 2rem; }
.login-marca img { width: 210px; }
.login-nome {
  font-size: 2.6rem; font-weight: 800; letter-spacing: .14em;
  color: var(--marinho); line-height: 1;
}
.login-tagline { color: var(--tinta-3); font-size: .82rem; text-align: center; max-width: 300px; }
.login form { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.5rem; box-shadow: var(--sombra); }
.login .rodape { text-align: center; color: var(--tinta-3); font-size: .75rem; margin-top: 1.5rem; }

/* ------------------------------------------------------------------ layout */

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

.lateral {
  background: var(--branco); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.lateral-topo { padding: 1.1rem 1rem .9rem; border-bottom: 1px solid var(--linha); }
.lateral-topo img { width: 150px; display: block; }
.lateral-produto {
  display: flex; align-items: baseline; gap: .5rem; margin-top: .7rem;
}
.lateral-produto strong { font-size: 1.35rem; font-weight: 800; letter-spacing: .1em; color: var(--marinho); }
.lateral-produto span { font-size: .68rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }

.menu { flex: 1; overflow-y: auto; padding: .7rem .6rem 1.5rem; }
.menu-grupo { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3); font-weight: 700; padding: .9rem .55rem .35rem; }
.menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .52rem .55rem; border-radius: var(--raio-p);
  color: var(--tinta-2); text-decoration: none; font-size: .88rem; font-weight: 500;
  position: relative;
}
.menu a:hover { background: var(--fundo); color: var(--tinta); }
.menu a.ativo { background: var(--marinho); color: #fff; font-weight: 600; }
.menu a.ativo .ic { opacity: 1; }
.menu .ic { width: 18px; text-align: center; opacity: .6; font-size: .95rem; }
.menu .selo {
  margin-left: auto; background: var(--laranja); color: #fff;
  font-size: .66rem; font-weight: 700; padding: .05rem .38rem; border-radius: 20px; min-width: 19px; text-align: center;
}
.menu a.ativo .selo { background: rgba(255,255,255,.25); }

.lateral-pe { border-top: 1px solid var(--linha); padding: .75rem; }
.eu { display: flex; align-items: center; gap: .6rem; }
.eu .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--marinho); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .8rem;
}
.eu .nome { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu .papel { font-size: .7rem; color: var(--tinta-3); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  background: var(--branco); border-bottom: 1px solid var(--linha);
  padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
.topo .titulo { flex: 1; min-width: 200px; }
.topo .titulo p { margin: .1rem 0 0; color: var(--tinta-3); font-size: .82rem; }
.conteudo { padding: 1.5rem; flex: 1; }
.conteudo > * + * { margin-top: 1.1rem; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto;
    flex-direction: row; border-right: 0; border-top: 1px solid var(--linha);
    z-index: 40; box-shadow: 0 -2px 16px rgba(3,48,103,.08);
  }
  .lateral-topo, .lateral-pe, .menu-grupo { display: none; }
  .menu { display: flex; padding: .3rem; gap: .15rem; overflow-x: auto; }
  .menu a { flex-direction: column; gap: .15rem; font-size: .62rem; padding: .45rem .3rem; min-width: 62px; text-align: center; }
  .menu a .ic { font-size: 1.1rem; }
  .menu .rotulo-longo { display: none; }
  .menu .selo { position: absolute; top: .15rem; right: .5rem; margin: 0; }
  .conteudo { padding: 1rem; padding-bottom: 5.5rem; }
  .topo { padding: .85rem 1rem; }
}

/* ------------------------------------------------------------------ cartão */

.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-topo { padding: .9rem 1.1rem; border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cartao-topo h2, .cartao-topo h3 { flex: 1; min-width: 140px; }
.cartao-topo .dica { color: var(--tinta-3); font-size: .78rem; font-weight: 400; margin: .12rem 0 0; }
.cartao-corpo { padding: 1.1rem; }
.cartao-corpo.solto > * + * { margin-top: .9rem; }

.grade { display: grid; gap: 1.1rem; }
.grade.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grade.g3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grade.g4 { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }

/* ---------------------------------------------------------------- números */

.numero { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .95rem 1.05rem; box-shadow: var(--sombra); }
.numero .rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); font-weight: 700; }
.numero .valor { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-top: .25rem; }
.numero .nota { font-size: .76rem; color: var(--tinta-3); margin-top: .1rem; }
.numero.destaque { border-color: var(--marinho); }
.numero.alerta .valor { color: var(--laranja); }
.numero.ruim .valor { color: var(--vermelho); }
.numero.bom .valor { color: var(--verde); }

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

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1rem; border-radius: var(--raio-p); border: 1px solid transparent;
  background: var(--marinho); color: #fff; font: inherit; font-weight: 600; font-size: .86rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, transform .04s;
}
.botao:hover { background: var(--marinho-claro); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.botao.claro { background: var(--branco); border-color: var(--linha-forte); color: var(--tinta); }
.botao.claro:hover { background: var(--fundo); border-color: var(--tinta-3); }
.botao.ciano { background: var(--ciano); }
.botao.ciano:hover { background: #0894c4; }
.botao.verde { background: var(--verde); }
.botao.verde:hover { background: #0b7350; }
.botao.vermelho { background: var(--vermelho); }
.botao.vermelho:hover { background: #a91f1f; }
.botao.laranja { background: var(--laranja); }
.botao.laranja:hover { background: #d25c06; }
.botao.p { padding: .34rem .65rem; font-size: .78rem; }
.botao.g { padding: .75rem 1.3rem; font-size: .95rem; width: 100%; }
.botao.fantasma { background: transparent; color: var(--tinta-2); }
.botao.fantasma:hover { background: var(--fundo); }

.acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.acoes.fim { justify-content: flex-end; }

/* ------------------------------------------------------------------ campos */

.campo { display: block; margin-bottom: .85rem; }
.campo > span { display: block; font-size: .78rem; font-weight: 600; color: var(--tinta-2); margin-bottom: .3rem; }
.campo > .ajuda { font-weight: 400; color: var(--tinta-3); font-size: .74rem; margin: .25rem 0 0; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], select, textarea {
  width: 100%; padding: .55rem .7rem; font: inherit; font-size: .88rem;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  background: var(--branco); color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ciano); box-shadow: 0 0 0 3px var(--ciano-claro);
}
textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%), linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.linha-campos { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.marca-caixa { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; margin-bottom: .5rem; cursor: pointer; }
.marca-caixa input { margin-top: .2rem; flex: none; }

.dias { display: flex; gap: .3rem; flex-wrap: wrap; }
.dias label {
  display: grid; place-items: center; width: 40px; height: 38px; cursor: pointer;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  font-size: .78rem; font-weight: 600; color: var(--tinta-2); background: var(--branco);
}
.dias input { position: absolute; opacity: 0; width: 0; }
.dias label:has(input:checked) { background: var(--marinho); border-color: var(--marinho); color: #fff; }

/* ------------------------------------------------------------------ selos */

.selo-status {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; padding: .16rem .5rem; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.s-pendente { background: var(--fundo); color: var(--tinta-2); border: 1px solid var(--linha-forte); }
.s-entregue { background: var(--ciano-claro); color: #06718f; }
.s-aprovada { background: var(--verde-claro); color: var(--verde); }
.s-reprovada { background: var(--vermelho-claro); color: var(--vermelho); }
.s-correcao { background: var(--amarelo-claro); color: var(--amarelo); }
.s-nao_realizada { background: var(--vermelho-claro); color: var(--vermelho); }
.s-dispensada { background: var(--fundo); color: var(--tinta-3); border: 1px solid var(--linha); }
.s-atrasada { background: var(--laranja-claro); color: var(--laranja); }

.peso { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; color: var(--marinho); background: #eef3f9; padding: .16rem .45rem; border-radius: 20px; }
.peso.alto { background: var(--laranja-claro); color: var(--laranja); }

.etiqueta { display: inline-block; font-size: .7rem; font-weight: 600; padding: .12rem .45rem; border-radius: 4px; background: var(--fundo); color: var(--tinta-2); }

/* ------------------------------------------------- agenda (a tela da gerente) */

.dia-cabeca { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.dia-nav { display: flex; gap: .3rem; }

.faixa-progresso { height: 8px; background: var(--linha); border-radius: 20px; overflow: hidden; display: flex; }
.faixa-progresso i { display: block; height: 100%; }
.faixa-progresso .f-aprovada { background: var(--verde); }
.faixa-progresso .f-entregue { background: var(--ciano); }
.faixa-progresso .f-reprovada { background: var(--vermelho); }
.faixa-progresso .f-nao_realizada { background: #d9534f; }

.agenda { display: grid; gap: .7rem; }
.hora-bloco { display: grid; grid-template-columns: 58px 1fr; gap: .8rem; }
.hora-bloco .hora {
  font-size: .8rem; font-weight: 800; color: var(--tinta-3); padding-top: .95rem;
  text-align: right; letter-spacing: -.01em;
}
.hora-bloco .itens { display: grid; gap: .6rem; min-width: 0; }

.tarefa {
  background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--linha-forte);
  border-radius: var(--raio); padding: .85rem 1rem; box-shadow: var(--sombra);
  display: grid; gap: .5rem; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.tarefa:hover { box-shadow: var(--sombra-alta); }
.tarefa.st-pendente { border-left-color: var(--tinta-3); }
.tarefa.st-entregue { border-left-color: var(--ciano); }
.tarefa.st-aprovada { border-left-color: var(--verde); background: #fbfefc; }
.tarefa.st-reprovada, .tarefa.st-nao_realizada { border-left-color: var(--vermelho); }
.tarefa.st-correcao { border-left-color: var(--amarelo); }
.tarefa.st-dispensada { border-left-color: var(--linha-forte); opacity: .6; }
.tarefa.urgente { border-left-color: var(--laranja); }

.tarefa .cabeca { display: flex; align-items: flex-start; gap: .6rem; }
.tarefa .cabeca h3 { flex: 1; font-size: .95rem; min-width: 0; }
.tarefa .meta { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; font-size: .76rem; color: var(--tinta-3); }
.tarefa .meta .sep { opacity: .4; }
.tarefa .resumo { font-size: .82rem; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarefa .pe { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

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

.vazio { text-align: center; padding: 2.5rem 1rem; color: var(--tinta-3); }
.vazio .icone { font-size: 2rem; opacity: .5; display: block; margin-bottom: .5rem; }
.vazio strong { display: block; color: var(--tinta-2); font-size: 1rem; margin-bottom: .25rem; }
.vazio p { font-size: .85rem; max-width: 380px; margin: 0 auto; }

/* ------------------------------------------------------------------ tabela */

.tabela-rolo { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.tabela th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-3); font-weight: 700; padding: .55rem .7rem; border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
table.tabela td { padding: .62rem .7rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.tabela tr:last-child td { border-bottom: 0; }
table.tabela tbody tr:hover { background: #fafcfe; }
table.tabela td.num, table.tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabela .principal-col { font-weight: 600; }

.barra-mini { height: 6px; background: var(--linha); border-radius: 20px; overflow: hidden; min-width: 60px; }
.barra-mini i { display: block; height: 100%; background: var(--ciano); }
.barra-mini.bom i { background: var(--verde); }
.barra-mini.medio i { background: var(--laranja); }
.barra-mini.ruim i { background: var(--vermelho); }

.posicao { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fundo); font-size: .75rem; font-weight: 800; color: var(--tinta-2); }
.posicao.p1 { background: #fdf3d6; color: #9a7100; }
.posicao.p2 { background: #eef1f4; color: #667788; }
.posicao.p3 { background: #f7ece4; color: #9c6034; }

/* ------------------------------------------------------------- evidências */

.evidencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .6rem; }
.evidencia {
  position: relative; border: 1px solid var(--linha); border-radius: var(--raio-p);
  overflow: hidden; background: var(--fundo); aspect-ratio: 1; display: grid; place-items: center;
}
.evidencia img, .evidencia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.evidencia .tipo { position: absolute; top: .3rem; left: .3rem; background: rgba(0,0,0,.62); color: #fff; font-size: .62rem; padding: .08rem .3rem; border-radius: 4px; font-weight: 700; text-transform: uppercase; }
.evidencia .apagar {
  position: absolute; top: .3rem; right: .3rem; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.62); color: #fff; border: 0; cursor: pointer; font-size: .75rem; line-height: 1; display: grid; place-items: center;
}
.evidencia .texto-corpo { padding: .55rem; font-size: .74rem; color: var(--tinta-2); overflow: auto; height: 100%; width: 100%; }
.evidencia.reuso { border-color: var(--laranja); border-width: 2px; }
.evidencia .aviso-reuso { position: absolute; bottom: 0; left: 0; right: 0; background: var(--laranja); color: #fff; font-size: .6rem; font-weight: 700; padding: .18rem .3rem; text-align: center; }

.solta-arquivo {
  border: 2px dashed var(--linha-forte); border-radius: var(--raio); padding: 1.2rem;
  text-align: center; color: var(--tinta-3); font-size: .84rem; cursor: pointer; background: var(--branco);
}
.solta-arquivo:hover, .solta-arquivo.sobre { border-color: var(--ciano); background: var(--ciano-claro); color: var(--marinho); }

/* -------------------------------------------------------------- modal/aviso */

.modal-fundo {
  position: fixed; inset: 0; background: rgba(3, 34, 74, .45); z-index: 100;
  display: grid; place-items: center; padding: 1rem; overflow-y: auto;
}
.modal {
  background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra-alta);
  width: 100%; max-width: 620px; max-height: 92vh; display: flex; flex-direction: column;
}
.modal.largo { max-width: 900px; }
.modal-topo { padding: 1rem 1.2rem; border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: .7rem; }
.modal-topo h2 { flex: 1; }
.modal-corpo { padding: 1.2rem; overflow-y: auto; flex: 1; }
.modal-pe { padding: .85rem 1.2rem; border-top: 1px solid var(--linha); display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.fechar { background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--tinta-3); cursor: pointer; padding: .1rem .3rem; }
.fechar:hover { color: var(--tinta); }

.avisos { position: fixed; bottom: 1rem; right: 1rem; z-index: 200; display: grid; gap: .5rem; max-width: 380px; }
@media (max-width: 900px) { .avisos { bottom: 5rem; left: 1rem; right: 1rem; max-width: none; } }
.aviso {
  background: var(--tinta); color: #fff; padding: .7rem .9rem; border-radius: var(--raio-p);
  font-size: .85rem; box-shadow: var(--sombra-alta); animation: entra .18s ease-out;
}
.aviso.erro { background: var(--vermelho); }
.aviso.ok { background: var(--verde); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- gráficos */

.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .eixo { stroke: var(--linha); stroke-width: 1; }
.grafico .rotulo { font-size: 10px; fill: var(--tinta-3); }
.grafico .linha { fill: none; stroke: var(--ciano); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area { fill: var(--ciano); opacity: .1; }
.grafico .ponto { fill: var(--ciano); }
.grafico .barra { fill: var(--marinho); }
.grafico .barra.baixa { fill: var(--vermelho); }
.grafico .barra.media { fill: var(--laranja); }

.legenda { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .76rem; color: var(--tinta-2); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }

/* --------------------------------------------------------------- utilidades */

.pilha { display: grid; gap: .7rem; }
.pilha.p { gap: .4rem; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.fileira { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cresce { flex: 1; min-width: 0; }
.mudo { color: var(--tinta-3); }
.p-menor { font-size: .8rem; }
.p-mini { font-size: .73rem; }
.forte { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.nada { display: none !important; }
.rolo { max-height: 420px; overflow-y: auto; }
.divisor { height: 1px; background: var(--linha); border: 0; margin: .3rem 0; }

.aviso-caixa { border-radius: var(--raio-p); padding: .7rem .85rem; font-size: .83rem; display: flex; gap: .55rem; align-items: flex-start; }
.aviso-caixa.laranja { background: var(--laranja-claro); color: #8a3d04; }
.aviso-caixa.vermelho { background: var(--vermelho-claro); color: #8c1d1d; }
.aviso-caixa.ciano { background: var(--ciano-claro); color: #05617a; }
.aviso-caixa.verde { background: var(--verde-claro); color: #0a5e42; }
.aviso-caixa.cinza { background: var(--fundo); color: var(--tinta-2); border: 1px solid var(--linha); }

.linha-tempo { display: grid; gap: .55rem; font-size: .8rem; }
.linha-tempo .ev { display: grid; grid-template-columns: 8px 1fr; gap: .6rem; align-items: start; }
.linha-tempo .ev i { width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); margin-top: .38rem; }
.linha-tempo .ev .quando { color: var(--tinta-3); font-size: .72rem; }

.abas { display: flex; gap: .2rem; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.abas button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .8rem;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--tinta-3); cursor: pointer; white-space: nowrap;
}
.abas button.ativo { color: var(--marinho); border-bottom-color: var(--marinho); }
.abas button:hover { color: var(--tinta); }

@media print {
  .lateral, .topo .acoes, .botao { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .cartao { break-inside: avoid; box-shadow: none; }
}