/*
Theme Name: VivaCity V2
Theme URI: https://rededesitesbr.com
Author: Ângelo Peterson e Ana
Author URI: https://rededesitesbr.com
Description: Tema criado pela Rede de Sites Br.
Version: 23.02.26
License: Proprietary
Text Domain: vivacity
Tags: news, modular, fast, seo-optimized
*/

/* =========================================
   1. RESET GERAL & VARIAVEIS (DARK MODE ENGINE)
   ========================================= */
:root {
    /* MODO CLARO (PADRÃO) */
    --primary-color: #FFD700;
    --text-color: #333333;
    --bg-color: #FFFFFF;
    --bg-panel: #FFFFFF;
    --border-color: #EEEEEE;
    --header-shadow: rgba(0,0,0,0.05);
    --sys-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* MODO ESCURO (ATIVADO VIA JS) */
html.v-dark-mode {
    --text-color: #E0E0E0;
    --bg-color: #121212;
    --bg-panel: #1E1E1E;
    --border-color: #333333;
    --header-shadow: rgba(0,0,0,0.3);
}

/* Ajustes Globais Dark Mode */
html.v-dark-mode img { filter: brightness(0.85); }
html.v-dark-mode .entry-content a { color: var(--primary-color); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0; padding: 0;
    font-family: var(--sys-font);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: 80px; 
    transition: background-color 0.3s, color 0.3s;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
.screen-reader-text { display: none; }

/* =========================================
   2. HEADER INTELIGENTE (SMART MENU)
   ========================================= */
.site-header {
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 80px;
    z-index: 99999; 
    background: var(--bg-panel); /* Variável */
    transition: transform 0.3s ease-in-out, background-color 0.3s;
    box-shadow: 0 2px 10px var(--header-shadow);
    border-bottom: 1px solid var(--border-color);
    /* Garante que o posicionamento absoluto funcione dentro dele */
    position: fixed; 
}

/* BOTÃO DARK MODE (INTEGRADO NO HEADER) */
.v-dark-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    right: 70px; /* Afasta da direita para dar lugar à Busca */
    width: 40px; height: 40px;
    background: transparent;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-color);
    z-index: 100000; /* Acima de tudo no header */
}
.v-dark-btn svg { width: 22px; height: 22px; pointer-events: none; }
.v-dark-btn:hover { color: var(--primary-color); transform: translateY(-50%) scale(1.1); }

/* Ícones Alternados */
.v-icon-sun { display: none; }
.v-icon-moon { display: block; }

/* Quando Dark Mode Ativo */
html.v-dark-mode .v-icon-sun { display: block; color: #FFD700; }
html.v-dark-mode .v-icon-moon { display: none; }

/* Ajuste Mobile */
@media (max-width: 782px) {
    /* No celular, a busca costuma ficar mais apertada */
    .v-dark-btn { right: 60px; width: 35px; height: 35px; } 
    .v-dark-btn svg { width: 20px; height: 20px; }
}

/* Classes do JS Scroll */
body.nav-up .site-header { transform: translateY(-100%); }
body.nav-down .site-header { transform: translateY(0); }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* =========================================
   3. SIDEBAR & WIDGETS
   ========================================= */
.vivity-sticky-sidebar { position: sticky; top: 100px; align-self: start; height: fit-content; }
#secondary .widget, .widget-area .widget, .vivity-sticky-sidebar .widget {
    background: transparent !important; border: 0 !important;
    box-shadow: none !important; padding: 0 0 30px 0 !important;
    margin-bottom: 30px !important; color: inherit;
}
.widget-title, .widget h4 {
    font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 20px; padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block; color: var(--text-color); font-weight: 800;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; }
.widget ul li a { text-decoration: none; color: var(--text-color); opacity: 0.8; transition: 0.2s; font-weight: 500; }
.widget ul li a:hover { opacity: 1; padding-left: 5px; }

/* =========================================
   4. ALERTAS (URGENTE / ATUALIZAÇÃO)
   ========================================= */
.v-alert-badge {
    display: inline-block; padding: 3px 6px; border-radius: 4px;
    font-size: 0.75em; font-weight: 800; text-transform: uppercase;
    color: #fff; margin-right: 6px; vertical-align: middle; line-height: 1; letter-spacing: 0.5px;
}
.v-alert-badge.urgente { background-color: #dc3545; animation: v-pulse 1.5s infinite; }
.v-alert-badge.atualizacao { background-color: #0d6efd; }
.v-alert-badge.cuidado { background-color: #ffc107; color: #000; }
.v-alert-badge.exclusivo { background-color: #6f42c1; }
@keyframes v-pulse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } }

/* =========================================
   5. CONTENT ENHANCER (SEO & UX)
   ========================================= */
.v-read-time { font-size: 0.85rem; color: var(--text-color); opacity: 0.7; background: var(--border-color); padding: 4px 10px; border-radius: 4px; display: inline-flex; align-items: center; margin-left: 15px; }

/* Leia Também */
.v-inline-related { margin: 30px 0; padding: 20px; border-left: 5px solid var(--primary-color); background: var(--bg-panel); border: 1px solid var(--border-color); }
.v-inline-label { display: block; font-weight: 800; text-transform: uppercase; font-size: 0.75rem; opacity: 0.7; margin-bottom: 5px; }
.v-inline-link { font-size: 1.2rem; font-weight: 700; text-decoration: none; color: var(--text-color); line-height: 1.3; }
.v-inline-link:hover { text-decoration: underline; opacity: 0.8; }

/* Sumário (TOC) */
.v-toc-container { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; margin-bottom: 30px; }
.v-toc-header { font-weight: 800; font-size: 1.1rem; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; color: var(--text-color); }
.v-toc-toggle { font-size: 0.8rem; color: #0d6efd; cursor: pointer; font-weight: 600; }
.v-toc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.v-toc-list li { margin-bottom: 8px; padding-left: 15px; position: relative; }
.v-toc-list li::before { content: '›'; position: absolute; left: 0; color: var(--text-color); opacity: 0.5; font-weight: bold; }
.v-toc-list a { text-decoration: none; color: var(--text-color); font-size: 0.95rem; border-bottom: 1px solid transparent; transition: 0.2s; }
.v-toc-list a:hover { border-bottom-color: var(--text-color); }

/* =========================================
   6. HEADER STICKY CONTEXTUAL (BARRA EXTRA)
   ========================================= */
.v-sticky-bar {
    position: fixed; top: -90px; left: 0; width: 100%; height: 60px;
    background: var(--bg-panel); box-shadow: 0 2px 10px var(--header-shadow);
    z-index: 99990; transition: top 0.3s ease-in-out;
    display: flex; flex-direction: column;
}
.v-sticky-bar.visible { top: 0; }
.v-sticky-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 20px; max-width: 1200px; margin: 0 auto; width: 100%; }
.v-sticky-logo img { height: 35px; width: auto; }
.v-sticky-logo span { font-weight: 800; font-size: 1.2rem; color: var(--primary-color); }
.v-sticky-context { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-left: 20px; overflow: hidden; }
.v-sticky-title { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 600px; color: var(--text-color); font-weight: 700; }
.v-sticky-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; }
.v-sticky-nav a { text-decoration: none; color: var(--text-color); opacity: 0.8; font-weight: 600; font-size: 0.9rem; }
.v-sticky-nav a:hover { color: var(--primary-color); opacity: 1; }
.v-sticky-share { color: var(--text-color); display: flex; align-items: center; opacity: 0.7; }
.v-sticky-share:hover { color: #25D366; opacity: 1; }
.v-read-progress { width: 100%; height: 3px; background: transparent; }
.v-read-bar { width: 0%; height: 100%; background: var(--primary-color); transition: width 0.1s; }

/* =========================================
   7. MARCA-TEXTO (ANIMADO)
   ========================================= */
.v-marker {
    background-image: linear-gradient(to top, #fff200 40%, transparent 40%);
    background-position: 0% 95%; background-repeat: no-repeat;
    background-size: 0% 90%;
    color: #000;
    font-weight: 700; padding: 0 3px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
    transition: background-size 2s cubic-bezier(0.25, 1, 0.5, 1);
}
.v-marker.marked { background-size: 100% 90%; }

/* =========================================
   8. BIBLIOTECA DE ESTILOS (20 MODELOS)
   ========================================= */
.v-title-box { position: relative; margin-bottom: 40px; width: 100%; }
.v-title-box h1 { margin: 0; line-height: 1.2; color: var(--text-color); font-weight: 800; text-transform: uppercase; }
.v-title-box .v-archive-desc { margin-top: 10px; font-size: 1.1rem; color: var(--text-color); opacity: 0.8; font-weight: 400; }

.v-cat-label {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; display: inline-block; margin-bottom: 8px;
    line-height: 1; text-decoration: none; transition: 0.2s;
    color: var(--primary-color);
}
.v-cat-label:hover { opacity: 0.8; }

/* MODELOS (Aplicam em .v-style-mX) */
/* M1 */ .v-style-m1 { text-align: left; } .v-style-m1 .v-cat-label { color: var(--text-color); opacity: 0.7; }
/* M2 */ .v-style-m2 { border-bottom: 1px solid var(--border-color); padding-bottom: 10px; } .v-style-m2 h1 { border-bottom: 4px solid var(--primary-color); display: inline-block; margin-bottom: -14px; } .v-style-m2 .v-cat-label { border-bottom: 2px solid var(--primary-color); padding-bottom: 2px; color: var(--text-color); }
/* M3 */ .v-style-m3 { border-left: 5px solid var(--primary-color); padding-left: 20px; text-align: left; } .v-style-m3 .v-cat-label { border-left: 3px solid var(--primary-color); padding-left: 8px; color: var(--text-color); }
/* M4 */ .v-style-m4 { text-align: center; } .v-style-m4 h1:after { content:''; display:block; width:60px; height:4px; background:var(--primary-color); margin:15px auto 0; } .v-style-m4 .v-cat-label { display: table; margin: 0 auto 10px; } .v-style-m4 .v-cat-label:after { content:''; display:block; width:100%; height:2px; background:var(--primary-color); margin-top:3px; }
/* M5 */ .v-style-m5 { background:var(--primary-color); padding:30px; border-radius:8px; text-align:center; } .v-style-m5 h1 { color:#000!important; } .v-style-m5 .v-archive-desc { color:rgba(0,0,0,0.7); } .v-style-m5 .v-cat-label { background:var(--primary-color); color:#000; padding:4px 10px; border-radius:3px; }
/* M6 */ .v-style-m6 h1 { display:flex; align-items:center; gap:20px; justify-content:center; } .v-style-m6 h1:after, .v-style-m6 h1:before { content:''; height:2px; background:var(--border-color); flex:1; } .v-style-m6 .v-cat-label { border:1px solid var(--primary-color); color:var(--text-color); padding:3px 8px; border-radius:3px; }
/* M7 */ .v-style-m7 { border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); padding:20px 0; text-align:center; } .v-style-m7 .v-cat-label { border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:3px 0; color:var(--text-color); }
/* M8 */ .v-style-m8 h1:before, .v-style-m8 .v-cat-label:before { content:''; display:inline-block; width:15px; height:15px; background:var(--primary-color); border-radius:50%; margin-right:15px; vertical-align:middle; } .v-style-m8 .v-cat-label:before { width:8px; height:8px; margin-right:6px; } .v-style-m8 .v-cat-label { color:var(--text-color); }
/* M9 */ .v-style-m9 { text-align:center; } .v-style-m9 h1, .v-style-m9 .v-cat-label { background:var(--text-color); color:var(--bg-color); padding:10px 30px; border-radius:50px; display:inline-block; border-left:6px solid var(--primary-color); } .v-style-m9 .v-cat-label { padding:5px 12px; border-left-width:4px; }
/* M10 */ .v-style-m10 h1, .v-style-m10 .v-cat-label { text-shadow:4px 4px 0px rgba(0,0,0,0.1); color:var(--text-color); } .v-style-m10 h1 { font-size:4rem; } .v-style-m10 .v-cat-label { text-shadow:2px 2px 0px rgba(0,0,0,0.1); }
/* M11 */ .v-style-m11 h1:before, .v-style-m11 .v-cat-label:before { content:''; display:inline-block; width:15px; height:15px; background:var(--primary-color); margin-right:15px; vertical-align:middle; } .v-style-m11 .v-cat-label:before { width:8px; height:8px; margin-right:6px; } .v-style-m11 .v-cat-label { color:var(--text-color); }
/* M12 */ .v-style-m12 h1:before, .v-style-m12 .v-cat-label:before { content:'+ '; color:var(--primary-color); font-weight:900; } .v-style-m12 .v-cat-label { color:var(--text-color); }
/* M13 */ .v-style-m13 h1:before, .v-style-m13 .v-cat-label:before { content:''; display:inline-block; width:6px; height:0.8em; background:var(--primary-color); margin-right:15px; vertical-align:middle; } .v-style-m13 .v-cat-label:before { width:3px; margin-right:8px; } .v-style-m13 .v-cat-label { color:var(--text-color); }
/* M14 */ .v-style-m14 { text-align:center; } .v-style-m14 h1:before, .v-style-m14 .v-cat-label:before { content:'// '; color:var(--primary-color); font-weight:900; letter-spacing:-2px; } .v-style-m14 .v-cat-label { color:var(--text-color); opacity:0.7; }
/* M15 */ .v-style-m15 h1:before, .v-style-m15 .v-cat-label:before { content:'* '; color:var(--primary-color); font-size:1.5em; vertical-align:middle; line-height:0; position:relative; top:8px; } .v-style-m15 .v-cat-label { color:var(--text-color); }
/* M16 */ .v-style-m16 h1:before, .v-style-m16 .v-cat-label:before { content:'#'; color:var(--primary-color); margin-right:5px; font-weight:900; } .v-style-m16 .v-cat-label { color:var(--text-color); opacity:0.7; }
/* M17 */ .v-style-m17 h1:before, .v-style-m17 .v-cat-label:before { content:'» '; color:var(--primary-color); font-weight:900; } .v-style-m17 .v-cat-label { color:var(--text-color); }
/* M18 */ .v-style-m18 { text-align:center; } .v-style-m18 h1:before, .v-style-m18 .v-cat-label:before { content:'[ '; color:#ccc; } .v-style-m18 h1:after, .v-style-m18 .v-cat-label:after { content:' ]'; color:#ccc; } .v-style-m18 .v-cat-label { color:var(--text-color); }
/* M19 */ .v-style-m19 { text-align:center; } .v-style-m19 h1 { display:inline-block; padding-top:25px; position:relative; } .v-style-m19 h1:before { content:''; position:absolute; top:0; width:60px; height:5px; background:var(--primary-color); left:50%; transform:translateX(-50%); } .v-style-m19 .v-cat-label { padding-top:5px; border-top:3px solid var(--primary-color); color:var(--text-color); }
/* M20 */ .v-style-m20 h1:after, .v-style-m20 .v-cat-label:after { content:'.'; font-size:1.5em; line-height:0; color:var(--primary-color); font-weight:900; } .v-style-m20 .v-cat-label { background:var(--border-color); color:var(--text-color); padding:4px 10px; border-radius:4px; border-left:3px solid var(--primary-color); }

/* =========================================
   ÍCONES DO MENU (APP STYLE)
   ========================================= */
.icon-home a, .icon-play a, .icon-sport a, .icon-game a, .icon-mic a, .icon-pol a {
    display: flex !important;
    flex-direction: column; 
    align-items: center; justify-content: center;
    line-height: 1.2 !important;
    font-size: 10px !important; 
    font-weight: 700 !important;
    text-transform: uppercase;
    padding: 5px !important;
    color: var(--text-color) !important;
}

/* Espaço do ícone */
.icon-home a::before, .icon-play a::before, .icon-sport a::before, 
.icon-game a::before, .icon-mic a::before, .icon-pol a::before {
    content: ''; display: block;
    width: 24px; height: 24px; margin-bottom: 4px;
    background-color: currentColor; 
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}

/* Definição SVGs */
.icon-home a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>'); }
.icon-play a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>'); }
.icon-sport a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,20C7.59,20 4,16.41 4,12C4,11.71 4.02,11.42 4.05,11.14C6.41,10.09 8.28,8.16 9.26,5.77C11.07,8.33 14.05,10 17.42,10C18.2,10 18.95,9.91 19.67,9.74C19.88,10.45 20,11.21 20,12C20,16.41 16.41,20 12,20Z"/></svg>'); }
.icon-game a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21,6H3C1.9,6 1,6.9 1,8V16C1,17.1 1.9,18 3,18H21C22.1,18 23,17.1 23,16V8C23,6.9 22.1,6 21,6M6,13C5.45,13 5,12.55 5,12C5,11.45 5.45,11 6,11C6.55,11 7,11.45 7,12C7,12.55 6.55,13 6,13M9,10H10V11H11V12H10V13H9V12H8V11H9V10M17.5,13C16.67,13 16,12.33 16,11.5C16,10.67 16.67,10 17.5,10C18.33,10 19,10.67 19,11.5C19,12.33 18.33,13 17.5,13M14.5,13C13.67,13 13,12.33 13,11.5C13,10.67 13.67,10 14.5,10C15.33,10 16,10.67 16,11.5C16,12.33 15.33,13 14.5,13Z"/></svg>'); }
.icon-mic a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/><path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>'); }
.icon-pol a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10z"/></svg>'); }