/* Projeto FoMO, tempo de tela.
   Paleta em tons de teal e âmbar, fundo com malha discreta e cartões elevados.
   Tudo em CSS puro, sem fontes ou imagens externas, para manter a CSP fechada. */
:root {
  --fundo: #eef1f3;
  --fundo-2: #e4eaec;
  --cartao: #ffffff;
  --texto: #14202a;
  --suave: #5a6b78;
  --linha: #d8e0e4;
  --marca: #13646d;
  --marca-forte: #0f3d43;
  --marca-2: #d7ecec;
  --alt: #b3702d;
  --alt-2: #f2e2cd;
  --perigo: #a4312a;
  --ok: #2c7a3f;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(16, 38, 45, .06), 0 8px 24px rgba(16, 38, 45, .07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0e1418; --fundo-2: #121a20; --cartao: #182129; --texto: #e6ecef; --suave: #9fb0bb;
    --linha: #27333c; --marca: #56b9c0; --marca-forte: #0c2e33; --marca-2: #16353a;
    --alt: #e0a060; --alt-2: #3a2e1d; --perigo: #ef7d74; --ok: #6cc585;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--texto); background: var(--fundo);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}
/* malha e brilhos ao fundo, puramente decorativos */
.fundo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 40vh at 12% -5%, color-mix(in srgb, var(--marca) 22%, transparent), transparent 70%),
    radial-gradient(50vw 35vh at 100% 0%, color-mix(in srgb, var(--alt) 16%, transparent), transparent 65%),
    linear-gradient(var(--linha) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, var(--linha) 1px, transparent 1px) 0 0 / 42px 100%,
    linear-gradient(180deg, var(--fundo), var(--fundo-2));
  opacity: .55;
  mask-image: linear-gradient(180deg, #000 0, #000 60vh, transparent 120vh);
}
a { color: var(--marca); text-underline-offset: 2px; }
h1 { font-size: clamp(1.35rem, 4vw, 1.7rem); line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.01em; }
h1 small { font-weight: 400; color: var(--suave); font-size: 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .6rem; display: flex; align-items: center; gap: .45rem; }

/* ---------------------------------------------------------------- ícones */
.sprite { display: none; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
h3 .ic { color: var(--marca); width: 1.25em; height: 1.25em; }

/* ---------------------------------------------------------------- cabeçalho */
.topo { background: linear-gradient(120deg, var(--marca-forte), var(--marca)); color: #fff;
  box-shadow: 0 2px 20px rgba(9, 38, 43, .25); position: relative; overflow: hidden; }
.topo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30rem 12rem at 85% -60%, rgba(255, 255, 255, .28), transparent 70%); }
body.equipe .topo { background: linear-gradient(120deg, #1b2530, #2f3d4c); }
.topo-in { max-width: 1020px; margin: 0 auto; padding: .75rem 16px; display: flex; flex-wrap: wrap;
  gap: .5rem 1rem; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.marca { color: #fff; text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.marca-ic { width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }
.marca-txt span { font-weight: 400; opacity: .85; }
.topo nav { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.topo nav a, .topo nav .link { color: #fff; opacity: .92; text-decoration: none; font-size: .95rem;
  padding: .2rem .1rem; border-bottom: 2px solid transparent; }
.topo nav a:hover { opacity: 1; border-bottom-color: rgba(255, 255, 255, .6); }

.pagina { max-width: 1020px; margin: 0 auto; padding: 20px 16px 8px; }
.rodape { max-width: 1020px; margin: 0 auto; padding: 8px 16px 40px; color: var(--suave); font-size: .82rem; }

/* ---------------------------------------------------------------- cartões */
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 20px; margin-bottom: 18px; box-shadow: var(--sombra); overflow-x: auto; }
.cartao.destaque { border-left: 4px solid var(--marca);
  background: linear-gradient(180deg, color-mix(in srgb, var(--marca-2) 55%, var(--cartao)), var(--cartao) 55%); }
.cartao.estreito { max-width: 430px; margin: 28px auto; }
.perigo-borda { border-color: color-mix(in srgb, var(--perigo) 45%, var(--linha)); }
.nota { color: var(--suave); font-size: .9rem; }
.selo { display: inline-block; background: var(--marca-2); color: var(--texto); border-radius: 99px;
  padding: .12rem .7rem; font-size: .8rem; }
.avisos .aviso, p.aviso { display: flex; gap: .5rem; align-items: flex-start; background: #fff4d6; color: #5a4300;
  border: 1px solid #e8cf82; border-radius: 10px; padding: .65rem .85rem; }
@media (prefers-color-scheme: dark) {
  .avisos .aviso, p.aviso { background: #3a3218; color: #f3dc9a; border-color: #6a5a24; }
}

/* ---------------------------------------------------------------- formulários */
label { display: block; margin: .6rem 0; font-size: .95rem; }
input, select, textarea { font: inherit; color: inherit; background: var(--cartao); width: 100%; margin-top: .3rem;
  padding: .62rem .75rem; border: 1px solid var(--linha); border-radius: 10px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent); outline-offset: 2px; }
input[type=checkbox], input[type=radio] { width: auto; margin: .25rem .55rem 0 0; flex: none; accent-color: var(--marca); }
input[type=range] { padding: 0; accent-color: var(--marca); }
fieldset { border: 1px solid var(--linha); border-radius: 10px; margin: .9rem 0; padding: .4rem .95rem .75rem; }
legend { font-weight: 600; padding: 0 .35rem; }
.opcao { display: flex; align-items: flex-start; }
input.codigo { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; font-size: 1.1rem; }
.codigo-grande { font-family: ui-monospace, Consolas, monospace; font-size: clamp(1.2rem, 6vw, 2rem); font-weight: 700;
  letter-spacing: .06em; text-align: center; word-break: break-all; user-select: all; padding: .8rem;
  border-radius: 12px; background: linear-gradient(120deg, var(--marca-2), color-mix(in srgb, var(--alt-2) 60%, var(--marca-2)));
  border: 1px dashed color-mix(in srgb, var(--marca) 40%, transparent); }

.botao { display: inline-flex; align-items: center; gap: .45rem; background: var(--marca); color: #fff; border: 0;
  border-radius: 10px; padding: .7rem 1.15rem; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; margin-top: .5rem; box-shadow: 0 6px 16px rgba(19, 100, 109, .22); }
.botao:hover { filter: brightness(1.06); }
.botao:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.botao.secundario { background: transparent; color: var(--marca); border: 1.5px solid var(--marca); box-shadow: none; }
.botao.perigo { background: var(--perigo); box-shadow: none; }
.botao.confirma { background: var(--ok); box-shadow: none; }
.botao.pequeno { padding: .42rem .8rem; font-size: .9rem; }
.botao.arquivo { cursor: pointer; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--marca); cursor: pointer; text-decoration: underline; }
.link.perigo { color: var(--perigo); }
form.inline { display: inline; }
.acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.linha { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.linha input { flex: 1 1 240px; }
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1rem; }
.passos { padding-left: 1.2rem; }
.passos li { margin-bottom: .3rem; }
.guia { border: 1px solid var(--linha); border-radius: 10px; padding: .7rem .95rem; margin: .9rem 0;
  background: color-mix(in srgb, var(--marca-2) 35%, transparent); }
details summary { cursor: pointer; font-weight: 600; }

/* ---------------------------------------------------------------- editor de imagem */
.ferramentas { display: flex; gap: .5rem; flex-wrap: wrap; }
.cortes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tela { margin: .7rem 0 1rem; text-align: center; border-radius: 12px; padding: 8px;
  background: repeating-conic-gradient(color-mix(in srgb, var(--linha) 55%, transparent) 0 25%, transparent 0 50%) 0 0 / 18px 18px; }
#canvas { max-width: 100%; max-height: 75vh; touch-action: none; cursor: crosshair; border-radius: 8px;
  box-shadow: var(--sombra); }
.status { font-weight: 600; min-height: 1.4em; }

/* ---------------------------------------------------------------- tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td { text-align: left; padding: .5rem .45rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela th { color: var(--suave); font-weight: 600; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--marca-2) 35%, transparent); }
.tabela.compacta { font-size: .86rem; }
tr.vencendo td { background: var(--alt-2); }
.st { font-size: .82rem; border-radius: 99px; padding: .12rem .6rem; background: var(--marca-2); white-space: nowrap; }
.st-rejeitado, .st-expirado { background: #f3d4d1; color: #6d1f19; }
.st-conferido { background: #d3ecd9; color: #1d4d29; }

/* ---------------------------------------------------------------- números e gráficos */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1rem 0; }
.num-card { position: relative; border-radius: 12px; padding: .85rem .9rem; font-size: .82rem; color: var(--suave);
  background: linear-gradient(160deg, var(--marca-2), color-mix(in srgb, var(--cartao) 70%, var(--marca-2)));
  border: 1px solid color-mix(in srgb, var(--marca) 18%, var(--linha)); }
.num-card .ic { position: absolute; top: .7rem; right: .7rem; color: var(--marca); opacity: .65;
  width: 1.3rem; height: 1.3rem; }
.num-card span { display: block; font-size: 1.28rem; font-weight: 700; color: var(--texto); line-height: 1.25; }
.tendencia { display: flex; gap: .5rem; align-items: center; background: color-mix(in srgb, var(--marca-2) 50%, transparent);
  border-radius: 10px; padding: .6rem .8rem; font-size: .93rem; }
.tendencia.sobe .ic { color: var(--alt); }
.tendencia.desce .ic { color: var(--ok); }

.grafico { margin: .4rem 0 1rem; }
.linha-tempo { width: 100%; height: auto; overflow: visible; }
.linha-tempo .grade { stroke: var(--linha); stroke-width: 1; }
.linha-tempo .rot-eixo { fill: var(--suave); font-size: 11px; }
.linha-tempo .rot-eixo.fim { text-anchor: end; }
.linha-tempo .traco { fill: none; stroke: var(--marca); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.linha-tempo .area { fill: url(#grad-area); opacity: .85; }
.linha-tempo .g0 { stop-color: var(--marca); stop-opacity: .35; }
.linha-tempo .g1 { stop-color: var(--marca); stop-opacity: 0; }
.linha-tempo .ponto { fill: var(--cartao); stroke: var(--marca); stroke-width: 2.2; }

.barras { display: grid; gap: .4rem; }
.barra-linha { display: grid; grid-template-columns: minmax(96px, 30%) 1fr auto; gap: .6rem; align-items: center; font-size: .88rem; }
.barra-linha .rot { overflow: hidden; text-overflow: ellipsis; }
.barra-linha .rot small { color: var(--suave); }
.trilho { background: color-mix(in srgb, var(--linha) 75%, transparent); border-radius: 6px; height: 13px; overflow: hidden; }
.valor { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--marca), color-mix(in srgb, var(--marca) 55%, #7fd6cf)); }
.valor.alt { background: linear-gradient(90deg, var(--alt), color-mix(in srgb, var(--alt) 55%, #f0c48a)); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta { font-style: normal; font-size: .8rem; padding: .05rem .35rem; border-radius: 99px; margin-left: .25rem; }
.delta.sobe { background: var(--alt-2); color: #7a4a12; }
.delta.desce { background: #d3ecd9; color: #1d4d29; }

.evolucao { display: grid; gap: .5rem; }
.evo-linha { display: grid; grid-template-columns: minmax(96px, 26%) 1fr; gap: .6rem; align-items: end; font-size: .88rem; }
.colunas { display: flex; gap: 3px; align-items: flex-end; height: 44px; }
.coluna { flex: 1; height: 100%; display: flex; align-items: flex-end;
  background: color-mix(in srgb, var(--linha) 45%, transparent); border-radius: 4px; }
.haste { width: 100%; background: linear-gradient(180deg, var(--marca), color-mix(in srgb, var(--marca) 45%, #7fd6cf));
  border-radius: 4px; min-height: 2px; }

.notas { margin: .4rem 0; }
.notas dt { font-weight: 600; font-size: .85rem; color: var(--suave); }
.notas dd { margin: 0 0 .7rem; padding-left: .9rem; border-left: 3px solid var(--marca-2); }
.registros { margin-top: 1.2rem; }

/* ---------------------------------------------------------------- extração */
.lado-a-lado { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 880px) { .lado-a-lado { grid-template-columns: minmax(280px, 40%) 1fr; } }
.imagem-print img { width: 100%; border-radius: 10px; cursor: zoom-in; box-shadow: var(--sombra); }
.imagem-print img.ampliada { position: fixed; inset: 0; width: auto; max-width: 100vw; max-height: 100vh; margin: auto;
  z-index: 10; background: #000c; cursor: zoom-out; object-fit: contain; height: 100vh; border-radius: 0; }
.hm-campos { display: flex; align-items: center; gap: .4rem; }
.hm-campos input { width: 5.5rem; margin: 0; }
.app-linha { display: grid; grid-template-columns: 1fr 1fr 4.2rem 4.2rem 1.6rem; gap: .35rem; margin-bottom: .4rem; align-items: center; }
.app-linha input, .app-linha select { margin: 0; padding: .45rem; }
@media (max-width: 540px) { .app-linha { grid-template-columns: 1fr 1fr; } }
.rejeicao { margin-top: 1.3rem; border-top: 1px dashed var(--linha); padding-top: .9rem; }
.termo ul { padding-left: 1.2rem; }
.termo li { margin-bottom: .55rem; }
code { background: var(--marca-2); padding: .1rem .35rem; border-radius: 5px; font-size: .9em; }
.obrig { font-size: .72rem; color: var(--suave); background: var(--marca-2); border-radius: 99px; padding: .05rem .45rem; }
.ficha-resumo { display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: .86rem; color: var(--suave); }
.ficha-resumo span { background: color-mix(in srgb, var(--marca-2) 60%, transparent); border-radius: 99px; padding: .1rem .6rem; }
.microdiario textarea { min-height: 4.5rem; }
.notas dd.complementar { border-left-color: var(--alt); }
.notas .foco { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--alt); }
h2.bloco { margin: 1.6rem 0 .3rem; padding-top: .8rem; border-top: 2px solid var(--marca-2); color: var(--marca); }
label.sub { margin: -.2rem 0 .5rem 1.6rem; font-size: .9rem; }