:root{--green:#063d2d;--green2:#0b6b43;--lime:#92d050;--bg:#f3f6f4;--text:#1d2a25;--muted:#6b7b74;--danger:#c62828;--yellow:#a66b00}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}.hidden{display:none!important}.login{min-height:100vh;background:radial-gradient(circle at top,#126241,var(--green));display:flex;align-items:center;justify-content:center;padding:24px}.login-card{width:min(360px,92vw);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:24px;box-shadow:0 20px 60px #0018;text-align:center;color:white}.login-logo{width:155px;max-height:115px;object-fit:contain;margin:auto;display:block}.login h1{margin:8px 0 2px;font-size:24px}.login p{margin:0 0 18px;color:#dceee5}.login input{width:100%;padding:12px;border:1px solid #ffffff33;border-radius:12px;margin:7px 0;background:#fff;color:#123}.login button,.primary,button{border:0;border-radius:10px;padding:10px 14px;background:var(--green2);color:white;font-weight:700;cursor:pointer}.login button{width:100%;margin-top:10px}.login small{display:block;margin-top:14px;color:#dceee5}.app{height:100vh;display:grid;grid-template-columns:230px 1fr;overflow:hidden}.side{background:var(--green);color:white;height:100vh;overflow-y:auto;padding:14px}.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;border-bottom:1px solid #ffffff22;padding-bottom:14px;margin-bottom:10px}.brand img{width:105px;max-height:80px;object-fit:contain}.brand span,.status small{color:#cfe8d9}.side nav{display:flex;flex-direction:column;gap:6px}.side nav button{background:transparent;color:white;text-align:left;display:flex;gap:9px;align-items:center;padding:10px;border-radius:10px}.side nav button.active,.side nav button:hover{background:#ffffff18}.status{margin-top:16px;padding:12px;border-radius:12px;background:#ffffff12}main{height:100vh;overflow:hidden;display:flex;flex-direction:column}header{height:68px;background:white;border-bottom:1px solid #e2e8e4;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;flex-shrink:0}header h2{margin:0;font-size:20px}header p{margin:2px 0 0;color:var(--muted)}.top{display:flex;gap:10px;align-items:center}#content{overflow-y:auto;padding:18px;height:calc(100vh - 68px)}.grid{display:grid;gap:14px}.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:repeat(4,1fr)}.card{background:white;border:1px solid #e3ebe6;border-radius:16px;padding:16px;box-shadow:0 6px 22px #07351d0c}.card h2,.card h3{margin:0 0 10px}.value{font-size:24px;font-weight:800;color:var(--green2)}.danger{color:var(--danger)}.muted{color:var(--muted)}.between{display:flex;justify-content:space-between;gap:10px;align-items:center}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:9px;border-bottom:1px solid #edf2ef;text-align:left;vertical-align:top}.table th{font-size:12px;color:#587;text-transform:uppercase}.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#e8f5ea;color:#165b35;font-size:12px}.red{background:#ffe8e8;color:#9b1c1c}.yellow{background:#fff3d6;color:#835000}.gray{background:#eee;color:#555}.pdv{display:grid;grid-template-columns:1fr 340px;gap:16px}.search{display:flex;gap:8px}.search input,input,select,textarea{width:100%;padding:10px;border:1px solid #d6e1db;border-radius:10px;background:white}.product-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.prod-card{display:flex;gap:10px;align-items:center;border:1px solid #e0e8e3;border-radius:14px;padding:10px;cursor:pointer}.prod-card:hover{border-color:var(--green2)}.ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:24px}.cart{background:white;border-radius:16px;padding:16px;border:1px solid #e3ebe6;height:max-content}.cart-line{display:grid;grid-template-columns:1fr 28px 28px;gap:6px;align-items:center;border-bottom:1px solid #edf2ef;padding:8px 0}.cart-line button{padding:5px}.total{font-size:28px;color:var(--green2);font-weight:900}.pay{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.form{grid-template-columns:1fr 1fr}.wide{grid-column:1/-1}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal{position:fixed;inset:0;background:#001b12aa;display:grid;place-items:center;padding:20px;z-index:10}.modal-card{background:white;width:min(760px,96vw);max-height:90vh;overflow:auto;border-radius:18px;padding:16px}.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eef3ef;margin-bottom:12px}.modal-head button{background:#eee;color:#111}.clickable{cursor:pointer}.login-card .login-logo{filter:none}@media(max-width:900px){.app{grid-template-columns:1fr}.side{position:fixed;z-index:5;transform:translateX(-100%)}.pdv,.two,.three,.cards{grid-template-columns:1fr}.product-list{grid-template-columns:1fr}}


.receipt{max-width:360px;margin:0 auto;background:#fff;border:1px solid #e3ebe6;border-radius:12px;padding:14px;font-family:Arial,sans-serif;color:#111}.receipt .center{text-align:center}.receipt .small{font-size:11px;color:#555}.receipt h2{margin:0;color:var(--green);font-size:24px}.receipt p{margin:4px 0}.receipt table{width:100%;border-collapse:collapse;font-size:12px}.receipt th,.receipt td{border-bottom:1px dashed #c8d2cc;padding:6px 2px;text-align:left}.receipt th:nth-child(2),.receipt td:nth-child(2){text-align:center}.receipt th:nth-child(3),.receipt td:nth-child(3),.receipt th:nth-child(4),.receipt td:nth-child(4){text-align:right}.receipt .line{display:flex;justify-content:space-between;margin:6px 0}.receipt .total-line{font-size:16px}.receipt hr{border:0;border-top:1px dashed #b7c3bd;margin:9px 0}
.linkbtn{background:transparent!important;color:#1f7a42!important;border:none!important;margin-top:10px;text-decoration:underline;cursor:pointer;box-shadow:none!important}
.linkbtn:hover{opacity:.8}
.pie-wrap{display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:center;margin-top:10px}.pie{width:160px;height:160px;border-radius:50%;box-shadow:inset 0 0 0 1px #e3ebe6}.legend{display:flex;flex-direction:column;gap:8px}.legend-row{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;font-size:13px}.dot{width:12px;height:12px;border-radius:50%;display:inline-block}@media(max-width:900px){.pie-wrap{grid-template-columns:1fr}.pie{margin:auto}}

.pie-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.pie{width:180px;height:180px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}.legend{display:grid;gap:8px;min-width:220px}.legend div{display:flex;align-items:center;gap:8px;font-size:14px}.legend span{width:14px;height:14px;border-radius:4px;display:inline-block}.search{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.search input{min-width:280px;flex:1}

.inactive-row{opacity:.72;background:#fafafa}
.pill.ok{background:#e8f7df;color:#155724;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:700}

#menuBtn{
  display:none;
}

@media (max-width: 900px){

  #menuBtn{
    display:block !important;
    width:auto !important;
    min-width:45px !important;
  }

  .app{
    display:block !important;
    height:auto !important;
    overflow-x:hidden !important;
  }

  .side{
    position:fixed !important;
    top:0 !important;
    left:-100% !important;
    width:85% !important;
    height:100vh !important;
    z-index:9999 !important;
    transform:none !important;
    transition:left .3s ease !important;
  }

  .side.open{
    left:0 !important;
    transform:none !important;
  }

  main{
    width:100% !important;
    height:auto !important;
  }

  header{
    display:flex !important;
    gap:10px !important;
    align-items:center !important;
    height:auto !important;
  }

  #content{
    height:auto !important;
    padding:10px !important;
  }

  .cards,.two,.three,.grid,.pdv,.product-list{
    grid-template-columns:1fr !important;
  }

  input,select,textarea,button{
    max-width:100% !important;
  }

  table,.table{
    display:block !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
  }
}

#menuBtn{
  display:inline-block !important;
  width:auto !important;
}

.app.menu-closed{
  grid-template-columns:0 1fr !important;
}

.app.menu-closed .side{
  width:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* CELULAR */
@media (max-width: 900px){

  body{
    font-size:16px !important;
  }

  .app{
    display:block !important;
    width:100% !important;
  }

  .side{
    width:100% !important;
    height:auto !important;
    position:relative !important;
    left:0 !important;
    transform:none !important;
  }

  main{
    width:100% !important;
    margin:0 !important;
  }

  #content{
    padding:8px !important;
    width:100% !important;
  }

  .card{
    width:100% !important;
    margin-bottom:10px !important;
  }

  .cards,
  .grid,
  .two,
  .three,
  .pdv{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .search{
    flex-direction:column !important;
  }

  .search input{
    min-width:0 !important;
    width:100% !important;
  }

  .row,
  .between{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  select,
  input,
  textarea,
  button{
    width:100% !important;
    max-width:100% !important;
  }

  .pie{
    width:140px !important;
    height:140px !important;
  }
}

/* TELA LOGIN VETAGRO PREMIUM */

#login.login{
  min-height:100vh !important;
  width:100vw !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:
    radial-gradient(circle at center, rgba(80,180,100,.18), transparent 40%),
    linear-gradient(180deg,#042f23,#021711) !important;
  padding:20px !important;
}

#login .login-card{
  width:520px !important;
  max-width:90vw !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:center !important;
  color:white !important;
  padding:0 !important;
}

#login .login-logo{
  width:300px !important;
  max-width:80vw !important;
  height:auto !important;
  display:block !important;
  margin:0 auto 38px !important;
}

#login h1{
  font-size:58px !important;
  line-height:1 !important;
  color:white !important;
  margin:0 !important;
  font-weight:900 !important;
  text-shadow:0 5px 14px rgba(0,0,0,.45) !important;
}

#login .login-sub{
  font-size:24px !important;
  color:#78c92b !important;
  margin:18px 0 40px !important;
}

#login .login-field{
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  gap:20px !important;
  margin-bottom:22px !important;
  padding:0 26px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(0,0,0,.18) !important;
}

#login .login-field span{
  font-size:28px !important;
}

#login .login-field input{
  flex:1 !important;
  height:100% !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:white !important;
  font-size:25px !important;
}

#login .login-field input::placeholder{
  color:rgba(255,255,255,.75) !important;
}

#login .login-field button{
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  border:0 !important;
  color:white !important;
  font-size:28px !important;
  cursor:pointer !important;
}

#login .login-btn{
  width:100% !important;
  height:78px !important;
  border:0 !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#86d62d,#4eaa18) !important;
  color:white !important;
  font-size:30px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 16px 35px rgba(65,160,20,.35) !important;
}

#login .login-restrito{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  margin-top:42px !important;
  color:#6eb72b !important;
}

#login .login-restrito span{
  flex:1 !important;
  height:1px !important;
  background:#6eb72b !important;
  opacity:.65 !important;
}

#login .login-restrito p{
  margin:0 !important;
  font-size:22px !important;
}

#login.hidden{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}