/* Identidade visual TerraNutri
   Fonte da verdade: identidade_visual/README.md e site_terranutri/DESIGN_BRIEF.md (pasta CLAUDE).
   Fontes servidas daqui mesmo (public/marca), sem Google Fonts: o app não chama serviço externo. */
@font-face { font-family: "Nunito"; src: url("/app/marca/Nunito-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/app/marca/Nunito-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/app/marca/Nunito-Bold.ttf") format("truetype"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/app/marca/Archivo-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/app/marca/Archivo-Bold.ttf") format("truetype"); font-weight: 700 800; font-display: swap; }

:root {
  /* marca */
  --verde: #1F4D2C; --verde-esc: #163821; --verde-cl: #E8F0E5;
  --laranja: #E8552B; --laranja-cl: #FFE8DC; --laranja-txt: #A63A17;
  --creme: #FFF8EE; --areia: #F4EBD9; --tinta: #2A2A28; --cinza: #6B6660;
  /* papéis na interface */
  --bg: var(--creme); --card: #fff; --txt: var(--tinta); --mut: var(--cinza); --bord: #EBE3D3; --bord-forte: #DDD2BC;
  --pri: var(--verde); --pri-txt: var(--creme); --acento: var(--laranja);
  --dark: var(--verde-esc); --dark2: #0F2A18;
  --ok: #2F7A3B; --err: #B42318; --warn: #B7791F; --info: #2F5D7C;
  --r: 12px; --r-bloco: 16px;
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  --titulo: "Archivo", "Nunito", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--txt); font-size: 14px; }
a { color: var(--pri); }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { margin: 0 0 8px; }
h1, h2 { font-family: var(--titulo); font-weight: 700; color: var(--verde-esc); letter-spacing: -.01em; }
h1 { font-size: 22px; } h2 { font-size: 16px; } h3 { font-size: 12px; text-transform: uppercase; color: var(--mut); letter-spacing: .06em; font-weight: 700; }
.carregando { padding: 40px; text-align: center; color: var(--mut); }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.kpi b, .orc-tot, .tbl .r, .estq { font-variant-numeric: tabular-nums; }

/* layout */
.shell { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; }
.nav { background: var(--dark); color: #CFDCCB; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav .marca { color: var(--creme); padding: 4px 8px 16px; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav .marca img { width: 40px; height: 40px; border-radius: 10px; flex: none; box-shadow: 0 0 0 1px rgba(255,248,238,.18); }
.nav .marca b { display: block; font-family: var(--titulo); font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1.1; }
.nav .marca small { display: block; color: var(--laranja-cl); font-size: 11.5px; font-weight: 600; opacity: .85; }
.nav a { color: inherit; text-decoration: none; padding: 9px 12px; border-radius: 999px; display: flex; gap: 10px; align-items: center; font-weight: 600; transition: background-color .2s var(--curva), color .2s var(--curva); }
.nav a:hover { background: rgba(255,248,238,.08); color: var(--creme); }
.nav a.ativo { background: var(--creme); color: var(--verde-esc); }
.nav a .badge { margin-left: auto; }
.nav .user { margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,248,238,.15); font-size: 12px; }
.nav .user b { display: block; color: var(--creme); font-size: 13px; }
.nav .user a { color: var(--laranja-cl); border-radius: 0; }
.nav .user a:hover { background: none; text-decoration: underline; }
.nav .user button { margin-top: 8px; width: 100%; justify-content: center; }
.main { padding: 22px 28px; min-width: 0; }
.topo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.topo h1 { flex: 1; margin: 0; font-size: 26px; }
.sub { color: var(--mut); font-size: 13px; }

/* componentes */
.card { background: var(--card); border: 1px solid var(--bord); border-radius: var(--r); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--sombra); }
.btn { background: var(--pri); color: var(--pri-txt); border: 0; padding: 8px 16px; border-radius: 999px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color .2s var(--curva), transform .12s var(--curva); }
.btn:hover { background: var(--verde-esc); }
.btn:active { transform: scale(.98); }
.btn.sec { background: var(--areia); color: var(--tinta); }
.btn.sec:hover { background: #EADFC8; }
.btn.dark { background: var(--dark); color: var(--creme); }
.btn.dark:hover { background: var(--dark2); }
.btn.danger { background: var(--err); color: #fff; }
.btn.danger:hover { background: #912018; }
.btn.ok { background: var(--ok); color: #fff; }
.btn.ok:hover { background: #256330; }
.btn.peq { padding: 5px 12px; font-size: 12.5px; }
.btn.link { background: none; color: var(--pri); padding: 4px 6px; }
.btn.link:hover { background: none; text-decoration: underline; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--areia); color: #4A4640; }
.badge.pri { background: var(--laranja-cl); color: var(--laranja-txt); }
.badge.err { background: #FDE7E4; color: #912018; }
.badge.ok { background: var(--verde-cl); color: var(--verde); }
.badge.warn { background: #FBF0D9; color: #8A5A10; }
.badge.info { background: #E4EDF2; color: #23475F; }
label { display: block; font-size: 12px; font-weight: 700; color: var(--tinta); margin-bottom: 4px; }
input, select, textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--bord-forte); border-radius: 10px; background: #fff; color: var(--txt); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pri); outline-offset: 0; border-color: var(--pri); }
textarea { min-height: 70px; resize: vertical; }
.campo { margin-bottom: 12px; }
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.linha.c2 { grid-template-columns: 1fr 1fr; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.tbl th { font-size: 11.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.tbl tr.clic { cursor: pointer; } .tbl tr.clic:hover { background: #FFFBF5; }
.tbl .r { text-align: right; }
.tbl input, .tbl select { padding: 5px 8px; }
.vazio { padding: 30px; text-align: center; color: var(--mut); }
.erro { color: var(--err); font-size: 13px; margin-top: 8px; }
.mut { color: var(--mut); }
.peq { font-size: 12px; }
.chk { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.chk input { width: auto; accent-color: var(--pri); }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 14px; flex-wrap: wrap; }
.abas button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; cursor: pointer; font-weight: 700; color: var(--mut); }
.abas button.ativo { color: var(--verde-esc); border-color: var(--acento); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--bord); border-radius: var(--r); padding: 12px 16px; box-shadow: var(--sombra); }
.kpi b { display: block; font-family: var(--titulo); font-size: 26px; color: var(--verde-esc); }
.kpi span { color: var(--mut); font-size: 12px; font-weight: 600; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--verde-esc); padding: 16px; }
.login .card { width: 100%; max-width: 380px; padding: 32px 30px 28px; border-radius: var(--r-bloco); border: 0; background: var(--creme); }
.login .logo { display: block; width: 210px; max-width: 80%; height: auto; margin: 0 auto 18px; }
.login h1 { margin-bottom: 2px; text-align: center; }
.login .sub { text-align: center; }
.login .btn { padding: 10px 16px; font-size: 15px; }

/* kanban */
/* 7 colunas em 2 linhas: as 4 primeiras em cima, as 3 últimas embaixo, sem rolar para o lado */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-bottom: 12px; align-items: start; }
.col { background: var(--areia); border-radius: var(--r-bloco); padding: 10px; min-height: 160px; min-width: 0; }
.col.sobre { outline: 2px dashed var(--acento); }
.col h2 { font-size: 13px; text-transform: uppercase; color: var(--verde-esc); display: flex; justify-content: space-between; letter-spacing: .03em; }
.col h2 .badge { background: #fff; }
.cartao { background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.05); cursor: grab; border-left: 4px solid var(--bord-forte); transition: box-shadow .2s var(--curva), transform .2s var(--curva); }
.cartao:hover { box-shadow: var(--sombra); }
.cartao.alta { border-left-color: var(--warn); }
.cartao.urgente { border-left-color: var(--err); }
.cartao.arrastando { opacity: .5; }
.cartao { overflow-wrap: anywhere; }
.cartao .n { font-weight: 800; font-size: 13px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; }
.cartao .n a { color: inherit; text-decoration: none; }
.cartao .cli { font-weight: 600; margin: 2px 0; }
.cartao .eq { color: var(--mut); font-size: 12.5px; }
.cartao .pe { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 11.5px; color: var(--mut); gap: 6px; }
.cartao select { width: auto; padding: 3px 6px; font-size: 12px; }

/* OS detalhe */
.os-topo { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.os-topo .badge { font-size: 12px; padding: 4px 10px; }
.hist { list-style: none; padding: 0; margin: 0; }
.hist li { padding: 6px 0; border-bottom: 1px dashed var(--bord); display: flex; gap: 10px; }
.hist li .q { color: var(--mut); font-size: 12px; min-width: 110px; }
.hist li .i { background: var(--laranja-cl); font-size: 10px; padding: 1px 5px; border-radius: 3px; align-self: flex-start; }

/* requisições */
.req { border: 1px solid var(--bord); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; background: #fff; box-shadow: var(--sombra); }
.req.pendente { border-left: 4px solid var(--warn); }
.req.separada { border-left: 4px solid var(--info); }
.req.entregue, .req.parcial { border-left: 4px solid var(--ok); }
.req.recusada { border-left: 4px solid var(--err); }
.req .cab { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.estq { font-weight: 700; } .estq.zero { color: var(--err); } .estq.baixo { color: var(--warn); } .estq.ok { color: var(--ok); }
.loc { background: var(--verde-cl); color: var(--verde); padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* vistas explodidas */
.vistas { display: flex; flex-direction: column; height: calc(100vh - 40px); }
.vistas .barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.vistas .barra input { flex: 1; min-width: 200px; }
.vistas iframe { flex: 1; width: 100%; border: 1px solid var(--bord); border-radius: var(--r); background: #fff; box-shadow: var(--sombra); }

/* card flutuante de peças */
.carrinho { position: fixed; right: 20px; bottom: 20px; width: 360px; max-width: calc(100vw - 32px); background: #fff; border-radius: var(--r-bloco); border-top: 4px solid var(--acento); box-shadow: 0 12px 32px rgba(0,0,0,.28); z-index: 30; }
.car-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.carrinho.min .car-cab { cursor: pointer; }
.carrinho.min .car-corpo { display: none; }
.carrinho.min { width: auto; }
.car-corpo { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.car-dica { font-size: 12px; color: var(--mut); }
#car-itens { max-height: 38vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.car-item { display: grid; grid-template-columns: auto 1fr 56px auto; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--bord); border-radius: 10px; }
.car-item b { font-size: 12.5px; }
.car-item input { padding: 5px 6px; font-size: 12.5px; }
.car-item .btn.link { color: var(--err); font-size: 18px; padding: 0 4px; }
.car-item.novo { animation: carNovo 1.4s ease; }
.car-vazio { font-size: 12.5px; color: var(--mut); text-align: center; padding: 10px; border: 1px dashed var(--bord); border-radius: 6px; }
.car-add { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px; }
.car-add input, #car-obs, #car-os { padding: 6px 8px; font-size: 13px; }
.carrinho.pulso { animation: carPulso .6s ease; }
@keyframes carNovo { from { background: var(--laranja-cl); } to { background: transparent; } }
@keyframes carPulso { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
@media (max-width: 900px) { .carrinho { right: 16px; bottom: 16px; } }

/* controle de peças e orçamento */
.badge.sem-cad { white-space: nowrap; }
.req-tbl input.num { width: 60px; }
.req.encomenda { border-left: 4px solid var(--err); }
.req-tbl input.num, .orc-tbl input.num { width: 72px; text-align: right; padding: 5px 6px; }
.req-tbl select { padding: 5px 6px; width: auto; }
.req-tbl td, .orc-tbl td { vertical-align: middle; }
.orc-tbl input { padding: 6px 8px; }
.orc-tbl input.din { width: 100px; }
.orc-tbl tr.alerta td { background: #FBF0D9; }
.orc-rodape { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; align-items: flex-start; }
.orc-campos { flex: 1; min-width: 260px; }
.orc-tot { min-width: 240px; border-collapse: collapse; }
.orc-tot td { padding: 4px 6px; }
.orc-tot .r { text-align: right; }
.orc-tot .tot td { font-weight: 800; font-size: 17px; border-top: 2px solid var(--verde-esc); color: var(--verde-esc); }
.aviso { margin-top: 10px; padding: 9px 13px; border-radius: 10px; font-size: 13px; }
.aviso.err { background: #FDE7E4; color: #912018; }
.aviso.warn { background: #FBF0D9; color: #8A5A10; }

input.invalido { border-color: var(--err); outline-color: var(--err); background: #FEF3F1; }

/* bancada e fila da oficina */
.card.bancada { border-left: 4px solid var(--acento); padding: 12px 16px; }
.fila-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.fila-col h2 { margin-bottom: 6px; }
.fila-col h3 { margin: 12px 0 6px; }
.fila-lista { display: flex; flex-direction: column; gap: 6px; }
.fila-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bord); border-left: 4px solid var(--bord-forte); border-radius: 10px; background: #fff; font-size: 13px; }
.fila-item.alta { border-left-color: var(--warn); }
.fila-item.urgente { border-left-color: var(--err); }
.fila-txt { flex: 1; min-width: 0; }
.fila-txt a { color: inherit; }
.fila-acoes { display: flex; flex-direction: column; }
.fila-acoes .btn { padding: 0 6px; line-height: 1.2; }

/* modal */
.modal-fundo { position: fixed; inset: 0; background: rgba(22,56,33,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: var(--r-bloco); padding: 22px; box-shadow: var(--sombra); width: 100%; max-width: 640px; max-height: 90vh; overflow: auto; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--dark); color: var(--creme); padding: 10px 20px; border-radius: 999px; font-weight: 600; opacity: 0; transition: .2s; pointer-events: none; z-index: 99; }
#toast.on { opacity: 1; }
#toast.erro { background: var(--err); }

/* mobile */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; z-index: 40; transform: translateX(-100%); transition: .2s; }
  .nav.aberto { transform: none; }
  .menu-btn { display: inline-flex; }
  .main { padding: 14px; }
  .topo h1 { font-size: 21px; }
  .linha.c2 { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vistas { height: calc(100vh - 28px); }
}
@media (max-width: 600px) {
  .kanban { grid-template-columns: 1fr; }
  .kanban .col { min-height: 70px; }
}

/* histórico do cliente e da máquina */
.aviso-hist { border-left: 4px solid var(--info); padding: 10px 16px; }
.hist-resumo { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 8px 0 12px; }
.hist-maq { border: 1px solid var(--bord); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; }
.hist-maq.atual { border-color: var(--pri); }
.hist-os { border-top: 1px dashed var(--bord); padding: 8px 0 4px; }
.hist-os .peq { margin-top: 3px; }

/* mão de obra (tabela fixa) e custo de encomenda */
.mo-box { margin-top: 16px; border-top: 1px solid var(--bord); padding-top: 12px; }
.mo-box .tbl td { padding: 6px 8px; }
input[readonly] { background: var(--bg); color: var(--mut); }
.custo-enc { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.custo-enc input { width: 110px; }

/* lacre: identificação da máquina */
.lacre { display: inline-block; font-weight: 800; letter-spacing: .03em; background: var(--tinta); color: #fff; border-radius: 6px; font-variant-numeric: tabular-nums; padding: 1px 7px; font-size: 12px; margin-left: 6px; white-space: nowrap; }
.lacre.grande { font-size: 18px; padding: 4px 12px; margin: 0 12px 0 0; }
.campo-lacre input { font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; max-width: 320px; }
.campo-lacre input::placeholder { text-transform: none; font-weight: 400; font-size: 14px; letter-spacing: 0; }

/* movimento: respeita quem pediu menos animação */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }