:root {
  --ink: #1F3B36;
  --cream: #F7F2E4;
  --mustard: #C6862E;
  --coral: #B94A3B;
  --teal: #2E7D6B;
  --line: #DCD2B8;
  --card: #FFFDF7;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 90px; }

/* ---- Layout responsivo para computador ---- */
@media (min-width: 768px) {
  #app { max-width: 900px; }
  .content { max-width: 860px; margin: 0 auto; }
  #map-container { height: 420px; }
  .header { padding: 24px 28px 18px; }
  .tabs { justify-content: center; }
  .tab-btn { min-width: 90px; font-size: 11.5px; }
}
/* em telas grandes, cards lado a lado nas abas de listas */
@media (min-width: 768px) {
  .places-grid, .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .places-grid .card, .cards-grid .card { margin-bottom: 0; }
}

.header { background: var(--ink); color: var(--cream); padding: 20px 18px 16px; }
.header-top { display: flex; justify-content: space-between; align-items: flex-start; }
.header-title { font-family: Georgia, serif; font-size: 22px; letter-spacing: 0.3px; }
.header-sub { font-size: 12px; color: var(--mustard); margin-top: 2px; letter-spacing: 1px; }
.header-people { font-size: 11.5px; color: #B9CFC7; margin-top: 8px; }
.save-status { font-size: 10px; text-align: right; min-width: 60px; }
.save-status.saving { color: var(--mustard); }
.save-status.saved { color: #7FA396; }

.tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 5; overflow-x: auto; }
.tab-btn { flex: 1 0 auto; min-width: 66px; padding: 10px 4px; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; color: #9A9585; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-family: inherit; }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--mustard); }
.tab-btn svg { width: 16px; height: 16px; }

.content { padding: 16px; }

.city-chip-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; }
.city-chip { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 12.5px; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
.city-chip.active { border-color: var(--mustard); background: var(--mustard); color: var(--card); }

.day-chip-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 6px; }
.day-chip { font-size: 11px; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: all 0.15s; }
.day-chip:hover { border-color: var(--mustard); }
.day-chip.active { background: var(--teal); color: #fff; border-color: var(--teal); }

#map-container { width: 100%; height: 260px; border-radius: 12px; border: 1px solid var(--line); }

.legend { display: flex; gap: 12px; font-size: 10.5px; color: #7A7563; margin: 10px 0 16px; flex-wrap: wrap; }
.legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }

.section-title { font-family: Georgia, serif; font-size: 14px; margin-bottom: 8px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; cursor: pointer; }
.card-title { font-family: Georgia, serif; font-size: 13.5px; }
.card-sub { font-size: 11.5px; color: #5C5847; margin-top: 4px; }
.card-tag { font-size: 10.5px; color: var(--mustard); margin-top: 4px; }
.card-note { font-size: 9.5px; color: #B4AF9C; }

.add-btn { width: 100%; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: none; display: flex; align-items: center; justify-content: center; gap: 6px; color: #7A7563; font-size: 13px; cursor: pointer; font-family: inherit; }

.field { width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 13px; padding: 6px 2px; color: var(--ink); outline: none; font-family: inherit; margin-bottom: 6px; }

.edit-row { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.edit-row.between { justify-content: space-between; align-items: center; }
.icon-btn { border: none; background: transparent; cursor: pointer; padding: 6px; display: flex; align-items: center; }

.maps-locator { margin-top: 4px; }
.maps-locator-row { display: flex; gap: 6px; }
.maps-locator input { flex: 1; font-size: 11.5px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: transparent; color: var(--ink); font-family: inherit; }
.maps-locator button { border: 1px solid var(--line); border-radius: 6px; background: none; padding: 0 10px; color: var(--teal); cursor: pointer; }
.locator-msg { font-size: 10.5px; margin-top: 3px; }
.locator-msg.ok { color: var(--teal); }
.locator-msg.fail { color: var(--coral); }
.locator-current { font-size: 10px; color: #9A9585; margin-top: 3px; }

.expense-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.expense-summary .cat-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center; }
.expense-summary .cat-label { font-size: 10px; color: #9A9585; }
.expense-summary .cat-value { font-size: 13px; font-family: Georgia, serif; margin-top: 2px; }
.grand-total { background: var(--ink); color: var(--cream); border-radius: 10px; padding: 10px 14px; display: flex; justify-content: space-between; margin-bottom: 16px; align-items: center; }
.grand-total .value { font-family: Georgia, serif; font-size: 16px; color: var(--mustard); }
.expense-row { display: flex; justify-content: space-between; align-items: center; }
.expense-desc { font-size: 13px; }
.expense-status { font-size: 10px; }
.expense-status.pago { color: var(--teal); }
.expense-status.planejado { color: var(--mustard); }
.expense-amount { font-size: 13.5px; font-family: Georgia, serif; }

.checklist-row { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.checklist-row input[type="text"] { flex: 1; border: none; background: transparent; font-size: 13px; outline: none; font-family: inherit; color: var(--ink); }
.checklist-row input[type="text"].done { color: #A9A491; text-decoration: line-through; }

.loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; font-family: Georgia, serif; }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.leaflet-div-icon { background: none; border: none; }

.ia-textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 13.5px; font-family: inherit; resize: vertical; outline: none; }
.ia-textarea:focus { border-color: var(--mustard); }
.ia-send { display: block; width: 100%; margin-top: 10px; padding: 12px; border: none; border-radius: 10px; background: var(--teal); color: #FFFDF7; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ia-send:disabled { opacity: 0.55; cursor: default; }
.ia-ok { background: #E7F1EC; border: 1px solid #B7D6C9; color: #2E7D6B; border-radius: 10px; padding: 12px; font-size: 13px; }
.ia-fail { background: #FBEAE8; border: 1px solid #E4B7B0; color: #B94A3B; border-radius: 10px; padding: 12px; font-size: 13px; }

.place-cat-badge { font-size: 9.5px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; letter-spacing: 0.3px; }