/* =====================================================================
   Meu Condomínio — "recepção de residencial discreto"
   Papel quente, tinta, serifa nos títulos, linhas finas, um só acento
   (verde-petróleo). Sem sombras pesadas, sem cores gritando: o estado
   aparece pelo ponto de cor + texto (nunca só pela cor).
   Fontes do sistema (a CSP do app não permite fontes de fora).
   ===================================================================== */
:root {
  --fundo: #f5f2ec; --cartao: #fbfaf7; --texto: #1d1f20; --suave: #6b6a66; --linha: #e4dfd5;
  --marca: #1f4d48; --marca-texto: #f7f4ee; --agua: #2f6f86; --agua-clara: #dce9ec;
  --ok: #3b7a57; --alerta: #a8761c; --erro: #a3413a; --chip: #efebe3; --sombra: none;
  --serifa: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif", Georgia, serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans", sans-serif;
  --raio: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #121313; --cartao: #191a1a; --texto: #ece8e0; --suave: #9c978d; --linha: #2c2c2a;
    --marca: #8cc8bc; --marca-texto: #10201d; --agua: #7fb7c9; --agua-clara: #1d3138;
    --ok: #7fbf96; --alerta: #d9a650; --erro: #e08a80; --chip: #222322;
  }
}
:root[data-theme="dark"] {
  --fundo: #121313; --cartao: #191a1a; --texto: #ece8e0; --suave: #9c978d; --linha: #2c2c2a;
  --marca: #8cc8bc; --marca-texto: #10201d; --agua: #7fb7c9; --agua-clara: #1d3138;
  --ok: #7fbf96; --alerta: #d9a650; --erro: #e08a80; --chip: #222322;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--texto);
  font: 15.5px/1.55 var(--sans); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
button, input, select, textarea { font: inherit; color: inherit; }
.oculto { display: none !important; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--marca) 22%, transparent); }

/* ---------- topo e navegação ---------- */
.topo { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha);
  padding: calc(14px + env(safe-area-inset-top)) 20px 12px; display: flex; align-items: baseline; gap: 12px; }
.topo h1 { font: 400 22px/1.2 var(--serifa); margin: 0; flex: 1; letter-spacing: -.005em; }
.topo .apto { font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .14em; }
.abas { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; background: var(--cartao);
  border-top: 1px solid var(--linha); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom); }
.abas button { background: none; border: 0; padding: 10px 2px 11px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave); cursor: pointer; position: relative; }
.abas button .ic { width: 22px; height: 22px; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.abas button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
.abas button.ativa { color: var(--marca); }
.abas button.ativa::before { content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; background: var(--marca); }

main { max-width: 720px; margin: 0 auto; padding: 22px 18px; display: flex; flex-direction: column; gap: 18px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; }
.cartao h2 { font: 400 19px/1.25 var(--serifa); color: var(--texto); margin: 0 0 14px; letter-spacing: -.005em; }
.cartao h3 { font: 600 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--suave); margin: 18px 0 6px; }
.suave { color: var(--suave); font-size: 14px; }
.linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); }
.linha:last-child { border-bottom: 0; }
.linha strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.texto-livre { white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- números ---------- */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linha);
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.numero { background: var(--cartao); padding: 14px 10px; text-align: center; }
.numero .v { font: 400 26px/1.1 var(--serifa); font-variant-numeric: tabular-nums lining-nums; }
.numero .r { font-size: 10.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
.destaque { font: 400 36px/1.1 var(--serifa); font-variant-numeric: tabular-nums lining-nums; margin: 4px 0 10px; }

/* ---------- gráfico ---------- */
.grafico { width: 100%; height: 140px; display: block; }
.grafico .barra { fill: var(--agua); }
.grafico .barra.acima { fill: var(--alerta); }
.grafico .media { stroke: var(--suave); stroke-dasharray: 3 4; stroke-width: 1; }
.grafico text { fill: var(--suave); font-size: 10px; }
.legenda { display: flex; gap: 16px; font-size: 12px; color: var(--suave); margin-top: 8px; flex-wrap: wrap; }
.legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.legenda .l-agua { background: var(--agua); }
.legenda .l-acima { background: var(--alerta); }

/* ---------- mural ---------- */
.item { border-left: 2px solid var(--marca); padding: 4px 0 4px 14px; margin: 0 0 16px; }
.item.urgente, .item.meu { border-left-color: var(--erro); }
.item.manutencao { border-left-color: var(--alerta); }
.item strong { font-weight: 600; }
.item .quando { font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }

/* ---------- formulários e botões ---------- */
label { display: block; font-size: 11px; color: var(--suave); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .12em; }
input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo);
  transition: border-color .15s; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--suave) 45%, var(--linha)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); }
textarea { min-height: 110px; resize: vertical; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--marca); border-radius: 8px;
  padding: 11px 18px; background: var(--marca); color: var(--marca-texto); font-weight: 600; font-size: 14.5px; letter-spacing: .02em;
  cursor: pointer; min-height: 44px; transition: filter .15s, background-color .15s; }
.botao:hover { filter: brightness(1.08); }
.botao.sec { background: transparent; color: var(--texto); border-color: var(--linha); }
.botao.sec:hover { border-color: var(--texto); filter: none; }
.botao.perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.botao.inteiro { width: 100%; margin-top: 18px; }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--linha); background: transparent; border-radius: 999px; padding: 7px 16px; cursor: pointer; font-size: 14px; }
.chip.ativa { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.msg { padding: 11px 14px; border-radius: 8px; font-size: 14px; margin-top: 12px; border-left: 2px solid currentColor; }
.msg.erro { background: color-mix(in srgb, var(--erro) 8%, transparent); color: var(--erro); }
.msg.ok { background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok); }
.alternar { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto); margin: 10px 0 0;
  text-transform: none; letter-spacing: 0; }
.alternar input { width: 18px; height: 18px; accent-color: var(--marca); flex: none; }

/* ---------- calendário de reservas ---------- */
.cal-topo { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 10px; }
.cal-topo strong { font: 400 18px var(--serifa); text-transform: capitalize; }
.cal-topo button { background: transparent; border: 1px solid var(--linha); border-radius: 8px; width: 40px; height: 36px; cursor: pointer; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .sem { text-align: center; font-size: 10.5px; color: var(--suave); padding: 4px 0; text-transform: uppercase; letter-spacing: .1em; }
.cal button { aspect-ratio: 1; border: 1px solid var(--linha); border-radius: 8px; background: transparent; cursor: pointer; font-variant-numeric: tabular-nums; }
.cal button.livre:hover { border-color: var(--marca); color: var(--marca); }
.cal button.ocupado { background: var(--chip); color: var(--suave); text-decoration: line-through; cursor: default; }
.cal button.sua { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.cal button.bloqueado { background: var(--chip); color: var(--erro); cursor: default; }
.cal button.fora { opacity: .3; cursor: default; }
.cal .vazio { visibility: hidden; }

/* ---------- previsão / meta / níveis ---------- */
.progresso { height: 6px; background: var(--chip); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.progresso > div { height: 100%; background: var(--agua); border-radius: 999px; transition: width .4s ease; }
.progresso.alerta > div { background: var(--alerta); }
.progresso.estourou > div { background: var(--erro); }
.lado { display: flex; gap: 8px; align-items: flex-end; }
.lado > :first-child { flex: 1; }

/* ---------- chamados ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; padding: 0; background: none; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.aberto { color: var(--alerta); }
.status.em_andamento { color: var(--marca); }
.status.resolvido { color: var(--ok); }
.status.cancelado { color: var(--suave); }
.chamado-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--linha);
  padding: 12px 0; cursor: pointer; }
.chamado-item:last-child { border-bottom: 0; }
.chamado-item:hover strong { color: var(--marca); }
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--chip); }
.conversa .fala { border-bottom: 1px solid var(--linha); padding: 10px 0; }
.conversa .fala.sindico { border-left: 2px solid var(--marca); padding-left: 12px; }
.conversa .quem { font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- painel gerencial ---------- */
main.largo { max-width: 1240px; }
/* mural: os cartões descem em colunas e encaixam pela altura, sem buracos */
.painel { columns: 3 320px; column-gap: 18px; }
.painel > * { break-inside: avoid; margin: 0 0 18px; }
.painel > section, .painel > details, .painel > nav, .painel > button, .painel > div { display: block; }
.painel .largura-total { column-span: all; }
.painel .largura-total:empty { display: none; }
.cartao .cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.cartao .cab h2 { margin: 0; }
.cartao .cab .resumo { font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; text-align: right; }
.cartao h3 { font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--suave); margin: 18px 0 4px; }
/* abas internas do painel */
.sub-abas { display: flex !important; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linha); }
.sub-abas::-webkit-scrollbar { display: none; }
.sub-abas button { background: none; border: 0; padding: 10px 14px 11px; font-size: 13.5px; color: var(--suave); cursor: pointer;
  white-space: nowrap; position: relative; }
.sub-abas button:hover { color: var(--texto); }
.sub-abas button.ativa { color: var(--texto); }
.sub-abas button.ativa::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--marca); }
.aviso-cmd .msg { margin: 0; }
/* caixas desenhadas como tanques */
.tanques { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px; margin: 4px 0 8px; }
.tanque-cel { text-align: center; }
.tanque { width: 72px; margin: 0 auto; }
.tanque svg { display: block; width: 100%; height: auto; overflow: visible; }
.tanque .corpo { fill: none; stroke: var(--texto); stroke-width: 1.2; opacity: .55; }
.tanque .tampa { fill: none; stroke: var(--texto); stroke-width: 1.2; opacity: .55; }
.tanque .agua { fill: var(--agua); opacity: .78; transition: y .6s ease, height .6s ease; }
.tanque.medio .agua { fill: var(--alerta); }
.tanque.baixo .agua { fill: var(--erro); }
.tanque.sem .corpo { stroke-dasharray: 3 3; }
.tanque-v { font: 400 24px/1.1 var(--serifa); margin-top: 6px; font-variant-numeric: tabular-nums lining-nums; }
/* mini-gráficos */
.traco { display: inline-block; width: 96px; height: 26px; vertical-align: middle; }
.traco svg { width: 100%; height: 100%; display: block; overflow: visible; }
.traco polyline { fill: none; stroke: var(--marca); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.traco circle { fill: var(--marca); }
.traco.vazio { font-size: 11px; color: var(--suave); width: auto; height: auto; }
.grafico-linha .traco { width: 140px; height: 32px; }
.mini-graficos { display: flex; gap: 14px; margin: 6px 0 2px; flex-wrap: wrap; }
.mini-g { display: flex; flex-direction: column; gap: 1px; }
.mini-g .rot { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--suave); }
.mini-g .traco { width: 64px; height: 20px; }
/* ações: a principal em destaque; as de risco discretas (texto em vermelho, sem fundo) */
.botao.sec.risco { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 35%, var(--linha)); }
.botao.sec.risco:hover { border-color: var(--erro); background: color-mix(in srgb, var(--erro) 7%, transparent); }
.botao.inteiro { width: 100%; margin-top: 10px; }
/* ficha do apto */
.voltar { background: none; border: 0; padding: 4px 0; color: var(--marca); cursor: pointer; font-size: 14px; text-align: left; }
.voltar:hover { text-decoration: underline; }
.ficha-cab { display: flex !important; align-items: baseline; gap: 16px; padding: 0 0 4px; }
.ficha-cab h2 { font: 400 30px/1.15 var(--serifa); margin: 0; letter-spacing: -.01em; }
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.ok { color: var(--ok); }
.st.alerta { color: var(--alerta); }
.st.erro { color: var(--erro); }
.st.neutro { color: var(--suave); }
.st.neutro::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.atencao { border: 0; border-left: 2px solid var(--alerta); padding: 4px 0 4px 18px; background: none; }
.atencao strong { font: 400 24px/1.25 var(--serifa); display: block; margin-bottom: 4px; }
.atencao.tudo-ok { border-left-color: var(--ok); }
.atencao ul { margin: 6px 0 0; padding-left: 18px; color: var(--texto); }
.atencao li { margin: 3px 0; }
.atencao li::marker { color: var(--alerta); }
.atencao .mini { margin-top: 8px; }
.aptos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px; background: var(--linha);
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.apto-cel { background: var(--cartao); padding: 14px 14px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 3px;
  border: 0; text-align: left; cursor: pointer; color: inherit; width: 100%; transition: background .15s; }
.apto-cel:hover { background: color-mix(in srgb, var(--marca) 5%, var(--cartao)); }
.apto-cel .abrir { font-size: 12px; color: var(--marca); margin-top: 6px; opacity: 0; transition: opacity .15s; }
.apto-cel:hover .abrir, .apto-cel:focus-visible .abrir { opacity: 1; }
@media (hover: none) { .apto-cel .abrir { opacity: 1; } }
.destaque-alerta { color: var(--alerta); }
.apto-cel .linha { padding: 0 0 6px; border: 0; }
.apto-cel strong { font: 400 20px/1.1 var(--serifa); }
.apto-cel.vago { color: var(--suave); }
.mini { font-size: 12px; color: var(--suave); line-height: 1.5; }
.medidor-linha { display: grid; grid-template-columns: 96px 1fr 52px; align-items: center; gap: 12px; margin: 10px 0 2px; }
.medidor-linha span { font-size: 14px; }
.medidor-linha strong { text-align: right; font: 400 17px var(--serifa); font-variant-numeric: tabular-nums lining-nums; }
.medidor-linha .progresso { margin: 0; }
.painel .acoes-linha { align-items: center; gap: 10px; }
.painel .acoes-linha .botao { padding: 6px 14px; min-height: 34px; font-size: 13px; }
.campo-curto { width: 130px; padding: 8px 10px; }
.linha.calibracao { flex-wrap: wrap; gap: 10px; }
details.cartao > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary strong { font: 400 19px var(--serifa); }
details.cartao > summary::after { content: "+"; font: 300 22px var(--sans); color: var(--suave); }
details.cartao[open] > summary::after { content: "−"; }
details.cartao[open] > summary { margin-bottom: 12px; }

/* ---------- portão ---------- */
.portao-estado { font: 400 30px/1.2 var(--serifa); text-align: center; margin: 10px 0 18px; }
.portao-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.portao-botoes .botao { min-height: 76px; font-size: 16px; }

/* ---------- diálogo de confirmação ---------- */
dialog { border: 1px solid var(--linha); border-radius: 12px; padding: 26px 26px 22px; background: var(--cartao); color: var(--texto);
  width: min(92vw, 400px); }
dialog h3 { font: 400 22px/1.25 var(--serifa); margin: 0 0 8px; }
dialog::backdrop { background: rgba(20, 18, 14, .45); backdrop-filter: blur(3px); }
dialog .acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ---------- tela de entrada ---------- */
.entrada { max-width: 400px; margin: 10vh auto 0; padding: 18px; }
.entrada .logo { display: grid; place-items: center; color: var(--marca); margin-bottom: 6px; }
.entrada .logo svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.entrada h1 { text-align: center; font: 400 30px/1.2 var(--serifa); margin: 6px 0 4px; letter-spacing: -.01em; }
.entrada .sub { text-align: center; color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .2em; margin: 0 0 26px; }
.troca { text-align: center; margin-top: 16px; font-size: 14px; }
.troca button { background: none; border: 0; color: var(--suave); cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--linha); text-underline-offset: 4px; }
.troca button:hover { color: var(--marca); text-decoration-color: currentColor; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela td, .tabela th { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--linha); }
.tabela th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); }
.codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 24px; letter-spacing: .16em; text-align: center;
  border: 1px dashed var(--linha); border-radius: 8px; padding: 14px; margin: 12px 0; user-select: all; }

/* ---------- Minha casa, Pix e vistoria ---------- */
.grade-casa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linha);
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.botao-numero { border: 0; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.botao-numero:hover .v { color: var(--marca); }
.botao-numero.alerta { box-shadow: inset 2px 0 0 var(--erro); }
.botao-numero .v { font-size: 22px; }
.pagar { display: grid; gap: 8px; margin-top: 12px; }
.qr { display: flex; justify-content: center; }
.qr img { width: 220px; max-width: 100%; height: auto; background: #fff; border-radius: 8px; padding: 8px; border: 1px solid var(--linha); }
textarea.copia { font-family: ui-monospace, Consolas, monospace; font-size: 12px; min-height: 84px; word-break: break-all; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.item-vist { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.item-vist:last-child { border-bottom: 0; }
.estado-vist { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; color: var(--suave); }
.estado-vist.novo, .estado-vist.bom { color: var(--ok); }
.estado-vist.regular { color: var(--alerta); }
.estado-vist.ruim { color: var(--erro); }

/* ---------- telas largas ---------- */
@media (min-width: 900px) {
  main { padding: 34px 28px; gap: 22px; }
  .topo { padding-left: 28px; padding-right: 28px; }
  .topo h1 { font-size: 26px; }
}
@media (max-width: 380px) {
  .cartao { padding: 16px; }
  .medidor-linha { grid-template-columns: 80px 1fr 46px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media print {
  .topo, .abas, .nao-imprime, dialog { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0 !important; }
  .cartao { border-color: #999; break-inside: avoid; }
}
.linha.registro { flex-wrap: wrap; }
.linha.registro > span:first-child { flex: 1 1 140px; min-width: 0; }
.linha.registro .acoes-linha { flex-wrap: nowrap; }
.mini-alternar { margin: 0; font-size: 12px; color: var(--suave); gap: 6px; }
.mini-alternar input { width: 16px; height: 16px; }