/* areas/estilo.css — o que as Áreas precisam além do visual do Sistema Amazon Ervas
   (estilo-sistema.css é cópia fiel e não deve ser editado). */

.area-cabecalho .apoio { margin: 4px 0 0; font-size: 13.5px; }

/* Topo só no celular (mesmo do Prospector): o menu lateral some em telas até 900px */
.topo-mobile { display: none; }
@media (max-width: 900px) {
  .topo-mobile { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: -18px -16px 16px; padding: 12px 16px; background: var(--menu-bg); }
  .topo-mobile img { height: 22px; }
  .topo-mobile nav { display: flex; gap: 14px; align-items: center; }
  .topo-mobile a, .topo-mobile button { color: var(--menu-texto); font: inherit; font-size: 13px; background: none;
    border: 0; padding: 0; cursor: pointer; text-decoration: none; }
}

/* Barras horizontais por prioridade */
.barras-h { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.barras-h a { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; align-items: center; gap: 14px; color: var(--texto); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.barras-h a:hover .trilho i { filter: brightness(1.08); }
.barras-h .trilho { height: 30px; border-radius: 8px; background: var(--area-bg); overflow: hidden; }
.barras-h .trilho i { display: block; height: 100%; min-width: 4px; border-radius: 8px; }
.barras-h .qtd { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; text-align: right; }
.barras-h .erro i { background: #c9452e; }
.barras-h .alerta i { background: #e0a526; }
.barras-h .neutra i { background: #a9b5ab; }
.barras-h .principal i { background: var(--verde); }
.barras-total { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--apoio); }
.painel-grade .span-3 { grid-column: 1 / -1; }
.cartao { min-width: 0; }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cartao-topo a { font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cartao-topo a:hover { text-decoration: underline; }

/* Abas da área (Painel / Tarefas / Documento) */
.segmentos { display: inline-flex; padding: 4px; gap: 2px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; }
.segmentos a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--apoio); text-decoration: none; }
.segmentos a .icone { width: 16px; height: 16px; flex-basis: 16px; }
.segmentos a:hover { color: var(--texto); }
.segmentos a.ativo { background: var(--menu-bg); color: #fff; }
.segmentos a.ativo .icone { color: var(--lima); }

/* Menu: número de tarefas abertas ao lado da área */
.menu-item .contador { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--menu-texto-fraco); background: rgba(255,255,255,.07); border-radius: 999px; padding: 1px 8px; }
.menu-item.ativo .contador { color: var(--menu-bg); background: var(--lima); }

/* Visão geral: um cartão por área */
.cartao-area { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: border-color .12s ease, transform .12s ease; }
a.cartao-area:hover { border-color: var(--verde); transform: translateY(-2px); }
.cartao-area-topo { display: flex; align-items: center; gap: 12px; }
.cartao-area-topo .icone-redondo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--verde-claro); color: var(--verde); flex: none; }
.cartao-area-topo h3 { margin: 0; }
.cartao-area p { margin: 0; font-size: 13px; color: var(--apoio); }
.cartao-area--breve { border-style: dashed; box-shadow: none; background: transparent; }
.cartao-area--breve .icone-redondo { background: var(--etiqueta-neutra-bg); color: var(--apoio); }
.cartao-area-numeros { display: flex; gap: 8px; flex-wrap: wrap; }

.progresso { height: 8px; border-radius: 999px; background: var(--grafico-apagado); overflow: hidden; }
.progresso i { display: block; height: 100%; border-radius: 999px; background: var(--verde); }
.cartao-destaque-claro .progresso { background: rgba(1, 112, 36, .15); margin-top: 14px; }

/* Frentes ativas */
.frentes { list-style: none; margin: 14px 0 0; padding: 0; }
.frentes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.frentes li:last-child { border-bottom: none; padding-bottom: 0; }
.frentes strong { font-size: 14px; }
.frentes span.apoio { grid-column: 1 / -1; font-size: 12.5px; color: var(--apoio); line-height: 1.45; }

.cartao-escuro .etiqueta { flex: none; }
.cartao-escuro li > span:first-child { min-width: 0; }
.cartao-escuro .rodape-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; }

/* Tarefas */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.filtros input { flex: 1 1 240px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--texto); border: 1px solid var(--linha); border-radius: 10px; background: #fff; }
.filtros input:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border: 1px solid var(--linha); background: #fff; color: var(--apoio); border-radius: 999px; cursor: pointer; }
.chip:hover { color: var(--texto); }
.chip.ativo { background: var(--menu-bg); color: #fff; border-color: var(--menu-bg); }
.chip small { font-weight: 500; opacity: .7; margin-left: 2px; }

.tarefas { list-style: none; margin: 8px 0 0; padding: 0; }
.tarefa { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 4px; border-bottom: 1px solid var(--linha); font-size: 14px; line-height: 1.5; }
.tarefa:last-child { border-bottom: none; }
.tarefa .caixa { width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; border: 2px solid var(--linha); display: grid; place-items: center; color: #fff; }
.tarefa .caixa svg { width: 12px; height: 12px; }
.tarefa--feita .caixa { background: var(--verde); border-color: var(--verde); }
.tarefa--feita .texto { color: var(--apoio); }
.tarefa--sub { padding-left: 34px; }
.tarefa code { background: var(--verde-claro); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; word-break: break-word; }
.tarefas-vazio { padding: 28px 4px; color: var(--apoio); font-size: 14px; }

/* Documento (README) */
.documento { max-width: 820px; font-size: 14.5px; }
/* "##" do README vira h3 (o h1 da tela é o nome da área) */
.documento h2, .documento h3 { font-size: 21px; margin: 32px 0 12px; padding-top: 24px; border-top: 1px solid var(--linha); }
.documento > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.documento h4 { font-size: 16.5px; margin: 22px 0 8px; }
.documento h5 { font-size: 14.5px; margin: 18px 0 6px; }
.tabela-painel td:first-child code { white-space: nowrap; }
.documento p, .documento ul, .documento ol { margin: 0 0 12px; }
.documento ul, .documento ol { padding-left: 22px; }
.documento li { margin-bottom: 4px; }
.documento blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--lima); background: var(--area-bg); border-radius: 0 10px 10px 0; color: var(--apoio); }
.documento code { word-break: break-word; }
.documento .rolagem-lateral { margin: 0 0 16px; border: 1px solid var(--linha); border-radius: 12px; }
.documento .tabela-painel td { vertical-align: top; }

.carregando { color: var(--apoio); padding: 40px 0; }
@media (max-width: 900px) { .segmentos { width: 100%; } .segmentos a { flex: 1; justify-content: center; } }