@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f3; color: #1a1a1a; }
.header { background: #fff; border-bottom: 1px solid #e5e5e3; padding: 1rem 0; }
.header-inner { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: center; }
.header h1 { font-size: 18px; font-weight: 500; }
.subtitulo { font-size: 13px; color: #888; margin-top: 2px; }
button, input, textarea, select { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.container { max-width: 900px; margin: 0 auto; padding: 1.5rem; }

.tabs { display: flex; gap: 8px; margin-bottom: 1.5rem; }
.tab { padding: 8px 20px; border-radius: 8px; border: 1px solid #ddd; background: transparent; cursor: pointer; font-size: 14px; color: #666; transition: all 0.15s; }
.tab.active { background: #fff; color: #1a1a1a; border-color: #bbb; font-weight: 500; }
.badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 500; margin-left: 6px; }
.badge-a { background: #fff3cd; color: #856404; }
.badge-b { background: #d1e7dd; color: #0a5c36; }

.card { background: #fff; border: 1px solid #e5e5e3; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 12px; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cliente-info { display: flex; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #dbeafe; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #1d4ed8; flex-shrink: 0; }
.cliente-nome { font-size: 15px; font-weight: 500; }
.cliente-tel { font-size: 12px; color: #888; margin-top: 2px; }

.status-badge { font-size: 12px; padding: 4px 10px; border-radius: 8px; font-weight: 500; }
.status-pendente { background: #fff3cd; color: #856404; }
.status-gerada { background: #dbeafe; color: #1d4ed8; }
.status-enviado { background: #d1e7dd; color: #0a5c36; }

.dados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; border-top: 1px solid #f0f0ee; padding-top: 12px; }
.dado { font-size: 13px; }
.dado-label { color: #888; margin-bottom: 2px; }
.dado-valor { color: #1a1a1a; }
.dado-full { grid-column: 1 / -1; }

.rastreio-box { background: #f5f5f3; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.rastreio-box span { color: #888; }
.rastreio-box strong { color: #1a1a1a; }

.acoes { display: flex; gap: 8px; border-top: 1px solid #f0f0ee; padding-top: 12px; flex-wrap: wrap; }
.btn { padding: 7px 14px; border-radius: 8px; border: 1px solid #ddd; background: transparent; cursor: pointer; font-size: 13px; color: #1a1a1a; transition: all 0.15s; }
.btn:hover { background: #f5f5f3; }
.btn-primary { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.btn-primary:hover { background: #bfdbfe; }
.btn-success { background: #d1e7dd; color: #0a5c36; border-color: #a3cfbb; }
.btn-success:hover { background: #a3cfbb; }
.btn-warning { background: #fff3cd; color: #856404; border-color: #ffe69c; }
.btn-warning:hover { background: #ffe69c; }
.btn-danger { background: #f8d7da; color: #842029; border-color: #f1aeb5; }
.btn-danger:hover { background: #f1aeb5; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); align-items: center; justify-content: center; z-index: 100; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 12px; border: 1px solid #e5e5e3; padding: 1.5rem; width: 360px; max-width: 90vw; }
.modal-lg { width: 460px; max-height: 85vh; overflow-y: auto; }
.modal h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.modal p { font-size: 13px; color: #888; margin-bottom: 1rem; }
.modal input, .modal select { width: 100%; padding: 8px 12px; font-size: 14px; border-radius: 8px; border: 1px solid #ddd; background: #fff; color: #1a1a1a; margin-bottom: 1rem; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; }

.edit-field { margin-bottom: 12px; }
.edit-field label { font-size: 12px; color: #888; display: block; margin-bottom: 4px; }
.edit-field input { width: 100%; padding: 7px 10px; font-size: 13px; border-radius: 8px; border: 1px solid #ddd; background: #fff; color: #1a1a1a; margin: 0; }

.empty { text-align: center; padding: 3rem 1rem; color: #888; font-size: 14px; }
.loading { text-align: center; padding: 2rem; color: #888; font-size: 14px; }

.cotacao-item { padding: 12px; border: 1px solid #e5e5e3; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
.cotacao-item:hover { background: #f5f5f3; border-color: #bbb; }
.cotacao-item.selecionado { background: #dbeafe; border-color: #1d4ed8; }