:root{
  --bg:#faf9f7; --surface:#ffffff; --border:#e2ded7; --border-strong:#cdc7bd;
  --text:#1c1a17; --text-muted:#77716a;
  /* --text-soft só passa em contraste AA (4.5:1) sobre fundo claro para
     texto grande/decorativo — não usar em legendas, datas ou rótulos
     pequenos (use --text-muted nesses casos). Segue em uso apenas sobre
     o fundo escuro da sidebar, onde o contraste é alto. */
  --text-soft:#9a948c;
  --accent:#f2a825; --accent-ink:#7a4a08; --accent-soft:#fdedcf;
  --success:#3f7d4a; --success-soft:#e2f0e2;
  --info:#3c6ea5; --info-soft:#e2ebf5;
  --danger:#c4432f; --danger-soft:#fbe3de;
  --radius:10px;
  --sidebar:#211d17;
  --max:960px;

  /* Escala tipográfica — tokens centralizados em vez de font-size solto
     espalhado em cada view (foi esse espalhamento que causou a maior parte
     da inconsistência visual entre páginas, incluindo o bug do rodapé). */
  --text-3xs:9px;
  --text-2xs:10px;
  --text-xs:11px;
  --text-sm:12px;
  --text-base:13px;
  --text-md:14px;
  --text-lg:15px;
  --text-xl:16px;
  --text-page-title:19px;    /* título de página "solo" (login, formulários, etc.) */
  --text-page-title-lg:20px; /* título de página dentro do painel admin (main.wide) */
  --text-2xl:26px;
  --text-hero:28px;

  /* Escala de espaçamento — usada nas classes novas abaixo; o restante do
     CSS mantém valores diretos onde já eram consistentes. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;

  /* Timings de transição — um único valor reaproveitado em toda a UI
     interativa, para o hover/focus responder de forma consistente em
     vez de cada componente ter (ou não ter) sua própria duração. */
  --transition-fast:.12s ease;
  --transition:.15s ease;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:var(--accent-ink);text-decoration:none;transition:color var(--transition);}
a:hover{text-decoration:underline;}
h1,h2,h3{line-height:1.25;margin:0 0 .4em 0;}
img{max-width:100%;}

/* Foco visível (teclado) — antes não existia nenhum estilo de :focus,
   o que deixa toda a navegação por teclado invisível. Padronizado aqui
   em vez de depender do contorno default (inconsistente entre navegadores). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:2px;
}
.option:focus-within,
.seg label:focus-within{
  outline:2px solid var(--accent-ink);
  outline-offset:2px;
}

/* Título de página: por padrão toda página "solo" (sem sidebar) usa o
   mesmo tamanho de h1 — antes cada view repetia um style="font-size:19px"
   (ou 20px, às vezes por engano) na mão. Página dentro do painel admin
   (main.wide) usa o tamanho ligeiramente maior, também padronizado. */
main h1{font-size:var(--text-page-title);}
main.wide h1{font-size:var(--text-page-title-lg);}

/* Padrões repetidos que viviam como style="..." copiado e colado em
   view após view — centralizados aqui uma única vez. */
.back-link{font-size:var(--text-base);color:var(--text-muted);display:inline-block;}
.back-link:hover{color:var(--text);}

.auth-card{max-width:420px;margin:var(--space-4) auto 0 auto;}

/* "Acompanhar chamado": painel de busca estreito e fixo ao lado do mapa,
   que ocupa o espaço restante — lado a lado no desktop (padrão comum de
   tela com filtro + mapa/lista), empilhados em largura total no celular/
   tablet (ver @media). Substitui o layout anterior, que deixava os dois
   cartões com a mesma largura externa e um buraco vazio em volta do
   formulário estreito dentro do cartão largo. (O ".card + .card" que zera
   a margem do cartão do mapa está lá embaixo, perto da definição de
   ".card" — ver comentário lá: aqui os dois ficam lado a lado, não
   empilhados, então essa margem padrão entre cards não deve valer.) */
.status-busca-layout{display:flex;gap:var(--space-5);align-items:flex-start;}
.status-busca-search{flex:0 0 300px;}
.status-busca-map-card{flex:1;min-width:0;}

@media (max-width: 860px){
  .status-busca-layout{flex-direction:column;}
  .status-busca-search{flex-basis:auto;width:100%;}
  .status-busca-map-card{width:100%;}
}

.admin-narrow-card{max-width:420px;margin-top:var(--space-4);}

.page-subtitle{color:var(--text-muted);margin-top:-6px;}
.coord-line{color:var(--text-muted);font-size:var(--text-sm);margin-top:-4px;}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--text-xl);color:var(--text);}
.brand:hover{text-decoration:none;}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);color:#3a2400;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.topnav{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--text-base);font-weight:600;}
.topnav a{color:var(--text-muted);}
.topnav a:hover{color:var(--text);text-decoration:none;}

/* Botão do menu hambúrguer — só existe visualmente no celular (ver
   @media abaixo); no desktop o .topnav normal continua em linha. */
.nav-toggle{
  display:none;width:38px;height:38px;flex-shrink:0;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);cursor:pointer;
  transition:background-color var(--transition),border-color var(--transition);
}
.nav-toggle:hover{background:#f3f1ed;}
.nav-toggle-icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-close{display:block;}

/* Flash */
.flash{max-width:var(--max);margin:16px auto 0 auto;padding:12px 18px;border-radius:8px;font-size:var(--text-md);}
.flash-success{background:var(--success-soft);color:#2b5a34;}
.flash-error{background:var(--danger-soft);color:#8a2f1f;}

main{flex:1 0 auto;width:100%;max-width:var(--max);margin:0 auto;padding:24px 20px 60px 20px;}
main.wide{max-width:1240px;}

/* Rodapé — antes era só 2 linhas de texto cinza do mesmo tamanho, sem
   separação visual do conteúdo acima. Agora tem uma borda sutil de
   divisão, a marca do produto em destaque no topo e uma hierarquia clara
   entre tagline / autoria / instituição (cada linha com um peso e
   tamanho diferente, da mais pra menos importante). */
.sitefooter{flex-shrink:0;text-align:center;padding:26px 20px;border-top:1px solid var(--border);}
.sitefooter-brand{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--text-md);color:var(--text);}
.sitefooter-mark{width:20px;height:20px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.sitefooter-tagline{font-size:var(--text-sm);color:var(--text-muted);margin:4px 0 14px 0;}
.sitefooter-authors{font-size:var(--text-sm);color:var(--text);font-weight:600;margin:0;}
.sitefooter-dot{color:var(--text-soft);margin:0 2px;}
.sitefooter-course{font-size:var(--text-xs);color:var(--text-muted);margin:4px 0 0 0;}

/* Cards & sections */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.card + .card{margin-top:16px;}
/* Exceção: na "Acompanhar chamado" os dois cards ficam lado a lado (ver
   .status-busca-layout), então o cartão do mapa não deve herdar essa
   margem de empilhamento — senão o topo dele fica 16px mais baixo que o
   do cartão de busca, desalinhando os dois. */
.status-busca-layout > .card + .card{margin-top:0;}
.section-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:700;margin-bottom:8px;}

/* Wizard steps — indicador de progresso do fluxo de abertura de chamado
   (localização → tipo de defeito → foto). Substituiu os 3 pontinhos +
   texto solto por um stepper com números, check de concluído e rótulo
   de cada etapa, para a pessoa saber onde está e o que falta. */
.wizard-steps{display:flex;align-items:center;margin-bottom:10px;}
.wizard-step{display:flex;align-items:center;gap:8px;}
.wizard-step-circle{width:24px;height:24px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border-strong);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:800;flex-shrink:0;}
.wizard-step-label{font-size:var(--text-sm);color:var(--text-muted);font-weight:600;white-space:nowrap;}
.wizard-step.done .wizard-step-circle{background:var(--accent);border-color:var(--accent);color:#3a2400;}
.wizard-step.current .wizard-step-circle{border-color:var(--accent-ink);color:var(--accent-ink);background:var(--accent-soft);}
.wizard-step.current .wizard-step-label{color:var(--text);}
.wizard-step-line{flex:1;height:2px;background:var(--border-strong);margin:0 10px;min-width:16px;}
.wizard-step-line.done{background:var(--accent);}
.wizard-steps-caption{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 20px 0;}
@media (max-width:480px){
  .wizard-step-label{display:none;}
  .wizard-step-line{margin:0 6px;}
}

/* Forms */
label{display:block;font-size:var(--text-base);font-weight:600;margin-bottom:6px;}
.field-help{font-size:var(--text-sm);color:var(--text-muted);margin-top:4px;}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;border:1px solid var(--border-strong);border-radius:8px;padding:10px 12px;
  font-size:var(--text-md);font-family:inherit;color:var(--text);background:#fff;
  transition:border-color var(--transition),box-shadow var(--transition);
}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{resize:vertical;min-height:90px;}
.form-group{margin-bottom:18px;}
.form-row{display:flex;gap:14px;flex-wrap:wrap;}
.form-row > *{flex:1;min-width:180px;}

.options{display:flex;flex-direction:column;gap:10px;}
.option{border:1.5px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;background:#fff;transition:border-color var(--transition),background-color var(--transition);}
.option:hover{border-color:var(--border-strong);}
.option input{width:auto;flex-shrink:0;}
.option.selected, .option:has(input:checked){border-color:var(--accent);background:var(--accent-soft);}
.opt-icon{width:36px;height:36px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.opt-title{font-weight:600;font-size:var(--text-md);}
.opt-sub{font-size:var(--text-sm);color:var(--text-muted);}

.seg{display:flex;gap:10px;}
.seg label{flex:1;border:1.5px solid var(--border-strong);border-radius:10px;padding:12px;text-align:center;font-weight:700;cursor:pointer;color:var(--text-muted);margin:0;transition:border-color var(--transition),background-color var(--transition),color var(--transition);}
.seg label:has(input:checked){border-color:var(--accent-ink);background:var(--accent-soft);color:var(--accent-ink);}
.seg input{display:none;}

.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius);padding:26px 16px;text-align:center;background:#fff;transition:border-color var(--transition);}
.dropzone input{margin-top:10px;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:11px 20px;font-size:var(--text-md);font-weight:700;border:1px solid transparent;cursor:pointer;transition:background-color var(--transition),border-color var(--transition),transform var(--transition-fast);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:#3a2400;}
.btn-primary:hover{background:#e39c1f;text-decoration:none;}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text);}
.btn-ghost:hover{background:#f3f1ed;text-decoration:none;}
.btn-block{display:flex;width:100%;}
.btn-row{display:flex;gap:10px;margin-top:20px;}
.btn-sm{padding:6px 12px;font-size:var(--text-sm);}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:700;padding:3px 10px;border-radius:999px;}
.badge-pendente{background:#efece7;color:var(--text-muted);}
.badge-andamento{background:var(--info-soft);color:var(--info);}
.badge-resolvido{background:var(--success-soft);color:var(--success);}
.badge-impossibilitado{background:var(--danger-soft);color:var(--danger);}
.pill-accent{display:inline-flex;align-items:center;font-size:var(--text-2xs);font-weight:700;background:var(--accent);color:#3a2400;padding:2px 8px;border-radius:999px;margin-left:6px;text-transform:uppercase;letter-spacing:.02em;}

/* Lists */
.list-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;gap:14px;align-items:center;margin-bottom:10px;transition:border-color var(--transition),box-shadow var(--transition);text-decoration:none;color:inherit;}
.list-item:hover{border-color:var(--border-strong);box-shadow:0 2px 10px rgba(28,26,23,.07);}
.list-item-body{flex:1;min-width:0;}
.list-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
.list-item-protocol{font-size:var(--text-xs);}
.list-item-title{font-weight:600;}
.list-item-sub{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.list-item-coord{font-size:var(--text-xs);color:var(--text-muted);}
.dist-chip{flex-shrink:0;width:64px;text-align:center;background:var(--accent-soft);color:var(--accent-ink);border-radius:8px;padding:8px 4px;font-weight:800;font-size:var(--text-base);}
.dist-chip small{display:block;font-size:var(--text-3xs);font-weight:700;}

/* Item de lista com dropdown de status próprio (área do eletricista): o
   .list-item deixa de ser o link em si — vira um container com 2 filhos,
   o link (ícone/texto, leva pro detalhe) e o select (muda o status na
   hora), pra clicar no dropdown não disparar a navegação do link. */
.list-item-link{display:flex;gap:14px;align-items:center;flex:1;min-width:0;text-decoration:none;color:inherit;}
.list-item-status-select{flex-shrink:0;width:160px;}
.list-item-status-select:disabled{opacity:.6;cursor:not-allowed;}

/* Protocol / timeline */
.protocol{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);padding:4px 12px;border-radius:6px;display:inline-block;}
.timeline{margin-top:16px;display:flex;flex-direction:column;}
.t-item{display:flex;gap:12px;position:relative;padding-bottom:20px;}
.t-item:last-child{padding-bottom:0;}
.t-line{position:absolute;left:5px;top:16px;bottom:0;width:2px;background:var(--border-strong);}
.t-item:last-child .t-line{display:none;}
.t-dot{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--border-strong);flex-shrink:0;margin-top:3px;z-index:1;}
.t-dot.done{border-color:var(--success);background:var(--success);}
.t-status{font-weight:600;font-size:var(--text-md);}
.t-date{font-size:var(--text-sm);color:var(--text-muted);}
.t-just{margin-top:4px;font-size:var(--text-base);background:var(--danger-soft);color:#8a2f1f;padding:6px 10px;border-radius:6px;display:inline-block;}

/* Map */
.map-box{width:100%;height:340px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.map-box.small{height:220px;}

/* Tables */
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);padding:10px 14px;border-bottom:1px solid var(--border);}
td{padding:12px 14px;font-size:var(--text-base);border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}

/* KPI — borda esquerda colorida por semântica (neutro por padrão,
   mesmas cores usadas nos badges de status) para dar hierarquia visual
   ao olhar rápido, em vez de todo cartão competir com o mesmo peso. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border-strong);border-radius:var(--radius);padding:16px 18px;}
.kpi.kpi-info{border-left-color:var(--info);}
.kpi.kpi-success{border-left-color:var(--success);}
.kpi.kpi-danger{border-left-color:var(--danger);}
.kpi.kpi-accent{border-left-color:var(--accent);}
.kpi .label{font-size:var(--text-sm);color:var(--text-muted);font-weight:600;}
.kpi .value{font-size:var(--text-2xl);font-weight:800;margin-top:4px;}
.kpi .sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}

/* Cabeçalho de página — título (+ subtítulo opcional) à esquerda e ação
   principal à direita. Antes cada view do admin montava essa linha à
   mão (algumas com botão, a maioria só um <h1> solto). */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap;}
.page-head h1{margin:0;}
.page-head-actions{flex-shrink:0;display:flex;gap:8px;}
/* .page-subtitle usa margin-top:-6px partindo do pressuposto de que o <h1>
   acima dela ainda tem a margem padrão (.4em, ver regra geral de h1/h2/h3)
   pra "cancelar" — mas aqui dentro do cabeçalho de página o h1 fica com
   margin:0 (regra acima), então aquela margem negativa fazia a primeira
   linha do subtítulo subir e encavalar no título (texto bagunçado,
   especialmente visível no celular quando o subtítulo quebra em várias
   linhas). Dashboard, SLA, Relatórios, Eletricistas e Administradores usam
   esse padrão — corrige pra margem positiva nos 5 de uma vez. */
.page-head .page-subtitle{margin-top:6px;}

/* Admin shell */
.admin-shell{display:flex;gap:24px;align-items:flex-start;}
.admin-side{width:208px;flex-shrink:0;background:var(--sidebar);color:#e8e4dc;border-radius:var(--radius);padding:16px 12px;position:sticky;top:20px;display:flex;flex-direction:column;}
.admin-side nav{display:flex;flex-direction:column;gap:2px;}
.admin-side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:var(--text-base);font-weight:600;color:#b6b0a5;box-shadow:inset 3px 0 0 transparent;transition:background-color var(--transition),color var(--transition),box-shadow var(--transition);}
.admin-side a:hover{text-decoration:none;color:#fff;}
.admin-side a.active{background:#332d23;color:#fff;box-shadow:inset 3px 0 0 var(--accent);}
/* O anel de foco padrão (--accent-ink) não tem contraste suficiente sobre
   o fundo escuro da sidebar — usa a cor accent (clara) só aqui. */
.admin-side a:focus-visible{outline-color:var(--accent);}
.admin-side .who{padding:12px 12px 0 12px;border-top:1px solid #33302b;margin-top:12px;}
.admin-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#3a2400;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--text-sm);flex-shrink:0;}
.admin-who-row{display:flex;align-items:center;gap:10px;}
.admin-who-name{font-size:var(--text-sm);color:#e8e4dc;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* width:100% (e não só flex:1) é o que garante que o conteúdo (em especial
   a tabela, que tem largura própria baseada no texto das células) não
   estoure a largura da coluna e empurre a página inteira pro lado no
   celular — min-width:0 sozinho não é suficiente nesse caso. */
.admin-main{flex:1;min-width:0;width:100%;}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.card-head h2{font-size:var(--text-lg);margin:0;}

/* Landing / role picker */
.hero{text-align:center;padding:40px 0 24px 0;}
.hero h1{font-size:var(--text-hero);max-width:600px;margin-left:auto;margin-right:auto;}
.hero p{color:var(--text-muted);max-width:480px;margin:10px auto 0 auto;}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;align-items:stretch;}
@media (max-width:820px){.role-grid{grid-template-columns:1fr;}}
.role-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:left;display:flex;flex-direction:column;}
.role-card .icon{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.role-card h3{font-size:var(--text-xl);}
.role-card p{font-size:var(--text-base);color:var(--text-muted);margin:6px 0 0 0;}
.role-body{flex:1;}
.role-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px;}

.notice{display:flex;gap:8px;align-items:flex-start;background:#efece7;border-radius:8px;padding:10px 12px;font-size:var(--text-base);color:var(--text-muted);margin-top:10px;}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.thumb{width:96px;height:96px;border-radius:8px;background:repeating-linear-gradient(45deg,#e3dfd8,#e3dfd8 8px,#ece9e3 8px,#ece9e3 16px);border:1px solid var(--border);position:relative;overflow:hidden;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb .tag{position:absolute;left:5px;bottom:5px;background:rgba(28,26,23,.75);color:#fff;font-size:var(--text-3xs);padding:2px 5px;border-radius:4px;}
.thumb-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(28,26,23,.75);color:#fff;font-size:var(--text-md);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color var(--transition);}
.thumb-remove:hover{background:rgba(28,26,23,.92);}
.foto-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.foto-error{color:var(--danger);font-size:var(--text-sm);margin-top:8px;display:none;}

@media (max-width: 720px){
  .admin-shell{flex-direction:column;}
  .admin-side{width:100%;position:static;flex-direction:row;overflow-x:auto;gap:4px;}
  .admin-side nav{flex-direction:row;}
  .admin-side a.active{box-shadow:inset 0 -3px 0 var(--accent);}
  .admin-side .who{display:none;}
  main{padding:18px 14px 40px 14px;}

  /* Menu principal (cabeçalho): em vez dos 4 links quebrando em 2 linhas
     soltas do lado do logo, vira um botão hambúrguer — o .topnav some por
     padrão e aparece como painel abaixo do cabeçalho ao abrir (ver
     navToggle em layout.php). */
  .nav-toggle{display:flex;}
  .topnav{
    display:none;width:100%;order:3;flex-direction:column;gap:2px;
    margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  }
  .topnav.is-open{display:flex;}
  .topnav a{padding:8px 4px;}

  /* Item de lista do eletricista (área de ordens de serviço): a largura
     fixa de 160px do select de status não cabia ao lado do ícone + texto
     no celular — ficava sobrepondo o título do chamado. Empilha o select
     embaixo, ocupando a largura toda, em vez de ficar ao lado. */
  .list-item{flex-wrap:wrap;}
  .list-item-link{min-width:220px;}
  .list-item-status-select{width:100%;order:3;}

  /* Hero da tela inicial: no celular, título grande + bold em 2 linhas e o
     parágrafo embaixo em 3 ficavam ocupando a tela toda. Reduz o respiro
     vertical. */
  .hero{padding:28px 0 20px 0;}
  /* Título do hero escalando com a largura da tela (clamp com vw), em vez
     de um tamanho fixo: assim ele fica sempre no maior tamanho que ainda
     cabe em 1 linha só em cada largura — 14px nos celulares mais estreitos
     (320px) até 28px (mesmo tamanho do desktop) a partir de 600px. Curva
     calibrada testando o tamanho máximo que não quebra linha a cada 20px
     de largura, de 320 a 720px, via Playwright. Abaixo de 320px (nenhum
     aparelho comum hoje é mais estreito que isso) pode voltar a quebrar. */
  .hero h1{font-size:clamp(14px, calc(5vw - 2px), 28px);}
  .hero p{font-size:var(--text-base);}
}

/* ===== Mapa de alfinetes com filtro e popup em cartão — padrão usado no
   dashboard do admin e no mapa público de "Acompanhar chamado". ===== */
.map-wrap{position:relative;}
.map-box.map-box-grande{height:480px;}

.map-filter-toggle{
  position:absolute;top:12px;left:12px;z-index:500;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;
  padding:9px 16px;font-weight:700;font-size:var(--text-sm);color:var(--text);
  box-shadow:0 2px 10px rgba(28,26,23,.14);cursor:pointer;display:flex;align-items:center;gap:6px;
}
.map-filter-panel{
  position:absolute;top:12px;left:12px;z-index:500;width:240px;max-width:calc(100% - 24px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(28,26,23,.2);padding:16px;
}
.map-filter-panel.is-hidden,
.map-filter-toggle.is-hidden{display:none;}
.map-filter-close{
  position:absolute;top:10px;right:10px;background:var(--danger-soft);color:var(--danger);
  border:none;border-radius:6px;width:22px;height:22px;line-height:1;cursor:pointer;font-size:14px;font-weight:700;
}
.map-filter-panel .form-group{margin-bottom:12px;}
.map-filter-panel label{font-size:var(--text-sm);font-weight:700;display:block;margin-bottom:4px;}
.map-filter-panel select,
.map-filter-panel input{font-size:var(--text-sm);padding:8px 10px;}

/* Alfinete (pin) */
.mapa-pin{
  width:34px;height:34px;background:var(--danger);border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.mapa-pin-badge{
  transform:rotate(45deg);width:22px;height:22px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--text);
}
.mapa-pin-badge svg{width:14px;height:14px;display:block;}

/* Popup (cartão) */
.leaflet-popup.mapa-popup .leaflet-popup-content-wrapper{padding:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 32px rgba(28,26,23,.28);}
.leaflet-popup.mapa-popup .leaflet-popup-content{margin:0;}
.mapa-popup-photo{width:100%;height:150px;object-fit:cover;display:block;background:var(--bg);}
.mapa-popup-body{padding:14px;}
.mapa-popup-section{padding:8px 0;border-top:1px solid var(--border);}
.mapa-popup-section:first-child{border-top:none;padding-top:0;}
.mapa-popup-label{font-size:var(--text-2xs);font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;}
.mapa-popup-text{font-size:var(--text-sm);color:var(--text);}
.mapa-popup-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;width:100%;}

@media (max-width: 720px){
  /* Mapa grande (dashboard admin / mapa público): 480px de altura fixa
     consome a tela quase toda no celular — reduz um pouco pra sobrar mais
     espaço de rolagem útil. Essa regra precisa vir depois da base (acima)
     no arquivo pra ganhar no empate de especificidade. */
  .map-box.map-box-grande{height:320px;}
}