/* Painel de melhorias do iGeriu.
   Estilos copiados do protótipo (sistema/html/assets/style.css), só o que esta
   página usa, para não depender de Tailwind nem de CDN no servidor. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: oklch(98.21% 0 0);
    color: oklch(0.145 0 0);
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-text-size-adjust: 100%;
}

body { overflow-x: hidden; }

h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

.box {
    background: #fff;
    border: 1px solid oklch(0.97 0 0);
    border-radius: 0.6rem;
}

/* Cabeçalho escuro, como o do sistema */
.topo {
    background: oklch(0.2135 0.0103 268.2);
    color: oklch(0.9 0.02 277.87);
    padding: 1.5rem 1rem 5.5rem;
}
.topo-dentro { max-width: 60rem; margin: 0 auto; }
.topo img { height: 2rem; display: block; filter: brightness(0) invert(1); }
.topo h1 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-top: 1.75rem; }
.topo p { font-size: .9375rem; margin-top: .4rem; max-width: 42rem; color: oklch(0.9 0.02 277.87 / .75); }

main { max-width: 60rem; margin: -4rem auto 4rem; padding: 0 1rem; }
.painel { padding: 1.5rem; box-shadow: 0 10px 30px rgb(0 0 0 / .08); }

/* Busca */
.busca { display: flex; gap: .5rem; }
.input {
    width: 100%;
    border: 1px solid oklch(0.922 0 0);
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-family: inherit;
    background: #fff;
    outline: none;
    color: inherit;
}
.input:focus {
    border-color: oklch(67.41% 0.1756 254.6);
    box-shadow: 0 0 0 3px oklch(67.41% 0.1756 254.6 / .15);
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    border-radius: .5rem;
    padding: .5rem .9rem;
    font-size: .875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s, background .15s;
}
.btn-primary { background: oklch(67.41% 0.1756 254.6); color: #fff; }
.btn-primary:hover { filter: brightness(.93); }

/* Filtros */
.filtros { margin-top: 1.25rem; display: grid; gap: .75rem; }
.filtro-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.filtro-rotulo {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: oklch(0.556 0 0);
    width: 3.5rem;
    flex-shrink: 0;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid oklch(0.922 0 0);
    border-radius: 999px;
    background: #fff;
    padding: .3rem .7rem;
    font-size: .8125rem;
    color: oklch(0.3836 0.0309 277.44);
    transition: background .12s, border-color .12s;
}
.chip:hover { background: oklch(0.97 0 0); }
.chip.on {
    background: oklch(0.9697 0.0148 251.16);
    border-color: oklch(67.41% 0.1756 254.6);
    color: oklch(67.41% 0.1756 254.6);
    font-weight: 600;
}
.chip.on::before { content: '✓'; font-size: .75rem; line-height: 1; }

/* Linha de resumo acima da lista */
.resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid oklch(0.95 0 0);
    font-size: .8125rem;
    color: oklch(0.556 0 0);
}
.resumo .limpar { color: oklch(67.41% 0.1756 254.6); font-weight: 500; }
.resumo .limpar:hover { text-decoration: underline; }

/* Aviso (cache antigo ou falha na leitura) */
.aviso {
    margin-top: 1rem;
    border: 1px solid #f0ad4e;
    border-left-width: 4px;
    border-radius: .5rem;
    background: #fffaf2;
    padding: .7rem .9rem;
    font-size: .8125rem;
    color: #6b4a16;
}

/* Lista de itens */
.lista { margin-top: .75rem; display: grid; gap: .5rem; }
.item {
    border: 1px solid #eceef1;
    border-radius: 8px;
    padding: .9rem 1rem;
    background: #fff;
}
.item:hover { background: #fcfdfe; border-color: #d5e1ef; }
.item-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.item-etiquetas { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.item-titulo { font-size: .9375rem; font-weight: 600; color: #2b2f36; line-height: 1.35; }
.item-resposta { font-size: .8125rem; color: oklch(0.3836 0.0309 277.44); line-height: 1.5; margin-top: .45rem; }
.item-sem-resposta { font-size: .8125rem; color: oklch(0.556 0 0); margin-top: .45rem; }

/* Etiquetas (etiqueta cheia para status, como no sistema real) */
.badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .3em .6em;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    flex-shrink: 0;
}
.b-green { background: #5cb85c; }
.b-red { background: #d9534f; }
.b-yellow { background: #f0ad4e; }
.b-orange { background: #f97316; }
.b-blue { background: oklch(0.5635 0.1182 247.74); }
.b-gray { background: #87939f; }
.b-purple { background: #6f42c1; }

/* Tipo: etiqueta de contorno, para não competir com o status */
.tipo {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: .2em .5em;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    border: 1px solid oklch(0.922 0 0);
    background: #fff;
}
.tp-bug { color: #b03b38; border-color: #e7c3c2; }
.tp-melhoria { color: oklch(0.5635 0.1182 247.74); border-color: #c8d8ea; }

/* Nada encontrado */
.vazio {
    margin-top: .75rem;
    border: 1px dashed oklch(0.922 0 0);
    border-radius: 8px;
    padding: 2rem 1rem;
    text-align: center;
    font-size: .875rem;
    color: oklch(0.556 0 0);
}

/* Celular */
@media (max-width: 640px) {
    .topo { padding: 1.25rem 1rem 4.5rem; }
    .topo h1 { font-size: 1.25rem; margin-top: 1.25rem; }
    main { margin-top: -3.25rem; }
    .painel { padding: 1rem; }
    .filtro-rotulo { width: 100%; margin-bottom: -.1rem; }
    .item-topo { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .btn { padding: .5rem .75rem; }
}