/* ==========================================================================
   Amandaí — estilos compartilhados
   Paleta e tipografia da marca: azul profundo, creme, dourado, vermelho Londrina
   Playfair Display (títulos) + Montserrat (texto)
   ========================================================================== */

:root{
  --bg:#F7F1E2;
  --bg-2:#EFE6CE;
  --surface:#FFFFFF;
  --text:#241E3A;
  --text-soft:#5B5A78;
  --heading:#1A2456;
  --border:#E3D9BE;
  --accent-blue:#3E5CA8;
  --accent-gold:#B98A2E;
  --accent-gold-strong:#D9A63E;
  --accent-red:#A93A34;
  --state-good:#2E7D4F;
  --emphasis:#1A2456;
  --on-emphasis:#F7F1E2;
  --shadow: 0 1px 2px rgba(26,36,86,.06), 0 8px 24px rgba(26,36,86,.08);
  --radius: 14px;
  --maxw: 1180px;

  --selo-indica-bg:#F2E2B8; --selo-indica-text:#6B4E11;
  --selo-olha-bg:#DCE3F7;   --selo-olha-text:#2A3E86;
  --selo-rolando-bg:#F3D9D6; --selo-rolando-text:#8A342D;

  --cat-restaurante:#B98A2E;
  --cat-cafe:#A9524B;
  --cat-buffet:#6C5CA8;
  --cat-parque-indoor:#2E8B7D;
  --cat-parque-aberto:#3E8E4F;
  --cat-shopping:#3E5CA8;

  /* faixa da marca — mantém a identidade nos dois temas, de propósito */
  --band-bg:#1A2456;
  --band-text:#F7F1E2;
  --band-dim:#DCE3F7;
  --band-soft:#C9D2EE;
  --band-gold:#E0B75C;
  --band-border:rgba(247,241,226,.28);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141A3D;
    --bg-2:#1C2450;
    --surface:#1B234C;
    --text:#EDE9F4;
    --text-soft:#AFAECF;
    --heading:#EFE6CE;
    --border:#2C3568;
    --accent-blue:#9DB2E8;
    --accent-gold:#E0B75C;
    --accent-gold-strong:#E8C273;
    --accent-red:#E08C86;
    --state-good:#6FCF97;
    --emphasis:#EFE6CE;
    --on-emphasis:#141A3D;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35);

    --selo-indica-bg:#4A3A12; --selo-indica-text:#F0CC7E;
    --selo-olha-bg:#22305F;   --selo-olha-text:#B7C6F5;
    --selo-rolando-bg:#4A211D; --selo-rolando-text:#F0B3AC;

    --cat-restaurante:#E0B75C;
    --cat-cafe:#DE8981;
    --cat-buffet:#B0A0E8;
    --cat-parque-indoor:#6FD9C7;
    --cat-parque-aberto:#83D993;
    --cat-shopping:#9DB2E8;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Playfair Display',Georgia,serif;
  text-wrap:balance;
  color:var(--heading);
}
button,input,select,textarea{font-family:inherit;}
a{color:inherit;}
::selection{background:var(--accent-gold);color:#fff;}
:focus-visible{outline:2px solid var(--accent-gold-strong); outline-offset:2px;}

/* ---------- Faixa da marca ---------- */
header.top{
  background:var(--band-bg);
  color:var(--band-text);
  padding:20px 20px 18px;
}
.top-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.brand-mark{display:flex; align-items:baseline; gap:3px;}
.brand-mark .word{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-style:italic; font-size:28px;
  color:var(--band-text); letter-spacing:.2px;
}
.brand-mark .star{color:var(--band-gold); font-size:16px;}
.brand-sub{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--band-gold); font-weight:600; margin-top:2px;
}
.brand-tagline{font-size:12.5px; color:var(--band-soft); margin-top:6px; max-width:380px;}
.band-link{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--band-border);
  color:var(--band-dim); padding:8px 13px; border-radius:999px;
  font-size:12px; font-weight:600; cursor:pointer; text-decoration:none;
}
.band-link:hover{border-color:rgba(247,241,226,.55);}
.band-link svg{width:14px;height:14px;flex:none;}
h1.headline{
  font-size:clamp(21px,3.2vw,29px); margin:14px 0 0; font-weight:600;
  max-width:640px; color:var(--band-text);
}
h1.headline em{font-style:italic; color:var(--band-gold);}

/* ---------- Controles ---------- */
.controls{
  position:sticky; top:0; z-index:600;
  background:var(--bg); border-bottom:1px solid var(--border); padding:12px 20px;
}
.controls-inner{max-width:var(--maxw); margin:0 auto;}
.search-row{display:flex; gap:9px; align-items:center;}
.search-box{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:10px 15px;
}
.search-box svg{width:16px;height:16px;color:var(--text-soft);flex:none;}
.search-box input{
  border:none; outline:none; background:transparent;
  font-size:15px; color:var(--text); width:100%; min-width:0;
}
.search-box input::placeholder{color:var(--text-soft);}
.pill-btn{
  display:flex; align-items:center; gap:7px; flex:none;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:10px 15px; font-size:13px; font-weight:600; color:var(--heading);
  cursor:pointer; white-space:nowrap;
}
.pill-btn svg{width:14px;height:14px;}
.pill-btn .count{
  background:var(--accent-gold); color:#fff; border-radius:999px;
  font-size:10.5px; font-weight:700; padding:1px 6px; min-width:16px; text-align:center;
}
.cat-tabs{display:flex; gap:8px; overflow-x:auto; margin-top:11px; padding-bottom:2px; scrollbar-width:none;}
.cat-tabs::-webkit-scrollbar{display:none;}
.cat-tab{
  flex:none; padding:7px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-soft);
  font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.cat-tab.active{background:var(--emphasis); border-color:var(--emphasis); color:var(--on-emphasis);}

.filters-panel{
  max-width:var(--maxw); margin:11px auto 0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:15px 17px; box-shadow:var(--shadow); display:none;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:15px;
}
.filters-panel.open{display:grid;}
.filter-group.full{grid-column:1/-1;}
.group-label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-soft); margin-bottom:8px;
}
.chip-set{display:flex; flex-wrap:wrap; gap:6px;}
.chip-check{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); border-radius:8px; padding:7px 10px;
  font-size:12.5px; cursor:pointer; color:var(--text); background:var(--bg);
}
.chip-check input{accent-color:var(--accent-gold-strong); margin:0;}
.near-me-row{
  display:flex; align-items:center; gap:8px; margin-bottom:11px;
  padding-bottom:11px; border-bottom:1px dashed var(--border); flex-wrap:wrap;
}
.near-me-row label{
  display:flex; align-items:center; gap:8px; font-size:13.5px;
  font-weight:600; color:var(--heading); cursor:pointer;
}
.near-me-row input{accent-color:var(--accent-gold-strong); width:17px; height:17px;}
.near-me-row svg{width:15px;height:15px; color:var(--accent-blue);}
.region-city{margin-bottom:7px;}
.region-city:last-child{margin-bottom:0;}
.region-city summary{
  cursor:pointer; font-size:13px; font-weight:700; color:var(--heading);
  padding:4px 0; list-style:none; display:flex; align-items:center; gap:6px;
}
.region-city summary::-webkit-details-marker{display:none;}
.region-city summary::before{content:"▸"; font-size:10px; color:var(--text-soft);}
.region-city[open] summary::before{content:"▾";}
.region-city summary .n{color:var(--text-soft); font-weight:600;}
.region-bairros{display:flex; flex-wrap:wrap; gap:6px; padding:8px 0 4px 16px;}
.filters-clear{
  grid-column:1/-1; display:flex; justify-content:space-between;
  align-items:center; gap:12px; flex-wrap:wrap;
}
.filters-clear #btnLimpar{
  background:none; border:none; color:var(--accent-red);
  font-size:12.5px; font-weight:700; cursor:pointer; padding:4px 0;
}
.filters-clear .btn-salvar{padding:11px 20px; font-size:13.5px;}

/* ---------- Área de resultados ---------- */
main{max-width:var(--maxw); margin:0 auto; padding:16px 20px 70px;}
.results-line{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap; margin-bottom:12px;
}
.results-count{font-size:12.5px; color:var(--text-soft);}
.results-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.view-toggle{
  display:flex; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:3px;
}
.view-toggle button{
  border:none; background:none; padding:7px 14px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--text-soft); cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.view-toggle button.active{background:var(--emphasis); color:var(--on-emphasis);}
.view-toggle svg{width:13px;height:13px;}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:15px;}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:15px 15px 13px; box-shadow:var(--shadow); cursor:pointer;
  display:flex; flex-direction:column; gap:9px; position:relative;
  transition:transform .12s ease;
  text-align:left; width:100%; font:inherit; color:inherit;
}
.card:hover{transform:translateY(-2px);}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.selo{
  font-size:10px; font-weight:700; letter-spacing:.04em; padding:3px 8px;
  border-radius:999px; text-transform:uppercase; flex:none;
}
.selo-indica{background:var(--selo-indica-bg); color:var(--selo-indica-text);}
.selo-olha{background:var(--selo-olha-bg); color:var(--selo-olha-text);}
.selo-rolando{background:var(--selo-rolando-bg); color:var(--selo-rolando-text);}
.cat-icon{width:25px;height:25px;flex:none;}
.c-restaurante{color:var(--cat-restaurante);}
.c-cafe{color:var(--cat-cafe);}
.c-buffet{color:var(--cat-buffet);}
.c-parque-indoor{color:var(--cat-parque-indoor);}
.c-parque-aberto{color:var(--cat-parque-aberto);}
.c-shopping{color:var(--cat-shopping);}
.card h3{font-size:17.5px; margin:0; line-height:1.25;}
.place-cat{font-size:11.5px; color:var(--text-soft); font-weight:600;}
.place-loc{font-size:12px; color:var(--text-soft); display:flex; gap:5px; align-items:flex-start;}
.place-loc svg{width:12px;height:12px; margin-top:2px; flex:none;}
.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto;}
.tag{font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--bg-2); color:var(--text);}
.tag.dist{background:transparent; border:1px solid var(--accent-blue); color:var(--accent-blue);}
.tag.rascunho{background:transparent; border:1px dashed var(--accent-red); color:var(--accent-red);}
.amenity-row{display:flex; gap:10px; padding-top:8px; border-top:1px dashed var(--border);}
.amenity{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-soft);}
.amenity svg{width:14px;height:14px;}
.amenity.yes{color:var(--state-good);}
.amenity.no{color:var(--text-soft); opacity:.5;}
.amenity.unknown{color:var(--accent-gold);}

.empty-state{text-align:center; padding:54px 20px; color:var(--text-soft);}
.empty-state h3{margin:0 0 6px;}
.banner{
  padding:11px 15px; border-radius:10px; background:var(--bg-2);
  border:1px solid var(--border); font-size:12.5px; color:var(--text);
  display:flex; gap:9px; align-items:flex-start; margin-bottom:14px;
}
.banner svg{width:15px;height:15px; flex:none; margin-top:1px; color:var(--accent-gold);}
.banner a{color:var(--accent-blue); font-weight:600;}

/* ---------- Mapa ---------- */
#mapa{
  height:min(70vh,560px); width:100%;
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); background:var(--bg-2); z-index:1;
}
.map-wrap{display:none;}
.map-wrap.on{display:block;}
.map-legend{
  display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:11px;
  font-size:11.5px; color:var(--text-soft);
}
.map-legend .item{display:flex; align-items:center; gap:6px;}
.map-legend .dot{width:10px;height:10px;border-radius:999px;flex:none;}
.map-note{font-size:11.5px; color:var(--text-soft); margin-top:8px;}
.pino{background:none; border:none;}
.pino svg{display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));}
.leaflet-popup-content-wrapper{border-radius:12px;}
.leaflet-popup-content{margin:12px 14px; font-family:'Montserrat',sans-serif;}
.popup-nome{font-family:'Playfair Display',Georgia,serif; font-size:16px; font-weight:600; color:#1A2456; margin-bottom:2px;}
.popup-cat{font-size:11.5px; color:#5B5A78; margin-bottom:8px;}
.popup-btn{
  display:inline-block; background:#1A2456; color:#F7F1E2; text-decoration:none;
  padding:7px 12px; border-radius:8px; font-size:12px; font-weight:700;
}

/* ---------- Modal ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(10,12,28,.55); display:none;
  align-items:flex-start; justify-content:center; padding:34px 14px;
  overflow-y:auto; z-index:1500;
}
.overlay.open{display:flex;}
.modal{
  background:var(--surface); border-radius:18px; max-width:560px; width:100%;
  box-shadow:var(--shadow); padding:24px 24px 22px; position:relative;
}
.modal-close{
  position:absolute; top:14px; right:14px; width:31px;height:31px;
  border-radius:999px; border:none; background:var(--bg-2); color:var(--text);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal-close svg{width:14px;height:14px;}
.modal h2{font-size:23px; margin:0 0 4px; padding-right:34px;}
.modal .place-cat{font-size:12.5px; margin-bottom:13px;}
.modal .place-loc{font-size:13px; margin-bottom:15px;}
.modal-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:15px;}
.modal-obs{
  font-size:13.5px; line-height:1.6; background:var(--bg);
  border-radius:10px; padding:12px 14px; margin-bottom:15px;
}
.amenity-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-bottom:18px;}
.amenity-grid .amenity{font-size:13px;}
.amenity-grid .amenity svg{width:16px;height:16px;}
.acoes{display:flex; gap:9px; flex-wrap:wrap;}
.btn-principal, .btn-secundario{
  flex:1 1 150px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:12px; padding:13px; font-size:14px; font-weight:700;
  cursor:pointer; text-decoration:none;
}
.btn-principal{background:var(--accent-gold-strong); color:#241C08;}
.btn-secundario{background:var(--bg-2); color:var(--heading); border:1px solid var(--border);}
.btn-principal svg,.btn-secundario svg{width:16px;height:16px;}

/* ---------- Formulários / admin ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.form-grid .full{grid-column:1/-1;}
.field label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-soft); margin-bottom:5px;
}
.field input[type=text], .field input[type=email], .field input[type=password],
.field select, .field textarea{
  width:100%; font-size:15px; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:9px; padding:10px 11px; outline:none;
}
.field textarea{resize:vertical; min-height:78px;}
.field-hint{font-size:11.5px; color:var(--text-soft); margin-top:5px;}
.field-hint a{color:var(--accent-blue); font-weight:600;}
.btn-salvar{
  background:var(--emphasis); color:var(--on-emphasis); border:none; border-radius:10px;
  padding:12px 22px; font-size:14px; font-weight:700; cursor:pointer;
}
.btn-salvar:disabled{opacity:.5; cursor:default;}
.btn-linha{
  background:var(--surface); color:var(--heading); border:1px solid var(--border);
  border-radius:10px; padding:10px 15px; font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
}
.btn-linha svg{width:14px;height:14px;}
.btn-linha.perigo{color:var(--accent-red); border-color:var(--accent-red);}
.btn-linha:disabled{opacity:.55; cursor:default;}
.form-actions{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-top:16px; flex-wrap:wrap;
}
#mapaEditor{
  height:220px; border-radius:10px; border:1px solid var(--border);
  margin-top:8px; z-index:1;
}
.card-admin-row{display:flex; gap:7px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);}
.card-admin-row button{
  flex:1; background:var(--bg-2); border:1px solid var(--border); border-radius:8px;
  padding:8px; font-size:12px; font-weight:600; color:var(--heading); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.card-admin-row button svg{width:13px;height:13px;}
.card-admin-row button.perigo{color:var(--accent-red);}

.login-wrap{max-width:380px; margin:56px auto; padding:0 20px;}
.login-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow);
}
.login-card h2{margin:0 0 4px; font-size:22px;}
.login-card p.sub{margin:0 0 18px; font-size:13px; color:var(--text-soft);}
.login-card .field{margin-bottom:12px;}
.login-erro{
  font-size:12.5px; color:var(--accent-red); margin-top:10px; display:none;
}
.login-erro.on{display:block;}

.admin-topo{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; margin-bottom:16px;
}
.admin-topo .quem{font-size:12.5px; color:var(--text-soft);}
.barra-progresso{
  height:6px; background:var(--bg-2); border-radius:999px; overflow:hidden; margin-top:8px;
}
.barra-progresso i{display:block; height:100%; background:var(--accent-gold-strong); width:0;}

.toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:var(--emphasis); color:var(--on-emphasis); padding:12px 18px;
  border-radius:999px; font-size:12.5px; font-weight:600; box-shadow:var(--shadow);
  z-index:2000; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:86vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}

.rodape{
  max-width:var(--maxw); margin:0 auto; padding:0 20px 40px;
  font-size:11.5px; color:var(--text-soft); line-height:1.6;
}
.rodape a{color:var(--accent-blue);}

@media (prefers-reduced-motion: reduce){
  .card,.toast{transition:none;}
}
@media (max-width:620px){
  .form-grid{grid-template-columns:1fr;}
  .amenity-grid{grid-template-columns:1fr;}
  .modal{padding:20px 18px 18px;}
  header.top{padding:16px 16px 15px;}
  .controls{padding:11px 16px;}
  main{padding:14px 16px 60px;}
}