/* =====================================================================
   valk2510 · VALKIRIAM — pele do portal de autopublicação de ficção (valkiriam.com)
   Vale SÓ quando <html data-skin="valkiriam"> (skins_ed.py decide pelo Host ou pelo cookie de prova).
   Escrita sobre as classes reais da Plataforma (base.html, livros.html, edicao.html); o que não bater
   com uma classe real cai nos seletores genéricos (body, h1-h3, .btn, .cartao).
   Tokens e direção de arte: pacote VALKIRIAM_Portal (25/10/2026). Fontes: Playfair Display + DM Sans.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

/* ---------- 1. Tokens ---------- */
html[data-skin="valkiriam"] {
  --vk-navy: #071827; --vk-navy2: #0c2235; --vk-gold: #dca65f; --vk-goldlight: #f8d4a0;
  --vk-cream: #faf7f1; --vk-paper: #fffdf9; --vk-ink: #172337; --vk-muted: #687589;
  --vk-line: #e8e2d9; --vk-green: #14785e; --vk-violet: #7651be;
  --vk-shadow: 0 14px 34px rgba(15, 25, 37, .08);
  --vk-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --vk-sans: 'DM Sans', Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* o player da rádio lê estes nomes */
  --navy: var(--vk-navy); --gold: var(--vk-gold); --paper: var(--vk-paper); --line: var(--vk-line); --ink: var(--vk-ink); --muted: var(--vk-muted); --shadow: var(--vk-shadow);
}

/* ---------- 2. Base ---------- */
html[data-skin="valkiriam"] body { background: var(--vk-cream); color: var(--vk-ink); font-family: var(--vk-sans); }
html[data-skin="valkiriam"] h1, html[data-skin="valkiriam"] h2, html[data-skin="valkiriam"] h3,
html[data-skin="valkiriam"] .serif { font-family: var(--vk-serif); font-weight: 600; letter-spacing: .2px; }
html[data-skin="valkiriam"] a { color: var(--vk-violet); }
html[data-skin="valkiriam"] ::selection { background: var(--vk-goldlight); color: var(--vk-navy); }
html[data-skin="valkiriam"] :focus-visible { outline: 3px solid var(--vk-gold); outline-offset: 2px; }

/* ---------- 3. Barra lateral (aside.sidebar / .nav-app) ---------- */
html[data-skin="valkiriam"] aside.sidebar,
html[data-skin="valkiriam"] .sidebar {
  background: linear-gradient(165deg, #04121f, #0a2233) !important; color: #d9e3ed;
  border-right: 1px solid rgba(220, 166, 95, .14);
}
html[data-skin="valkiriam"] .sidebar .marca { color: #fff; }
html[data-skin="valkiriam"] .sidebar .marca-ico { display: none; }
html[data-skin="valkiriam"] .sidebar .marca .vk-logo { display: block; height: 58px; width: auto; }
html[data-skin="valkiriam"] .sidebar .marca-txt b { font: 600 20px/1.1 var(--vk-serif); letter-spacing: 1.2px; color: #fff; }
html[data-skin="valkiriam"] .sidebar .marca-txt b em { font-style: normal; }
html[data-skin="valkiriam"] .sidebar .marca-txt small { color: #cfb98f; letter-spacing: 1.5px; text-transform: uppercase; font-size: 9px; }
html[data-skin="valkiriam"] .nav-app a {
  color: #c9d6df; border-radius: 9px; font-family: var(--vk-sans); font-weight: 500;
}
html[data-skin="valkiriam"] .nav-app a svg { stroke: currentColor; }
html[data-skin="valkiriam"] .nav-app a:hover:not(.ativo) { background: #183247 !important; color: #fff; }
html[data-skin="valkiriam"] .nav-app a.ativo {
  background: linear-gradient(100deg, #ffe0b3, #e7a75e) !important; color: #1b2430 !important; font-weight: 700;
}
html[data-skin="valkiriam"] .nav-app a.ativo svg { stroke: #1b2430; }
html[data-skin="valkiriam"] .nav-app .nav-num-tr, html[data-skin="valkiriam"] .nav-foe .nav-num { background: rgba(220, 166, 95, .28); color: #fff; }
html[data-skin="valkiriam"] .nav-foe { border-top-color: rgba(220, 166, 95, .18); }
html[data-skin="valkiriam"] .nav-foe-tit { color: #cfb98f; }
html[data-skin="valkiriam"] .side-rodape { color: #7f93a6; font-size: 11px; }
html[data-skin="valkiriam"] .side-rodape span { color: #a9b7c6; }
html[data-skin="valkiriam"] .barra-botao { color: #cfb98f; }
/* cartão de ajuda no pé da barra (vk-ajuda é inserido pelo base.html quando a skin está ativa) */
html[data-skin="valkiriam"] .vk-ajuda { margin: 14px 10px 6px; border: 1px solid #29445b; border-radius: 15px; padding: 14px; background: radial-gradient(circle at 100% 0, #324353, #091725 65%); color: #e7e0d3; font-size: 12px; }
html[data-skin="valkiriam"] .vk-ajuda b { display: block; font: 600 15px var(--vk-serif); color: #f3c486; margin-bottom: 4px; }
html[data-skin="valkiriam"] .vk-ajuda a { display: inline-block; margin-top: 10px; border: 1px solid #526476; border-radius: 8px; background: #162d3f; color: #fff; padding: 7px 11px; text-decoration: none; font-weight: 600; }

/* ---------- 4. Topo (header.topbar) ---------- */
html[data-skin="valkiriam"] header.topbar, html[data-skin="valkiriam"] .topbar {
  background: var(--vk-paper) !important; border-bottom: 1px solid var(--vk-line);
}
html[data-skin="valkiriam"] .migalha b { font-family: var(--vk-serif); font-weight: 600; }
html[data-skin="valkiriam"] .migalha a { color: var(--vk-muted); }
html[data-skin="valkiriam"] .chip-equipe { background: #f1e9ff; color: #5b3fa0; border-radius: 999px; }
html[data-skin="valkiriam"] .avatar { background: #ead0b3; color: #503c32; }
html[data-skin="valkiriam"] .sair { color: var(--vk-muted); }
html[data-skin="valkiriam"] .faixa-teste { background: var(--vk-navy); color: #f3dcb6; }
html[data-skin="valkiriam"] .topo { background: var(--vk-navy); color: #fff; }
html[data-skin="valkiriam"] .topo .marca-txt b, html[data-skin="valkiriam"] .topo-frase { color: #f3dcb6; }

/* ---------- 5. Conteúdo: página, cartões, métricas, filtros ---------- */
html[data-skin="valkiriam"] .pagina .cabeca .etapa { color: var(--vk-violet); letter-spacing: 1.4px; text-transform: uppercase; font-size: 11px; font-weight: 700; }
html[data-skin="valkiriam"] .pagina .cabeca h1 { font: 600 34px/1.1 var(--vk-serif); color: var(--vk-ink); }
html[data-skin="valkiriam"] .pagina .cabeca p { color: var(--vk-muted); }
html[data-skin="valkiriam"] .cartao, html[data-skin="valkiriam"] .metrica, html[data-skin="valkiriam"] .aviso {
  background: var(--vk-paper); border: 1px solid var(--vk-line); border-radius: 14px; box-shadow: var(--vk-shadow);
}
html[data-skin="valkiriam"] .metrica strong { font: 600 28px var(--vk-serif); color: var(--vk-navy); }
html[data-skin="valkiriam"] .metrica span { color: var(--vk-muted); }
html[data-skin="valkiriam"] .metrica-ico { color: var(--vk-gold); }
html[data-skin="valkiriam"] .filtros .filtro { color: #647080; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; }
html[data-skin="valkiriam"] .filtros .filtro.ativo { color: #7045c0; border-bottom-color: #7045c0; font-weight: 700; background: transparent; }
html[data-skin="valkiriam"] .chip.verde { background: #e0f6e9; color: #13745b; }
html[data-skin="valkiriam"] .chip.laranja { background: #fff1cf; color: #96640c; }
html[data-skin="valkiriam"] .chip.cinza { background: #ece9e3; color: #5c6775; }
html[data-skin="valkiriam"] .aviso.azul { background: #f0e9ff; color: #6445a4; border-color: #dccffa; }
html[data-skin="valkiriam"] .aviso.laranja { background: #fff1c7; color: #98600b; border-color: #f3e0a8; }
html[data-skin="valkiriam"] .aviso.verde { background: #e0f6e9; color: #13745b; border-color: #bfe6d8; }

/* ---------- 6. Botões ---------- */
html[data-skin="valkiriam"] .btn { border-radius: 10px; font-weight: 700; font-family: var(--vk-sans); }
html[data-skin="valkiriam"] .btn:not(.claro):not(.perigo):not(.cinza):not(.neutro):not(.secundario) {
  background: linear-gradient(100deg, #ffe0b3, #e9a75d); color: #1e2630; border: 0;
}
html[data-skin="valkiriam"] .btn.claro, html[data-skin="valkiriam"] .btn.secundario { background: transparent; border: 1px solid #bdb7ad; color: var(--vk-ink); }
html[data-skin="valkiriam"] .btn.perigo { background: #b23a3a; color: #fff; border: 0; }
html[data-skin="valkiriam"] .btn.verde, html[data-skin="valkiriam"] .btn.sucesso { background: var(--vk-green); color: #fff; border: 0; }

/* ---------- 7. Hero da home (livros.html: só na skin, inserido pelo patch) ---------- */
html[data-skin="valkiriam"] .vk-hero {
  position: relative; margin: -8px 0 22px; padding: 34px 42px; min-height: 230px; border-radius: 18px; overflow: hidden; color: #f9e7ce;
  background:
    radial-gradient(circle at 78% 45%, rgba(226, 164, 96, .30), transparent 22%),
    linear-gradient(100deg, rgba(6, 18, 32, .97) 0%, rgba(9, 28, 47, .82) 45%, rgba(9, 28, 47, .30) 100%),
    url('img/hero-valkiriam.jpg') right center / cover no-repeat;
}
html[data-skin="valkiriam"] .vk-hero h2 { font: 600 clamp(30px, 3.6vw, 52px)/1.08 var(--vk-serif); max-width: 600px; margin: 0 0 10px; color: #f9e7ce; }
html[data-skin="valkiriam"] .vk-hero p { color: #e9e3da; max-width: 520px; margin: 0 0 18px; font-size: 15px; }
html[data-skin="valkiriam"] .vk-hero .btn { background: linear-gradient(100deg, #ffe0b3, #e9a75d); color: #1e2630; }
html[data-skin="valkiriam"] .vk-hero .vk-lema { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); text-align: right; font: 500 15px/1.5 var(--vk-serif); letter-spacing: 1.5px; text-transform: uppercase; color: #f3dcb6; max-width: 220px; }
html[data-skin="valkiriam"] .vk-hero .vk-lema::after { content: ''; display: block; width: 90px; height: 1px; background: var(--vk-gold); margin: 12px 0 0 auto; }
html[data-skin="valkiriam"] .vk-hero + .cabeca .etapa { display: none; }

/* ---------- 8. Jornada / etapas (ícones da prancha nas etapas numeradas) ---------- */
html[data-skin="valkiriam"] [class*="etapa-"] .simbolo, html[data-skin="valkiriam"] .vk-etapa-ico { width: 30px; height: 30px; background: center / contain no-repeat; display: inline-block; vertical-align: middle; }
html[data-skin="valkiriam"] .etapa-1 .simbolo { background-image: url('icones/01-sua-obra.png'); }
html[data-skin="valkiriam"] .etapa-2 .simbolo { background-image: url('icones/02-contrato.png'); }
html[data-skin="valkiriam"] .etapa-3 .simbolo { background-image: url('icones/03-envio.png'); }
html[data-skin="valkiriam"] .etapa-4 .simbolo { background-image: url('icones/04-diagramacao.png'); }
html[data-skin="valkiriam"] .etapa-5 .simbolo { background-image: url('icones/05-edicao.png'); }
html[data-skin="valkiriam"] .etapa-6 .simbolo { background-image: url('icones/06-prova-final.png'); }
html[data-skin="valkiriam"] .etapa-7 .simbolo { background-image: url('icones/07-metadados.png'); }
html[data-skin="valkiriam"] .etapa-8 .simbolo { background-image: url('icones/08-capa-final.png'); }
html[data-skin="valkiriam"] .etapa-9 .simbolo { background-image: url('icones/09-arquivos.png'); }
html[data-skin="valkiriam"] .etapa-10 .simbolo { background-image: url('icones/10-publicacao.png'); }

/* ---------- 9. Login (sem app) ---------- */
html[data-skin="valkiriam"] body.sem-app { background: var(--vk-cream) url('img/textura-papel.jpg') center / cover fixed; }
html[data-skin="valkiriam"] body.sem-app .cartao { backdrop-filter: blur(2px); }

/* ---------- 10. Modo de prova: faixa discreta no pé ---------- */
html[data-skin="valkiriam"] .vk-prova { position: fixed; right: 12px; bottom: 12px; z-index: 50; background: var(--vk-navy); color: #f3dcb6; font: 12px var(--vk-sans); padding: 7px 11px; border-radius: 999px; box-shadow: 0 8px 20px rgba(7, 24, 39, .3); opacity: .92; }
html[data-skin="valkiriam"] .vk-prova a { color: #ffe0b3; margin-left: 8px; }

/* ---------- 11. Responsivo e acessibilidade ---------- */
@media (max-width: 1100px) { html[data-skin="valkiriam"] .vk-hero .vk-lema { display: none; } }
@media (max-width: 720px) { html[data-skin="valkiriam"] .vk-hero { padding: 24px 18px; min-height: 180px; } html[data-skin="valkiriam"] .vk-hero h2 { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { html[data-skin="valkiriam"] * { transition: none !important; animation: none !important; } }