/* BluHertz — Curtido: estilo próprio desta página, por cima do compartilhado
   (../assets/estilo.css). Só o que o Curtido precisa e o compartilhado ainda
   não tem: a cor do app, os cartões de item, os chips de filtro por
   categoria e os campos de caixinha (favorito / tem continuação).
   Sem recurso externo. */

/* ---------- cor do app (rosa do cartão do hub) ---------- */
:root {
  --primaria: #AD1457;
  --primaria-escura: #880E4F;
  --primaria-clara: #FCE4EC;
  --primaria-texto: #ffffff;
  --foco: 0 0 0 3px rgba(173, 20, 87, .35);
  --topo-fundo: #AD1457;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primaria: #F48FB1;
    --primaria-escura: #F06292;
    --primaria-clara: #3a1424;
    --primaria-texto: #2a0a16;
    --foco: 0 0 0 3px rgba(244, 143, 177, .45);
    --topo-fundo: #6A0B36;
  }
}
.logo { color: #AD1457; }

/* ---------- filtro por categoria (chips clicáveis) ---------- */
.filtro-cat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filtro-cat .chip-filtro {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha-forte); border-radius: 999px;
  padding: 4px 14px; font-size: 13.5px; background: var(--cartao-2); min-height: 40px; cursor: pointer; color: var(--texto); font-weight: 600;
}
.filtro-cat .chip-filtro:hover { border-color: var(--primaria); }
.filtro-cat .chip-filtro[aria-pressed="true"] { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
.filtro-cat .chip-filtro .qtd { font-size: 11.5px; font-weight: 700; opacity: .8; }

/* ---------- cartões de item ---------- */
.lista-itens { display: flex; flex-direction: column; gap: 10px; }
.item {
  border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 12px; background: var(--cartao);
  /* 2 colunas já em 320px (2×120 + 10 de vão ≤ 262). CUIDADO: um span maior que
     o número de colunas explícitas cria coluna implícita e quebra o 1 / -1 */
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.item.com-erro { border-color: var(--vermelho); }
.item.com-aviso { border-color: var(--atencao); }
.item.com-aviso .problema { color: var(--atencao); }
.item.oculto { display: none; }
.item .campo.largo { grid-column: 1 / -1; }
.item .campo.medio { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .item { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .item .campo.largo { grid-column: span 3; }
  .item .campo.medio { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .item .campo.largo { grid-column: span 4; }
}
.item .cab-item { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 -4px; }
.item .cab-item .num { font-size: 12px; color: var(--suave); font-weight: 600; }
.item .cab-item .num .emoji { font-size: 15px; margin-right: 4px; }
.item .cab-item .botoes { display: flex; gap: 4px; }
.item .problema { grid-column: 1 / -1; color: var(--vermelho); font-size: 12.5px; margin-top: -4px; }
.item .problema:empty { display: none; }
.item input[type="date"] {
  width: 100%; background: var(--cartao); border: 1px solid var(--linha-forte); color: var(--texto);
  border-radius: var(--raio-p); padding: 8px 8px; min-height: 40px; font-size: 14px; min-width: 0;
}
.item input[type="date"]:disabled { opacity: .45; background: var(--cartao-2); }
.item input[type="date"][aria-invalid="true"] { border-color: var(--vermelho); }
.item select[aria-invalid="true"] { border-color: var(--vermelho); }

/* campo de caixinha: o rótulo em cima (como os outros) e a caixa + texto
   embaixo, na mesma altura dos inputs */
.campo.check .caixa {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p); background: var(--cartao); cursor: pointer; font-size: 14px; user-select: none;
}
.campo.check .caixa:has(input:checked) { border-color: var(--primaria); background: var(--primaria-clara); }
.campo.check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--primaria); flex: none; cursor: pointer; }
.campo.check input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 4px; }

.item .dica { min-height: 0; }
.item .dica:empty { display: none; }
.item .estrelas { color: var(--atencao); letter-spacing: 1px; }

/* ---------- resumo: linha por categoria ---------- */
.resumo-usuario .cats { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 13px; color: var(--suave); }
.resumo-usuario .cats span b { color: var(--texto); }

/* a caixa é um <label> dentro de .campo: não pode herdar o rótulo miúdo em
   maiúsculas do compartilhado (.campo > label) */
.campo.check > label.caixa { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--texto); font-weight: 500; }