/* =====================================================================
   Natural da Terra — visual do sistema (identidade 2026)
   Um arquivo só para todo o sistema: /admin, /admin2, /pedidos,
   /meuspedidos, /coletas e Compras. Carregado por último no <head>,
   então ajusta as telas antigas sem precisar reescrever cada uma.

   Cores da marca (tiradas do manual):
     verde   #008444   ação principal, barra do topo
     mata    #00612F   títulos, hover
     folha   #A4C847   destaque leve: foco, aba ativa, traço do título
     fruta   #E40234   só para apagar/erro (e na própria logo)
   ===================================================================== */

:root {
  --verde: #008444;
  --mata: #00612F;
  --folha: #A4C847;
  --folha-clara: #EEF5DC;
  --fruta: #E40234;
  --fruta-clara: #FDEBEF;
  --fundo: #F3F5EF;
  --painel: #FFFFFF;
  --linha: #DCE3D6;
  --linha-forte: #C3CEBD;
  --tinta: #1D2B22;
  --tinta-2: #56655B;
  --verde-claro: #E6F2EA;
  --aviso: #FFF6D6;
  --aviso-tinta: #6B5300;
  --fonte: "Fira Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --r-painel: 10px;
  --r-ctrl: 7px;
  color-scheme: light;
}

/* ---------- base ---------- */
html body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo) none;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
html body * { font-family: inherit; }
html body a { color: var(--verde); text-underline-offset: 2px; }
html body a:hover { color: var(--mata); }
html body h1 {
  font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--mata);
  margin: 4px 0 18px; letter-spacing: -.01em;
}
/* o traço verde-claro embaixo do título lembra o traço sob o "da" da logo */
html body h1::after {
  content: ""; display: block; width: 34px; height: 4px; border-radius: 2px;
  background: var(--folha); margin-top: 8px;
}
html body h2 { font-size: 17px; font-weight: 600; color: var(--mata); letter-spacing: 0; }
html body h3 { font-size: 15px; font-weight: 600; color: var(--tinta); }
html body small, html body .dica { color: var(--tinta-2); }
html body :focus-visible { outline: 3px solid var(--folha); outline-offset: 2px; }
html body ::selection { background: var(--folha-clara); }

/* ---------- topo da marca ---------- */
.ndt-topo {
  position: relative; display: flex; align-items: center; gap: 18px;
  background: var(--verde); color: #fff;
  padding: 10px max(18px, env(safe-area-inset-left)) 10px max(18px, env(safe-area-inset-left));
  margin: 0 0 22px; min-height: 58px; overflow: hidden;
}
/* faixa de folhinhas, como na fachada e nas etiquetas */
.ndt-topo::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 132px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 17c0-7 5-12 13-12-1 8-6 12-13 12z' fill='%23A4C847'/%3E%3C/svg%3E");
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
  opacity: .9; pointer-events: none;
}
.ndt-topo .ndt-logo { display: block; line-height: 0; flex: 0 0 auto; }
.ndt-topo .ndt-logo img { height: 46px; width: auto; display: block; }
.ndt-topo .ndt-area {
  font-size: 14px; color: rgba(255,255,255,.85); padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.28); line-height: 1.25;
}
.ndt-topo .ndt-area strong { display: block; color: #fff; font-size: 16px; font-weight: 600; }
.ndt-topo .ndt-acoes { margin-left: auto; margin-right: 120px; display: flex; gap: 6px; position: relative; z-index: 1; }
html body .ndt-topo .ndt-acoes a {
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: var(--r-ctrl); background: rgba(0,0,0,.12);
}
html body .ndt-topo .ndt-acoes a:hover { background: rgba(0,0,0,.24); color: #fff; }
@media (max-width: 640px) {
  .ndt-topo { gap: 12px; margin-bottom: 14px; }
  .ndt-topo::after { width: 64px; }
  .ndt-topo .ndt-logo img { height: 36px; }
  .ndt-topo .ndt-area { font-size: 12px; padding-left: 12px; }
  .ndt-topo .ndt-area strong { font-size: 14px; }
  .ndt-topo .ndt-acoes { margin-right: 52px; }
  html body .ndt-topo .ndt-acoes a { padding: 6px 9px; font-size: 13px; }
}
@media print { .ndt-topo { display: none !important; } html body h1::after { display: none; } }

/* ---------- painéis (containers das telas) ---------- */
html body .caixa, html body .ndt-painel {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-painel);
  box-shadow: none;
}

/* ---------- botões ---------- */
html body button, html body .botao, html body input[type=submit], html body input[type=button],
html body a.botao, html body .btn {
  font: 500 14px/1.2 var(--fonte);
  min-height: 38px; padding: 9px 14px; border-radius: var(--r-ctrl);
  border: 1px solid var(--linha-forte); background: #fff; color: var(--mata);
  cursor: pointer; text-decoration: none; text-transform: none; letter-spacing: 0;
  transition: background-color .12s, border-color .12s, color .12s;
  box-shadow: none; text-shadow: none;
}
html body button:hover, html body .botao:hover, html body input[type=submit]:hover,
html body input[type=button]:hover, html body .btn:hover {
  background: var(--verde-claro); border-color: var(--verde); color: var(--mata);
}
html body button:disabled { opacity: .55; cursor: default; }
/* ação principal */
html body .principal, html body button.principal, html body .btn-primary, html body .btn-success,
html body input[type=submit], html body button.pdf, html body .enviar,
html body .ndt-principal {
  background: var(--verde); border-color: var(--verde); color: #fff;
}
html body .principal:hover, html body button.principal:hover, html body .btn-primary:hover,
html body .btn-success:hover, html body input[type=submit]:hover, html body button.pdf:hover,
html body .enviar:hover, html body .ndt-principal:hover {
  background: var(--mata); border-color: var(--mata); color: #fff;
}
/* apagar / perigo */
html body .perigo, html body button.perigo, html body .btn-danger {
  background: #fff; border-color: var(--fruta); color: var(--fruta);
}
html body .perigo:hover, html body button.perigo:hover, html body .btn-danger:hover {
  background: var(--fruta); border-color: var(--fruta); color: #fff;
}

/* ---------- campos ---------- */
html body input[type=text], html body input[type=password], html body input[type=search],
html body input[type=date], html body input[type=number], html body input[type=email],
html body input[type=tel], html body input:not([type]), html body select, html body textarea,
html body .form-control {
  font: 400 15px/1.35 var(--fonte); color: var(--tinta);
  background: #fff; border: 1px solid var(--linha-forte); border-radius: var(--r-ctrl);
  padding: 8px 10px; min-height: 38px; box-shadow: none;
}
html body textarea { min-height: 76px; }
html body input:focus, html body select:focus, html body textarea:focus, html body .form-control:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--folha-clara);
}
html body label { color: var(--tinta-2); }

/* ---------- tabelas ---------- */
html body table { border-collapse: collapse; }
html body th {
  background: #EDF2E8; color: var(--mata); font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--linha-forte);
}
html body td { border-color: var(--linha); }
html body .table-striped > tbody > tr:nth-child(odd) > td { background: #fff; }
html body .table-striped > tbody > tr:nth-child(even) > td,
html body .table-striped tbody td { background: #F7F9F4; }
html body .table-striped > tbody > tr:hover > td { background: var(--verde-claro) !important; }

/* ---------- mensagens ---------- */
html body .msg, html body .flash, html body .aviso, html body .alert {
  border-radius: var(--r-ctrl); border: 1px solid transparent; padding: 10px 14px;
}
html body .flash, html body .msg.ok, html body .alert-success {
  background: var(--verde-claro); border-color: #BFDDC9; color: var(--mata);
}
html body .msg.erro, html body .alert-danger, html body .erro-login {
  background: var(--fruta-clara); border-color: #F5B9C6; color: #9E0024;
}
html body .aviso, html body .msg.aviso, html body .alert-warning {
  background: var(--aviso); border-color: #F0DE9C; color: var(--aviso-tinta);
}

/* ---------- navegação interna das telas (← Menu principal | Pedidos | ...) ---------- */
html body nav:not(.abas):not(.navbar) {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}
html body nav:not(.abas):not(.navbar) > a, html body nav:not(.abas):not(.navbar) > strong {
  display: inline-flex; align-items: center; min-height: 36px; padding: 7px 12px;
  border-radius: var(--r-ctrl); border: 0; background: transparent;
  color: var(--tinta-2); font-size: 14px; font-weight: 500; text-decoration: none;
}
html body nav:not(.abas):not(.navbar) > a:hover { background: var(--verde-claro); color: var(--mata); }
html body nav:not(.abas):not(.navbar) > strong {
  color: var(--mata); background: var(--folha-clara); box-shadow: inset 0 -3px 0 var(--folha);
}

/* ---------- /admin antigo (menu, relatórios, login) ---------- */
html body .tudo { position: static; width: auto; max-width: 1180px; left: auto; margin: 0 auto; padding: 0 16px; }
html body .box { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-painel); }
html body #planilha th { background: #EDF2E8; color: var(--mata); }
html body #planilha td, html body #planilha th { border-color: var(--linha); padding: 6px 8px; }
html body #planilha .g5 td, html body #planilha .g5 th, html body #planilha .g5 { background: #F7F9F4; }

/* tela de entrada do painel */
.ndt-entrar { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, 440px) 1fr; }
.ndt-entrar .lado-marca {
  background: var(--verde); color: #fff; padding: 48px 44px; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; overflow: hidden;
}
.ndt-entrar .lado-marca::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 22 22'%3E%3Cpath d='M4 17c0-7 5-12 13-12-1 8-6 12-13 12z' fill='%23A4C847'/%3E%3C/svg%3E");
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent);
  opacity: .75;
}
.ndt-entrar .lado-marca img { width: 210px; height: auto; }
.ndt-entrar .lado-marca p { font-size: 18px; line-height: 1.45; max-width: 26ch; margin: 28px 0 0; color: rgba(255,255,255,.92); }
.ndt-entrar .lado-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.ndt-entrar form { width: 100%; max-width: 340px; }
.ndt-entrar form h1 { margin-bottom: 22px; }
.ndt-entrar form label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 6px; color: var(--tinta); }
html body .ndt-entrar form input[type=text], html body .ndt-entrar form input[type=password] { width: 100%; box-sizing: border-box; margin-bottom: 16px; }
html body .ndt-entrar form input[type=submit], html body .ndt-entrar form button { width: 100%; min-height: 44px; font-size: 15px; }
.ndt-entrar .erro-login { margin-bottom: 16px; }
@media (max-width: 760px) {
  .ndt-entrar { grid-template-columns: 1fr; }
  .ndt-entrar .lado-marca { padding: 26px 22px 70px; }
  .ndt-entrar .lado-marca img { width: 150px; }
  .ndt-entrar .lado-marca p { font-size: 15px; margin-top: 14px; }
}

/* menu principal do painel */
.ndt-inicio { max-width: 1180px; margin: 0 auto 40px; padding: 0 18px; }
.ndt-inicio .saudacao { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ndt-inicio .saudacao p { color: var(--tinta-2); margin: 0 0 18px; }
.ndt-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; align-items: start; }
.ndt-grupo { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-painel); padding: 16px 16px 10px; }
html body .ndt-grupo h2 { margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.ndt-grupo h2 svg { width: 20px; height: 20px; color: var(--verde); flex: 0 0 auto; }
.ndt-grupo ul { list-style: none; margin: 0; padding: 0; }
.ndt-grupo li { border-top: 1px solid #EEF2EA; }
.ndt-grupo li:first-child { border-top: 0; }
html body .ndt-grupo a { display: block; padding: 9px 4px; text-decoration: none; color: var(--tinta); border-radius: 6px; }
html body .ndt-grupo a span { display: block; font-size: 13px; color: var(--tinta-2); margin-top: 1px; }
html body .ndt-grupo a:hover { background: var(--verde-claro); color: var(--mata); padding-left: 10px; }

/* ---------- /pedidos e /meuspedidos (Bootstrap 3) ---------- */
html body .navbar-inverse { background: var(--verde); border: 0; border-radius: 0; min-height: 62px; }
html body .navbar-inverse .navbar-brand, html body .navbar-inverse .navbar-nav > li > a { color: #fff; }
html body .navbar-inverse .navbar-brand { font-weight: 600; font-size: 17px; }
html body .navbar-inverse .navbar-brand:hover { color: #fff; }
html body .navbar-inverse .navbar-toggle { border-color: rgba(255,255,255,.5); }
html body .navbar-nav .btn { text-transform: none; font-size: 15px; margin-top: 12px; margin-right: 6px; }
html body .navbar-nav .btn-danger { background: rgba(0,0,0,.14); border-color: transparent; color: #fff; }
html body .navbar-nav .btn-danger:hover { background: rgba(0,0,0,.26); color: #fff; border-color: transparent; }
html body .navbar-nav .btn-success, html body .navbar-nav .active.btn {
  background: #fff; border-color: #fff; color: var(--mata); box-shadow: inset 0 -3px 0 var(--folha);
}
html body .breadcrumb { background: transparent; padding: 4px 0; margin-bottom: 12px; }
html body .well, html body .panel { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-painel); box-shadow: none; }
html body .nav-tabs { border-bottom-color: var(--linha-forte); }
html body .nav-tabs > li > a { color: var(--tinta-2) !important; text-transform: none; font-size: 15px; border-radius: var(--r-ctrl) var(--r-ctrl) 0 0; }
html body .nav-tabs > li.active > a, html body .nav-tabs > li.active > a:hover {
  color: var(--mata) !important; border-color: var(--linha-forte) var(--linha-forte) transparent; box-shadow: inset 0 3px 0 var(--folha);
}
html body .label-success, html body .badge { background: var(--verde); }
html body footer img[src*="2clicks"] { opacity: .45; height: 18px; }

/* ---------- respeita quem prefere menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html body * { transition: none !important; animation: none !important; }
}

/* As telas antigas do /admin zeram tudo com "* { font-size: 12px; margin: 0 }".
   Dentro das peças novas, cada elemento volta a herdar o tamanho do pai. */
html body .ndt-inicio *, html body .ndt-entrar *, html body .ndt-topo * { font-size: inherit; color: inherit; }
html body .ndt-inicio, html body .ndt-entrar { font-size: 15px; color: var(--tinta); }
html body .ndt-grupo a { font-size: 15px; font-weight: 500; }
html body .ndt-inicio h1, html body .ndt-entrar h1 { font-size: 24px; color: var(--mata); }
html body .ndt-grupo h2 { font-size: 16px; color: var(--mata); }
html body .ndt-grupo a span { font-size: 13px; font-weight: 400; color: var(--tinta-2); }
html body .ndt-entrar .lado-marca p { font-size: 18px; color: rgba(255,255,255,.92); }
html body .ndt-entrar form label { font-size: 14px; color: var(--tinta); }
html body .ndt-topo .ndt-area { font-size: 14px; color: rgba(255,255,255,.85); }
html body .ndt-topo .ndt-area strong { font-size: 16px; color: #fff; }
@media (max-width: 760px) { html body .ndt-entrar .lado-marca p { font-size: 15px; } }
@media (max-width: 640px) {
  html body .ndt-topo .ndt-area { font-size: 12px; }
  html body .ndt-topo .ndt-area strong { font-size: 14px; }
}

/* Telas com a barra do topo: a barra ocupa a largura toda e o conteúdo respira em volta */
html body:has(> .ndt-topo) { margin: 0; padding: 0 14px 40px; }
html body:has(> .ndt-topo) > .ndt-topo { margin-left: -14px; margin-right: -14px; }
/* o link "← Menu principal" da navegação interna já está no botão "Menu" do topo */
html body:has(> .ndt-topo) nav > a[href="../"]:first-child,
html body:has(> .ndt-topo) nav > a[href="../index.php"]:first-child { display: none; }

/* altura certa dos botões e campos (o padding fica dentro dos 38px) */
html body button, html body .botao, html body input, html body select, html body textarea, html body .btn, html body .form-control { box-sizing: border-box; }
html body a.botao, html body .botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
html body textarea { min-height: 76px; }

/* campos que a tela quer "sem moldura" até receber o foco */
html body .produtor input { border-color: transparent; background: transparent; font-weight: 600; padding-left: 4px; }
html body .produtor input:hover { border-color: var(--linha); }
html body .produtor input:focus { border-color: var(--verde); background: #fff; }

/* no celular, campos com 16px: o iPhone não dá zoom sozinho ao tocar */
@media (max-width: 760px) {
  html body input[type=text], html body input[type=password], html body input[type=search], html body input[type=date],
  html body input[type=number], html body input[type=email], html body input[type=tel], html body input:not([type]),
  html body select, html body textarea, html body .form-control { font-size: 16px; }
}

/* /pedidos e /meuspedidos: marca na barra e tela de entrada do cliente */
html body .navbar-brand.ndt-marca { display: flex; align-items: center; gap: 14px; height: 62px; padding: 8px 15px; margin: 0; }
html body .navbar-brand.ndt-marca img { height: 44px; width: auto; display: block; }
html body .navbar-brand.ndt-marca span {
  color: #fff; font-size: 16px; font-weight: 600; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); line-height: 1.2;
}
html body .navbar-inverse .navbar-nav > li > a { line-height: 30px; }
html body .navbar-inverse .navbar-collapse { border-color: rgba(255,255,255,.2); }
html body .ndt-logo-entrar { text-align: center; margin: 10px 0 18px; }
html body .ndt-logo-entrar img { width: 220px; max-width: 70%; height: auto; }
html body .form-signin { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-painel); padding: 22px; }
html body .form-signin .form-control { margin-bottom: 10px; height: 44px; }
html body .form-signin h3 { color: var(--mata); font-weight: 600; margin-top: 0; }
html body .form-signin h5 { color: var(--tinta-2); font-weight: 400; line-height: 1.45; }
html body .btn-lg { font-size: 16px; min-height: 46px; border-radius: var(--r-ctrl); }
html body .table > thead > tr > th { border-bottom: 1px solid var(--linha-forte); }
html body .table > tbody > tr > td { border-top-color: var(--linha); vertical-align: middle; }
html body .text-warning { color: #9E0024; }

/* campos só para consulta (ex.: "Último pedido") ficam com fundo apagado */
html body input:disabled, html body input[readonly], html body textarea[readonly], html body select:disabled {
  background: #F3F5EF; color: var(--tinta-2); border-color: var(--linha);
}
html body h4 label { font-size: 17px; font-weight: 600; color: var(--mata); }
html body h4 label small { font-weight: 400; color: var(--tinta-2); font-size: 14px; }
html body textarea, html body input, html body select, html body img { max-width: 100%; }
html body #recado { width: 100%; box-sizing: border-box; }

/* relatórios antigos do /admin (Pedido por cliente, Totais por produto, Carregamento) */
html body .ndt-relatorio { max-width: 1180px; margin: 0 auto 32px; padding: 0 4px; }
html body .ndt-relatorio * { font-size: 14px; }
html body .ndt-relatorio h1 { font-size: 24px; }
html body .ndt-filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--r-painel); padding: 12px 14px; margin: 0 0 16px; }
html body .ndt-filtro label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tinta-2); }
html body .ndt-filtro input[type=text] { width: 130px; text-align: center; }
html body .ndt-relatorio #planilha { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-painel); border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; }
html body .ndt-relatorio #planilha th { font-size: 13px; text-align: left; }
html body .ndt-relatorio #planilha td { border-top: 1px solid var(--linha); }
html body .form-signin h5.text-warning:not(:empty) {
  color: #9E0024; background: var(--fruta-clara); border: 1px solid #F5B9C6; border-radius: var(--r-ctrl); padding: 8px 10px;
}