/* Port visual do protótipo React aprovado para o HTML integrado v18.
   Esta folha altera somente apresentação: não adiciona nem remove controles. */
:root {
  --bg: #f2f7f6;
  --surface: #ffffff;
  --surface-2: #f3f8f6;
  --line: #e3ece9;
  --fg: #19312f;
  --muted: #687c79;
  --brand: #093a36;
  --brand-ink: #ffffff;
  --brand-soft: #e3f0ed;
  --s-change: #b64e3a;
  --s-review: #75618a;
  --s-client: #94630e;
  --s-ok: #24835a;
  --s-prod: #397b89;
  --shadow: 0 12px 34px rgba(16, 56, 51, .075);
  --display: Inter, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: Inter, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --r: 20px;
}

body { font-family: var(--body); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset: 2px; }

/* Barra superior clara do protótipo, mantendo os controles originais do v18. */
[data-layout="b"] .top {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
[data-layout="b"] .top h1 { color: var(--fg); }
[data-layout="b"] .top .mbrand,
[data-layout="b"] .top .mword { color: var(--brand); }
[data-layout="b"] .top .iconbtn,
[data-layout="b"] .top .mebtn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}
[data-layout="b"] .top .avatar { background: var(--brand-soft); color: var(--brand); }
[data-layout="b"] .top .newbtn { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
[data-layout="b"] .top .badge.hot { background: #e9b04b; color: #1b2b29; }

/* Banner do protótipo: verde em gradiente, contido no conteúdo e sem sobreposição. */
[data-layout="b"] .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 166px;
  margin: 0 !important;
  padding: 23px 22px 24px !important;
  border-radius: 23px;
  color: #fff;
  background:
    radial-gradient(ellipse at 93% 16%, rgba(125,185,162,.23), transparent 38%),
    linear-gradient(115deg, #082f2d 0%, #0b4741 62%, #165b52 100%);
  box-shadow: 0 15px 30px rgba(9,58,54,.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
[data-layout="b"] .hero::before,
[data-layout="b"] .hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 8%;
  top: -63px;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 50%;
  pointer-events: none;
}
[data-layout="b"] .hero::after { top: -95px; right: 5%; width: 225px; height: 225px; }
[data-layout="b"] .hero > * { position: relative; z-index: 1; }
[data-layout="b"] .hero h2 {
  max-width: 100%;
  margin: 8px 0 5px;
  color: #fff;
  font-size: clamp(24px, 7vw, 32px) !important;
  line-height: 1.15;
  letter-spacing: -.045em;
  font-weight: 700;
}
[data-layout="b"] .hero p { color: rgba(237,248,244,.76) !important; font-size: 12px; }
.hero-copy { min-width: 0; flex: 1; }
.welcome-count {
  width: 86px;
  min-width: 86px;
  height: 103px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 17px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(7px);
}
.welcome-count span:first-child { color: #c0d9d1; font-size: 7px; letter-spacing: .1em; font-weight: 800; white-space: nowrap; }
.welcome-count strong { color: #fff; font-size: 31px; line-height: 1; letter-spacing: -.06em; }
.welcome-count span:nth-child(3) { color: rgba(239,248,245,.76); font-size: 9px; white-space: nowrap; }
.home-summary-heading { margin: 24px 0 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.home-summary-heading .summary-eyebrow { color: #849592; font-size: 8px; letter-spacing: .12em; font-weight: 800; }
.home-summary-heading h2 { margin: 4px 0 0; color: var(--fg); font-size: 16px; line-height: 1.25; letter-spacing: -.025em; font-weight: 730; }
.home-summary-heading .summary-asof { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.home-summary-heading .summary-asof::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4d9b7b; }
.home-summary-heading + .stats { margin-top: 0 !important; }
[data-layout="b"] .hero .pushcard {
  color: #fff;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 15px;
  background: rgba(255,255,255,.1);
  box-shadow: none;
  backdrop-filter: blur(7px);
}
[data-layout="b"] .hero .pushcard .muted { color: rgba(239,248,245,.78); }
[data-layout="b"] .hero .pushcard .btn.pri { color: var(--brand); background: #fff; border-color: #fff; }
[data-layout="b"] .hero + .stats { position: relative; margin-top: 18px !important; }
[data-layout="b"] .hero + .pushcard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  margin: 0 !important;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(30,66,61,.04);
}
[data-layout="b"] .hero + .pushcard > b { grid-column: 1; color: var(--fg); font-size: 12px; }
[data-layout="b"] .hero + .pushcard > .muted { grid-column: 1; color: var(--muted); font-size: 10px; }
[data-layout="b"] .hero + .pushcard [data-push] { grid-column: 2; grid-row: 1 / span 2; align-self: center !important; min-height: 38px; }

/* Métricas 2×2 no celular: cartões, ícones semânticos e números da referência. */
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.stat {
  min-height: 126px;
  position: relative;
  padding: 14px 13px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line) !important;
  border-radius: 17px !important;
  background: var(--surface) !important;
  box-shadow: 0 3px 12px rgba(30,66,61,.045) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)) !important; box-shadow: var(--shadow) !important; }
.stat:active { transform: scale(.985); }
.stat .sic {
  width: 30px;
  height: 30px;
  margin-bottom: 3px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--brand-2, #145c54);
  background: var(--brand-soft);
}
.stat .sic svg.i { width: 18px; height: 18px; }
.stat b { color: var(--fg); font-family: var(--display); font-size: 24px; line-height: 1; letter-spacing: -.045em; }
.stat span:not(.sic) { color: var(--muted); font-size: 11px; line-height: 1.3; font-weight: 600; }
.stat.alert .sic, .stat:nth-child(1) .sic { color: var(--s-change); background: color-mix(in srgb, var(--s-change) 12%, var(--surface)); }
.stat.alert b, .stat:nth-child(1) b { color: var(--s-change); }
.stat.soon .sic, .stat:nth-child(3) .sic { color: var(--s-client); background: color-mix(in srgb, var(--s-client) 12%, var(--surface)); }
.stat.soon b, .stat:nth-child(3) b { color: var(--s-client); }
.stat.okk .sic, .stat:nth-child(4) .sic { color: var(--s-ok); background: color-mix(in srgb, var(--s-ok) 12%, var(--surface)); }
.stat.okk b, .stat:nth-child(4) b { color: var(--s-ok); }
.stat:nth-child(2) .sic { color: var(--s-review); background: color-mix(in srgb, var(--s-review) 12%, var(--surface)); }

/* Painéis e linhas de pedidos: mesma leitura arejada do protótipo. */
.cols2.home-panels { gap: 14px; align-items: start; }
.home-attention, .home-deliveries {
  min-width: 0;
  padding: 17px 15px 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 4px 18px rgba(30,66,61,.045);
  overflow: hidden;
}
.home-attention > .sect-h, .home-deliveries > .sect-h { margin: 0 0 12px; }
.home-attention .sect-h h2, .home-deliveries .sect-h h2 { font-size: 16px; line-height: 1.25; }
.home-attention .list, .home-deliveries .list { border: 0; border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: 0; box-shadow: none; }
.home-attention .row, .home-deliveries .row { min-height: 64px; padding: 11px 2px; gap: 10px; background: var(--surface); }
.home-attention .row:hover, .home-deliveries .row:hover { background: color-mix(in srgb, var(--brand-soft) 35%, var(--surface)); }
.home-attention .row .t, .home-deliveries .row .t { font-size: 12px; font-weight: 730; }
.home-attention .row .s, .home-deliveries .row .s { font-size: 10px; line-height: 1.4; }
.home-attention .rthumb, .home-deliveries .rthumb { width: 42px !important; height: 42px !important; border-radius: 13px !important; }
.home-attention .ord, .home-deliveries .ord { font-size: 10px; }
.home-attention .linkbtn, .home-deliveries .linkbtn { color: var(--brand-2, #145c54); }
[data-layout="b"] .list { border-radius: 17px; box-shadow: 0 4px 18px rgba(30,66,61,.045); }
.row { transition: background .15s ease; }

/* Cartão do saldo e linhas financeiras inspirados no bloco verde do protótipo. */
.payment-board {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 17px 15px;
  box-shadow: 0 4px 18px rgba(30,66,61,.045);
}
.payment-heading { align-items: center; gap: 9px; }
.payment-heading h2 { font-family: var(--display); font-size: 16px; letter-spacing: -.025em; }
.payment-heading p { margin: 4px 0 12px; font-size: 10px; }
.payment-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 13px 14px;
  margin: 0 0 12px;
  border: 1px solid color-mix(in srgb, var(--brand-soft) 85%, var(--line));
  border-radius: 15px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand-soft) 65%, var(--surface)), var(--surface));
}
.payment-summary strong { width: auto; color: var(--brand); font-family: var(--display); font-size: 24px; line-height: 1.2; letter-spacing: -.04em; }
.payment-summary span { color: var(--muted); font-size: 10px; }
.payment-row { border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.payment-info > b { font-size: 11px; }
.payment-balance strong { font-size: 15px; }
.payment-badge { border-radius: 8px; line-height: 1.35; }
.payment-buttons .btn { min-height: 40px; border-radius: 11px; font-size: 10px; }
.payment-buttons .btn.pri { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* Tipografia, botões e pesquisa seguem os componentes do protótipo. */
.btn { min-height: 40px; border-radius: 11px; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.btn:active { transform: scale(.985); }
.btn.sm { min-height: 34px; border-radius: 10px; }
.search { min-height: 44px; border-radius: 13px; }
.chip { min-height: 34px; padding: 6px 12px; border-radius: 999px; }
.card, .colm { border-radius: 16px; }

/* Navegação inferior e botão de criação no celular, iguais ao padrão aprovado. */
@media (max-width: 820px) {
  [data-layout="b"] .hero { margin: 0 !important; padding: 23px 16px 24px !important; border-radius: 23px; }
  [data-layout="b"] .hero + .stats { margin-top: 18px !important; }
  .home-attention, .home-deliveries { padding: 17px 15px 0; }
  .payment-board { width: 100%; margin: 0; padding: 17px 15px; }
  .bnav {
    min-height: calc(67px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(224,234,231,.95);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(18px);
  }
  .bnav button { gap: 4px; padding: 5px 2px calc(5px + env(safe-area-inset-bottom)); font-size: 9px; font-weight: 650; }
  .bnav button[aria-current="page"] { color: var(--brand); }
  .bnav button[aria-current="page"] svg.i { background: var(--brand-soft); border-radius: 999px; padding: 3px 12px; box-sizing: content-box; }
  .fab {
    display: inline-flex;
    width: auto !important;
    min-width: 44px;
    height: 43px !important;
    padding: 0 14px !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px !important;
    background: var(--brand);
    box-shadow: 0 8px 22px rgba(9,58,54,.24);
    font-size: 10px;
    font-weight: 720;
  }
  .fab::after { content: "Novo pedido"; }
  .fab svg.i { width: 19px; height: 19px; }
}

@media (min-width: 700px) {
  [data-layout="b"] .hero { min-height: 188px; padding: 30px 33px !important; border-radius: 26px; }
  [data-layout="b"] .hero h2 { font-size: 34px !important; }
  .welcome-count { width: 115px; min-width: 115px; height: 112px; padding: 14px; margin-right: 8%; }
  .welcome-count strong { font-size: 38px; }
  .welcome-count span:first-child { font-size: 8px; }
  .home-summary-heading { margin-top: 28px; }
  .home-summary-heading h2 { font-size: 18px; }
  .stat { min-height: 145px; padding: 16px; }
  .stat .sic { width: 34px; height: 34px; }
  .stat b { font-size: 29px; }
  .home-attention, .home-deliveries { padding: 20px 19px 0; }
  .payment-board { padding: 20px 19px; }
}
@media (min-width: 821px) {
  .side { width: 224px; padding: 24px 14px 17px; border-right: 1px solid var(--line); }
  .content { width: min(100%, 1250px); margin-inline: auto; padding: 31px 34px 44px; }
  .cols2.home-panels { grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); gap: 16px; }
  .stat { min-height: 145px; }
  [data-layout="b"] .hero { margin-top: 0 !important; }
  .payment-board { min-width: 0; }
}
@media (min-width: 1000px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .cols2.home-panels { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 18px; }
}
@media (max-width: 380px) {
  [data-layout="b"] .hero { min-height: 153px; padding: 18px 15px !important; border-radius: 20px; }
  [data-layout="b"] .hero h2 { font-size: 24px !important; }
  .welcome-count { width: 75px; min-width: 75px; height: 97px; padding: 10px 8px; }
  .welcome-count span:first-child { font-size: 6px; }
  .stat { min-height: 119px; padding: 12px 10px; border-radius: 17px !important; }
  .stat b { font-size: 24px; }
  .payment-board { padding: 15px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .stat, .btn, .row { transition: none !important; }
}


/* Artes: distribuir as etapas em grade para eliminar o scroll horizontal interno. */
.boardwrap.boardwrap-artes {
  display: block !important;
  width: 100%;
  max-height: none !important;
  overflow: visible !important;
  margin: 10px 0 0 !important;
  padding: 0 0 8px !important;
}
.boardwrap.boardwrap-artes .board {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  width: 100%;
  min-width: 0 !important;
  gap: 12px;
}
.boardwrap.boardwrap-artes .colm {
  width: auto !important;
  min-width: 0 !important;
  flex: none;
}
.boardwrap.boardwrap-artes .card { min-width: 0; max-width: 100%; }
@media (max-width: 820px) {
  .boardwrap.boardwrap-artes .board { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Sugestões de clientes já carregados: acessíveis e sem nova chamada ao backend. */
#nf .nf-name-suggestions:not(:empty) { display: grid; gap: 6px; width: 100%; min-width: 0; margin-top: 7px; }
#nf .nf-name-suggestions:empty { display: none; }
#nf .nf-name-suggestion {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--fg);
  background: var(--surface);
  text-align: left;
}
#nf .nf-name-suggestion:hover,
#nf .nf-name-suggestion:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
#nf .nf-name-suggestion-main { display: grid; gap: 2px; min-width: 0; }
#nf .nf-name-suggestion-main strong { color: var(--fg); font-size: 12px; }
#nf .nf-name-suggestion-main small { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
#nf .nf-name-suggestion-action { flex: none; color: var(--brand); font-size: 10px; font-weight: 800; }