:root{
  --bg:#f5f7f9;
  --card:#ffffff;
  --line:#e7ebef;
  --text:#17212b;
  --muted:#77838e;
  --green:#176b43;
  --green-2:#218653;
  --green-soft:#edf8f1;
  --danger:#c73b35;
  --shadow:0 8px 30px rgba(20,35,45,.07);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 8% 0%,rgba(33,134,83,.055),transparent 28%),
    var(--bg);
  color:var(--text);
}
button,input,select{font:inherit}
button{transition:.18s ease}
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(220,227,232,.9);
}
.top{
  max-width:1240px;margin:auto;padding:13px 20px;
  min-height:66px;display:flex;align-items:center;gap:14px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:950;font-size:19px;letter-spacing:-.5px;
}
.brand:before{
  content:"A";width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;background:linear-gradient(135deg,var(--green),var(--green-2));
  color:#fff;font-size:17px;box-shadow:0 6px 14px rgba(23,107,67,.2);
}
.brand span{font-size:9px;font-weight:800;letter-spacing:1.7px;color:var(--muted);display:block}
.title{
  flex:1;text-align:left;margin-left:12px;
  font-size:14px;font-weight:900;letter-spacing:.2px;
}
.top a{
  color:#52606b;text-decoration:none;font-weight:800;font-size:12px;
  border:1px solid var(--line);background:#fff;border-radius:10px;
  padding:9px 12px;
}
.top a:hover{border-color:#bfd4c7;color:var(--green);background:var(--green-soft)}
main{max-width:1240px;margin:22px auto;padding:0 18px 170px}
.step-card{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:21px;margin-bottom:15px;box-shadow:var(--shadow);
}
.step-title{display:flex;gap:12px;align-items:center;margin-bottom:15px}
.step-title>b{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--green-soft);color:var(--green);font-size:12px;
  border:1px solid #d6ebdc;
}
.step-title strong{display:block;font-size:15px;font-weight:900;letter-spacing:-.1px}
.step-title small,.payment-row small{
  display:block;color:var(--muted);margin-top:4px;font-size:11px
}
.search,input,select{
  width:100%;height:46px;border:1px solid #d9e0e5;border-radius:12px;
  padding:0 13px;font-size:13px;background:#fff;outline:none;
  color:var(--text);transition:.18s ease;
}
.search{margin:3px 0 8px}
.search::placeholder,input::placeholder{color:#a1abb3}
.search:focus,input:focus,select:focus{
  border-color:#75ad8d;box-shadow:0 0 0 4px rgba(33,134,83,.09)
}
.product-search-wrap{position:relative}
.product-search-wrap .search{padding-left:42px}
.search-icon{position:absolute;left:14px;top:10px;color:#7d8992;font-size:21px;z-index:1}
.keyboard-hint{
  position:absolute;right:11px;top:10px;font-size:9px;color:#7d8992;
  background:#f5f7f8;border:1px solid #e8ecef;border-radius:6px;padding:4px 7px;font-weight:800
}
.results{display:grid;gap:6px;margin-bottom:10px}
.result{
  width:100%;border:1px solid #e3e8ec;background:#fff;text-align:left;
  border-radius:12px;padding:11px 13px;cursor:pointer
}
.result:hover,.active-result{
  background:#f0f9f3!important;border-color:#86b99a!important;
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(23,107,67,.07)
}
.result strong,.result span{display:block}
.result strong{font-size:12px;font-weight:850}
.result span{font-size:10px;color:#7d8992;margin-top:4px}
.result-product-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.search-price{color:var(--green);font-size:13px;font-weight:900}
.search-stock{color:var(--green)}
.stock-zero{color:#b3322d!important}
.selected{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--green-soft);border:1px solid #cde5d5;border-radius:13px;padding:13px
}
.selected strong{font-size:13px}.selected span{display:block;color:#65736b;font-size:10px;margin-top:3px}
.selected button{
  border:1px solid #cde5d5;background:#fff;color:var(--green);
  font-weight:900;cursor:pointer;border-radius:9px;padding:8px 10px
}
.hidden{display:none!important}
.items-head{
  display:flex;justify-content:space-between;align-items:center;
  margin:18px 0 7px;color:#66737d;font-size:9px;font-weight:900;letter-spacing:1px
}
#itemsCount{
  background:#f2f5f6;border-radius:20px;padding:5px 9px;letter-spacing:0;font-size:9px
}
.product-table-head{
  display:grid;grid-template-columns:minmax(280px,1fr) 145px 125px 190px 150px 28px;
  gap:12px;align-items:center;background:#f8fafb;
  border:1px solid #e8ecef;border-radius:11px 11px 0 0;
  padding:9px 11px;color:#84909a;font-size:8px;font-weight:900;letter-spacing:.6px
}
.item-row{
  display:grid;grid-template-columns:minmax(280px,1fr) 145px 125px 190px 150px 28px;
  gap:12px;align-items:center;border:1px solid #e8ecef;border-top:0;
  background:#fff;padding:13px 11px
}
.item-row:hover{background:#fcfefd}
.item-product{display:flex;gap:10px;align-items:center;min-width:0}
.item-product strong{
  font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:850
}
.item-product small{font-size:9px;color:#89949d;display:block;margin-top:4px}
.item-index{
  width:27px;height:27px;border-radius:8px;background:var(--green-soft);
  color:var(--green);display:grid;place-items:center;font-size:10px;font-weight:950;flex:none
}
.qty{display:flex;align-items:center;gap:5px}
.qty button{
  width:31px;height:33px;border:1px solid #d8e0e4;background:#fff;
  color:#52606a;border-radius:9px;font-size:17px;cursor:pointer
}
.qty button:hover{border-color:#a8c8b4;color:var(--green);background:var(--green-soft)}
.qty-input{
  width:55px!important;height:33px!important;text-align:center;margin:0!important;
  padding:0 5px!important;font-size:12px!important;font-weight:800
}
.line-price,.line-total{min-width:0}
.line-price span,.line-total span{display:block;font-size:8px;color:#8a959d;font-weight:900;letter-spacing:.4px}
.line-price strong{font-size:13px}.line-total strong{font-size:14px;color:var(--green);font-weight:950}
.line-discount{display:grid;grid-template-columns:1fr 1fr;gap:5px;align-items:center}
.line-discount>div{display:flex;align-items:center;gap:4px}
.line-discount label{font-size:8px;color:#68737c;font-weight:900}
.discount-input{
  width:68px!important;height:31px!important;margin:0!important;padding:0 7px!important;font-size:11px!important
}
.line-discount small{grid-column:1/-1;font-size:8px;color:#8a949e}
.del{
  border:0;background:#fff;color:#c0392b;font-size:22px;cursor:pointer;
  width:29px;height:33px;border-radius:8px
}
.del:hover{background:#fff0ef}
.payment-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px
}
.payment-row>div strong{font-size:13px;font-weight:900}
.payment-row select{max-width:350px}
.summary{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(255,255,255,.96);backdrop-filter:blur(15px);
  border-top:1px solid #dfe5e9;padding:10px max(18px,calc((100% - 1240px)/2));
  display:flex;align-items:center;justify-content:space-between;gap:18px;z-index:60;
  box-shadow:0 -10px 30px rgba(20,35,45,.08)
}
.summary-info{display:flex;align-items:center;gap:25px;min-width:0}
.quote-number{min-width:155px}
.summary span{display:block;color:#7b8794;font-size:8px;font-weight:900;letter-spacing:.5px}
.summary strong{display:block;font-size:13px;font-weight:900}
.totals{display:flex;align-items:center;gap:20px}
.totals>div{display:flex;align-items:center;gap:8px}
.note-discount{align-items:center!important}
.discount-line{display:flex;gap:5px}
.discount-line label{font-size:8px;color:#66727c;font-weight:900}
.discount-line .discount-input{width:65px!important;height:29px!important}
.totals .grand{border-left:1px solid #e0e5e9;padding-left:18px}
.totals .grand strong{font-size:21px;color:var(--green)}
.summary button,.login-card button,form button{
  border:0;border-radius:11px;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  color:#fff;font-weight:900;padding:13px 18px;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 15px rgba(23,107,67,.18)
}
.summary button:hover,.login-card button:hover,form button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(23,107,67,.22)}
.summary button:disabled{background:#b9c5bd;box-shadow:none;cursor:not-allowed;transform:none}
.empty{padding:11px;color:#8a949e;font-size:11px}
.empty-box{
  border:1px dashed #d6dde2;border-radius:12px;text-align:center;
  padding:30px;background:#fafbfc
}
.loading{padding:11px;border-radius:10px;background:#f4faf6;color:var(--green);font-size:10px}
.error-box{background:#fff5f4;color:#a11}
.ok{background:#e9f7ee;color:var(--green);padding:11px;border-radius:10px;margin-top:12px;font-size:11px}
.error{background:#fdecec;color:#a11}
#message{margin-bottom:10px}
.login-body{
  min-height:100vh;display:grid;place-items:center;
  background:
    radial-gradient(circle at 15% 15%,rgba(33,134,83,.12),transparent 28%),
    radial-gradient(circle at 85% 85%,rgba(23,107,67,.08),transparent 25%),
    var(--bg)
}
.login-card{
  width:min(430px,92%);background:rgba(255,255,255,.97);
  padding:32px;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 18px 55px rgba(20,35,45,.12)
}
.login-card:before{
  content:"ARI SISTEMAS";display:block;color:var(--green);
  font-size:11px;font-weight:950;letter-spacing:2px;margin-bottom:8px
}
.login-card h1,.login-card h2{letter-spacing:-.6px}
.login-card label,form label{display:block;font-size:10px;font-weight:900;margin:13px 0 6px;color:#53616b}
.login-card button{width:100%;margin-top:15px}
.login-card input{margin:0}
.config-main{max-width:900px}
.config-heading{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.config-icon{
  width:46px;height:46px;border-radius:13px;background:var(--green-soft);
  border:1px solid #d6ebdc;display:grid;place-items:center;font-size:21px
}
.config-heading h2{margin:0;font-size:20px;font-weight:950}
.config-heading p{margin:4px 0 0;color:#7b8794;font-size:11px}
.config-section{padding:18px 0;border-top:1px solid #edf0f2}
.config-section h3{font-size:12px;margin:0 0 12px;font-weight:950}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.limit-section{
  background:#fbfdfb;border:1px solid #e1ebe4;border-radius:13px;padding:15px;margin-top:8px
}
.limit-section input{max-width:180px}
.hint{font-size:9px;color:#75818c;margin-top:3px;line-height:1.5}
.save-config{margin-top:10px}
.config-card form>button{width:100%}
@media(max-width:1050px){
  .product-table-head,.item-row{grid-template-columns:minmax(240px,1fr) 115px 105px 170px 130px 28px;gap:8px}
  .summary-info{gap:14px}.totals{gap:10px}
}
@media(max-width:760px){
  .top{padding:10px 12px;min-height:60px}.brand{font-size:17px}.brand:before{width:34px;height:34px}.title{font-size:12px}
  .top a{padding:8px 9px;font-size:11px}.top a:first-of-type{font-size:0}.top a:first-of-type::after{content:"⚙";font-size:15px}
  main{padding:8px 10px 265px}.step-card{padding:16px;margin-bottom:11px;border-radius:15px}
  .product-table-head{display:none}
  .item-row{
    grid-template-columns:1fr auto;gap:9px;border-top:1px solid #e8ecef;
    padding:13px 5px;border-radius:0
  }
  .item-product{grid-column:1/-1}.qty{grid-column:1}.line-price{grid-column:2;text-align:right}
  .line-discount{grid-column:1/-1}.line-total{grid-column:1}.del{grid-column:2;grid-row:4;justify-self:end}
  .summary{display:block;padding:9px 12px}.summary-info{display:block}.quote-number{display:flex;justify-content:space-between;margin-bottom:5px}
  .totals{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .totals .grand{grid-column:2;grid-row:1/span 2;border-left:0;border-top:1px solid #e0e5e9;padding:7px 0 0 10px}
  .summary button{width:100%;margin-top:7px}.keyboard-hint{display:none}
  .payment-row{display:block}.payment-row select{max-width:none;margin-top:8px}
  .form-grid{grid-template-columns:1fr}.result-product-top{align-items:flex-start}
}
.line-total .with-discount-label{margin-top:5px}
.line-total strong + .with-discount-label{color:#8a959d}

.customer-actions{display:flex;gap:10px;align-items:flex-start}.customer-search{flex:1;min-width:0}.secondary-btn{border:1px solid #cfe0d5!important;background:#fff!important;color:var(--green)!important;font-weight:900;padding:12px 14px;border-radius:11px;cursor:pointer;box-shadow:none!important;white-space:nowrap}.secondary-btn:hover{background:var(--green-soft)!important}.selected-actions{display:flex;gap:6px;align-items:center}.selected-actions button{padding:7px 9px!important}.summary-actions{display:flex;gap:8px;align-items:center}.summary-actions .pdf-btn{background:#fff;color:var(--green);border:1px solid #cfe0d5;box-shadow:none}.summary-actions .pdf-btn:hover{background:var(--green-soft)}.summary-actions .pdf-btn:disabled{background:#f2f4f3;color:#9ba7a0;border-color:#e1e6e3}.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:rgba(18,29,24,.45);backdrop-filter:blur(4px)}.modal-card{position:relative;width:min(820px,96vw);max-height:92vh;overflow:auto;background:#fff;border:1px solid #dfe7e2;border-radius:20px;box-shadow:0 25px 70px rgba(15,30,22,.25);padding:20px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.modal-head span{font-size:9px;font-weight:950;letter-spacing:1.3px;color:var(--green)}.modal-head h3{margin:4px 0 0;font-size:20px}.modal-head>button{border:0;background:#f3f6f4;color:#68756e;width:34px;height:34px;border-radius:10px;font-size:22px;cursor:pointer}.client-grid{grid-template-columns:1fr 1fr}.client-grid .wide{grid-column:1/-1}.client-grid label{margin:0}.modal-msg{min-height:18px;margin-top:10px;font-size:11px;color:#a33}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.primary-btn{border:0;border-radius:11px;background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;font-weight:900;padding:12px 18px;cursor:pointer}.modal-actions .secondary-btn{padding:12px 18px!important}.line-total strong{line-height:1.15}.line-total .with-discount-label{font-size:7px}
@media(max-width:760px){.customer-actions{display:block}.customer-actions .secondary-btn{width:100%;margin-top:3px}.selected-actions{flex-wrap:wrap}.summary-actions{display:grid;grid-template-columns:1fr 1fr}.summary-actions button{font-size:10px;padding:11px 8px}.client-grid{grid-template-columns:1fr}.client-grid .wide{grid-column:auto}.modal-card{padding:15px;border-radius:16px}.modal{padding:8px}}

.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.notes-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:#344054}.notes-grid textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:78px;border:1px solid #d0d5dd;border-radius:12px;padding:11px 12px;font:inherit;color:#101828;background:#fff;outline:none}.notes-grid textarea:focus{border-color:#087542;box-shadow:0 0 0 3px rgba(8,117,66,.08)}.quote-number{position:relative}.number-refresh{margin-left:10px;border:0;background:transparent;color:#087542;font-size:11px;font-weight:700;cursor:pointer;padding:2px 4px}.number-refresh:hover{text-decoration:underline}@media(max-width:760px){.notes-grid{grid-template-columns:1fr}.number-refresh{display:block;margin:5px 0 0}}

.suggestions{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border:1px solid #d9e2dc;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.10);overflow:hidden;max-height:260px;overflow-y:auto}.suggestion{padding:10px 12px;cursor:pointer;border-bottom:1px solid #eef2ef;font-size:13px}.suggestion:last-child{border-bottom:0}.suggestion:hover{background:#f0f8f3}.suggestion.muted{color:#7b8794;cursor:default}.filter-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.filter-row label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:#475467}.filter-row input{min-height:40px}
.doc-row{display:grid;grid-template-columns:1.1fr 2fr 1.25fr 1fr .7fr;align-items:center;gap:12px;padding:12px 10px;border-bottom:1px solid #edf1ee}.doc-row>div{min-width:0}.doc-row small{display:block;color:#667085;margin-top:2px}.docs-head{display:grid;grid-template-columns:1.1fr 2fr 1.25fr 1fr .7fr;gap:12px;font-size:11px;font-weight:800;color:#667085;padding:9px 10px;background:#f4f7f5;border-bottom:1px solid #dfe7e2}
@media(max-width:760px){.docs-head{display:none}.doc-row{grid-template-columns:1fr 1fr;padding:12px 4px}.doc-row>div:nth-child(3),.doc-row>div:nth-child(4){font-size:12px}.doc-row>div:nth-child(5){text-align:right}.filter-row label{width:100%;min-width:0!important}.filter-row button{width:100%}}