/* Aestra Select — componentes do design system.
   Usa apenas os tokens de tokens.css (cores, fontes, espaços, raios, sombras).
   O tema escuro vem dos tokens; nenhuma regra aqui depende de tema. */

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:15px;line-height:22px;background:var(--surface-page);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3{font-weight:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
[hidden]{display:none!important}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--ink-muted)}
.w100{width:100%}

/* ---------- Button ---------- */
.btn,.btn-out,.btn-ghost,.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-size:14px;line-height:20px;font-weight:700;border-radius:var(--radius-md);white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.btn{background:var(--action);color:var(--on-action);padding:10px var(--space-4)}
.btn:hover{background:var(--action-hover)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:var(--danger-hover)}
.btn:disabled,.btn-out:disabled{opacity:.55;cursor:default}
.btn-out{background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);padding:9px 14px}
.btn-out:hover{border-color:var(--action)}
.btn-ghost{background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px var(--space-3);font-size:13px;line-height:18px;font-weight:600}
.btn-ghost:hover{border-color:var(--action)}
.btn-wa{background:var(--whatsapp);color:var(--on-action);padding:9px var(--space-4)}
.btn-wa:hover{background:var(--whatsapp-hover)}
.btn-sm{padding:7px var(--space-3);font-size:13px;line-height:18px}
.ib{width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);flex:none}
.ib:hover{border-color:var(--action)}
.ib.del:hover{border-color:var(--danger);color:var(--danger)}
.ib:disabled{opacity:.35;cursor:default}

/* ---------- Chip (categoria, filtro, opção marcável) ---------- */
.chip{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-2) 14px;font-size:14px;line-height:20px;font-weight:600;transition:border-color .2s,transform .2s}
.chip:hover{border-color:var(--action);transform:translateY(-1px)}
.chip.on{background:var(--action);border-color:var(--action);color:var(--on-action)}
.tg{border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);border-radius:var(--radius-pill);padding:6px 13px;font-size:13px;line-height:18px;font-weight:600}
.tg:hover{border-color:var(--action)}
.tg.on{background:var(--action);border-color:var(--action);color:var(--on-action)}
.ck{display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);border-radius:var(--radius-pill);padding:7px 14px;font-size:14px;line-height:20px;font-weight:500;cursor:pointer;user-select:none}
.ck input{accent-color:var(--action);width:16px;height:16px}

/* ---------- Badge ---------- */
.b{display:inline-flex;align-items:center;gap:var(--space-1);font-size:12px;line-height:16px;font-weight:700;padding:3px 10px;border-radius:var(--radius-sm)}
.b svg.i{width:12px;height:12px}
.b-exc{background:var(--brand-900);color:var(--on-brand)}
.b-dst{background:var(--brand-100);color:var(--brand-900)}
.b-new{background:var(--info);color:var(--on-action)}
.b-type{background:var(--glass);color:var(--glass-ink);font-size:12px;line-height:16px;font-weight:700;padding:3px 10px;border-radius:var(--radius-sm)}
.tag-type{display:inline-block;background:var(--line);color:var(--ink);border-radius:var(--radius-sm);padding:3px 10px;font-size:12px;line-height:16px;font-weight:700}
.count{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:700;background:var(--line);color:var(--ink);border-radius:var(--radius-sm);padding:3px 9px}
.pill{display:inline-block;font-size:11px;line-height:16px;font-weight:800;border-radius:var(--radius-pill);padding:2px var(--space-2);background:var(--warning-bg);color:var(--warning-ink)}
.pill.ok{background:var(--success-bg);color:var(--success-ink)}
.pill.adm{background:var(--brand-100);color:var(--brand-900)}

/* ---------- Property card ---------- */
.card{background:var(--surface-raised);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.ph{position:relative;display:block;aspect-ratio:4/3;background:var(--placeholder-a);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.card:hover .ph img{transform:scale(1.04)}
.ph .b-type{position:absolute;right:var(--space-3);top:var(--space-3)}
.badges{position:absolute;left:var(--space-3);top:var(--space-3);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.noimg{width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:6px;color:var(--placeholder-ink);font-size:13px;line-height:18px;font-weight:600;background:repeating-linear-gradient(45deg,var(--placeholder-a) 0 12px,var(--placeholder-b) 12px 24px)}
.noimg svg.i{width:32px;height:32px;stroke-width:1.5}
.card .body{padding:var(--space-5) var(--space-4) var(--space-4);display:flex;flex-direction:column;flex:1}
.title{font-size:16px;line-height:22px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.loc{display:flex;align-items:center;gap:6px;color:var(--ink-muted);font-size:14px;line-height:20px;margin-top:6px}
.loc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;line-height:20px;font-weight:500;margin-top:10px}
.feats span,.areas span{display:inline-flex;align-items:center;gap:5px}
.areas{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;line-height:16px;color:var(--ink-muted);margin-top:10px}
.areas svg.i{width:12px;height:12px}
.spacer{flex:1}
.price{border-top:1px solid var(--line);padding-top:var(--space-4);margin:var(--space-4) 0 14px;min-height:62px}
.price small{display:block;font-size:12px;line-height:16px;font-weight:600;color:var(--ink-muted)}
.price strong{font-size:19px;line-height:24px;font-weight:800;color:var(--accent-text)}
.card .btn{width:100%;padding:11px}

/* ---------- Section header ---------- */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);gap:var(--space-3)}
.sec-head h2{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:26px;line-height:32px;font-weight:400}
.sec-head h2 svg.i{width:22px;height:22px;color:var(--accent-text)}

/* ---------- Box / panel / empty ---------- */
.box{background:var(--surface-raised);border-radius:var(--radius-xl);padding:22px}
.box h3{font-size:16px;line-height:22px;font-weight:700;margin-bottom:var(--space-3)}
.box.internal{border:1px dashed var(--line)}
.box.internal h3{display:flex;align-items:center;gap:var(--space-2)}
.panel{background:var(--surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-panel);padding:var(--space-6)}
.empty{color:var(--ink-muted);background:var(--surface-raised);border:1px dashed var(--line);border-radius:var(--radius-lg);padding:28px;text-align:center}

/* ---------- Field ---------- */
.field{width:100%;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);border-radius:var(--radius-md);padding:9px var(--space-3);font:inherit;font-size:14px;line-height:20px;outline:none}
.field::placeholder{color:var(--ink-muted);opacity:1}
.field:focus{border-color:var(--focus-ring);box-shadow:0 0 0 1px var(--focus-ring)}
textarea.field{min-height:120px;resize:vertical;font-family:inherit}
label.l{display:grid;gap:6px;font-size:13px;line-height:18px;font-weight:700}
label.l .field{font-weight:400}
.q{position:relative}
.q svg.i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-muted);width:18px;height:18px}
.q .field{padding:12px 12px 12px 42px}

/* ---------- Message / toast ---------- */
.msg,.geo-msg{border-radius:var(--radius-md);padding:10px var(--space-3);font-size:14px;line-height:20px;font-weight:500}
.msg.err{background:var(--error-bg);color:var(--error-ink)}
.msg.ok,.geo-msg.ok{background:var(--success-bg);color:var(--success-ink)}
.geo-msg{background:var(--warning-bg);color:var(--warning-ink);font-size:13px;line-height:18px;margin-top:var(--space-2)}
.toast{position:fixed;left:50%;bottom:var(--space-6);transform:translateX(-50%);background:var(--toast-bg);color:var(--on-action);padding:var(--space-3) 18px;border-radius:10px;font-size:14px;line-height:20px;font-weight:500;z-index:100;box-shadow:var(--shadow-modal);max-width:calc(100% - 32px)}

/* ---------- Dropzone + photo tile ---------- */
.drop{display:block;border:2px dashed var(--line);border-radius:var(--radius-lg);padding:28px;text-align:center;color:var(--ink-muted);cursor:pointer;transition:border-color .2s}
.drop.over,.drop:hover{border-color:var(--action)}
.drop svg.i{width:32px;height:32px;stroke-width:1.5}
.drop b{color:var(--ink)}
.ph-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-top:var(--space-4)}
.ph-it{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-raised)}
.ph-it img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ph-it .bar{display:flex;align-items:center;justify-content:space-between;padding:6px;gap:var(--space-1)}
.ph-it .bar span{font-size:11px;line-height:16px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ph-it.cover{outline:2px solid var(--action)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:var(--scrim);z-index:60;display:none;align-items:center;justify-content:center;padding:var(--space-4)}
.modal.open{display:flex}
.sheet{background:var(--surface-raised);color:var(--ink);border-radius:var(--radius-xl);width:100%;max-width:960px;max-height:92vh;overflow:auto;position:relative;box-shadow:var(--shadow-modal)}
.sheet.sm{max-width:480px;padding:var(--space-6)}
.sheet.sm h2{font-family:var(--font-display);font-size:20px;line-height:26px;margin-bottom:var(--space-4)}
.sheet.sm form{display:grid;gap:var(--space-3)}
.x{position:absolute;right:var(--space-3);top:var(--space-3);z-index:5;width:36px;height:36px;border-radius:50%;background:var(--glass);color:var(--glass-ink);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* ---------- Gallery ---------- */
.gal{position:relative;aspect-ratio:16/9;background:var(--media-ground)}
.gal img{width:100%;height:100%;object-fit:contain}
.gal .noimg{background:repeating-linear-gradient(45deg,var(--placeholder-a) 0 14px,var(--placeholder-b) 14px 28px)}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--glass);color:var(--glass-ink);display:grid;place-items:center}
.nav.p{left:var(--space-3)}.nav.n{right:var(--space-3)}
.thumbs{display:flex;gap:var(--space-2);padding:var(--space-3);overflow-x:auto}
.thumbs img{width:84px;height:60px;object-fit:cover;border-radius:var(--radius-sm);opacity:.55;cursor:pointer;flex:none;border:2px solid transparent}
.thumbs img.on{opacity:1;border-color:var(--action)}

/* ---------- Table + list item ---------- */
.t-wrap{overflow-x:auto;border-radius:var(--radius-lg)}
table.t{width:100%;border-collapse:collapse;background:var(--surface-raised);font-size:14px;line-height:20px}
table.t th,table.t td{padding:var(--space-3) 14px;text-align:left;border-bottom:1px solid var(--line)}
table.t th{font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);font-weight:700}
.item{background:var(--surface-raised);border-radius:var(--radius-lg);padding:var(--space-3);display:grid;grid-template-columns:120px 1fr auto;gap:var(--space-4);align-items:center}
@media(max-width:700px){.item{grid-template-columns:88px 1fr}.item .acts{grid-column:1/-1}}
.item .th{display:block;width:100%;aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden}
.item .th img{width:100%;height:100%;object-fit:cover}
.item .th .noimg{font-size:0}
.item .th .noimg svg.i{width:22px;height:22px}
.item h3{font-size:15px;line-height:20px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.item .meta{color:var(--ink-muted);font-size:13px;line-height:18px;margin-top:var(--space-1);display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);align-items:center}
.acts{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}

/* ---------- Header + footer ---------- */
.site-header{background:var(--brand-900);color:var(--on-brand);position:sticky;top:0;z-index:40}
.site-header .wrap{height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-size:21px;line-height:26px}
.logo-img{width:44px;height:44px;border-radius:50%;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.p-nav{display:flex;align-items:center;gap:6px}
.p-nav a,.p-nav button{display:inline-flex;align-items:center;gap:6px;color:var(--on-brand);opacity:.82;font-size:14px;line-height:20px;font-weight:600;padding:var(--space-2) 10px;border-radius:var(--radius-sm)}
.p-nav a:hover,.p-nav button:hover,.p-nav a.on{opacity:1;background:rgba(255,255,255,.12)}
@media(max-width:700px){.p-nav .lbl{display:none}}
.site-footer{background:var(--brand-900);color:var(--on-brand);text-align:center;padding:56px var(--space-4)}
.site-footer h3{font-family:var(--font-display);font-size:20px;line-height:26px}
.site-footer .flogo{width:84px;height:84px;border-radius:50%;display:block;margin:0 auto 14px;box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.site-footer .soc{display:flex;gap:20px;justify-content:center;margin-top:20px}
.site-footer .soc a{opacity:.85}
.site-footer .soc a:hover{opacity:1;color:var(--brand-100)}
.site-footer .soc svg.i{width:22px;height:22px}
.site-footer .copy{opacity:.7;font-size:14px;line-height:20px;margin-top:28px}
.foot-link{display:inline-block;margin-top:18px;font-size:13px;line-height:18px;opacity:.7}
.foot-link:hover{opacity:1}

/* ---------- Brand hero (capa + avatar) ---------- */
.hero-ground{background:linear-gradient(135deg,var(--brand-950) 0%,var(--brand-900) 45%,var(--brand-500) 100%)}
.avatar{width:112px;height:112px;border-radius:50%;border:4px solid var(--ring-on-page);margin:0 auto;background:var(--brand-900);box-shadow:var(--shadow-float);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.initials{width:40px;height:40px;border-radius:50%;background:var(--brand-900);color:var(--on-brand);display:grid;place-items:center;font-weight:800;font-size:14px}

/* ---------- Map (Leaflet) ---------- */
.leaflet-container{font-family:var(--font-sans)}
.leaflet-popup-content{margin:10px 12px;font-family:var(--font-sans)}
.leaflet-control-layers{font-family:var(--font-sans);font-size:13px;border-radius:var(--radius-md)!important;color:var(--glass-ink)}
.leaflet-control-layers-expanded{padding:6px 10px}
.leaflet-control-layers-base{display:flex;gap:10px}
.leaflet-control-layers-base label{display:flex;align-items:center;gap:var(--space-1);cursor:pointer}
.leaflet-control-layers-base input{accent-color:var(--brand-900);margin:0}
.pop img{width:200px;height:120px;object-fit:cover;border-radius:var(--radius-sm);display:block}
.pop b{display:block;margin-top:6px;font-size:13px}
.pop a{display:inline-block;margin-top:6px;color:var(--brand-900);font-weight:700;cursor:pointer}

/* ---------- Texto auxiliar e utilitários ---------- */
.hint{font-size:13px;line-height:18px;color:var(--ink-muted)}
.link{color:var(--accent-text);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ph-it .bar+.bar{padding-top:0}
table.t tr.inactive{opacity:.55}
table.t td.actions-cell{text-align:right;white-space:nowrap}
.inline-field{display:flex;gap:var(--space-2)}
.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}