/* De quando é o que está na tela (leitura.js). Pequeno de propósito: só as classes `leitura-*`, com os tokens do
   :root de estilo.css. A linha do topo da lateral e a faixa sobre o mapa. */

/* a linha fixa do topo da lateral: abaixo do nome, antes do desempenho */
.leitura-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-2);
  font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.leitura-linha .leitura-texto { flex: 1 1 200px; min-width: 0; }
.leitura-recente .leitura-texto { color: var(--tinta); }
/* data que não é a última, ou área sem imagem recente: o mesmo âmbar do "atenção", com fundo, para não passar batido */
.leitura-antiga, .leitura-sem_imagem { position: relative; padding: var(--e-2) var(--e-3) var(--e-2) 40px; background: var(--aviso-claro); border-radius: var(--r-s); color: var(--aviso); }   /* âmbar sobre âmbar-claro: 5,3:1 (AA) */
.leitura-antiga::before, .leitura-sem_imagem::before { content: ''; position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/%3E%3C/svg%3E") center / contain no-repeat; }   /* o relógio do histórico: o mesmo desenho de status com ícone do "Desempenho" */
.leitura-antiga .leitura-texto, .leitura-sem_imagem .leitura-texto { color: var(--aviso); }
.leitura-linha .leitura-acao { min-height: var(--alvo-toque); }

/* a faixa sobre o mapa: mora no painel do mapa, com o vidro escuro dos outros avisos dele (`.aviso`) */
.leitura-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.leitura-faixa[hidden] { display: none; }
.leitura-faixa > span { flex: 1 1 220px; min-width: 0; }
.leitura-faixa .leitura-acao { min-height: var(--alvo-toque); }

@media (max-width: 700px) {
  .leitura-faixa { padding: var(--e-2) var(--e-3); }   /* 14/20 também no celular: 12 px é só para legenda (política) */
}

/* celular com a folha aberta: a lateral já diz o mesmo na linha do topo (com o botão de voltar), e o pedaço de mapa à
   vista é pequeno — a faixa sobre o mapa sai e volta com a folha recolhida */
@media (max-width: 900px) {
  .corpo:has(.sidebar-direita:not([hidden]):not([data-folha="recolhida"])) #faixa-leitura { display: none; }
}