/* ============================================================================
 * novidades.css — página "Novidades da semana" (core/novidades.js).
 * Mock aprovado: techterra-online-backend/docs/mock-novidades.html (C + 6C).
 * Reusa do style.css: variáveis de cor, .nav-btn, .nav-btn-badge,
 * .bestiary-pagination/.bestiary-page-info e a barra de rolagem global.
 * ========================================================================== */

/* ---------- Botão do megafone (top bar, ao lado do Guia) ---------- */
#btn-novidades { position: relative; overflow: visible; }
#btn-novidades .nav-btn-badge { top: -6px; right: -6px; bottom: auto; background: #c0392b; border-color: #ff8a7a; color: #fff; box-shadow: 0 0 0 2px var(--bg-dark); }
#btn-novidades .nav-btn-badge[hidden],
#btn-novidades .nov-balao[hidden] { display: none; }
#btn-novidades.nov-tem svg { animation: nov-balanca 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes nov-balanca { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-12deg); } 95% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { #btn-novidades.nov-tem svg { animation: none; } }
/* Balão: só enquanto há versão não vista (o JS liga/desliga pelo [hidden]). */
.nov-balao {
    position: absolute; top: calc(100% + 10px); right: -6px; z-index: 5;
    background: var(--bg-medium); border: 1px solid var(--gold-dark); color: var(--gold-light);
    padding: 6px 10px; border-radius: 6px; white-space: nowrap;
    font-family: 'Lora', serif; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5); pointer-events: auto;
}
.nov-balao::before { content: ''; position: absolute; top: -6px; right: 14px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--gold-dark); }
#btn-novidades:hover .nov-balao { color: var(--gold-light); }
/* Celular: o botão vai para o drawer do "⋯" (mobile_shell.js); balão fica de fora e o "⋯" ganha um ponto. */
html[data-viewport="mobile"] .nov-balao { display: none !important; }
html[data-viewport="mobile"] .mob-burger { position: relative; }
html[data-viewport="mobile"] .mob-burger.nov-tem::after {
    content: ''; position: absolute; top: 10px; right: calc(50% - 16px); width: 9px; height: 9px; border-radius: 50%;
    background: #e74c3c; box-shadow: 0 0 0 2px var(--bg-dark);
}

/* ---------- Página (tela cheia, não modal) ---------- */
body.nov-aberta { overflow: hidden; }
.nov-pagina {
    --nov-linha: rgba(201, 168, 76, .18); --nov-linha-forte: rgba(201, 168, 76, .4);
    position: fixed; inset: 0; z-index: 1300;
    display: flex; flex-direction: column;
    background: radial-gradient(1200px 500px at 50% -120px, rgba(201, 168, 76, .12), transparent 70%), var(--bg-dark);
    color: var(--text-light); font-family: 'Lora', serif;
    animation: nov-entra .2s ease-out;
}
.nov-pagina[hidden] { display: none; }
@keyframes nov-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.nov-pagina button { font: inherit; color: inherit; }
.nov-top {
    flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 22px;
    padding-top: calc(12px + env(safe-area-inset-top));
    border-bottom: 2px solid var(--gold-dark); background: linear-gradient(180deg, rgba(26, 20, 16, .98), rgba(26, 20, 16, .9));
}
.nov-voltar {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--gold-dark);
    background: linear-gradient(135deg, var(--bg-light), var(--bg-medium)); color: var(--gold) !important; cursor: pointer;
    font-family: 'Cinzel', serif !important; font-size: .8rem; letter-spacing: 1px;
}
.nov-voltar:hover { border-color: var(--gold); color: var(--gold-light) !important; }
.nov-voltar kbd { font: 600 10px system-ui; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--nov-linha-forte); color: var(--text-muted); }
.nov-tit h1 { font-family: 'Cinzel', serif; font-size: 1.25rem; color: var(--gold); letter-spacing: 2px; margin: 0; }
.nov-tit p { font-size: .8rem; color: var(--text-muted); margin: 0; }
.nov-corpo { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
.nov-vazio { color: var(--text-muted); padding: 40px 16px; text-align: center; }
.nov-rodape { max-width: 1100px; margin: 24px auto 40px; padding: 14px 22px; color: var(--text-muted); font-size: .8rem; text-align: center; border-top: 1px solid var(--nov-linha); }

.nov-wrap { max-width: 1240px; margin: 0 auto; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.nov-wrap > main { min-width: 0; }

/* chips */
.nov-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; border: 1px solid var(--nov-linha-forte); color: var(--text-light); white-space: nowrap; }
.nov-chip[style*="--c"] { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); }
.nov-kind { font: 600 .66rem 'Cinzel', serif; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.nov-kind.novo { background: rgba(102, 204, 136, .14); color: #8fe0a9; }
.nov-kind.melhoria { background: rgba(79, 163, 224, .14); color: #9cc8ff; }
.nov-kind.correcao { background: rgba(224, 103, 79, .14); color: #f2a08e; }
.nov-ver { font: 600 .7rem 'Cinzel', serif; color: var(--gold); border: 1px solid var(--gold-dark); border-radius: 4px; padding: 1px 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nov-ponto { width: 8px; height: 8px; border-radius: 50%; background: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, .18); }

/* ---------- 11 · Semana como linha do calendário (casca da Agenda de eventos, opção C) ---------- */
.nov-semana { margin-bottom: 14px; }
.nov-semana .mes-tit { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.nov-semana .mes-tit b { font-family: 'Cinzel', serif; color: var(--gold); font-size: .92rem; letter-spacing: 1px; }
.nov-semana .mes-tit small { color: var(--text-muted); font-size: .75rem; }
.nov-semana .mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nov-semana .mes .h { font-family: 'Cinzel', serif; font-size: .72rem; color: var(--text-muted); text-align: center; padding: 2px 0; }
.nov-cel {
    position: relative; min-height: 96px; min-width: 0; border: 1px solid var(--nov-linha); border-radius: 8px; padding: 4px 5px;
    background: rgba(0, 0, 0, .22); cursor: pointer; display: flex; flex-direction: column; gap: 3px; text-align: left;
}
.nov-cel:hover { border-color: var(--nov-linha-forte); }
.nov-cel.vz { opacity: .45; cursor: default; }
.nov-cel.hoje { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.nov-cel.sel { background: rgba(201, 168, 76, .14); border-color: var(--gold-light); }
.nov-cel .topo-c { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.nov-cel .n { font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 600; color: var(--text-light); font-variant-numeric: tabular-nums; }
.nov-cel.hoje .n { color: var(--gold-light); }
.nov-cel .qt { font: 600 .62rem system-ui, sans-serif; color: var(--bg-dark); background: var(--gold); border-radius: 999px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.nov-cel .hj { font: 600 .55rem 'Cinzel', serif; letter-spacing: 1px; color: var(--gold); text-transform: uppercase; margin-top: -3px; }
.nov-cel .chip-c {
    display: flex; gap: 4px; align-items: center; font-size: .62rem; padding: 1px 4px; border-radius: 4px; border-left: 3px solid var(--c);
    background: rgba(0, 0, 0, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--text-light);
}
.nov-cel .mais-c { font-size: .6rem; color: var(--text-muted); padding-left: 4px; }
.nov-cel .pontos { display: none; gap: 2px; flex-wrap: wrap; justify-content: center; }
.nov-cel .pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.nov-cel .nov-ponto { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; }

/* ---------- 12 · Tudo / Novo / Melhorado ---------- */
.nov-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.nov-seg { display: inline-flex; border: 1px solid var(--nov-linha-forte); border-radius: 8px; overflow: hidden; }
.nov-seg button { border: 0; background: none; padding: 6px 12px; cursor: pointer; font-size: .8rem; border-right: 1px solid var(--nov-linha); }
.nov-seg button:last-child { border-right: 0; }
.nov-seg button.on { background: var(--gold); color: var(--bg-dark); font-weight: 600; }
.nov-tira-dia { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--gold); background: rgba(201, 168, 76, .12); cursor: pointer; font-size: .8rem; }

/* ---------- 6 · Assuntos: barra da semana (padrão "Languages" do GitHub) ---------- */
.nov-assuntos { border: 1px solid var(--nov-linha); border-radius: 10px; padding: 10px 12px; background: rgba(0, 0, 0, .18); }
.nov-assuntos .topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.nov-assuntos .topo b { font-family: 'Cinzel', serif; color: var(--gold); font-size: .8rem; letter-spacing: 1px; }
.nov-assuntos .tudo { background: none; border: 1px solid var(--nov-linha-forte); border-radius: 999px; padding: 2px 10px; color: var(--text-muted); font-size: .74rem; cursor: pointer; }
.nov-assuntos .tudo.on { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); font-weight: 600; }
.nov-assuntos .barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; background: rgba(0, 0, 0, .3); }
.nov-assuntos .barra button { border: 0; padding: 0; min-width: 6px; background: var(--c); cursor: pointer; transition: opacity .15s, filter .15s; }
.nov-assuntos .barra button:hover { filter: brightness(1.25); }
.nov-assuntos.filtrado .barra button:not(.on) { opacity: .22; }
.nov-assuntos .leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; }
.nov-assuntos .leg button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 3px 0; cursor: pointer; font-size: .8rem; }
.nov-assuntos .leg i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.nov-assuntos .leg .n { color: var(--text-muted); font: 600 .72rem system-ui; }
.nov-assuntos .leg .pc { color: var(--text-muted); font-size: .7rem; }
.nov-assuntos.filtrado .leg button:not(.on) { opacity: .45; }
.nov-assuntos .leg button.on { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.nov-assuntos .leg button.zero { opacity: .25; cursor: default; }

/* ---------- 7 · Grade de tamanho fixo (mosaico) ---------- */
.nov-grid { display: grid; gap: 12px; margin-top: 14px; }
.nov-tile {
    position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--nov-linha); border-radius: 12px; padding: 14px; cursor: pointer;
    background: rgba(44, 36, 24, .55); transition: border-color .15s, transform .15s; display: flex; flex-direction: column; gap: 6px; text-align: left;
}
.nov-tile:hover { border-color: var(--gold-dark); transform: translateY(-1px); }
.nov-tile.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 20px rgba(201, 168, 76, .3); }
.nov-tile.big { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, #2c2418), #201a12 75%); }
.nov-tile.big .arte { position: absolute; right: 14px; bottom: 6px; font-size: 4.2rem; opacity: .22; pointer-events: none; }
.nov-tile .topo { display: flex; align-items: center; gap: 6px; }
.nov-tile .topo .nov-ver { margin-left: auto; margin-right: 12px; }
.nov-tile h4 { margin: 0; font-size: .98rem; font-weight: 600; color: var(--text-light); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 0 0 auto; }
.nov-tile.big h4 { font-family: 'Cinzel', serif; font-size: 1.18rem; color: var(--gold-light); }
.nov-tile p { margin: 0; color: #cbbda3; font-size: .84rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nov-tile.big p { -webkit-line-clamp: 2; max-width: 78%; }
.nov-tile .nov-ponto { position: absolute; top: 10px; right: 10px; }
.nov-tile-vz { border: 1px dashed rgba(201, 168, 76, .12); border-radius: 12px; }

/* ---------- 13 · Detalhe ao lado ---------- */
.nov-det { position: sticky; top: 18px; border: 1px solid var(--nov-linha-forte); border-radius: 12px; background: rgba(44, 36, 24, .7); padding: 18px; min-height: 240px; }
.nov-det .det-top { display: none; }
.nov-det .ic { font-size: 2.2rem; }
.nov-det .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nov-det h3 { font-family: 'Cinzel', serif; color: var(--gold-light); font-size: 1.15rem; margin: 8px 0; }
.nov-det p { color: #d9ccb3; line-height: 1.55; font-size: .92rem; margin: 0; }
.nov-det ul { margin: 10px 0 0 18px; padding: 0; color: #d9ccb3; font-size: .88rem; line-height: 1.55; }
.nov-det .fix { margin-top: 14px; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, .25); font-size: .8rem; color: var(--text-muted); }
.nov-det .fix b { color: var(--gold); }
.nov-det .nav { display: flex; justify-content: space-between; margin-top: 16px; }
.nov-det .nav button { background: none; border: 1px solid var(--nov-linha-forte); border-radius: 6px; padding: 5px 10px; cursor: pointer; color: var(--gold); font-size: .8rem; }
.nov-det .nav button:disabled { opacity: .35; cursor: default; }

/* ---------- Tablet ---------- */
@media (max-width: 860px) {
    .nov-wrap { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .nov-det { position: static; }
    .nov-tit p { display: none; }
    .nov-voltar .t { display: none; }
    .nov-top { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); gap: 10px; }
    .nov-tit h1 { font-size: 1.05rem; }
}

/* ---------- Celular (≤520px) ---------- */
@media (max-width: 520px) {
    .nov-top { padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); }
    .nov-voltar { padding: 6px 10px; }
    .nov-voltar kbd { display: none; }
    .nov-tit h1 { font-size: 1rem; letter-spacing: 1px; }
    .nov-wrap { padding: 10px 12px 0; gap: 0; }
    .nov-semana { margin-bottom: 10px; }
    .nov-semana .mes { gap: 3px; }
    .nov-semana .mes .h { font-size: .6rem; }
    .nov-cel { min-height: 58px; padding: 4px 3px; align-items: center; gap: 4px; }
    .nov-cel .topo-c { flex-direction: column; gap: 2px; }
    .nov-cel .n { font-size: .95rem; }
    .nov-cel .chip-c, .nov-cel .mais-c, .nov-cel .hj { display: none; }
    .nov-cel .pontos { display: flex; }
    .nov-barra { margin-bottom: 8px; }
    .nov-seg { width: 100%; }
    .nov-seg button { flex: 1; padding: 8px 6px; }
    .nov-assuntos .leg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
    .nov-assuntos .leg .pc { display: none; }
    .nov-tile { padding: 12px; gap: 4px; }
    .nov-tile h4 { -webkit-line-clamp: 1; font-size: .95rem; }
    .nov-tile p { -webkit-line-clamp: 2; }
    /* paginação presa no rodapé, ao alcance do polegar */
    .nov-pag { position: sticky; bottom: 0; z-index: 2; margin: 6px -12px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(26, 20, 16, 0), var(--bg-dark) 28%); }
    .nov-pag button { padding: 9px 16px; }
    .nov-rodape { margin: 10px auto 24px; }
    /* detalhe vira uma tela própria (empilhada) */
    .nov-det { position: fixed; inset: 0; z-index: 6; border: 0; border-radius: 0; padding: 0; background: var(--bg-dark); display: none; flex-direction: column; min-height: 0; }
    .nov-det.mob-aberto { display: flex; }
    .nov-det.entra { animation: nov-det-entra .22s ease-out; }
    .nov-det .det-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
        border-bottom: 2px solid var(--gold-dark); background: rgba(26, 20, 16, .98); }
    .nov-det .det-top small { color: var(--text-muted); font-size: .78rem; margin-left: auto; font-variant-numeric: tabular-nums; }
    .nov-det .det-corpo { flex: 1; overflow: auto; padding: 18px 16px; }
    .nov-det .nav { margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--nov-linha); background: rgba(26, 20, 16, .98); gap: 10px; }
    .nov-det .nav button { flex: 1; padding: 10px; }
}
@keyframes nov-det-entra { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }