/* ==========================================================================
   COMPONENTES
   Cada bloco corresponde a uma macro em app/templates/componentes.html.
   Prefira usar a macro a escrever o HTML na mão: assim a acessibilidade vem junto.
   ========================================================================== */

/* --- Botão ----------------------------------------------------------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    min-height: var(--alvo-toque);
    padding: 0 var(--espaco-5);
    border: 1px solid transparent;
    border-radius: var(--raio-md);
    font-weight: var(--peso-forte);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background var(--duracao-rapida) var(--curva),
                border-color var(--duracao-rapida) var(--curva),
                transform var(--duracao-rapida) var(--curva);
}
.botao:active:not(:disabled) { transform: scale(0.98); }

.botao--primario { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.botao--primario:hover { background: var(--cor-primaria-hover); }

.botao--secundario {
    background: var(--cor-superficie);
    border-color: var(--cor-borda-controle);
    color: var(--cor-texto);
}
.botao--secundario:hover { background: var(--cor-superficie-2); }

.botao--fantasma { background: transparent; color: var(--cor-primaria-texto); }
.botao--fantasma:hover { background: var(--cor-primaria-suave); }

.botao--perigo { background: var(--cor-perigo); color: var(--cor-superficie); }
.botao--perigo:hover { filter: brightness(0.92); }

.botao--grande { min-height: 56px; padding-inline: var(--espaco-6); font-size: var(--texto-lg); }
.botao--bloco { width: 100%; }
.botao--icone { padding: 0; width: var(--alvo-toque); }

.botao:disabled, .botao[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Ocupado: mostra o girador no lugar do ícone e impede clique duplo */
.botao[aria-busy="true"] { pointer-events: none; }
.botao[aria-busy="true"] .icone { display: none; }
.botao[aria-busy="true"]::before {
    content: "";
    width: 1.1em; height: 1.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

/* --- Campos de formulário --------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: var(--espaco-2); }
.campo__rotulo { font-weight: var(--peso-forte); }
.campo__opcional { font-weight: var(--peso-normal); color: var(--cor-texto-suave); }
.campo__dica { color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.campo__erro {
    display: flex; align-items: center; gap: var(--espaco-2);
    color: var(--cor-perigo);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
}

.entrada {
    width: 100%;
    min-height: var(--alvo-toque);
    padding: var(--espaco-3) var(--espaco-4);
    border: 1px solid var(--cor-borda-controle);
    border-radius: var(--raio-md);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font-size: var(--texto-md); /* 16px: evita o zoom automático do iPhone */
    transition: border-color var(--duracao-rapida) var(--curva), box-shadow var(--duracao-rapida) var(--curva);
}
.entrada::placeholder { color: var(--cor-texto-suave); opacity: 1; }
.entrada:hover { border-color: var(--cor-texto-suave); }
.entrada:focus-visible {
    outline: none;
    border-color: var(--cor-foco);
    box-shadow: 0 0 0 3px var(--cor-foco);
}
textarea.entrada { min-height: 6rem; resize: vertical; }
select.entrada { appearance: none; padding-right: var(--espaco-7); cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}
.campo--erro .entrada { border-color: var(--cor-perigo); border-width: 2px; }

.opcao {
    display: flex; align-items: center; gap: var(--espaco-3);
    min-height: var(--alvo-toque);
    cursor: pointer;
}
.opcao input { width: 24px; height: 24px; margin: 0; accent-color: var(--cor-primaria); flex: none; }

/* Área de envio de fotos: um alvo grande, fácil de acertar com o polegar */
.envio {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--espaco-2);
    min-height: 10rem;
    padding: var(--espaco-5);
    border: 2px dashed var(--cor-borda-controle);
    border-radius: var(--raio-lg);
    background: var(--cor-superficie);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duracao-rapida) var(--curva), background var(--duracao-rapida) var(--curva);
}
.envio:hover, .envio--arrastando { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.envio:focus-within { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.envio input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.envio .icone { width: 40px; height: 40px; color: var(--cor-primaria-texto); }
.envio__titulo { font-weight: var(--peso-forte); font-size: var(--texto-lg); }

/* --- Cartão ------------------------------------------------------------------ */
.cartao {
    display: flex; flex-direction: column; gap: var(--espaco-3);
    padding: var(--espaco-5);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-superficie);
    box-shadow: var(--sombra-1);
}
.cartao__cabecalho { display: flex; align-items: center; gap: var(--espaco-3); }
.cartao__cabecalho h2, .cartao__cabecalho h3 { margin: 0; }
.cartao__icone {
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--raio-md);
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria-texto);
    flex: none;
}
.cartao__icone .icone { width: 26px; height: 26px; }
.cartao__rodape { margin-top: auto; padding-top: var(--espaco-3); border-top: 1px solid var(--cor-borda); }

/* Cartão inteiro clicável: o link cobre o cartão, mas o foco fica visível */
.cartao--interativo { position: relative; transition: box-shadow var(--duracao-media) var(--curva), transform var(--duracao-media) var(--curva); }
.cartao--interativo:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.cartao--interativo .cartao__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cartao--interativo:focus-within { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.cartao--interativo .cartao__link:focus-visible { outline: none; }

/* --- Estatística (número em destaque) --------------------------------------- */
.estatistica {
    display: flex; flex-direction: column; gap: var(--espaco-1);
    padding: var(--espaco-4) var(--espaco-5);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-superficie);
}
.estatistica__rotulo { color: var(--cor-texto-suave); font-size: var(--texto-sm); font-weight: var(--peso-medio); }
.estatistica__valor {
    font-size: var(--texto-3xl);
    font-weight: var(--peso-titulo);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.estatistica__detalhe { color: var(--cor-texto-suave); font-size: var(--texto-sm); }

/* --- Selo (status) ----------------------------------------------------------
   Sempre com ícone + texto: a cor nunca é a única informação. */
.selo {
    display: inline-flex; align-items: center; gap: var(--espaco-1);
    padding: 2px var(--espaco-2) 2px var(--espaco-1);
    border-radius: var(--raio-pilula);
    font-size: var(--texto-sm);
    font-weight: var(--peso-forte);
    white-space: nowrap;
}
.selo .icone { width: 1.1em; height: 1.1em; }
.selo--neutro  { background: var(--cor-superficie-2);  color: var(--cor-texto-suave); }
.selo--sucesso { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); }
.selo--aviso   { background: var(--cor-aviso-suave);   color: var(--cor-aviso); }
.selo--perigo  { background: var(--cor-perigo-suave);  color: var(--cor-perigo); }
.selo--info    { background: var(--cor-info-suave);    color: var(--cor-info); }
.selo--animado .icone { animation: girar 1.4s linear infinite; }

/* --- Chip de classe (cor + nome + tecla de atalho) -------------------------- */
.lista-chips { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0; padding: 0; list-style: none; }
.chip-classe {
    display: inline-flex; align-items: center; gap: var(--espaco-2);
    min-height: 32px;
    padding: 0 var(--espaco-2) 0 var(--espaco-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pilula);
    background: var(--cor-superficie);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
}
.chip-classe__cor {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--cor-classe);
    /* anel neutro: cores claras (ex.: amarelo) continuam visíveis no fundo branco */
    box-shadow: 0 0 0 1.5px var(--cor-superficie), 0 0 0 2.5px var(--cor-borda-controle);
    flex: none;
}

.tecla {
    display: inline-grid; place-items: center;
    min-width: 1.6em; height: 1.6em;
    padding: 0 0.35em;
    border: 1px solid var(--cor-borda-controle);
    border-bottom-width: 2px;
    border-radius: var(--raio-sm);
    background: var(--cor-superficie-2);
    color: var(--cor-texto);
    font-family: var(--fonte-mono);
    font-size: var(--texto-xs);
    font-weight: var(--peso-forte);
    line-height: 1;
}

/* --- Progresso -------------------------------------------------------------- */
.progresso { display: flex; flex-direction: column; gap: var(--espaco-2); }
.progresso__legenda { display: flex; justify-content: space-between; gap: var(--espaco-3); font-size: var(--texto-sm); }
.progresso__legenda strong { font-variant-numeric: tabular-nums; }
.progresso__trilho {
    height: 10px;
    border-radius: var(--raio-pilula);
    background: var(--cor-superficie-2);
    overflow: hidden;
    /* contorno para o trilho ser visível mesmo vazio */
    box-shadow: inset 0 0 0 1px var(--cor-borda);
}
.progresso__barra {
    height: 100%;
    width: var(--valor, 0%);
    border-radius: inherit;
    background: var(--cor-primaria);
    transition: width var(--duracao-media) var(--curva);
}
.progresso--sucesso .progresso__barra { background: var(--cor-sucesso); }

/* --- Alerta (mensagem fixa na página) -------------------------------------- */
.alerta {
    display: flex; gap: var(--espaco-3);
    padding: var(--espaco-4);
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--raio-md);
}
.alerta > .icone { width: 24px; height: 24px; margin-top: 1px; }
.alerta__titulo { margin: 0 0 var(--espaco-1); font-size: var(--texto-md); }
.alerta p { color: var(--cor-texto); }
.alerta--info    { background: var(--cor-info-suave);    border-color: var(--cor-info);    color: var(--cor-info); }
.alerta--sucesso { background: var(--cor-sucesso-suave); border-color: var(--cor-sucesso); color: var(--cor-sucesso); }
.alerta--aviso   { background: var(--cor-aviso-suave);   border-color: var(--cor-aviso);   color: var(--cor-aviso); }
.alerta--perigo  { background: var(--cor-perigo-suave);  border-color: var(--cor-perigo);  color: var(--cor-perigo); }

/* --- Avisos rápidos (toasts) ------------------------------------------------ */
.avisos {
    position: fixed;
    left: 50%;
    bottom: calc(var(--altura-navegacao-inferior) + env(safe-area-inset-bottom) + var(--espaco-3));
    z-index: var(--camada-avisos);
    display: flex; flex-direction: column; gap: var(--espaco-2);
    width: min(28rem, calc(100% - 2 * var(--espaco-4)));
    transform: translateX(-50%);
    pointer-events: none;
}
@media (min-width: 768px) {
    .avisos { bottom: var(--espaco-5); left: auto; right: var(--espaco-5); transform: none; }
}
.aviso {
    display: flex; align-items: center; gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-3) var(--espaco-3) var(--espaco-4);
    border-radius: var(--raio-md);
    background: var(--cor-texto);
    color: var(--cor-fundo);
    box-shadow: var(--sombra-3);
    pointer-events: auto;
    animation: aparecer var(--duracao-media) var(--curva);
}
.aviso__texto { flex: 1; }
.aviso .icone { width: 22px; height: 22px; }
.aviso--sucesso > .icone { color: var(--cor-sucesso-suave); }
.aviso--perigo  > .icone { color: var(--cor-perigo-suave); }
.aviso .botao { min-height: 40px; width: 40px; color: inherit; }
.aviso .botao:hover { background: rgb(128 128 128 / 0.25); }

/* --- Estado vazio ------------------------------------------------------------ */
.vazio {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--espaco-3);
    padding: var(--espaco-7) var(--espaco-5);
    border: 2px dashed var(--cor-borda);
    border-radius: var(--raio-lg);
    text-align: center;
}
.vazio > .icone { width: 48px; height: 48px; color: var(--cor-texto-suave); }
.vazio h2, .vazio h3 { margin: 0; }
.vazio p { color: var(--cor-texto-suave); }

/* --- Diálogo ----------------------------------------------------------------- */
.dialogo {
    width: min(32rem, calc(100% - 2 * var(--espaco-4)));
    padding: 0;
    border: none;
    border-radius: var(--raio-lg);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    box-shadow: var(--sombra-3);
}
.dialogo::backdrop { background: rgb(0 0 0 / 0.5); }
.dialogo[open] { animation: aparecer var(--duracao-media) var(--curva); }
.dialogo__corpo { padding: var(--espaco-5); }
.dialogo__acoes {
    display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--espaco-3);
    padding: var(--espaco-4) var(--espaco-5);
    border-top: 1px solid var(--cor-borda);
}

/* --- Carregando ---------------------------------------------------------------- */
.esqueleto {
    border-radius: var(--raio-sm);
    background: linear-gradient(90deg, var(--cor-superficie-2) 25%, var(--cor-borda) 50%, var(--cor-superficie-2) 75%);
    background-size: 200% 100%;
    animation: brilho 1.4s ease-in-out infinite;
}
.girador {
    width: 32px; height: 32px;
    border: 3px solid var(--cor-superficie-2);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: girar 0.8s linear infinite;
}

/* --- Cabeçalho de página ------------------------------------------------------ */
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espaco-4); }
.cabecalho-pagina__texto { flex: 1 1 20rem; }
.cabecalho-pagina__texto p { color: var(--cor-texto-suave); font-size: var(--texto-lg); }
.sobretitulo {
    display: block;
    margin-bottom: var(--espaco-2);
    color: var(--cor-primaria-texto);
    font-size: var(--texto-sm);
    font-weight: var(--peso-forte);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Animações ----------------------------------------------------------------- */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Opções em cartão (rádio grande, fácil de tocar) ------------------------- */
.opcoes-cartao { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--espaco-3); }
.opcoes-cartao--lista { grid-template-columns: 1fr; }
@media (min-width: 768px) { .opcoes-cartao--lista { grid-template-columns: repeat(3, 1fr); } }
.opcao-cartao {
    position: relative;
    display: flex; align-items: center; gap: var(--espaco-3);
    min-height: 72px;
    padding: var(--espaco-3) var(--espaco-4);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-superficie);
    cursor: pointer;
    transition: border-color var(--duracao-rapida) var(--curva), background var(--duracao-rapida) var(--curva);
}
.opcao-cartao:hover { border-color: var(--cor-borda-controle); }
.opcao-cartao:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.opcao-cartao:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.opcao-cartao input { width: 22px; height: 22px; margin: 0; accent-color: var(--cor-primaria); flex: none; }
.opcao-cartao__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-md); background: var(--cor-superficie-2); color: var(--cor-primaria-texto); flex: none; }
.opcao-cartao__icone .icone { width: 26px; height: 26px; }
.opcao-cartao__texto { display: flex; flex-direction: column; gap: 2px; }
.opcao-cartao__texto span { color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.campo--erro .opcao-cartao { border-color: var(--cor-perigo); }

/* --- Escolha de arquivos (câmera ou galeria) --------------------------------- */
.escolha-arquivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--espaco-3); }
.escolha-arquivos .envio { min-height: 8rem; }

/* --- Grade de fotos --------------------------------------------------------- */
.grade-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--espaco-4); margin: 0; padding: 0; list-style: none; }
.grade-fotos:empty { display: none; }
.foto {
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-superficie);
    overflow: hidden;
}
.foto__imagem { display: block; aspect-ratio: 4 / 3; background: var(--cor-superficie-2); }
.foto__imagem img { width: 100%; height: 100%; object-fit: cover; }
.foto__imagem:focus-visible { outline-offset: -3px; }
.foto__info { display: flex; flex-direction: column; gap: var(--espaco-2); padding: var(--espaco-3) var(--espaco-4) var(--espaco-4); }
.foto__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--peso-medio); padding-right: var(--espaco-6); }
.foto > .botao--icone { position: absolute; right: var(--espaco-1); bottom: var(--espaco-2); color: var(--cor-texto-suave); }
.foto > .botao--icone:hover { color: var(--cor-perigo); background: var(--cor-perigo-suave); }
.foto__erro summary { cursor: pointer; color: var(--cor-perigo); font-size: var(--texto-sm); font-weight: var(--peso-medio); min-height: 32px; }
.foto__erro code { display: block; margin-top: var(--espaco-2); white-space: pre-wrap; word-break: break-word; font-size: var(--texto-xs); }
.linha--compacta { gap: var(--espaco-2); }
.foto__salvar { align-self: flex-start; font-size: var(--texto-sm); font-weight: var(--peso-medio); padding-block: var(--espaco-1); }

/* --- Faixa "fotos guardadas no celular" (preenchida por js/aplicativo.js) ---- */
.faixa-fila { margin-bottom: var(--espaco-5); }
.faixa-fila__link {
    display: flex; align-items: center; gap: var(--espaco-3);
    min-height: var(--alvo-toque);
    padding: var(--espaco-2) var(--espaco-4);
    border: 1px solid var(--cor-info);
    border-radius: var(--raio-md);
    background: var(--cor-info-suave);
    color: var(--cor-texto);
    font-weight: var(--peso-medio);
    text-decoration: none;
}
.faixa-fila__link:hover { border-color: var(--cor-primaria); }
.faixa-fila__link .icone { width: 22px; height: 22px; flex: none; color: var(--cor-info); }

/* --- Filtros (links em pílula) --------------------------------------------- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0; padding: 0; list-style: none; }
.filtro {
    display: inline-flex; align-items: center; gap: var(--espaco-2);
    min-height: 44px; padding: 0 var(--espaco-4);
    border: 1px solid var(--cor-borda-controle); border-radius: var(--raio-pilula);
    background: var(--cor-superficie); color: var(--cor-texto);
    text-decoration: none; font-weight: var(--peso-medio);
}
.filtro:hover { background: var(--cor-superficie-2); }
.filtro[aria-current="page"] { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-primaria); }

/* --- Diversos ---------------------------------------------------------------- */
.lista-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--espaco-3); margin: 0; padding: 0; list-style: none; }
.lista-pessoas .botao { justify-content: flex-start; }
.mensagens { display: flex; flex-direction: column; gap: var(--espaco-3); margin-bottom: var(--espaco-5); }
.cartao__titulo { margin: 0; font-size: var(--texto-xl); }
.cartao__titulo a { color: inherit; text-decoration: none; }
.cartao__titulo a:hover { text-decoration: underline; }

/* --- Botão de classe (escolher a classe de uma região: anotar, lote) ---------- */
.botoes-classe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-2); }
@media (min-width: 1024px) { .botoes-classe { grid-template-columns: 1fr; } }

.botao-classe {
    display: flex; align-items: center; gap: var(--espaco-3);
    min-height: var(--alvo-toque);
    padding: var(--espaco-2) var(--espaco-3);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-md);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font-weight: var(--peso-forte);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duracao-rapida) var(--curva), background var(--duracao-rapida) var(--curva),
                transform var(--duracao-rapida) var(--curva);
}
.botao-classe:hover { border-color: var(--cor-borda-controle); background: var(--cor-superficie-2); }
.botao-classe:active { transform: scale(0.98); }
.botao-classe[aria-pressed="true"] { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.botao-classe__nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.botao-classe .chip-classe__cor { width: 16px; height: 16px; }


/* --- Tabela ------------------------------------------------------------------ */
/* Use dentro de .tabela-rolagem (tabindex="0" role="region") para rolar no celular. */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); }
.tabela-rolagem:focus-visible { outline-offset: 2px; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: var(--espaco-3) var(--espaco-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--cor-borda); }
.tabela tr:last-child td, .tabela tr:last-child th { border-bottom: none; }
.tabela tbody th[scope="row"] { color: var(--cor-texto); font-size: var(--texto-md); font-weight: var(--peso-medio); white-space: normal; }
.tabela th { color: var(--cor-texto-suave); font-size: var(--texto-sm); font-weight: var(--peso-forte); white-space: nowrap; }
.tabela form { margin: 0; }
.tabela__numero { text-align: right !important; font-variant-numeric: tabular-nums; }
.acoes-pessoa { flex-wrap: nowrap; }
.acoes-pessoa .botao { white-space: nowrap; }

/* --- Dados de acesso (usuário e senha provisória) ------------------------------ */
.dados-de-acesso { display: grid; gap: var(--espaco-4); margin: 0; }
.dados-de-acesso div { display: flex; flex-direction: column; gap: var(--espaco-1); }
.dados-de-acesso dt { color: var(--cor-texto-suave); font-weight: var(--peso-forte); }
.dados-de-acesso dd { margin: 0; }
.dados-de-acesso code { font-size: var(--texto-2xl); padding: var(--espaco-2) var(--espaco-3); user-select: all; overflow-wrap: anywhere; }

/* --- Tela de entrar ------------------------------------------------------------ */
.entrar__marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-4); }

/* --- Gráficos (barras em HTML; números sempre escritos ao lado) -------------- */
/* Distribuição das classes: tabela com uma barra por classe (macro grafico_classes) */
.grafico-classes th[scope="row"] .chip-classe__cor { display: inline-block; margin-right: var(--espaco-2); vertical-align: -1px; }
.grafico-classes__numero { white-space: nowrap; font-variant-numeric: tabular-nums; }
.grafico-classes__trilho { width: 40%; }
.grafico-classes__trilho span {
    display: block; width: var(--valor); height: 12px;
    border-radius: var(--raio-pilula); background: var(--cor-classe);
}
@media (max-width: 480px) {
    .grafico-classes th, .grafico-classes td { padding-inline: var(--espaco-2); }
    .grafico-classes__trilho { width: 30%; }
}

/* Barra empilhada com as classes mais anotadas (macro barra_classes) */
.barra-classes { display: flex; flex-direction: column; gap: var(--espaco-2); }
.barra-classes__trilho {
    display: flex; height: 12px; overflow: hidden;
    border-radius: var(--raio-pilula); background: var(--cor-superficie-2);
}
.barra-classes__trilho span { width: var(--valor); background: var(--cor-classe); }
.barra-classes__trilho span + span { border-left: 2px solid var(--cor-superficie); } /* separa cores parecidas */
.barra-classes__legenda {
    display: flex; flex-wrap: wrap; gap: var(--espaco-1) var(--espaco-4);
    margin: 0; padding: 0; list-style: none; font-size: var(--texto-sm);
}
.barra-classes__legenda li { display: inline-flex; align-items: center; gap: var(--espaco-2); }

/* Colunas por dia (macro grafico_dias) */
.grafico-dias { margin: 0; }
.grafico-dias__legenda { margin-bottom: var(--espaco-2); color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.grafico-dias__colunas {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px;
    height: 10rem; margin: 0; padding: var(--espaco-5) 0 0; list-style: none; /* espaço para o número da coluna mais alta */
}
.grafico-dias__dia { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-1); min-width: 0; }
.grafico-dias__area { display: flex; flex: 1; align-items: flex-end; justify-content: center; width: 100%; min-height: 0; border-bottom: 1px solid var(--cor-borda-controle); }
.grafico-dias__barra {
    position: relative; width: 100%; max-width: 1.75rem; height: var(--valor); min-height: 2px;
    border-radius: 3px 3px 0 0; background: var(--cor-primaria);
}
.grafico-dias__valor {
    position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    color: var(--cor-texto-suave); font-size: var(--texto-xs); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.grafico-dias__data { color: var(--cor-texto-suave); font-size: var(--texto-xs); font-variant-numeric: tabular-nums; }
.grafico-dias__dia--hoje .grafico-dias__data { color: var(--cor-texto); font-weight: var(--peso-forte); }
@media (max-width: 600px) {
    /* No celular não cabem 14 datas: mostra uma sim, outra não (sempre "hoje"). O leitor
       de tela continua lendo todas (texto oculto de cada coluna). */
    .grafico-dias__dia:nth-last-child(2n) .grafico-dias__data { visibility: hidden; }
}

/* --- Lista "precisa de atenção" ---------------------------------------------- */
.lista-atencao { display: flex; flex-direction: column; gap: var(--espaco-2); margin: 0; padding: 0; list-style: none; }
.lista-atencao__item {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border: 1px solid var(--cor-borda); border-left-width: 4px; border-radius: var(--raio-md);
    background: var(--cor-superficie);
}
.lista-atencao__item > .icone { width: 22px; height: 22px; flex: none; color: var(--cor-info); }
.lista-atencao__item > span { flex: 1 1 14rem; }
.lista-atencao__item > a { font-weight: var(--peso-medio); white-space: nowrap; }
.lista-atencao__item--perigo { border-left-color: var(--cor-perigo); }
.lista-atencao__item--perigo > .icone { color: var(--cor-perigo); }
.lista-atencao__item--aviso { border-left-color: var(--cor-aviso); }
.lista-atencao__item--aviso > .icone { color: var(--cor-aviso); }

/* --- Zona de perigo (ação que apaga muita coisa, no fim da página) ------------ */
.zona-perigo { padding: var(--espaco-5); border: 1px solid var(--cor-perigo); border-radius: var(--raio-lg); background: var(--cor-superficie); }
.zona-perigo h2 { font-size: var(--texto-xl); }
.zona-perigo p { margin: 0; }