/* ============================================================
   AltamiraCity — site.css
   Tema escuro, Bebas Neue + DM Sans
   ============================================================ */

:root {
    --bg:        #0a0b0d;
    --bg2:       #111318;
    --bg3:       #1a1d24;
    --border:    #242830;
    --text:      #e8eaf0;
    --text2:     #8b91a1;
    --accent:    #f59e0b;
    --accent2:   #ef4444;
    --green:     #22c55e;
    --blue:      #3b82f6;
    --purple:    #a855f7;
    --orange:    #f97316;
    --yellow:    #eab308;
    --radius:    10px;
    --shadow:    0 4px 24px rgba(0,0,0,.5);
    --topbar-h:  64px;
    --font-head: 'Bebas Neue', sans-serif;
    --font-body: 'DM Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
input, textarea, select, button { font-family: inherit; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
    position: sticky; top: 0; z-index: 100;
    height: var(--topbar-h);
    background: rgba(10,11,13,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.topbar-inner {
    max-width: 1280px; margin: 0 auto;
    height: 100%; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: baseline; gap: 2px; }
.logo-ac { font-family: var(--font-head); font-size: 24px; color: var(--text); letter-spacing: 1px; }
.logo-city { font-family: var(--font-head); font-size: 24px; color: var(--accent); letter-spacing: 1px; }

.topnav { display: flex; align-items: center; gap: 6px; }
.topnav a {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 8px;
    font-size: 14px; font-weight: 500;
    color: var(--text2); transition: all .2s;
}
.topnav a svg { width: 16px; height: 16px; flex-shrink: 0; }
.topnav a:hover, .topnav a.active {
    background: var(--bg3); color: var(--text);
}
.topnav a.active { color: var(--accent); }
.nav-link-dim { opacity: .5; font-size: 13px !important; }

.btn-reportar {
    background: var(--accent) !important;
    color: #000 !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    transition: opacity .2s !important;
}
.btn-reportar:hover { opacity: .85 !important; }

.btn-admin {
    background: var(--bg3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.btn-admin:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ============================================================
   MAIN
   ============================================================ */
.main-content { min-height: calc(100vh - var(--topbar-h) - 220px); }

/* ============================================================
   HERO / PAGE HEADER
   ============================================================ */
.page-hero {
    background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
    padding: 48px 24px 40px;
    text-align: center;
}
.page-hero h1 { font-family: var(--font-head); font-size: clamp(36px,5vw,60px); letter-spacing: 2px; }
.page-hero p { color: var(--text2); font-size: 15px; margin-top: 8px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    transition: border-color .2s;
}
.card:hover { border-color: rgba(245,158,11,.3); }
.card-header { font-family: var(--font-head); font-size: 20px; letter-spacing: 1px; margin-bottom: 12px; }

/* ============================================================
   STATUS BADGE
   ============================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 600; letter-spacing: .5px;
}
.badge::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge-pendente   { color: #ef4444; background: rgba(239,68,68,.12); }
.badge-verificado { color: #f97316; background: rgba(249,115,22,.12); }
.badge-andamento  { color: #eab308; background: rgba(234,179,8,.12); }
.badge-aguardando { color: #3b82f6; background: rgba(59,130,246,.12); }
.badge-resolvido  { color: #22c55e; background: rgba(34,197,94,.12); }
.badge-rejeitado  { color: #6b7280; background: rgba(107,114,128,.12); }
.badge-reincidencia { color: #a855f7; background: rgba(168,85,247,.12); }

/* ============================================================
   GRAVIDADE
   ============================================================ */
.grav-baixa  { color: #22c55e; }
.grav-media  { color: #eab308; }
.grav-alta   { color: #f97316; }
.grav-critica { color: #ef4444; font-weight: 700; }

/* ============================================================
   PROBLEMA CARD (feed)
   ============================================================ */
.problema-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .2s;
    display: flex; flex-direction: column;
}
.problema-card:hover { border-color: rgba(245,158,11,.4); transform: translateY(-2px); box-shadow: var(--shadow); }
.problema-card.alerta { border-color: #ef4444; }
.problema-card.escola-hosp { border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b22; }
.problema-card.reincidente { border-left: 3px solid var(--purple); }
.problema-card.judicial { border-left: 3px solid #ef4444; }

.problema-foto { width:100%; height:180px; object-fit:cover; }
.problema-foto-placeholder {
    width:100%; height:180px;
    background: var(--bg3);
    display:flex; align-items:center; justify-content:center;
    color: var(--text2); font-size: 13px;
}
.problema-body { padding: 16px; flex:1; display:flex; flex-direction:column; gap:8px; }
.problema-titulo { font-weight: 700; font-size: 15px; line-height: 1.3; }
.problema-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.problema-categoria { font-size: 12px; color: var(--text2); background: var(--bg3); padding: 2px 8px; border-radius: 4px; }
.problema-bairro { font-size: 12px; color: var(--text2); }
.problema-data { font-size: 11px; color: var(--text2); margin-top:auto; }
.problema-actions { display:flex; gap:8px; margin-top: 8px; }
.btn-curtir {
    display:flex; align-items:center; gap:5px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 6px; padding: 5px 10px; cursor:pointer;
    font-size: 13px; color: var(--text2); transition: all .2s;
}
.btn-curtir:hover, .btn-curtir.curtido { color: var(--accent); border-color: var(--accent); }
.btn-ver {
    display:flex; align-items:center; gap:5px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 6px; padding: 5px 12px; cursor:pointer;
    font-size: 13px; color: var(--text2); transition: all .2s;
    text-decoration: none;
}
.btn-ver:hover { border-color: var(--text2); color: var(--text); }

/* ============================================================
   GRID FEED
   ============================================================ */
.feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 24px;
    max-width: 1280px; margin: 0 auto;
}

/* ============================================================
   FILTROS
   ============================================================ */
.filtros-bar {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 14px 24px;
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    max-width: 1280px; margin: 0 auto;
}
.filtro-select, .filtro-input {
    background: var(--bg3); border: 1px solid var(--border);
    color: var(--text); border-radius: 7px; padding: 7px 12px;
    font-size: 13px; outline: none; transition: border-color .2s;
}
.filtro-select:focus, .filtro-input:focus { border-color: var(--accent); }
.btn-filtrar {
    background: var(--accent); color: #000;
    font-weight: 700; border: none; border-radius: 7px;
    padding: 7px 18px; cursor:pointer; font-size: 13px; transition: opacity .2s;
}
.btn-filtrar:hover { opacity:.85; }
.btn-limpar {
    background: transparent; border: 1px solid var(--border);
    color: var(--text2); border-radius: 7px;
    padding: 7px 14px; cursor:pointer; font-size: 13px; transition: all .2s;
}
.btn-limpar:hover { border-color: var(--text2); color: var(--text); }

/* ============================================================
   DETALHE DO PROBLEMA
   ============================================================ */
.detalhe-wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
.detalhe-hero {
    border-radius: var(--radius);
    overflow: hidden; margin-bottom: 24px;
    border: 1px solid var(--border);
    position:relative;
}
.detalhe-foto { width:100%; max-height:420px; object-fit:cover; }
.detalhe-judicial-banner {
    background: linear-gradient(90deg, #ef4444, #991b1b);
    padding: 10px 20px;
    font-weight: 700; letter-spacing: 1px; font-size: 13px;
}
.detalhe-escola-banner {
    background: linear-gradient(90deg, #f59e0b, #b45309);
    color: #000;
    padding: 8px 20px;
    font-weight: 700; letter-spacing: 1px; font-size: 13px;
}
.detalhe-meta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; align-items:center; }
.detalhe-titulo { font-family: var(--font-head); font-size: clamp(24px,4vw,40px); letter-spacing:1px; margin-bottom:8px; }
.detalhe-descricao { color: var(--text2); line-height:1.7; margin-bottom:20px; }

/* Timeline */
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--border); }
.timeline-item { position:relative; padding-bottom:20px; }
.timeline-dot {
    position:absolute; left:-24px; top:4px;
    width:12px; height:12px; border-radius:50%;
    background: var(--accent); border: 2px solid var(--bg);
}
.timeline-data { font-size:12px; color:var(--text2); }
.timeline-texto { font-size:14px; margin-top:2px; }

/* Comentários */
.comentarios-lista { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.comentario-item { background:var(--bg3); border-radius:8px; padding:12px; }
.comentario-autor { font-size:12px; color:var(--accent); font-weight:600; display:block; margin-bottom:4px; }
.comentario-oficial { color: var(--blue); }
.comentario-texto { font-size:14px; line-height:1.5; }
.comentario-form { display:flex; gap:8px; }
.comentario-input {
    flex:1; background:var(--bg3); border:1px solid var(--border);
    border-radius:8px; padding:10px 14px; color:var(--text);
    font-size:14px; outline:none; transition:border-color .2s;
}
.comentario-input:focus { border-color:var(--accent); }
.btn-comentar {
    background:var(--accent); color:#000; font-weight:700;
    border:none; border-radius:8px; padding:10px 18px;
    cursor:pointer; transition:opacity .2s;
}
.btn-comentar:hover { opacity:.85; }

/* ============================================================
   MAPA
   ============================================================ */
.mapa-container { height: calc(100vh - var(--topbar-h)); position:relative; }
#mapa { width:100%; height:100%; }
.mapa-controls {
    position:absolute; top:16px; left:50%; transform:translateX(-50%);
    z-index:10; background: rgba(10,11,13,.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 16px;
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.mapa-legend {
    position:absolute; bottom:24px; left:16px; z-index:10;
    background: rgba(10,11,13,.9); backdrop-filter:blur(8px);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 16px;
}
.legend-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text2); margin-bottom:5px; }
.legend-dot { width:10px; height:10px; border-radius:50%; }
.mapa-btn-report {
    position:absolute; bottom:24px; right:16px; z-index:10;
    background: var(--accent); color:#000; font-weight:700;
    border:none; border-radius:12px; padding:14px 24px;
    cursor:pointer; font-size:15px; font-family:var(--font-body);
    box-shadow: 0 4px 20px rgba(245,158,11,.4);
    transition: all .2s;
}
.mapa-btn-report:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(245,158,11,.5); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:32px; }
.stat-card {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    text-align:center;
}
.stat-num { font-family:var(--font-head); font-size:48px; line-height:1; }
.stat-label { font-size:12px; color:var(--text2); margin-top:4px; text-transform:uppercase; letter-spacing:1px; }
.stat-accent { color: var(--accent); }
.stat-red { color: var(--accent2); }
.stat-green { color: var(--green); }
.stat-yellow { color: var(--yellow); }
.stat-purple { color: var(--purple); }

.bairro-table { width:100%; border-collapse:collapse; }
.bairro-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text2); padding:8px 12px; border-bottom:1px solid var(--border); }
.bairro-table td { padding:10px 12px; border-bottom:1px solid var(--border); font-size:14px; }
.bairro-table tr:last-child td { border-bottom:none; }
.bairro-bar-wrap { background:var(--bg3); border-radius:4px; height:6px; overflow:hidden; margin-top:4px; }
.bairro-bar { height:100%; background:var(--accent); border-radius:4px; transition:width .6s ease; }

.alerta-item {
    display:flex; align-items:center; gap:12px;
    padding:12px; background:rgba(239,68,68,.08);
    border:1px solid rgba(239,68,68,.25); border-radius:8px; margin-bottom:8px;
}
.alerta-icon { color:#ef4444; font-size:18px; }

/* ============================================================
   FORMULÁRIO REPORTAR
   ============================================================ */
.form-wrap { max-width:720px; margin:0 auto; padding:32px 24px; }
.form-steps { display:flex; gap:0; margin-bottom:32px; }
.form-step {
    flex:1; text-align:center; padding:12px;
    font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px;
    color:var(--text2); border-bottom:2px solid var(--border); transition:all .2s;
}
.form-step.ativo { color:var(--accent); border-color:var(--accent); }
.form-step.completo { color:var(--green); border-color:var(--green); }

.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--text2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.form-control {
    width:100%; background:var(--bg2); border:1px solid var(--border);
    border-radius:8px; padding:11px 14px; color:var(--text);
    font-size:14px; outline:none; transition:border-color .2s;
}
.form-control:focus { border-color:var(--accent); }
textarea.form-control { resize:vertical; min-height:100px; }
select.form-control { cursor:pointer; }

.form-section { display:none; }
.form-section.ativo { display:block; }

.btn-next, .btn-prev, .btn-submit {
    padding:12px 28px; border-radius:8px; font-weight:700;
    font-size:14px; cursor:pointer; border:none; transition:all .2s;
}
.btn-next, .btn-submit { background:var(--accent); color:#000; }
.btn-next:hover, .btn-submit:hover { opacity:.85; }
.btn-prev { background:var(--bg3); color:var(--text); border:1px solid var(--border); }
.btn-prev:hover { border-color:var(--text2); }
.form-nav { display:flex; justify-content:space-between; margin-top:24px; }

/* Anúncio 30s */
.anuncio-overlay {
    position:fixed; inset:0; z-index:999;
    background: rgba(0,0,0,.95);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:20px;
}
.anuncio-box {
    background:var(--bg2); border:1px solid var(--border);
    border-radius:16px; padding:40px;
    max-width:500px; width:100%; text-align:center;
}
.anuncio-titulo { font-family:var(--font-head); font-size:28px; color:var(--accent); margin-bottom:8px; }
.anuncio-subtitulo { color:var(--text2); font-size:14px; margin-bottom:24px; }
.anuncio-timer { font-family:var(--font-head); font-size:56px; color:var(--text); }
.anuncio-label { font-size:12px; color:var(--text2); }
.anuncio-placeholder {
    width:100%; height:120px; background:var(--bg3);
    border-radius:8px; display:flex; align-items:center; justify-content:center;
    color:var(--text2); font-size:13px; margin-bottom:20px;
    border:1px dashed var(--border);
}
.btn-pular-disabled {
    background:var(--bg3); color:var(--text2);
    border:1px solid var(--border); border-radius:8px;
    padding:10px 24px; font-size:14px; cursor:not-allowed;
    transition:all .3s;
}
.btn-pular-enabled {
    background:var(--accent); color:#000;
    border:none; border-radius:8px;
    padding:10px 24px; font-size:14px; font-weight:700;
    cursor:pointer; transition:all .2s;
}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-wrap { max-width:1280px; margin:0 auto; padding:24px; }
.admin-topbar {
    background:var(--bg2); border-bottom:1px solid var(--border);
    padding:16px 24px;
    display:flex; align-items:center; justify-content:space-between;
}
.admin-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:24px; }
.admin-tab {
    padding:12px 20px; font-size:14px; font-weight:600;
    color:var(--text2); cursor:pointer;
    border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:all .2s; background:none; border-top:none; border-left:none; border-right:none;
}
.admin-tab.ativo { color:var(--accent); border-bottom-color:var(--accent); }
.admin-tab-content { display:none; }
.admin-tab-content.ativo { display:block; }

.admin-problema-row {
    background:var(--bg2); border:1px solid var(--border);
    border-radius:var(--radius); padding:16px;
    display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start;
    margin-bottom:12px; transition:border-color .2s;
}
.admin-problema-row:hover { border-color:rgba(245,158,11,.3); }
.admin-problema-info { flex:1; min-width:200px; }
.admin-acoes { display:flex; flex-wrap:wrap; gap:8px; }
.btn-acao {
    padding:7px 14px; border-radius:7px; font-size:12px;
    font-weight:700; cursor:pointer; border:none; transition:all .2s;
    letter-spacing:.5px; text-transform:uppercase;
}
.btn-verificar  { background:rgba(249,115,22,.15); color:#f97316; }
.btn-andamento  { background:rgba(234,179,8,.15);  color:#eab308; }
.btn-aprovar    { background:rgba(34,197,94,.15);  color:#22c55e; }
.btn-rejeitar   { background:rgba(107,114,128,.15); color:#9ca3af; }
.btn-acao:hover { opacity:.8; transform:translateY(-1px); }

.login-wrap {
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    background: radial-gradient(ellipse at 50% 0%, rgba(245,158,11,.08) 0%, var(--bg) 60%);
}
.login-card {
    background:var(--bg2); border:1px solid var(--border);
    border-radius:16px; padding:48px 40px;
    width:100%; max-width:400px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo .logo-ac { font-size:32px; }
.login-logo .logo-city { font-size:32px; }
.erro-login {
    background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
    border-radius:8px; padding:10px 14px; font-size:14px; color:#ef4444;
    margin-bottom:16px;
}
.btn-login {
    width:100%; background:var(--accent); color:#000; font-weight:700;
    border:none; border-radius:8px; padding:13px; font-size:15px;
    cursor:pointer; transition:opacity .2s; margin-top:8px;
}
.btn-login:hover { opacity:.85; }

/* Upload foto */
.upload-area {
    border:2px dashed var(--border); border-radius:10px;
    padding:32px; text-align:center; cursor:pointer;
    transition:all .2s; position:relative;
}
.upload-area:hover, .upload-area.drag { border-color:var(--accent); background:rgba(245,158,11,.04); }
.upload-area input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-preview { width:100%; max-height:200px; object-fit:cover; border-radius:8px; margin-top:12px; }

/* Mapa seletor no form */
#mapa-seletor { width:100%; height:300px; border-radius:8px; border:1px solid var(--border); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background:var(--bg2); border-top:1px solid var(--border);
    padding:40px 24px;
    margin-top:64px;
}
.footer-inner {
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:1fr auto 1fr; gap:32px; align-items:start;
}
.footer-brand p { font-size:13px; color:var(--text2); margin-top:6px; }
.footer-links { display:flex; flex-direction:column; gap:8px; text-align:center; }
.footer-links a { font-size:13px; color:var(--text2); transition:color .2s; }
.footer-links a:hover { color:var(--accent); }
.footer-copy { text-align:right; }
.footer-copy p { font-size:12px; color:var(--text2); }
.footer-disclaimer { opacity:.5; margin-top:4px; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
.mt-1 { margin-top:8px; } .mt-2 { margin-top:16px; } .mt-3 { margin-top:24px; } .mt-4 { margin-top:32px; }
.mb-1 { margin-bottom:8px; } .mb-2 { margin-bottom:16px; } .mb-3 { margin-bottom:24px; }
.text-center { text-align:center; }
.text-muted { color:var(--text2); }
.text-accent { color:var(--accent); }
.text-green { color:var(--green); }
.text-red { color:var(--accent2); }
.section-title { font-family:var(--font-head); font-size:28px; letter-spacing:1px; margin-bottom:16px; }
.divider { border:none; border-top:1px solid var(--border); margin:24px 0; }
.empty-state { text-align:center; padding:64px 24px; color:var(--text2); }
.empty-state svg { width:48px; height:48px; margin:0 auto 16px; opacity:.3; }
.tag { display:inline-block; background:var(--bg3); border:1px solid var(--border); border-radius:4px; padding:2px 8px; font-size:11px; color:var(--text2); }
.tag-reincidente { border-color:var(--purple); color:var(--purple); }
.tag-judicial { border-color:#ef4444; color:#ef4444; }
.tag-escola { border-color:var(--accent); color:var(--accent); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 768px) {
    .topnav a span { display:none; }
    .topnav { gap:4px; }
    .footer-inner { grid-template-columns:1fr; text-align:center; }
    .footer-copy { text-align:center; }
    .feed-grid { grid-template-columns:1fr; padding:16px; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .filtros-bar { padding:12px 16px; }
    .form-wrap { padding:20px 16px; }
    .admin-wrap { padding:16px; }
    .login-card { padding:32px 24px; }
}

/* ============================================================
   MELHORIAS MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .topnav a span { display: none; }
    .topnav a svg { width: 20px; height: 20px; }
    .topnav { gap: 2px; }
    .topbar-inner { padding: 0 12px; }
    .logo-ac, .logo-city { font-size: 20px; }

    .btn-reportar { padding: 8px 12px !important; font-size: 13px !important; }

    .feed-grid { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
    .stats-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }

    .detalhe-wrap { padding: 16px 12px; }
    .detalhe-wrap > div[style*="grid"] { display: flex !important; flex-direction: column !important; }

    .form-wrap { padding: 16px 12px; }
    .form-steps { font-size: 11px; }
    .form-step { padding: 8px 4px; }

    .dashboard-wrap { padding: 16px 12px; }
    .dashboard-wrap > div[style*="grid"] { display: flex !important; flex-direction: column !important; }

    .mapa-controls {
        top: 8px;
        left: 8px;
        right: 8px;
        transform: none;
        flex-direction: column;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 10px;
        font-size: 12px;
    }
    .mapa-controls span { display: none; }
    .mapa-controls select { width: 100%; }

    .mapa-legend { 
        bottom: 80px; 
        left: 8px; 
        padding: 8px 12px;
        font-size: 11px;
    }
    .mapa-btn-report {
        bottom: 16px;
        right: 8px;
        padding: 12px 18px;
        font-size: 14px;
    }

    .filtros-bar { padding: 10px 12px; gap: 8px; }
    .filtro-select { font-size: 12px; padding: 6px 8px; }

    .admin-wrap { padding: 12px; }
    .admin-tabs { overflow-x: auto; }
    .admin-tab { white-space: nowrap; font-size: 12px; padding: 10px 12px; }
    .admin-problema-row { flex-direction: column; }

    .login-card { padding: 24px 16px; margin: 16px; }

    .footer-inner { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .footer-copy { text-align: center; }

    #mapa-seletor { height: 280px; }

    .stat-num { font-size: 36px; }
    .section-title { font-size: 22px; }
}

/* Mapa com gesto único no mobile */
.gm-style { touch-action: pan-y; }
</ENDOFFILE
echo "CSS OK"
/* ============================================================
   FIXES MOBILE TOPBAR + MAPA FULLSCREEN
   ============================================================ */

/* Mapa ocupa tela cheia */
body.body-mapa { overflow: hidden; }
body.body-mapa .main-content { height: calc(100vh - var(--topbar-h)); overflow: hidden; }
body.body-mapa .mapa-container { height: 100%; }

/* Topbar mobile — hamburger style */
@media (max-width: 640px) {
    .topbar-inner { padding: 0 12px; gap: 8px; }
    .logo-ac, .logo-city { font-size: 18px; }

    .topnav { gap: 2px; }
    .topnav a { padding: 6px 8px; border-radius: 6px; }
    .topnav a span { display: none; } /* Esconde texto, só ícone */
    .topnav a svg { width: 18px; height: 18px; }

    .btn-reportar {
        padding: 7px 12px !important;
        border-radius: 8px !important;
    }
    .btn-reportar span { display: inline !important; font-size: 12px !important; }
    .btn-reportar svg { display: none; }

    .btn-admin { padding: 6px 10px !important; }
    .btn-admin span { display: inline !important; font-size: 11px !important; }
    .btn-admin svg { display: none; }

    /* Mapa controls mobile — compacto */
    .mapa-controls {
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        padding: 6px 10px !important;
        gap: 6px !important;
        flex-wrap: wrap;
    }
    .mapa-controls > span { display: none !important; }
    .mapa-controls select { flex: 1; min-width: 0; font-size: 12px; padding: 5px 8px; }
    .mapa-controls label { font-size: 11px; }

    /* Legenda menor */
    .mapa-legend { 
        bottom: 72px !important; 
        left: 8px !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
    }
    .legend-item { margin-bottom: 2px !important; }

    /* Botão reportar flutuante */
    .mapa-btn-report {
        bottom: 12px !important;
        right: 8px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    /* Popup mobile — parte de baixo */
    .popup-wrap {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* ============================================================
   TOPBAR MOBILE FIXES
   ============================================================ */
@media (max-width: 600px) {
    .topbar-inner { padding: 0 10px; gap: 4px; }
    .logo-ac, .logo-city { font-size: 17px; }
    .topnav { gap: 2px; }
    
    /* Esconde Dashboard no mobile para caber tudo */
    #nav-dash { display: none; }
    
    .topnav a {
        padding: 6px 8px;
        border-radius: 6px;
        font-size: 12px;
        gap: 4px;
    }
    .topnav a svg { width: 17px; height: 17px; }
    .topnav a span { display: none; }
    
    /* Reportar mostra só o + */
    .btn-reportar span { display: none; }
    .btn-reportar { padding: 7px 12px !important; }
    
    /* Admin label curto */
    .admin-label { display: none; }
    .btn-admin { padding: 6px 10px !important; }
}

/* Mapa ocupa tela toda no mobile */
@media (max-width: 768px) {
    .mapa-container { height: calc(100svh - var(--topbar-h)); }
    
    /* Controles do mapa menores e colapsados */
    .mapa-controls {
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        padding: 6px 10px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .mapa-controls > span { display: none !important; }
    .mapa-controls select { 
        flex: 1; min-width: 0;
        font-size: 12px; padding: 5px 6px;
    }
    .mapa-controls label { font-size: 11px; }
    
    .mapa-legend {
        bottom: 72px !important;
        left: 8px !important;
        font-size: 10px !important;
        padding: 7px 10px !important;
    }
    .legend-item { margin-bottom: 2px !important; gap: 5px !important; }
    
    .mapa-btn-report {
        bottom: 12px !important;
        right: 8px !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }
    
    /* Popup mobile fica na parte de baixo */
    .popup-wrap {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* ============================================================
   INPUTS MAIÚSCULAS
   ============================================================ */
input[type="text"].form-control,
input[type="text"],
textarea.form-control,
textarea {
    text-transform: uppercase;
}
input[type="text"].form-control::placeholder,
textarea.form-control::placeholder {
    text-transform: none;
}

/* ============================================================
   FOTO MENOR NO MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .upload-area {
        padding: 16px !important;
    }
    .upload-preview {
        max-height: 160px !important;
        object-fit: cover;
    }
    .upload-area svg {
        width: 28px !important;
        height: 28px !important;
    }
    .anuncio-box {
        padding: 20px 16px !important;
        margin: 16px !important;
    }
    .anuncio-box img {
        max-width: 160px !important;
    }
}