/* b18-novidades.css — a central de novidades e o popup da novidade grande (24/10/2026, issue #93).
   Direção "escuro técnico" com os tokens do painel: cartão um degrau acima do fundo, borda de 1px, um acento só
   (--accent no ícone e na borda; texto verde em --accent-text; botão verde com texto branco em --accent-strong,
   4,9:1). Escala: raio 8/12/16, espaço múltiplo de 4, 120 ms no hover; o único elemento que anima é a entrada. */

.nov-veu, .nov-popup-veu {
    --nov-fundo: var(--bg-card, #1e1e1e);
    --nov-degrau: rgba(255, 255, 255, .04);
    --nov-borda: var(--border, rgba(255, 255, 255, .08));
    --nov-texto: var(--text-main, #e9edef);
    --nov-suave: var(--text-secondary, #aebac1);
    --nov-verde-texto: var(--accent-text, #2ecfa6);
    --nov-verde-fundo: rgba(0, 168, 132, .14);
    --nov-azul: #7cc8f8;
    --nov-azul-fundo: rgba(56, 189, 248, .14);
    --nov-ambar: #f5b041;
    --nov-ambar-fundo: rgba(245, 158, 11, .14);
    --nov-grade: rgba(255, 255, 255, .05);
    --nov-sombra: 0 24px 64px rgba(0, 0, 0, .45);
    font-family: var(--font-sans);
    color: var(--nov-texto);
}
html.light-theme .nov-veu, html.light-theme .nov-popup-veu {
    --nov-degrau: rgba(17, 27, 33, .03);
    --nov-verde-fundo: rgba(0, 168, 132, .12);
    --nov-azul: #0369a1;
    --nov-azul-fundo: rgba(56, 189, 248, .16);
    --nov-ambar: #8a4d05;
    --nov-ambar-fundo: rgba(245, 158, 11, .16);
    --nov-grade: rgba(17, 27, 33, .06);
    --nov-sombra: 0 24px 64px rgba(17, 27, 33, .18);
}

/* ─── Botão do topo ───────────────────────────────────────────────────── */
.nov-botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 120ms ease;
}
.nov-botao:hover, .nov-botao:focus-visible { color: var(--accent); outline: none; }
.nov-botao:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.nov-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-strong, #00806a);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}
.nov-badge[hidden], .nov-menu-n[hidden] { display: none !important; }

/* Celular: o número no item do menu do canto e o pontinho no ⋮ */
.nov-menu-n {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    margin-left: 8px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-strong, #00806a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: 1px;
    box-sizing: border-box;
}
#cw-topo-mais.nov-tem-novidade { position: relative; }
#cw-topo-mais.nov-tem-novidade::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--cw-fundo, var(--bg-header, #202c33));
}

/* ─── A central (gaveta à direita) ────────────────────────────────────── */
.nov-veu {
    position: fixed;
    inset: 0;
    z-index: 15500;
    display: flex;
    justify-content: flex-end;
    background: rgba(0, 0, 0, .45);
}
.nov-gaveta {
    width: 100%;
    max-width: 440px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--nov-fundo);
    border-left: 1px solid var(--nov-borda);
    box-shadow: var(--nov-sombra);
    animation: nov-entra-lado 240ms ease-out;
}
/* A janela recebe o foco ao abrir (nenhum botão nasce marcado); o contorno fica para os botões dentro dela. */
.nov-gaveta:focus, .nov-popup:focus { outline: none; }
.nov-gaveta-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--nov-borda);
}
.nov-gaveta-cab h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--nov-texto); }
.nov-gaveta-cab p { margin: 4px 0 0; font-size: 13px; color: var(--nov-suave); }
.nov-gaveta-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); }
.nov-mes-titulo {
    margin: 16px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nov-suave);
}
.nov-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    margin-bottom: 8px;
    border: 1px solid var(--nov-borda);
    border-radius: 12px;
    background: var(--nov-degrau);
}
.nov-item.is-destaque { border-color: color-mix(in srgb, var(--accent) 45%, var(--nov-borda)); }
.nov-item-icone {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--nov-verde-fundo);
    color: var(--accent);
    font-size: 15px;
}
.nov-item-texto { min-width: 0; flex: 1; }
.nov-item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.nov-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.nov-chip.is-novo { background: var(--nov-verde-fundo); color: var(--nov-verde-texto); }
.nov-chip.is-melhoria { background: var(--nov-azul-fundo); color: var(--nov-azul); }
.nov-chip.is-correcao { background: var(--nov-ambar-fundo); color: var(--nov-ambar); }
.nov-data { font-size: 12px; color: var(--nov-suave); font-variant-numeric: tabular-nums; }
.nov-nova {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--nov-verde-texto);
}
.nov-nova::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.nov-item-titulo { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--nov-texto); }
.nov-item-resumo { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--nov-suave); }
.nov-item-lista { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--nov-suave); }
.nov-item-lista li + li { margin-top: 4px; }
.nov-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--nov-verde-texto);
    cursor: pointer;
}
.nov-link:hover, .nov-link:focus-visible { text-decoration: underline; outline: none; }
.nov-link i { font-size: 11px; transition: transform 120ms ease; }
.nov-link:hover i { transform: translateX(2px); }
.nov-vazio { padding: 48px 8px; text-align: center; font-size: 14px; color: var(--nov-suave); }

.nov-fechar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nov-borda);
    border-radius: 8px;
    background: transparent;
    color: var(--nov-suave);
    font-size: 15px;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}
.nov-fechar:hover, .nov-fechar:focus-visible { color: var(--nov-texto); background: var(--nov-degrau); outline: none; }
.nov-fechar:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

/* ─── O popup da novidade grande ──────────────────────────────────────── */
.nov-popup-veu {
    position: fixed;
    inset: 0;
    z-index: 16000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .55);
    box-sizing: border-box;
}
.nov-popup {
    width: 100%;
    max-width: 540px;
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--nov-fundo);
    border: 1px solid var(--nov-borda);
    border-radius: 16px;
    box-shadow: var(--nov-sombra);
    overflow: hidden;
    animation: nov-entra 240ms ease-out;
}
.nov-popup-topo {
    position: relative;
    padding: 28px 28px 20px;
    border-bottom: 1px solid var(--nov-borda);
    background: radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 62%);
}
/* A grade de 1px esmaecendo para o canto: textura de produto, não enfeite. */
.nov-popup-topo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--nov-grade) 1px, transparent 1px), linear-gradient(90deg, var(--nov-grade) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 72%);
    mask-image: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 72%);
    pointer-events: none;
}
.nov-popup-topo > * { position: relative; }
/* O X na linha do ícone: o centro dele no centro do ícone de 48px, na mesma margem de 28px. */
.nov-popup-topo .nov-fechar { position: absolute; top: 34px; right: 28px; background: var(--nov-fundo); }
.nov-popup-icone {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--nov-verde-fundo);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
    font-size: 20px;
}
.nov-popup-sobre {
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nov-verde-texto);
}
.nov-popup-titulo {
    margin: 8px 48px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--nov-texto);
}
.nov-popup-corpo { padding: 20px 28px 4px; overflow-y: auto; min-height: 0; }
.nov-popup-resumo { margin: 0; font-size: 15px; line-height: 1.6; color: var(--nov-suave); }
.nov-popup-lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.nov-popup-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--nov-texto); }
.nov-popup-lista i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nov-verde-fundo);
    color: var(--nov-verde-texto);
    font-size: 10px;
}
.nov-popup-pe {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 20px 28px 24px;
}
.nov-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--nov-borda);
    border-radius: 8px;
    background: transparent;
    color: var(--nov-texto);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, filter 120ms ease;
}
.nov-btn:hover { background: var(--nov-degrau); }
.nov-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.nov-btn.is-primario { border-color: transparent; background: var(--accent-strong, #00806a); color: #fff; }
.nov-btn.is-primario:hover { filter: brightness(.92); background: var(--accent-strong, #00806a); }
.nov-btn.is-primario i { font-size: 12px; }

@keyframes nov-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nov-entra-lado { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .nov-popup, .nov-gaveta { animation: none; }
}

/* ─── Celular: a central em tela cheia e o popup como folha de baixo ───── */
@media (max-width: 960px) {
    .nov-gaveta { max-width: none; border-left: 0; }
    .nov-gaveta-cab { padding-top: calc(16px + env(safe-area-inset-top)); }
}
@media (max-width: 720px) {
    .nov-popup-veu { align-items: flex-end; padding: 0; }
    .nov-popup { max-width: none; max-height: 92dvh; border-radius: 16px 16px 0 0; border-bottom: 0; }
    .nov-popup-topo { padding: 24px 20px 16px; }
    .nov-popup-topo .nov-fechar { top: 30px; right: 20px; }
    .nov-popup-titulo { font-size: 20px; }
    .nov-popup-corpo { padding: 16px 20px 4px; }
    .nov-popup-pe { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
    .nov-popup-pe .nov-btn { flex: 1 1 auto; }
}