/* Design system da Cidade Inteira: base neutra única, escala compacta; a cor do módulo é só acento.
   Valores (cores, escala, espaçamento, raios, sombras) vêm de tokens.css, gerado de design/design-tokens.json. */
@font-face { font-family: 'Public Sans'; font-weight: 400; font-display: swap; src: url('../fonts/public-sans-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 600; font-display: swap; src: url('../fonts/public-sans-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 700; font-display: swap; src: url('../fonts/public-sans-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-800.woff2') format('woff2'); }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--ci-font-body); font-size: var(--ci-text-base); color: var(--ci-text); background: var(--ci-background); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--ci-font-heading); font-weight: 700; line-height: 1.25; margin: 0 0 var(--ci-space-2); color: var(--ci-navy); }
h1 { font-size: var(--ci-text-title); letter-spacing: -.01em; }
h2 { font-size: var(--ci-text-lg); }
h3 { font-size: var(--ci-text-base); }
h4 { font-size: var(--ci-text-table); }
p { margin: 0 0 var(--ci-space-3); }
a { color: var(--ci-module-secondary); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
small { font-size: var(--ci-text-sm); color: var(--ci-text-secondary); }
code { font-size: .92em; background: var(--ci-surface-muted); padding: .05rem .35rem; border-radius: var(--ci-radius-sm); }
hr { border: 0; border-top: 1px solid var(--ci-line); margin: var(--ci-space-4) 0; }
img, svg { max-width: 100%; }
[x-cloak] { display: none !important; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 0; background: var(--ci-navy); color: #fff; padding: var(--ci-space-2) var(--ci-space-4); z-index: 100; border-radius: 0 0 var(--ci-radius-md) 0; }
.pular:focus { left: 0; }
:focus-visible { outline: 3px solid var(--ci-module-secondary); outline-offset: 2px; border-radius: var(--ci-radius-sm); }
.icone { width: 1.125rem; height: 1.125rem; flex: none; }
.sub { margin: 0; color: var(--ci-text-secondary); font-size: var(--ci-text-table); }
.vazio-texto { color: var(--ci-text-secondary); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Shell: topo fixo, barra lateral própria com rolagem e conteúdo */
.shell { display: grid; grid-template-columns: var(--ci-layout-sidebar) minmax(0, 1fr); grid-template-rows: var(--ci-layout-header) 1fr; grid-template-areas: "topo topo" "lateral conteudo"; min-height: 100vh; }
.topo { grid-area: topo; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--ci-space-4); padding: 0 var(--ci-space-4); background: var(--ci-surface); border-bottom: 1px solid var(--ci-line); border-top: 3px solid var(--ci-module-primary); }
.topo-esquerda { display: flex; align-items: center; gap: var(--ci-space-2); min-width: calc(var(--ci-layout-sidebar) - var(--ci-space-8)); }
.marca { display: flex; align-items: center; gap: var(--ci-space-3); text-decoration: none; color: var(--ci-navy); border-radius: var(--ci-radius-sm); }
.marca-nome { white-space: nowrap; font-family: var(--ci-font-heading); font-weight: 800; font-size: var(--ci-text-lg); color: var(--ci-navy); letter-spacing: -.01em; }
.logo { width: 1.75rem; height: 1.75rem; flex: none; }
.logo-grande { width: 3.5rem; height: 3.5rem; }
.botao-menu { display: none; }
.topo-direita { position: relative; margin-left: auto; }
.usuario-botao { gap: var(--ci-space-2); padding: 0 var(--ci-space-2) 0 var(--ci-space-1); max-width: 20rem; }
.usuario-nome { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.avatar { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--ci-module-primary); color: #fff; font-size: var(--ci-text-sm); font-weight: 700; flex: none; letter-spacing: .02em; }
.menu-suspenso { position: absolute; right: 0; top: calc(100% + var(--ci-space-2)); min-width: 15rem; background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); box-shadow: var(--ci-shadow-3); padding: var(--ci-space-2); z-index: 50; display: grid; gap: 2px; }
.menu-suspenso-cabecalho { padding: var(--ci-space-2) var(--ci-space-3); border-bottom: 1px solid var(--ci-line); margin-bottom: var(--ci-space-1); font-size: var(--ci-text-sm); color: var(--ci-text-secondary); }
.menu-suspenso-cabecalho strong { display: block; color: var(--ci-text); font-size: var(--ci-text-table); }
.menu-suspenso a, .link-botao { display: flex; align-items: center; gap: var(--ci-space-2); min-height: 2.25rem; padding: 0 var(--ci-space-3); border-radius: var(--ci-radius-sm); color: var(--ci-text); text-decoration: none; background: none; border: 0; text-align: left; font: inherit; font-size: var(--ci-text-table); cursor: pointer; width: 100%; }
.menu-suspenso a:hover, .link-botao:hover { background: var(--ci-hover); }

/* Busca global: leva a qualquer tela do menu */
.busca-global { position: relative; flex: 1 1 auto; max-width: 30rem; }
.busca-global .icone { position: absolute; left: var(--ci-space-3); top: 50%; transform: translateY(-50%); color: var(--ci-text-secondary); pointer-events: none; }
.busca-global input { padding-left: 2.375rem; height: var(--ci-control-height-small); background: var(--ci-surface-muted); border-color: transparent; max-width: none; }
.busca-global input:hover { border-color: var(--ci-line-strong); }
.busca-global input:focus { background: var(--ci-surface); }
.busca-resultados { position: absolute; left: 0; right: 0; top: calc(100% + var(--ci-space-2)); list-style: none; margin: 0; padding: var(--ci-space-1); background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); box-shadow: var(--ci-shadow-3); max-height: 60vh; overflow-y: auto; z-index: 50; }
.busca-resultados a { display: flex; align-items: center; gap: var(--ci-space-3); padding: var(--ci-space-2) var(--ci-space-3); border-radius: var(--ci-radius-sm); text-decoration: none; color: var(--ci-text); font-size: var(--ci-text-table); }
.busca-resultados a:hover, .busca-resultados a:focus { background: var(--ci-hover); }
.busca-resultados small { margin-left: auto; white-space: nowrap; }
.busca-vazio { padding: var(--ci-space-3); color: var(--ci-text-secondary); font-size: var(--ci-text-table); }

/* Barra lateral: áreas e módulos recolhíveis; o módulo atual abre sozinho */
.lateral { grid-area: lateral; position: sticky; top: var(--ci-layout-header); align-self: start; height: calc(100vh - var(--ci-layout-header)); overflow-y: auto; background: var(--ci-surface); border-right: 1px solid var(--ci-line); padding: var(--ci-space-3) var(--ci-space-2) var(--ci-space-8); scrollbar-width: thin; }
.lateral-topo { display: none; align-items: center; justify-content: space-between; margin: calc(var(--ci-space-2) * -1) 0 var(--ci-space-2) var(--ci-space-3); font-family: var(--ci-font-heading); font-size: var(--ci-text-lg); }
.lateral ul { list-style: none; margin: 0; padding: 0; }
.menu-inicio, .menu-item, .menu-modulo > summary, .menu-area > summary { display: flex; align-items: center; gap: var(--ci-space-2); border-radius: var(--ci-radius-md); text-decoration: none; color: var(--ci-text); cursor: pointer; }
.menu-inicio { padding: var(--ci-space-2) var(--ci-space-3); font-weight: 600; font-size: var(--ci-text-table); margin-bottom: var(--ci-space-2); }
.menu-inicio:hover, .menu-item:hover, .menu-modulo > summary:hover { background: var(--ci-hover); }
.menu-inicio.ativo { background: var(--ci-surface-muted); }
.menu-area { margin-top: var(--ci-space-1); }
.menu-area > summary, .menu-modulo > summary { list-style: none; }
.menu-area > summary::-webkit-details-marker, .menu-modulo > summary::-webkit-details-marker { display: none; }
.menu-area > summary { padding: var(--ci-space-2) var(--ci-space-3); font-size: var(--ci-text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ci-text-secondary); }
.menu-area > summary:hover { background: var(--ci-hover); }
.menu-area > summary .menu-rotulo { flex: 1; min-width: 0; }
.menu-area.com-ativo > summary { color: var(--ci-text); }
.ponto { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; flex: none; }
.menu-seta { width: .875rem; height: .875rem; flex: none; color: var(--ci-text-secondary); transition: transform .15s ease; }
details[open] > summary > .menu-seta { transform: rotate(180deg); }
.menu-modulo > summary { padding: 0 var(--ci-space-3); min-height: 2.25rem; font-size: var(--ci-text-table); font-weight: 600; }
.menu-modulo > summary .icone { color: var(--ci-module-secondary); }
.menu-modulo > summary .menu-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-modulo.com-ativo > summary { background: var(--ci-module-soft); color: var(--ci-module-primary); }
.menu-modulo .menu-lista { margin: 2px 0 var(--ci-space-2) 1.1875rem; padding-left: var(--ci-space-2); border-left: 1px solid var(--ci-line); }
.menu-item { min-height: 2rem; padding: 0 var(--ci-space-3) 0 var(--ci-space-2); font-size: var(--ci-text-table); }
.menu-item .icone { width: 1rem; height: 1rem; color: var(--ci-text-secondary); }
.menu-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item-solto { min-height: 2.25rem; padding-left: var(--ci-space-3); font-weight: 600; }
.menu-item-solto .icone { color: var(--ci-module-secondary); width: 1.125rem; height: 1.125rem; }
.menu-item.ativo { background: var(--ci-module-primary); color: #fff; font-weight: 600; }
.menu-item.ativo .icone { color: #fff; }
.menu-sem-resultado { padding: var(--ci-space-3); color: var(--ci-text-secondary); font-size: var(--ci-text-table); }
.conteudo { grid-area: conteudo; padding: var(--ci-space-6) var(--ci-space-8) var(--ci-space-10); max-width: var(--ci-layout-content); width: 100%; min-width: 0; margin: 0 auto; }
.conteudo-publico { min-height: 100vh; display: grid; place-items: center; padding: var(--ci-space-4); }
.escurecer { display: none; }

/* Topo das páginas públicas (sem login) */
.topo-publico { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-space-4); padding: var(--ci-space-3) var(--ci-space-6); background: var(--ci-surface); border-bottom: 1px solid var(--ci-line); border-top: 3px solid var(--ci-navy); }
.publico { min-height: 100vh; display: flex; flex-direction: column; }
.publico > .conteudo-publico { flex: 1; min-height: 0; align-content: start; padding-top: var(--ci-space-8); }

/* Trilha (breadcrumb) e cabeçalho de página */
.trilha { margin-bottom: var(--ci-space-3); font-size: var(--ci-text-sm); }
.trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-space-1); list-style: none; margin: 0; padding: 0; color: var(--ci-text-secondary); }
.trilha li + li::before { content: "›"; margin-right: var(--ci-space-1); color: var(--ci-line-strong); }
.trilha a { color: var(--ci-text-secondary); text-decoration: none; }
.trilha a:hover { color: var(--ci-text); text-decoration: underline; }
.trilha [aria-current] { color: var(--ci-text); font-weight: 600; }
.cabecalho-pagina { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ci-space-4); flex-wrap: wrap; margin-bottom: var(--ci-space-5); padding-bottom: var(--ci-space-4); border-bottom: 1px solid var(--ci-line); }
.cabecalho-pagina::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 3.5rem; height: 3px; border-radius: 3px; background: var(--ci-module-accent); }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina .sub { margin-top: var(--ci-space-1); max-width: 75ch; }

/* Cartões */
.cartao { background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); padding: var(--ci-space-5); margin-bottom: var(--ci-space-4); box-shadow: var(--ci-shadow-1); }
.cartao > h2:first-child, .cartao > header > h2 { font-size: var(--ci-text-lg); margin-bottom: var(--ci-space-3); }
.cartao > :last-child { margin-bottom: 0; }
.cartao > .sub { margin-bottom: var(--ci-space-3); }
.cartao h3:not(:first-child) { margin-top: var(--ci-space-5); }
.cartao ul:not([class]), .cartao ol:not([class]) { margin: 0 0 var(--ci-space-3); padding-left: var(--ci-space-5); }
.campo > span[id^="rotulo"] { font-weight: 600; font-size: var(--ci-text-sm); }
details.cartao { padding: 0; }
details.cartao > summary { list-style: none; display: flex; align-items: center; gap: var(--ci-space-2); min-height: 3rem; padding: 0 var(--ci-space-5); font-weight: 600; cursor: pointer; border-radius: var(--ci-radius-lg); }
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary::before { content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--ci-text-secondary); border-bottom: 2px solid var(--ci-text-secondary); transform: rotate(-45deg); transition: transform .15s ease; margin-right: var(--ci-space-1); }
details.cartao[open] > summary::before { transform: rotate(45deg); }
details.cartao[open] > summary { border-bottom: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg) var(--ci-radius-lg) 0 0; }
details.cartao > :not(summary) { margin-left: var(--ci-space-5); margin-right: var(--ci-space-5); }
details.cartao > summary + * { margin-top: var(--ci-space-4); }
details.cartao > :last-child:not(summary) { margin-bottom: var(--ci-space-5); }
.resumo-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--ci-space-3); margin-bottom: var(--ci-space-4); }
.resumo-cartoes .cartao { margin: 0; padding: var(--ci-space-4); color: var(--ci-text-secondary); font-size: var(--ci-text-sm); border-top: 3px solid var(--ci-module-accent); }
.resumo-cartoes a.cartao { display: block; text-decoration: none; color: var(--ci-text-secondary); }
.resumo-cartoes a.cartao:hover { box-shadow: var(--ci-shadow-2); border-color: var(--ci-module-secondary); }
.resumo-cartoes strong { display: block; font-family: var(--ci-font-heading); font-size: var(--ci-text-title); line-height: 1.2; color: var(--ci-navy); font-variant-numeric: tabular-nums; }
.resumo { list-style: none; margin: 0 0 var(--ci-space-3); padding: 0; display: grid; gap: 0; font-size: var(--ci-text-table); }
.resumo li { padding: var(--ci-space-2) 0; border-bottom: 1px solid var(--ci-line); }
.resumo li:last-child { border-bottom: 0; }
.dados { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: var(--ci-space-2) var(--ci-space-4); margin: 0 0 var(--ci-space-3); font-size: var(--ci-text-table); }
.dados dt { color: var(--ci-text-secondary); font-weight: 600; }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.acessos { display: flex; flex-wrap: wrap; gap: var(--ci-space-2); list-style: none; padding: 0; margin: 0; }
.acessos a { display: inline-block; padding: var(--ci-space-1) var(--ci-space-3); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-pill); text-decoration: none; font-size: var(--ci-text-table); }
.acessos a:hover { background: var(--ci-module-soft); }
.lista-simples { margin: 0 0 var(--ci-space-3); padding-left: var(--ci-space-5); font-size: var(--ci-text-table); }

/* Início do painel */
.boas-vindas { display: flex; align-items: center; gap: var(--ci-space-4); padding: var(--ci-space-5); margin-bottom: var(--ci-space-5); border-radius: var(--ci-radius-lg); background: var(--ci-navy); color: #fff; box-shadow: var(--ci-shadow-2); }
.boas-vindas h1 { color: #fff; margin: 0; }
.boas-vindas p { margin: var(--ci-space-1) 0 0; color: var(--ci-link-on-dark); font-size: var(--ci-text-table); }
.boas-vindas .logo { width: 3rem; height: 3rem; }
.estado-vazio { display: flex; align-items: center; gap: var(--ci-space-3); color: var(--ci-text-secondary); }
.estado-vazio .icone { width: 1.5rem; height: 1.5rem; color: var(--ci-success); }
.areas-do-inicio { display: grid; gap: var(--ci-space-5); margin-top: var(--ci-space-3); }
.area-do-inicio h3 { display: flex; align-items: center; gap: var(--ci-space-2); font-size: var(--ci-text-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--ci-text-secondary); margin-bottom: var(--ci-space-2); }
.modulos-do-inicio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--ci-space-3); }
.modulo-card { display: flex; align-items: center; gap: var(--ci-space-3); height: 100%; padding: var(--ci-space-3) var(--ci-space-4); background: var(--ci-surface); border: 1px solid var(--ci-line); border-left: 4px solid var(--ci-module-secondary); border-radius: var(--ci-radius-lg); box-shadow: var(--ci-shadow-1); text-decoration: none; color: var(--ci-text); }
.modulo-card:hover { box-shadow: var(--ci-shadow-2); border-color: var(--ci-module-secondary); }
.modulo-icone { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--ci-radius-md); background: var(--ci-module-soft); color: var(--ci-module-primary); flex: none; }
.modulo-icone .icone { width: 1.25rem; height: 1.25rem; }
.modulo-card strong { display: block; font-size: var(--ci-text-base); line-height: 1.25; }
.modulo-card small { display: block; }

/* Entrada (login e recuperação de senha) */
.login { width: 100%; max-width: 26rem; }
.login-cartao { background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); padding: var(--ci-space-8); text-align: center; box-shadow: var(--ci-shadow-2); }
.login-cartao form { text-align: left; margin-top: var(--ci-space-5); }
main > .login-cartao, section.login-cartao { width: 100%; max-width: 52rem; margin-inline: auto; }
.login-cartao .grade-form { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.login-cartao .mapa { height: 22rem; }
.login-cartao .campo { text-align: left; }
.lema { color: var(--ci-text-secondary); margin-top: 0; }
.login-duplo { max-width: 58rem; min-height: 31rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-radius: var(--ci-radius-lg); overflow: hidden; box-shadow: var(--ci-shadow-3); border: 1px solid var(--ci-line); background: var(--ci-surface); }
.login-duplo .login-cartao { border: 0; border-radius: 0; box-shadow: none; padding: var(--ci-space-10) var(--ci-space-8); display: flex; flex-direction: column; justify-content: center; }
.login-duplo .login-cartao { text-align: left; }
.login-duplo .login-cartao h1 { font-size: var(--ci-text-xl); }
.login-marca { background: var(--ci-navy); color: #fff; padding: var(--ci-space-10) var(--ci-space-8); display: flex; flex-direction: column; justify-content: space-between; gap: var(--ci-space-8); }
.login-marca .logo-grande { width: 3rem; height: 3rem; }
.login-marca h2 { color: #fff; font-size: var(--ci-text-title); line-height: 1.2; margin: var(--ci-space-4) 0 var(--ci-space-3); }
.login-marca p { color: var(--ci-link-on-dark); margin: 0; }
.login-marca ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ci-space-3); font-size: var(--ci-text-table); }
.login-marca li { display: flex; align-items: center; gap: var(--ci-space-3); }
.login-marca li .icone { color: var(--ci-link-on-dark); }
.publico-entrada > .conteudo-publico { align-content: center; padding-top: var(--ci-space-4); }
.login-logo-movel { display: none; margin: 0 auto; }
.login-nome { font-family: var(--ci-font-heading); font-weight: 800; font-size: var(--ci-text-lg); }

/* Formulários: rótulo acima do campo, campos da mesma altura, grade fluida */
.campo { margin-bottom: var(--ci-space-4); display: grid; gap: var(--ci-space-1); min-width: 0; align-content: start; }
.campo > label, .campo > legend, legend.campo { font-weight: 600; font-size: var(--ci-text-sm); color: var(--ci-text); line-height: 1.3; }
.campo small { color: var(--ci-text-secondary); font-size: var(--ci-text-sm); }
input, select, textarea { font: inherit; font-size: var(--ci-text-base); color: var(--ci-text); background: var(--ci-surface); border: 1px solid var(--ci-line-strong); border-radius: var(--ci-radius-md); width: 100%; min-width: 0; }
input, select { height: var(--ci-control-height); padding: 0 var(--ci-space-3); }
textarea { padding: var(--ci-space-2) var(--ci-space-3); min-height: 5.5rem; line-height: 1.45; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ci-text-secondary); opacity: 1; }
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { padding-right: var(--ci-space-2); }
input:hover, select:hover, textarea:hover { border-color: var(--ci-text-secondary); }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--ci-module-secondary) 35%, transparent); outline-offset: 0; border-color: var(--ci-module-secondary); }
input:disabled, select:disabled, textarea:disabled { background: var(--ci-surface-muted); color: var(--ci-text-secondary); cursor: not-allowed; }
input[aria-invalid="true"], input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--ci-danger); }
input[type="search"] { max-width: 28rem; }
select { appearance: none; padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, var(--ci-text-secondary) 50%), linear-gradient(135deg, var(--ci-text-secondary) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 50%, calc(100% - .8rem) 50%; background-size: .3rem .3rem; background-repeat: no-repeat; text-overflow: ellipsis; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; padding: 0; flex: none; accent-color: var(--ci-module-secondary); cursor: pointer; }
input[type="file"] { height: auto; padding: var(--ci-space-2) var(--ci-space-3); font-size: var(--ci-text-table); }
input[type="file"]::file-selector-button { font: inherit; font-size: var(--ci-text-sm); font-weight: 600; padding: .25rem var(--ci-space-3); margin-right: var(--ci-space-3); border: 1px solid var(--ci-line-strong); border-radius: var(--ci-radius-sm); background: var(--ci-surface-muted); color: var(--ci-text); cursor: pointer; }
input[type="range"] { padding: 0; height: 1.5rem; }
fieldset { border: 1px solid var(--ci-line); border-radius: var(--ci-radius-md); padding: var(--ci-space-3) var(--ci-space-4); margin: 0 0 var(--ci-space-4); min-width: 0; }
fieldset legend { padding: 0 var(--ci-space-2); font-weight: 600; font-size: var(--ci-text-sm); }
fieldset.campo { border: 0; padding: 0; margin: 0 0 var(--ci-space-4); display: flex; flex-wrap: wrap; column-gap: var(--ci-space-6); }
fieldset.campo > legend { width: 100%; }
fieldset.campo legend { padding: 0; margin-bottom: var(--ci-space-1); }
fieldset.campo label, .opcao, .campo-marcar label, label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: var(--ci-space-2); font-weight: 400; font-size: var(--ci-text-base); color: var(--ci-text); line-height: 1.4; cursor: pointer; margin-bottom: var(--ci-space-1); }
.campo-marcar { align-self: end; min-height: var(--ci-control-height); align-content: center; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: var(--ci-space-3) var(--ci-space-4); align-items: end; margin-bottom: var(--ci-space-3); }
.grade-form .campo { margin-bottom: 0; }
.grade-form .largura-total, .campo.largura-total, .grade-form > fieldset.campo, .grade-form > .campo:has(> textarea), .grade-form > .campo:has(.mapa) { grid-column: 1 / -1; }
.grade-form > .btn, .acao-form { align-self: end; }
.acao-form { display: flex; align-items: flex-end; gap: var(--ci-space-2); margin-bottom: 0; }
form .btn[type="submit"]:last-child { margin-top: var(--ci-space-1); }
.grade-form + .btn { margin-top: var(--ci-space-1); }
.filtro, .barra-ferramentas { background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); padding: var(--ci-space-3) var(--ci-space-4); margin-bottom: var(--ci-space-4); box-shadow: var(--ci-shadow-1); }
.filtro { gap: var(--ci-space-3) var(--ci-space-4); }
.barra-ferramentas { display: flex; flex-wrap: wrap; gap: var(--ci-space-3) var(--ci-space-4); align-items: center; font-size: var(--ci-text-table); }
.barra-ferramentas > label { font-weight: 600; font-size: var(--ci-text-sm); }
.barra-ferramentas select, .barra-ferramentas input:not([type="checkbox"], [type="radio"]) { width: auto; min-width: 12rem; flex: 0 1 18rem; }
.barra-ferramentas input[type="search"] { flex: 1 1 18rem; max-width: 28rem; }
.linha-form { display: flex; flex-wrap: wrap; gap: var(--ci-space-2); align-items: center; }
.linha-form input, .linha-form select { width: auto; flex: 1 1 8rem; height: var(--ci-control-height-small); }
.caixa { margin-right: var(--ci-space-1); }
.lista-marcacao { max-height: 16rem; overflow: auto; border: 1px solid var(--ci-line); padding: var(--ci-space-2) var(--ci-space-3); border-radius: var(--ci-radius-md); background: var(--ci-surface); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ci-space-2); height: var(--ci-control-height); padding: 0 var(--ci-space-4); border-radius: var(--ci-radius-md); border: 1px solid var(--ci-line-strong); background: var(--ci-surface); color: var(--ci-text); font: inherit; font-size: var(--ci-text-table); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.btn:hover { background: var(--ci-hover); border-color: var(--ci-text-secondary); text-decoration: none; }
.btn:active { background: var(--ci-surface-muted); }
.btn-primary { background: var(--ci-module-secondary); border-color: var(--ci-module-secondary); color: #fff; box-shadow: var(--ci-shadow-1); }
.btn-primary:hover { background: var(--ci-module-secondary); border-color: var(--ci-module-secondary); filter: brightness(.9); }
.btn-primary:active { filter: brightness(.82); }
.btn-secondary { border-color: var(--ci-module-secondary); color: var(--ci-module-primary); background: var(--ci-surface); }
.btn-secondary:hover { background: var(--ci-module-soft); border-color: var(--ci-module-secondary); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { border-color: transparent; background: var(--ci-hover); }
.btn-link { height: auto; padding: 0; border: 0; background: none; color: var(--ci-module-secondary); text-decoration: underline; white-space: normal; text-align: left; font-weight: 600; }
.btn-link:hover { background: none; text-decoration-thickness: 2px; }
.btn-pequeno, .btn-sm { height: var(--ci-control-height-small); padding: 0 var(--ci-space-3); font-size: var(--ci-text-sm); gap: var(--ci-space-1); }
.btn-bloco { width: 100%; }
.btn[disabled], .btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: progress; pointer-events: none; }
button:not(.btn):not(.link-botao):not(.marcador) { font: inherit; }

/* Carregamento: spinner no botão, skeleton nas listas. Nunca uma tela congelada. */
.spinner { display: none; width: 1rem; height: 1rem; border: 2px solid currentcolor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; flex: none; }
.htmx-request .spinner, .htmx-request.spinner { display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }
.lista.htmx-request { position: relative; min-height: 10rem; }
.lista.htmx-request > * { visibility: hidden; }
.lista.htmx-request::before { content: ""; position: absolute; inset: 0; border-radius: var(--ci-radius-lg); background: linear-gradient(90deg, var(--ci-surface-muted) 25%, var(--ci-surface) 50%, var(--ci-surface-muted) 75%); background-size: 200% 100%; animation: brilho 1.2s ease-in-out infinite; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .spinner, .lista.htmx-request::before { animation: none; } .menu-seta, details.cartao > summary::before { transition: none; } }
.lista > .vazio-texto { text-align: center; padding: var(--ci-space-8) var(--ci-space-4); border: 1px dashed var(--ci-line-strong); border-radius: var(--ci-radius-lg); background: var(--ci-surface); margin: 0; }
.vazio { text-align: center; max-width: 32rem; }

/* Tabelas: densidade de produto (linhas de 44 px), cabeçalho sutil, zebra e hover discretos */
.tabela-rolagem, .rolagem-horizontal { position: relative; overflow-x: auto; max-width: 100%; }
.tabela-rolagem { background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); box-shadow: var(--ci-shadow-1); }
.tabela-rolagem:focus-visible { outline-offset: -3px; }
.tabela-rolagem + .paginacao, .tabela-rolagem + * { margin-top: var(--ci-space-3); }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--ci-surface); font-size: var(--ci-text-table); font-variant-numeric: tabular-nums; }
.rolagem-horizontal > .tabela { border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); }
.tabela th, .tabela td { padding: var(--ci-space-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ci-line); line-height: 1.4; }
.tabela th { background: var(--ci-surface-muted); color: var(--ci-text-secondary); font-size: var(--ci-text-sm); font-weight: 600; white-space: nowrap; padding-top: var(--ci-space-2); padding-bottom: var(--ci-space-2); }
.tabela thead th:first-child { border-top-left-radius: calc(var(--ci-radius-lg) - 1px); }
.tabela thead th:last-child { border-top-right-radius: calc(var(--ci-radius-lg) - 1px); }
.tabela th:first-child, .tabela td:first-child { padding-left: var(--ci-space-4); }
.tabela th:last-child, .tabela td:last-child { padding-right: var(--ci-space-4); }
.tabela tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ci-surface-muted) 40%, var(--ci-surface)); }
.tabela tbody tr:hover td { background: var(--ci-hover); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td:first-child a { white-space: nowrap; }
.tabela th.num, .tabela td.num { text-align: right; }
.tabela td small { display: block; font-size: var(--ci-text-sm); line-height: 1.35; }
.tabela td > details > summary { cursor: pointer; font-weight: 600; color: var(--ci-module-secondary); font-size: var(--ci-text-sm); white-space: nowrap; }
.tabela td > details ul { list-style: none; margin: var(--ci-space-2) 0 0; padding: 0; display: grid; gap: var(--ci-space-2); min-width: 18rem; font-size: var(--ci-text-sm); }
.tabela td > details li { padding: var(--ci-space-2) var(--ci-space-3); background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-md); }
.tabela td .selo { margin-bottom: 2px; }
.tabela-acoes { display: flex; flex-wrap: wrap; gap: var(--ci-space-2); align-items: center; }
td > form.tabela-acoes, td > .tabela-acoes + .tabela-acoes, li > form.tabela-acoes { margin-top: var(--ci-space-2); }
.tabela-acoes input, .tabela-acoes select { width: auto; flex: 1 1 7rem; max-width: 12rem; height: var(--ci-control-height-small); font-size: var(--ci-text-sm); }
.tabela-acoes .btn { flex: none; }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: var(--ci-space-4); margin-top: var(--ci-space-3); color: var(--ci-text-secondary); font-size: var(--ci-text-sm); flex-wrap: wrap; }
.paginacao div { display: flex; gap: var(--ci-space-2); }
.paginacao .btn { height: var(--ci-control-height-small); padding: 0 var(--ci-space-3); font-size: var(--ci-text-sm); }

/* Menu de ações da linha ("⋯"): montado pelo site.js quando há mais de duas ações */
.menu-acoes { position: relative; display: inline-flex; gap: var(--ci-space-2); align-items: center; }
.menu-acoes-botao { width: var(--ci-control-height-small); padding: 0; }
.menu-acoes-lista { position: fixed; z-index: 60; min-width: 12.5rem; display: grid; gap: 2px; padding: var(--ci-space-1); background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-md); box-shadow: var(--ci-shadow-3); }
.menu-acoes-lista .btn { justify-content: flex-start; width: 100%; height: 2.25rem; border: 0; background: transparent; font-size: var(--ci-text-table); }
.menu-acoes-lista .btn:hover { background: var(--ci-hover); }

/* Celular (até 640 px): a tabela vira uma lista de cartões empilhados, um por linha, em vez de rolar na horizontal.
   O cabeçalho some só da vista (continua para leitores de tela) e o site.js copia o título de cada coluna para o data-rotulo da célula, mostrado acima do valor.
   O site.js também reafirma os papéis de tabela (role), que o navegador perderia ao trocar o display; o menu "⋯" das ações continua o mesmo. */
@media (max-width: 40rem) {
  .tabela-rolagem, .rolagem-horizontal { overflow-x: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .rolagem-horizontal > .tabela { border: 0; border-radius: 0; background: transparent; }
  .tabela, .tabela tbody, .tabela tfoot, .tabela tr, .tabela td, .tabela th { display: block; }
  .tabela { background: transparent; }
  .tabela thead { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .tabela tbody tr { margin-bottom: var(--ci-space-3); background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); box-shadow: var(--ci-shadow-1); }
  .tabela tbody tr:last-child { margin-bottom: 0; }
  .tabela tbody tr:nth-child(even) td, .tabela tbody tr:hover td { background: transparent; }
  .tabela th, .tabela td { padding: var(--ci-space-2) var(--ci-space-4); text-align: left; white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid var(--ci-line); }
  .tabela th:first-child, .tabela td:first-child, .tabela th:last-child, .tabela td:last-child { padding-left: var(--ci-space-4); padding-right: var(--ci-space-4); }
  .tabela tbody td:last-child { border-bottom: 0; }
  .tabela td::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; color: var(--ci-text-secondary); font-size: var(--ci-text-sm); font-weight: 600; }
  .tabela td:not([data-rotulo])::before { content: none; }
  .tabela td:first-child a { white-space: normal; }
  .tabela td > details ul { min-width: 0; }
  .tabela th.num, .tabela td.num { text-align: left; }
  .tabela .tabela-acoes { align-items: stretch; }
}

/* Selos de situação: cor + texto, nunca só cor (WCAG 1.4.1); contraste AA com os tons semânticos */
.selo { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.375rem; padding: .125rem .625rem; border-radius: var(--ci-radius-pill); font-size: var(--ci-text-xs); font-weight: 600; line-height: 1.3; white-space: nowrap; margin-right: var(--ci-space-1); background: var(--ci-surface-muted); color: var(--ci-text-secondary); }
.selo::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: currentcolor; opacity: .85; flex: none; }
.selo-ok { background: var(--ci-success-bg); color: var(--ci-success-text); }
.selo-erro { background: var(--ci-danger-bg); color: var(--ci-danger-text); }
.selo-info { background: var(--ci-module-soft); color: var(--ci-module-primary); }
.selo-atencao { background: var(--ci-warning-bg); color: var(--ci-navy); }
.selo-neutro { background: var(--ci-surface-muted); color: var(--ci-text-secondary); }

/* Avisos e toasts */
.aviso { padding: var(--ci-space-3) var(--ci-space-4); border-radius: var(--ci-radius-md); margin-bottom: var(--ci-space-4); border: 1px solid transparent; border-left-width: 4px; font-size: var(--ci-text-table); }
.aviso > :last-child { margin-bottom: 0; }
.aviso-erro { background: var(--ci-danger-bg); color: var(--ci-danger-text); border-color: var(--ci-danger); }
.aviso-sucesso { background: var(--ci-success-bg); color: var(--ci-success-text); border-color: var(--ci-success); }
.aviso-info { background: var(--ci-module-soft); color: var(--ci-module-primary); border-color: var(--ci-module-secondary); }
.aviso-atencao { background: var(--ci-warning-bg); color: var(--ci-navy); border-color: var(--ci-warning); }
.aviso a { color: inherit; font-weight: 600; }
.toasts { position: fixed; right: var(--ci-space-4); bottom: var(--ci-space-4); display: grid; gap: var(--ci-space-2); z-index: 70; max-width: 24rem; }
.toast { background: var(--ci-navy); color: #fff; padding: var(--ci-space-3) var(--ci-space-4); border-radius: var(--ci-radius-md); box-shadow: var(--ci-shadow-3); font-size: var(--ci-text-table); border-left: 4px solid var(--ci-success); }
.toast-erro { background: var(--ci-danger-text); border-left-color: var(--ci-danger-bg); }
.passos { padding-left: var(--ci-space-5); }
.qr { width: 12rem; height: 12rem; margin: var(--ci-space-2) 0; border: 1px solid var(--ci-line); border-radius: var(--ci-radius-md); background: #FFFFFF; }
.qr svg { display: block; width: 100%; height: 100%; }
.link-secundario { margin: var(--ci-space-4) 0 0; text-align: center; font-size: var(--ci-text-table); }
.chave { font-size: var(--ci-text-lg); letter-spacing: .08em; background: var(--ci-module-soft); padding: .15rem .4rem; border-radius: var(--ci-radius-sm); word-break: break-all; }
.codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--ci-space-2); list-style: none; padding: 0; }
.codigos code { display: block; background: var(--ci-module-soft); padding: .35rem .5rem; border-radius: var(--ci-radius-sm); }
.chave-do-sensor { display: block; background: var(--ci-module-soft); padding: var(--ci-space-2) var(--ci-space-3); border-radius: var(--ci-radius-sm); overflow-wrap: anywhere; user-select: all; }
details.relatorio-opcao { border: 1px solid var(--ci-line); border-radius: var(--ci-radius-md); padding: var(--ci-space-2) var(--ci-space-4); margin-bottom: var(--ci-space-2); background: var(--ci-surface); }
details.relatorio-opcao > summary { font-weight: 600; cursor: pointer; min-height: 1.75rem; display: flex; align-items: center; }
details.relatorio-opcao[open] > summary { margin-bottom: var(--ci-space-3); }
.resposta-aviso:empty { display: none; }

/* Tablet e celular: a barra lateral vira gaveta aberta pelo botão do topo */
@media (max-width: 64rem) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "conteudo"; }
  .botao-menu { display: inline-flex; }
  .lateral-topo { display: flex; }
  .topo-esquerda { min-width: 0; }
  .lateral { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(20rem, 88vw); height: 100vh; padding-top: var(--ci-space-4); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; box-shadow: var(--ci-shadow-3); }
  .shell[data-menu="aberto"] .lateral { transform: none; visibility: visible; }
  .shell[data-menu="aberto"] .escurecer { display: block; position: fixed; inset: 0; z-index: 55; background: rgb(20 33 61 / 45%); }
  .conteudo { padding: var(--ci-space-5) var(--ci-space-4) var(--ci-space-8); }
  .login-duplo { grid-template-columns: minmax(0, 1fr); max-width: 28rem; }
  .login-marca { display: none; }
  .login-logo-movel { display: block; }
}
@media (max-width: 52rem) { .usuario-nome { display: none; } }
@media (max-width: 40rem) {
  .busca-global { display: none; }
  .marca-nome { font-size: var(--ci-text-base); }
  .usuario-nome { display: none; }
  .cabecalho-pagina { align-items: flex-start; }
  .conteudo { padding: var(--ci-space-4) var(--ci-space-3) var(--ci-space-8); }
  .cartao { padding: var(--ci-space-4); }
  details.cartao > summary { padding: 0 var(--ci-space-4); }
  details.cartao > :not(summary) { margin-left: var(--ci-space-4); margin-right: var(--ci-space-4); }
  .grade-form { grid-template-columns: minmax(0, 1fr); }
  .dados { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dados dd { margin-bottom: var(--ci-space-2); }
  .btn { height: auto; min-height: var(--ci-control-height-touch); padding-block: var(--ci-space-2); white-space: normal; text-align: center; max-width: 100%; }
  .btn-pequeno, .btn-sm { min-height: var(--ci-control-height); }
  .menu-acoes-botao { width: var(--ci-control-height); }
  input, select { height: var(--ci-control-height-touch); font-size: 1rem; }
  .barra-ferramentas select, .barra-ferramentas input { flex: 1 1 100%; width: 100%; }
  .toasts { left: var(--ci-space-3); right: var(--ci-space-3); max-width: none; }
  .login-cartao { padding: var(--ci-space-6) var(--ci-space-4); }
  .topo-publico { padding: var(--ci-space-3) var(--ci-space-4); }
}

/* Mapas: container, marcadores e controles do MapLibre com os tokens (altura se ajusta à tela; controles com alvo de toque) */
.mapa { position: relative; width: 100%; height: clamp(18rem, 62vh, 32rem); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); overflow: hidden; background: var(--ci-surface-muted); margin-bottom: var(--ci-space-4); box-shadow: var(--ci-shadow-1); }
.mapa:focus-visible { outline-offset: 2px; }
.mapa-aviso { position: absolute; left: var(--ci-space-2); bottom: var(--ci-space-8); z-index: 2; margin: 0; padding: var(--ci-space-1) var(--ci-space-3); border-radius: var(--ci-radius-md); background: var(--ci-surface); border: 1px solid var(--ci-line); font-size: var(--ci-text-sm); color: var(--ci-text-secondary); max-width: 70%; }
.mapa .maplibregl-ctrl-group { border-radius: var(--ci-radius-md); box-shadow: var(--ci-shadow-2); }
.mapa .maplibregl-ctrl-group button { width: var(--ci-control-height); height: var(--ci-control-height); }
.mapa .maplibregl-ctrl-scale { font-family: var(--ci-font-body); font-size: var(--ci-text-xs); color: var(--ci-text-secondary); border-radius: var(--ci-radius-sm); }
.marcador { display: inline-flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.marcador::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ci-module-secondary); border: 3px solid var(--ci-surface); box-shadow: var(--ci-shadow-2); }
.marcador:focus-visible::before { outline: 3px solid var(--ci-navy); outline-offset: 2px; }
.marcador-destino::before { background: var(--ci-navy); border-radius: var(--ci-radius-sm); }
.marcador-antigo::before { background: var(--ci-line-strong); }
.marcador-rotulo { margin-top: .15rem; padding: 0 var(--ci-space-2); border-radius: var(--ci-radius-sm); background: var(--ci-surface); border: 1px solid var(--ci-line); font-size: var(--ci-text-xs); font-weight: 700; color: var(--ci-text); white-space: nowrap; }
.mapa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--ci-space-4); align-items: start; }
.mapa-layout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ci-space-2); max-height: 30rem; overflow: auto; }
@media (max-width: 52rem) { .mapa-layout { grid-template-columns: minmax(0, 1fr); } .mapa { height: clamp(16rem, 55vh, 22rem); } }

/* Texto corrido (relatos, observações) preserva as quebras de linha digitadas */
.texto-corrido { white-space: pre-wrap; }

/* Plaquetas de patrimônio: etiquetas com QR, prontas para imprimir */
.plaquetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.plaqueta { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .6rem; align-items: center; padding: .6rem; border: 1px solid var(--ci-line); border-radius: .5rem; background: #fff; break-inside: avoid; }
.plaqueta svg { width: 6rem; height: 6rem; }
.plaqueta strong { display: block; font-size: 1.1rem; }
.plaqueta small { display: block; color: var(--ci-text-secondary); overflow-wrap: anywhere; }

/* Carteirinhas do transporte escolar: duas por linha, cartão de 85 x 54 mm quando impresso */
.carteirinhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .75rem; }
.carteirinha { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; align-items: center; margin: 0; padding: .75rem; border: 1px solid var(--ci-line); border-radius: .5rem; background: #fff; break-inside: avoid; }
.carteirinha svg { width: 7rem; height: 7rem; }
.carteirinha strong { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.carteirinha small { display: block; color: var(--ci-text-secondary); overflow-wrap: anywhere; }
@media print {
  .topo, .topo-publico, .lateral, .trilha, .escurecer, .pular, .toasts, .cabecalho-pagina .sub, .nao-imprimir { display: none !important; }
  .shell { display: block; }
  .cabecalho-pagina::after { display: none; }
  .conteudo { padding: 0; }
  .plaquetas { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  .plaqueta { border-color: #000; }
  .carteirinhas { grid-template-columns: repeat(2, 1fr); gap: 5mm; }
  .carteirinha { border-color: #000; }
}

/* Portal do cidadão */
.portal-cidadao { max-width: 56rem; margin: 0 auto; padding: 1rem; }
.portal-servicos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; }
.portal-servicos .cartao { margin: 0; }
.portal-servicos h2 { margin: 0 0 .35rem; font-size: 1.1rem; }

/* Alerta Cidade: níveis de alerta e de risco. Só tokens do design system: info (observação), warning (atenção), danger (alerta) e danger forte (alerta máximo). O nome do nível sempre vem por extenso. */
.nivel-atencao { background: var(--ci-warning); color: var(--ci-navy); }
.nivel-alerta { background: var(--ci-danger-bg); color: var(--ci-danger-text); box-shadow: inset 0 0 0 2px var(--ci-danger); }
.nivel-maximo { background: var(--ci-danger-text); color: #fff; }
.faixa-nivel { padding: 1rem 1.25rem; border-radius: .75rem; margin-bottom: 1rem; }
.faixa-nivel.selo-ok { background: #dff1e7; color: var(--ci-success-text); }
.faixa-nivel.selo-info { background: var(--ci-module-soft); color: var(--ci-module-primary); }
.faixa-nivel h2 { margin: 0 0 .25rem; }
.faixa-nivel p { margin: 0; }
.contorno { width: 100%; max-width: 24rem; height: auto; border: 1px solid var(--ci-line); border-radius: .5rem; background: #fff; }
.contorno-area { fill: var(--ci-danger-bg); stroke: var(--ci-danger-text); stroke-width: 2; stroke-linejoin: round; }
.contorno-casa { fill: var(--ci-navy); }
.quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; align-items: start; }
.quadro-coluna h2 { font-size: 1rem; }
.quadro-coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.quadro-coluna .cartao { margin: 0; padding: .75rem; display: grid; gap: .25rem; }
.cartoes-abrigo { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; }
.cartoes-abrigo .cartao { margin: 0; }
.cartoes-abrigo h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.cartao-alerta { border: 2px solid var(--ci-danger); }
progress { width: 100%; height: .75rem; accent-color: var(--ci-module-secondary); }
.lista-marcacao { max-height: 16rem; overflow: auto; border: 1px solid var(--ci-line); padding: .5rem .75rem; border-radius: .5rem; }
.passos-do-assistente { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.passos-do-assistente li { padding: .3rem .8rem; border: 1px solid var(--ci-line); border-radius: 999px; background: #fff; color: var(--ci-text-secondary); }
.passos-do-assistente li.passo-atual { background: var(--ci-module-soft); color: var(--ci-module-primary); border-color: var(--ci-module-secondary); font-weight: 700; }

/* Painel de chamada da TV (Vez na Assistência): letras grandes que acompanham a largura da tela, só código, nome de chamada e guichê */
.painel-tv { width: 100%; max-width: 60rem; margin: 0 auto; text-align: center; }
.painel-tv h1 { margin-bottom: var(--ci-space-5); }
.chamada-atual { background: var(--ci-module-primary); color: var(--ci-surface); border-radius: var(--ci-radius-lg); padding: clamp(var(--ci-space-5), 4vw, var(--ci-space-10)) var(--ci-space-4); margin-bottom: var(--ci-space-4); box-shadow: var(--ci-shadow-2); }
.chamada-atual strong { display: block; font-family: var(--ci-font-heading); font-size: clamp(3rem, 14vw, 6rem); line-height: 1.1; overflow-wrap: anywhere; }
.chamada-atual span { display: block; font-size: clamp(1.25rem, 5vw, 2rem); overflow-wrap: anywhere; }
.chamadas-anteriores { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ci-space-2); }
.chamadas-anteriores li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ci-space-2) var(--ci-space-4); background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-md); padding: var(--ci-space-3) var(--ci-space-4); font-size: clamp(1.125rem, 4vw, 1.5rem); }

/* Miniaturas de fotos (Cidade em Dia): dimensões fixas para não deslocar o layout; ampliação em <dialog> nativo */
.galeria-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ci-space-4); }
.foto-item { margin: 0; width: 15rem; }
.foto-item figcaption { display: flex; flex-wrap: wrap; gap: var(--ci-space-2); align-items: baseline; margin-top: var(--ci-space-2); font-size: var(--ci-text-sm); color: var(--ci-text-secondary); }
.foto-item figcaption strong { color: var(--ci-navy); }
.foto-botao { display: grid; place-items: center; width: 15rem; height: 11.25rem; padding: 0; border: 1px solid var(--ci-line-strong); border-radius: var(--ci-radius-md); background: var(--ci-module-soft); color: var(--ci-text-secondary); cursor: zoom-in; overflow: hidden; font: inherit; }
.foto-botao:hover { border-color: var(--ci-module-secondary); box-shadow: var(--ci-shadow-2); }
.foto-miniatura { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-botao.foto-indisponivel { cursor: default; }
.foto-aviso { padding: var(--ci-space-3); text-align: center; font-size: var(--ci-text-sm); }
.foto-janela { max-width: min(92vw, 60rem); width: 100%; padding: var(--ci-space-4); border: 1px solid var(--ci-line); border-radius: var(--ci-radius-lg); background: var(--ci-surface); color: var(--ci-text); box-shadow: var(--ci-shadow-3); }
.foto-janela::backdrop { background: rgb(20 33 61 / 60%); }
.foto-janela figure { margin: 0 0 var(--ci-space-3); }
.foto-grande { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; object-fit: contain; border-radius: var(--ci-radius-md); background: var(--ci-module-soft); }
.foto-janela figcaption { margin-top: var(--ci-space-2); text-align: center; font-size: var(--ci-text-sm); color: var(--ci-text-secondary); }
@media (max-width: 40rem) { .foto-item, .foto-botao { width: 100%; } .foto-botao { height: auto; aspect-ratio: 4 / 3; } }