/* Shared visual language for the app and desktop. */
:root {
  --text-dim: #b1b8b4;
  --text-soft: #c3cac6;
  --cor-texto-mudo: #b1b8b4;
  --cor-texto-fraco: #a0a8a3;
  --line: #343a36;
  --cor-borda: #343a36;
  --radius-card: 14px;
  --raio-card: 14px;
}
button, input, select, textarea { font: inherit; }
button, a, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #73e9b5; outline-offset: 3px;
}
.botao, .topbar-config, .hist-periodo, .hist-metrica { min-height: 44px; }
.card h3 { overflow-wrap: anywhere; }
.label, .card-status, .resumo-tags-usadas, .dispositivo-meta,
.tile-ambiente-plantas, .tile-ambiente-semdados, .tile-ambiente-irrig,
.ambiente-atualizacao, .hist-stats span { font-size: 13px; }
.ui-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #c3cac6; }
.ui-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #b1b8b4; flex-shrink: 0; }
.ui-status.conectado::before { background: #34d399; }
.ui-status.aviso { color: #f1ce83; }
.ui-status.aviso::before { background: #f1ce83; }
.ui-leitura, .ui-ajuda { display: block; color: #b1b8b4; font-size: 13px; margin: 7px 0; }
.ui-feedback { min-height: 1.5em; margin: 8px 0 0; font-size: 13px; color: #b1b8b4; }
.ui-feedback.erro { color: #ffaaa6; }
.ui-summary { color: #c3cac6; font-size: 14px; }
.ui-summary summary { cursor: pointer; padding: 10px 0; min-height: 44px; }
.ui-summary[open] summary { margin-bottom: 6px; }
.ui-abrir { display: flex; justify-content: flex-end; color: #75dfb0; font-size: 13px; margin-top: 12px; gap: 8px; }
.card-ambiente { text-align: left; transition: background .15s, border-color .15s; }
.card-ambiente:hover, .card-novo-ambiente:hover { border-color: #5b987b; background: #202823; }
.card-novo-ambiente { color: #c3cac6; font-size: 15px; min-height: 64px; }
.card-botao-simples .bt-botao-simples,
.card-botao-simples .bt-botao-simples.ativo {
  background: #28352f; color: #e6f4ec; border: 1px solid #5b7668;
  box-shadow: none; min-height: 44px; font-size: 14px;
}
.card-botao-simples .bt-botao-simples:hover { background: #34493e; }
.card-botao-simples button:disabled { opacity: .65; cursor: wait; }
.ui-chart-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 10px 0; font-size: 13px; color: #c3cac6; }
.ui-chart-tools select { background: #272727; color: #ebebeb; border: 1px solid #5b7668; border-radius: 8px; padding: 8px; min-height: 44px; }
.ui-chart-note { padding: 10px 12px; border-left: 3px solid #e5ba62; color: #f1ce83; background: #2c271e; font-size: 13px; margin: 10px 0; }
.ui-periodo { color: #b1b8b4; font-size: 12px; margin-top: 8px; }
.ui-nav-badge { margin-left: auto; font-size: 10px; border: 1px solid #4b534e; border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; } }

.card-ambiente .ui-leitura { margin: 0; line-height: 1.6; }
.card-ambiente .ui-abrir { margin-top: auto; padding-top: 8px; }

/* ─── Card Ovos (shared/ovos.js) ─── */
.card-ovos { cursor: pointer; }
.ovos-totais { font-size: 13px; color: var(--text-dim); margin: 4px 0 8px; }
.ovos-totais strong { font-size: 22px; color: inherit; margin-right: 4px; }
.ovos-lista, .ovos-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ovos-item-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.ovos-item-topo span { color: var(--text-dim); font-size: 13px; }
.ovos-item-base { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.ovos-item-fase { font-size: 12px; color: var(--text-soft, #c3cac6); margin-top: 2px; }
.ovos-barra { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 6px; }
.ovos-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--accent, var(--cor-sucesso, #22b573)); }
.ovos-barra--final > span { background: #c9a227; }
.ovos-barra--eclosao > span { background: #4aa3ff; }
.ovos-barra--encerrado > span { background: var(--danger, var(--cor-perigo, #d94f4f)); }
.ovos-vazio { font-size: 13px; color: var(--text-dim); margin: 8px 0; }
.ovos-vazio span, .ovos-mais { font-size: 12px; color: var(--text-dim); }
.ovos-aviso { color: #f1ce83; font-weight: 600; }
.ovos-ok { color: var(--accent, var(--cor-sucesso, #22b573)); }
.ovos-gerenciador { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; }
.ovos-nota, .ovos-ref { font-size: 12px; color: var(--text-dim); margin: 2px 0; }
.ovos-secao { margin: 10px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.ovos-lote { border: 1px solid var(--line, #343a36); border-radius: 10px; padding: 12px; }
.ovos-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ovos-acoes .botao, .ovos-finalizar .botao { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.ovos-finalizar { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.ovos-form, .ovos-custom { display: flex; flex-direction: column; gap: 8px; }
.ovos-form label, .ovos-finalizar label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-dim); }
.ovos-form input, .ovos-form select, .ovos-finalizar input { width: 100%; }
.ovos-erro { min-height: 1em; margin: 0; font-size: 12px; color: #ffaaa6; }
.ovos-hist li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }

/* ─── Card Qualidade do Ar (shared/qualidade-ar.js) ───
 * Estado bom→crítico = paleta de STATUS fixa (nunca temada), sempre com ícone + rótulo.
 * Texto em tinta neutra; a cor vai só nas marcas (segmento e ícone). */
.card-qualidadear { cursor: pointer; }
.card-qualidadear, .ar-painel, .card-sensor--tvoc, .card-sensor--eco2 {
  --ar-good: #0ca30c; --ar-warning: #fab219; --ar-serious: #ec835a; --ar-critical: #d03b3b;
}
.ar-status--good { --ar-cor: var(--ar-good); }
.ar-status--warning { --ar-cor: var(--ar-warning); }
.ar-status--serious { --ar-cor: var(--ar-serious); }
.ar-status--critical { --ar-cor: var(--ar-critical); }
.ar-icone { flex-shrink: 0; color: var(--ar-cor); }
.ar-estado { font-size: 13px; color: var(--text-dim); margin: 8px 0; }
.ar-estado span { font-size: 12px; }
.ar-destaque { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.ar-destaque .ar-icone { width: 28px; height: 28px; }
.ar-destaque-texto { display: flex; flex-direction: column; }
.ar-destaque-texto strong { font-size: 26px; line-height: 1.1; font-weight: 600; }
.ar-destaque-texto span { font-size: 12px; color: var(--text-dim); }
.ar-escala { display: flex; gap: 2px; margin: 10px 0 12px; }
.ar-seg { flex: 1; height: 8px; border-radius: 4px; background: var(--ar-cor); opacity: .28; }
.ar-seg--ativo { opacity: 1; }
.ar-metricas { display: flex; flex-direction: column; gap: 8px; }
.ar-metrica { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.ar-metrica-nome { color: var(--text-dim); }
.ar-metrica-valor strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.ar-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border: 1px solid var(--line, #343a36); border-radius: 999px; font-size: 12px; color: var(--text-soft, #c3cac6); white-space: nowrap; }
.ar-chip .ar-icone { width: 14px; height: 14px; }
.ar-painel { display: flex; flex-direction: column; gap: 10px; }
.ar-secao { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.ar-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.ar-tabela th, .ar-tabela td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line, #343a36); font-weight: 400; }
.ar-tabela thead th { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.ar-tabela td { font-variant-numeric: tabular-nums; }
.ar-linha--atual { background: rgba(255, 255, 255, .06); }