/* Padrão visual do site da FeedTempo (site/assets/css/styles.css), aplicado a uma tela de operação. */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/estatico/bricolage.woff2") format("woff2");
}
:root {
  --bg: oklch(1 0 0);
  --ink: oklch(0.2 0.006 150);
  --ink-soft: oklch(0.42 0.01 150);
  --brand: oklch(0.47 0.12 150);
  --brand-strong: oklch(0.4 0.11 150);
  --brand-ink: oklch(1 0 0);
  --brand-soft: oklch(0.955 0.025 150);
  --line: oklch(0.92 0.008 150);
  --campo: oklch(0.8 0.012 150);
  --surface: oklch(0.975 0.004 150);
  --post-butter: oklch(0.88 0.15 98);
  --ambar-fundo: oklch(0.955 0.07 98);
  --ambar-tinta: oklch(0.42 0.09 80);
  --tomate-fundo: oklch(0.945 0.035 35);
  --tomate-tinta: oklch(0.47 0.17 32);
  --r-card: 20px;
  --r-ui: 12px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 2.5vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-color: var(--campo) transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 1rem; line-height: 1.5; font-optical-sizing: auto; caret-color: var(--brand); }
::selection { background: var(--brand-soft); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
a, button { touch-action: manipulation; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0; text-wrap: pretty; }
small { display: block; color: var(--ink-soft); font-size: 0.875rem; font-weight: 400; }
code { background: var(--brand-soft); color: var(--brand-strong); padding: 0.1em 0.45em; border-radius: 6px; font-weight: 600; }
h1, h2, h3 { font-weight: 800; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: 1.33rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1.1rem; }

.logo { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; text-decoration: none; }
.logo__mark { position: relative; display: block; width: 22px; height: 26px; }
.logo__mark span { position: absolute; inset: 0; border-radius: 6px; background: var(--brand); }
.logo__mark span:first-child { background: var(--post-butter); transform: rotate(-12deg) translate(-3px, 1px); }
.icon { display: block; width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }

/* Páginas sem sessão (erro) */
.faixa { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; }
.topo { border-bottom: 1px solid var(--line); }
.topo .faixa { display: flex; align-items: center; min-height: 64px; }
.conteudo { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) 4rem; }

/* Estrutura: barra lateral, lista e cliente aberto */
.app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.app.com-detalhe { grid-template-columns: 224px minmax(0, 1fr) minmax(500px, 40%); }
.lateral { position: sticky; top: 0; display: flex; flex-direction: column; gap: 22px; height: 100vh; height: 100dvh; padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--line); }
.lateral .logo { padding: 0 8px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.7rem; border-radius: 10px; color: var(--ink-soft); font-weight: 600; text-decoration: none; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.lateral nav a[aria-current] { background: var(--brand-soft); color: var(--brand-strong); }
.rodape { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding: 8px; font-weight: 600; min-width: 0; }
.rodape form { margin: 0; }
.rodape button.link { min-height: 28px; padding: 0; font-size: 0.875rem; font-weight: 500; }
.principal { min-width: 0; padding: clamp(1.25rem, 2.5vw, 2.25rem); }

.av { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in oklch, var(--c) 28%, white); color: oklch(0.28 0.05 150); font-weight: 800; font-size: 0.85rem; letter-spacing: -0.02em; }
.c0 { --c: #f3d34a; } .c1 { --c: #1e6b45; } .c2 { --c: #e8896b; } .c3 { --c: #8fc6e8; } .c4 { --c: #c5a3e0; } .c5 { --c: #ee9fc0; }

/* Lista de clientes */
.cab { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.cab p { margin-top: 0.3rem; color: var(--ink-soft); }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; }
.fil { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0 0.85rem; border-radius: 999px; color: var(--ink-soft); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 200ms var(--ease-out); }
.fil[aria-current] { color: var(--brand-strong); background: var(--brand-soft); box-shadow: none; }
.fil b { font-weight: 800; }
form.busca { flex: 1 1 170px; min-width: 0; margin: 0; }
.busca input { min-height: 40px; margin: 0; padding: 0.4rem 0.8rem; }
.lista-clientes { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.lista-clientes th { text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.lista-clientes td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lista-clientes tbody tr:last-child td { border-bottom: 0; }
.lista-clientes tbody tr { position: relative; }
.lista-clientes tbody tr.on td { background: var(--brand-soft); }
.cliente-link { display: flex; align-items: center; gap: 0.7rem; min-width: 0; text-decoration: none; }
a.cliente-link::after { content: ""; position: absolute; inset: 0; }
.nome { flex: 1; min-width: 0; }
.nome strong { display: block; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.nome small { overflow-wrap: anywhere; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

.selo { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; background: var(--surface); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
.selo-em_dia { background: var(--brand-soft); color: var(--brand-strong); box-shadow: none; }
.selo-vence_logo, .selo-cancelado { background: var(--ambar-fundo); color: var(--ambar-tinta); box-shadow: none; }
.selo-atrasado { background: var(--tomate-fundo); color: var(--tomate-tinta); box-shadow: none; }

/* Cliente aberto */
section { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); }
section.detalhe { border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.4vw, 2.75rem) clamp(1.5rem, 2.4vw, 2.75rem); }
.botao.fechar { display: none; }
.det-cab { display: flex; align-items: flex-start; gap: 0.8rem; }
.det-cab > div { flex: 1 1 0; min-width: 0; }
.det-cab .av { width: 56px; height: 56px; font-size: 1.15rem; border-radius: 16px; }
.det-cab h2 { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.det-cab p { color: var(--ink-soft); overflow-wrap: anywhere; }
.previa { margin: 1.75rem 0 1rem; padding: 0.9rem 1.1rem; background: var(--brand-soft); border-radius: 16px 16px 16px 4px; line-height: 1.45; overflow-wrap: anywhere; }
.nada { margin: 1.75rem 0 1rem; color: var(--ink-soft); }
.botoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.botoes form { margin: 0; }
.fatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2.25rem 0 1rem; padding: 1.25rem 0; border-block: 1px solid var(--line); }
.fatos dt { color: var(--ink-soft); font-size: 0.875rem; }
.fatos dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.conta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; color: var(--ink-soft); font-weight: 600; }
.conta form { margin: 0; }
.conta a, .conta button.texto { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font: inherit; color: inherit; background: none; text-decoration: none; }
.conta a.q { color: var(--tomate-tinta); }

/* Entrada */
.dividido { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; min-height: 100dvh; }
.dividido form { align-self: center; justify-self: center; width: min(100% - 40px, 380px); margin: 0; }
.dividido h1 { margin: 2.5rem 0 1.75rem; font-size: 3rem; }
.dividido button { width: 100%; min-height: 52px; margin-top: 0.25rem; }
.dividido .aviso { font-size: 0.95rem; line-height: 1.35; }
.vitrine { position: relative; overflow: hidden; background: var(--brand-soft); }
.janela { position: absolute; top: 14%; left: 9%; width: 1000px; background: var(--bg); border-radius: 16px; box-shadow: 0 2px 4px oklch(0.4 0.05 150 / 0.14), 0 30px 70px oklch(0.4 0.05 150 / 0.2); font-size: 0.92rem; }
.janela .barra { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.janela .barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.janela .lista-clientes { border: 0; }

/* Tabelas de consulta */
table.clientes { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-top: 1.25rem; }
.clientes th { text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); background: var(--surface); padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--line); }
.clientes td { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.clientes tbody tr:last-child td { border-bottom: 0; }

.aviso { padding: 0.75rem 1rem; border-radius: var(--r-ui); margin-bottom: 1.25rem; font-weight: 500; }
.aviso.ok { background: var(--brand-soft); color: var(--brand-strong); }
.aviso.erro { background: var(--tomate-fundo); color: var(--tomate-tinta); }

/* Formulários e páginas de ação */
.voltar { margin-bottom: 0.9rem; font-size: 0.95rem; color: var(--ink-soft); }
.titulo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1.5rem; }
.titulo form { margin: 0; }
.config { max-width: 620px; margin-top: 1.75rem; }
.config .situacoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.config p { margin-bottom: 0.75rem; color: var(--ink-soft); }
.config code { display: block; margin-bottom: 1.25rem; padding: 0.6rem 0.8rem; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.estreita { display: grid; gap: 1rem; max-width: 560px; margin-top: 1.25rem; }
form { margin: 0 0 1.25rem; }
form:last-child { margin-bottom: 0; }
label { display: block; font-weight: 600; margin-bottom: 1rem; }
input, select, textarea { display: block; width: 100%; margin-top: 0.35rem; min-height: 48px; padding: 0.7rem 0.9rem; font: inherit; font-weight: 400; color: var(--ink); background: var(--bg); border: 1.5px solid var(--campo); border-radius: var(--r-ui); transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
textarea { resize: vertical; line-height: 1.45; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input::placeholder { color: var(--ink-soft); }
input[type=checkbox] { accent-color: var(--brand); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.marcar { display: flex; align-items: center; gap: 0.55rem; font-weight: 400; min-height: 44px; margin-bottom: 0.4rem; }
.marcar input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; }

button, .botao { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0 1.4rem; font: inherit; font-weight: 700; color: var(--brand-ink); background: var(--brand); border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; user-select: none; -webkit-user-select: none; transition: background-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
button:active, .botao:active { transform: scale(0.98); }
button.secundario, .botao.secundario { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--campo); }
button.link { color: var(--ink-soft); background: none; }
button.perigo { background: var(--tomate-tinta); }
@media (hover: hover) and (pointer: fine) {
  button:hover, .botao:hover { background: var(--brand-strong); }
  button.secundario:hover, .botao.secundario:hover { background: var(--surface); }
  button.link:hover { background: none; color: var(--ink); text-decoration: underline; }
  button.perigo:hover { background: oklch(0.41 0.16 32); }
  .lateral nav a:hover { color: var(--ink); background: var(--line); }
  .lateral nav a[aria-current]:hover { color: var(--brand-strong); background: var(--brand-soft); }
  .fil:not([aria-current]):hover { background: var(--surface); }
  .lista-clientes tbody tr:hover td { background: var(--surface); }
  .lista-clientes tbody tr.on:hover td { background: var(--brand-soft); }
  .clientes tbody tr:hover td { background: var(--surface); }
  .conta a:hover, .conta button.texto:hover { color: var(--ink); background: none; text-decoration: underline; }
  .conta a.q:hover { color: var(--tomate-tinta); }
  .voltar a:hover { color: var(--brand-strong); }
}
.dica { display: block; margin-top: 0.4rem; font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--ink-soft); }
.lista { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; color: var(--ink-soft); }
.lista li { padding: 0.2rem 0; }
.lote { margin-bottom: 1.25rem; color: var(--ink); }
.linha { display: flex; gap: 0.5rem; margin: 0; }
.linha select { margin: 0; }
.confirmar { max-width: 460px; margin: clamp(1rem, 6vh, 4rem) auto 0; }
.confirmar h1 { font-size: 1.9rem; margin-bottom: 0.75rem; }
.confirmar p { color: var(--ink-soft); margin-bottom: 1.25rem; }
.confirmar a { margin-left: 0.75rem; }

.col-venc { display: table-cell; }
@media (max-width: 1599px) { .com-detalhe .col-venc { display: none; } }
@media (max-width: 1279px) {
  .app.com-detalhe { grid-template-columns: 224px minmax(0, 1fr); }
  .com-detalhe .col-venc { display: table-cell; }
  section.detalhe { display: none; position: fixed; inset: 0 0 0 auto; z-index: 20; width: min(100%, 640px); overflow-y: auto; box-shadow: -20px 0 50px oklch(0.4 0.05 150 / 0.16); }
  .app.aberto section.detalhe { display: block; }
  .botao.fechar { display: inline-flex; min-height: 40px; margin-bottom: 1.25rem; }
  .app:not(.aberto) .lista-clientes tbody tr.on td { background: none; }
}
@media (max-width: 860px) {
  .app, .app.com-detalhe, .dividido { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .lateral .logo { flex: 1 1 auto; }
  .lateral nav { order: 3; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .rodape { margin: 0; padding: 0; }
  .rodape .av { display: none; }
  .rodape > div { display: flex; align-items: center; gap: 0.6rem; }
  .rodape button.link { min-height: 44px; }
  .vitrine { display: none; }
  .dividido form { padding-block: 2rem; }
  .lista-clientes th:nth-child(n+3), .lista-clientes td:nth-child(n+3) { display: none; }
  .lista-clientes th, .lista-clientes td { padding-inline: 0.7rem; }
  .selo { white-space: normal; }
  form.busca { flex-basis: 100%; }
  section.detalhe { border-left: 0; }
  .det-cab { flex-wrap: wrap; }
  .det-cab > div { flex: 1 1 200px; }
  .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.clientes, .clientes tbody, .clientes tr, .clientes td { display: block; }
  .clientes thead { display: none; }
  .clientes tr { border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
  .clientes tbody tr:last-child { border-bottom: 0; }
  .clientes td { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.3rem 1.1rem; border: 0; text-align: right; }
  .clientes td:first-child { display: block; text-align: left; padding-bottom: 0.5rem; }
  .clientes td:empty { display: none; }
  .clientes td:not(:first-child)::before { content: attr(data-rotulo); color: var(--ink-soft); font-size: 0.875rem; text-align: left; }
  .linha { flex: 1; }
}