/* CSS adicional único (curto) */
.mr-2{margin-right:.5rem}
img{max-width:100%}
.table td,.table th{vertical-align:middle}


/* Dropzone */
.dropzone {
  border: 2px dashed #b5b5b5; border-radius: 10px; padding: 18px;
  text-align: center; cursor: pointer; transition: .15s;
}
.dropzone:hover { background: #fafafa; }
.dropzone.dragover { border-color:#485fc7; background:#eef2ff; }
.dropzone .dz-preview { margin-top:8px; display:flex; gap:10px; align-items:center; justify-content:center; }
.dropzone img { max-height:96px; border-radius:8px; display:block; }
.dropzone .filename { font-size:.9rem; color:#4a4a4a; }
.searchbox { margin-bottom:.25rem; }


/* Futurista / Glass */
.glass { backdrop-filter: blur(10px); background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.4); border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.grad { background: linear-gradient(135deg,#6c63ff 0%, #00d4ff 100%); border-radius: 16px; padding: 16px; color:#fff; }
.tag-pill { border-radius:999px; padding:4px 10px; font-size:.8rem; background:#eef; }
.thumb { width:72px; height:72px; object-fit:cover; border-radius:12px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.item-card { border-radius:14px; border:1px dashed #d9d9e3; padding:12px; margin-bottom:12px; background:#fff; }
.item-head { display:flex; gap:12px; align-items:center; }
.item-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tiny { font-size:.85rem; color:#6b7280; }
.kpi { font-weight:700; }
.total-sticky { position: sticky; top:12px; }
.dropzone { border:2px dashed #b5b5b5; border-radius:14px; padding:18px; text-align:center; cursor:pointer; transition:.15s; background:#fff; }
.dropzone:hover { background:#fafafa; }
.dropzone.dragover { border-color:#485fc7; background:#eef2ff; }
.dropzone .dz-preview { margin-top:8px; display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.dropzone img { max-height:120px; border-radius:12px; display:block; }
.filename { font-size:.9rem; color:#4a4a4a; }
.hr-soft { height:1px; background:linear-gradient(90deg,transparent,#e5e7eb,transparent); margin:14px 0; border:0; }

/* Autocomplete AJAX */
.ac-wrap { position: relative; }
.ac-list {
  position:absolute; z-index:50; left:0; right:0; top:100%;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); max-height:280px; overflow:auto; margin-top:6px;
}
.ac-item { display:flex; gap:10px; align-items:center; padding:8px 10px; cursor:pointer; }
.ac-item:hover, .ac-item.active { background:#f0f5ff; }
.ac-item img { width:42px; height:42px; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.ac-item .ac-meta { font-size:.85rem; color:#6b7280; }
.thumb { width:72px; height:72px; object-fit:cover; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.dropzone { border:2px dashed #b5b5b5; border-radius:14px; padding:18px; text-align:center; cursor:pointer; transition:.15s; background:#fff; }
.dropzone:hover { background:#fafafa; }
.dropzone.dragover { border-color:#485fc7; background:#eef2ff; }
.dropzone .dz-preview { margin-top:8px; display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.dropzone img { max-height:120px; border-radius:12px; display:block; }

/* Futurista */
.glass { backdrop-filter: blur(10px); background: rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.35); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08); }
.grad { background: linear-gradient(135deg,#6c63ff 0%, #00d4ff 100%); border-radius: 16px; padding: 16px; color:#fff; }
.hr-soft { height:1px; background:linear-gradient(90deg,transparent,#e5e7eb,transparent); margin:14px 0; border:0; }
.tiny { font-size:.88rem; color:#6b7280; }
.kpi { font-weight:700; font-size:1.15rem; }
.kpi-sm { font-weight:700; }
.tag-chip { border-radius:999px; }

/* Avatar */
.avatar-circle { width:40px; height:40px; border-radius:50%; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* Itens */
.item-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px dashed #e5e7eb; }
.item-left { display:flex; gap:12px; align-items:center; }
.item-right { display:flex; gap:22px; align-items:center; }
.item-name { font-weight:600; }
.thumb-lg { width:160px; height:160px; object-fit:cover; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.thumb-sm { width:54px; height:54px; object-fit:cover; border-radius:10px; background:#f3f4f6; }
.thumb-sm.placeholder { display:flex; align-items:center; justify-content:center; color:#999; }
.mini-col { text-align:right; }

/* Timeline de pagamentos */
.timeline { position:relative; margin-left:18px; }
.timeline::before { content:''; position:absolute; left:9px; top:0; bottom:0; width:2px; background:#e5e7eb; }
.tl-item { position:relative; margin:14px 0 14px 0; }
.tl-dot { position:absolute; left:-1px; top:6px; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid #6c63ff; }
.tl-card { margin-left:24px; background:#fff; border:1px solid #eef; border-radius:12px; padding:12px; box-shadow:0 4px 14px rgba(0,0,0,.04); }

/* Resumo lateral */
.sum-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }

.total-sticky { position:sticky; top:12px; }

.app-footer {
  margin-top: 40px;
  padding: 20px 0;
  text-align: center;
  font-size: 0.95rem;
  color: #444;
  background: #fafafa;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 6px rgba(0,0,0,.05);
  border-radius: 0 0 16px 16px;
}

.app-footer strong {
  display: block;
  margin-top: 4px;
  color: #3B5667; /* sua cor de marca */
  font-weight: 700;
  letter-spacing: .3px;
}

.app-footer p {
  margin: 0;
  line-height: 1.5;
}



/* Lista de itens */
.order-items { border:1px solid #eef0f4; border-radius:12px; overflow:hidden; }
.oi-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #f2f4f7; background:#fff; }
.oi-row:last-child { border-bottom:0; }
.oi-left { display:flex; align-items:center; gap:12px; min-width:0; }
.oi-thumb { width:48px; height:48px; object-fit:cover; border-radius:8px; background:#f3f4f6; flex-shrink:0; }
.oi-ph { display:block; }
.oi-name { font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw; }
.oi-meta { font-size:.85rem; color:#6b7280; }
.oi-right { display:flex; gap:20px; align-items:center; }
.oi-col { text-align:right; min-width:110px; }
.oi-lbl { display:block; font-size:.8rem; color:#9aa1ac; }
.oi-val { font-weight:700; }

/* Outras utilitárias já usadas na página */
.glass { backdrop-filter: blur(10px); background: rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.35); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08); }
.grad { background: linear-gradient(135deg,#6c63ff 0%, #00d4ff 100%); border-radius: 16px; padding: 16px; color:#fff; }
.hr-soft { height:1px; background:linear-gradient(90deg,transparent,#e5e7eb,transparent); margin:14px 0; border:0; }
.tiny { font-size:.88rem; color:#6b7280; }
.kpi { font-weight:700; font-size:1.15rem; }
.kpi-sm { font-weight:700; }
.tag-chip { border-radius:999px; }
.avatar-circle { width:40px; height:40px; border-radius:50%; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.thumb-lg { width:160px; height:160px; object-fit:cover; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.thumb-sm { width:54px; height:54px; object-fit:cover; border-radius:10px; background:#f3f4f6; }
.timeline { position:relative; margin-left:18px; }
.timeline::before { content:''; position:absolute; left:9px; top:0; bottom:0; width:2px; background:#e5e7eb; }
.tl-item { position:relative; margin:14px 0 14px 0; }
.tl-dot { position:absolute; left:-1px; top:6px; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid #6c63ff; }
.tl-card { margin-left:24px; background:#fff; border:1px solid #eef; border-radius:12px; padding:12px; box-shadow:0 4px 14px rgba(0,0,0,.04); }
.sum-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.total-sticky { position:sticky; top:12px; }