/* CrIAvendas — telas do sistema (Etapa 2). Mesma identidade do site: tinta azul-marinho, verde do "IA", Outfit. */
@font-face { font-family: Outfit; src: url("fontes/Outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --papel: #FFFFFF; --fundo: #F3F4F6; --tinta: #14213D; --tinta2: #3A4560; --mudo: #6F7180;
  --linha: #DCDFE5; --verde: #0E9F6E; --verde-cl: #3DDC97; --perda: #B4441C; --perda-fundo: #FBEDE7; --ok-fundo: #E6F6EF;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 .9rem/1.45 Outfit, system-ui, sans-serif; }
a { color: var(--tinta); }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; text-wrap: balance; }

/* telas de entrada (login, criar senha, esqueci) */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 32px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); }
.entrada .caixa { width: 100%; max-width: 400px; background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; padding: 32px 28px; display: grid; gap: 16px; }
.entrada .logo { width: 230px; max-width: 100%; }
.entrada h1 { font-size: 1.25rem; font-weight: 700; margin-top: 6px; }
.entrada p { margin: 0; color: var(--tinta2); }
.entrada form { display: grid; gap: 12px; }
.entrada .links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .82rem; }

/* campos compactos (padrão Farah: rótulo .7rem, campo .78rem) */
.campo { display: grid; gap: 4px; }
.campo label, .rotulo { font-size: .7rem; font-weight: 600; color: var(--tinta2); text-transform: uppercase; letter-spacing: .04em; }
.campo input, .campo select { width: 100%; font: 400 .78rem Outfit, system-ui, sans-serif; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; padding: 8px 10px; min-height: 34px; }
.campo input:focus, .campo select:focus { outline: 2px solid var(--verde-cl); outline-offset: 0; border-color: var(--verde); }
.dica { font-size: .72rem; color: var(--mudo); }

.bt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 .82rem Outfit, system-ui, sans-serif; padding: 8px 14px; min-height: 34px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.bt-verde { background: var(--verde); color: #fff; }
.bt-verde:hover { background: #0b8a5f; }
.bt-linha { background: var(--papel); color: var(--tinta); border-color: var(--linha); }
.bt-linha:hover { border-color: var(--tinta2); }
.bt-perigo { background: var(--papel); color: var(--perda); border-color: #e7c2b3; }
.bt[disabled] { opacity: .55; cursor: wait; }
.bt-cheio { width: 100%; }

.aviso { padding: 10px 12px; border-radius: 6px; font-size: .82rem; }
.aviso.erro { background: var(--perda-fundo); color: var(--perda); }
.aviso.ok { background: var(--ok-fundo); color: #0b6b4b; }

/* sistema: barra de cima + conteúdo */
.barra { background: var(--tinta); color: #fff; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--tinta); z-index: 11; }
.barra .w { display: flex; align-items: center; gap: 20px; min-height: 56px; }
.barra .logo { height: 28px; display: block; }
.barra nav { display: flex; gap: 4px; flex: 1; }
.barra nav a { color: #C9D0E0; text-decoration: none; padding: 6px 10px; border-radius: 6px; font-weight: 500; }
.barra nav a:hover, .barra nav a.atual { color: #fff; background: rgba(255,255,255,.08); }
.barra .quem { display: flex; align-items: center; gap: 12px; font-size: .8rem; color: #C9D0E0; }
.barra .quem b { color: #fff; font-weight: 600; }
.barra .quem form { margin: 0; }
.barra .quem button { background: transparent; color: #C9D0E0; border: 1px solid rgba(201,208,224,.4); border-radius: 6px; padding: 5px 10px; font: 500 .78rem Outfit, sans-serif; cursor: pointer; }
.w { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.conteudo { padding-block: 28px 56px; display: grid; gap: 20px; }
.cab-pag { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.cab-pag h1 { font-size: 1.4rem; font-weight: 700; }
.cab-pag p { margin: 2px 0 0; color: var(--mudo); }
.bloco { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 18px 20px; display: grid; gap: 14px; min-width: 0; }
.bloco h2 { font-size: 1rem; font-weight: 700; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

/* tabelas: uma linha por registro (padrão Farah) */
.tabela-rolagem { overflow-x: auto; }
table.lista { width: 100%; border-collapse: collapse; font-size: .8rem; }
table.lista th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mudo); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
table.lista td { padding: 9px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
table.lista tr:last-child td { border-bottom: 0; }
table.lista td.acoes { text-align: right; overflow: visible; }
.etq { display: inline-block; font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fundo); color: var(--tinta2); }
.etq.verde { background: var(--ok-fundo); color: #0b6b4b; }
.etq.azul { background: #E6EEFB; color: #2852a8; }
.etq.vermelha { background: var(--perda-fundo); color: var(--perda); }
.vazio { color: var(--mudo); font-size: .85rem; padding: 18px 0; text-align: center; }

/* janela dentro da página (sem alert/confirm do navegador) */
.painel-acao { border: 1px solid var(--linha); border-radius: 8px; padding: 14px; background: var(--fundo); display: grid; gap: 12px; }
.painel-acao[hidden] { display: none; }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (max-width: 720px) {
  .barra .w { flex-wrap: wrap; gap: 8px 14px; padding-block: 10px; }
  .barra nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .barra .quem span { display: none; }
  .cab-pag h1 { font-size: 1.2rem; }
}

/* correções da conferência visual (11/11) */
[hidden] { display: none !important; }
.campo { align-content: start; }
table.lista td.acoes { max-width: none; width: 1%; }
table.lista td.acoes .linha-acoes { flex-wrap: nowrap; justify-content: flex-end; }
table.lista td.acoes .bt { padding: 5px 10px; min-height: 28px; font-size: .76rem; }
.bloco { align-content: start; }
table.lista td { max-width: 220px; }
table.lista td { max-width: 190px; }
table.lista td.acoes, table.lista th:last-child { position: sticky; right: 0; background: var(--papel); box-shadow: -8px 0 8px -8px rgba(20,33,61,.18); }

/* sino de avisos */
.sino { position: relative; }
.sino > button { background: transparent; border: 0; color: #C9D0E0; cursor: pointer; padding: 6px; border-radius: 6px; position: relative; display: grid; place-items: center; }
.sino > button:hover { color: #fff; background: rgba(255,255,255,.08); }
.sino-n { position: absolute; top: 0; right: 0; background: var(--verde-cl); color: var(--tinta); font-size: .62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 3px; }
.sino-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, 86vw); max-height: 420px; overflow-y: auto; background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 12px 32px rgba(20,33,61,.18); z-index: 30; }
.sino-it { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); font-size: .8rem; }
.sino-it.novo { background: var(--ok-fundo); }
.sino-it span { color: var(--tinta2); } .sino-it small { color: var(--mudo); font-size: .7rem; }
.campo input[type=checkbox], .campo input[type=radio] { width: auto; min-height: 0; }
.campo label.chk { display: flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: 0; font: 400 .8rem Outfit, sans-serif; color: var(--tinta); }