/* Ritorna Extra CSS — Otimizado, Organizado e Comentado
   Este arquivo contém customizações visuais provenientes de Aparência > Personalizar.
   Agora organizado por seções, com comentários claros e pequenas correções.
   Use este arquivo para suas personalizações adicionais.
   Ele já é enfileirado pelo functions.php do child theme.
   Revisão completa linha a linha.
   Ajustes semânticos e boas práticas.
   Fallback de fontes.
   Preparado para preload da fonte Kill.
   Customizações visuais específicas do tema Ritorna (Child).
   Aplicado após o style.css e substitui estilos do Apex.
   Seguro, otimizado e organizado por seções.
   Título do blog em duas linhas com cores reagentes no mouse over.
   Inclui a dinâmica do modo claro e escuro do tema.
*/

/* ============================================================
   1. FONTES PERSONALIZADAS
   ============================================================ */

/* Importa Raleway (Google Fonts) — usada em títulos, menus e widgets */
@import url('https://fonts.googleapis.com/css?family=Raleway:700,900&display=swap');

/* Fonte Kill usada no título principal — agora com caminho correto no child theme */
@font-face {
    font-family: 'kill';
    src: url('fonts/kill.woff2') format('woff2'),
         url('fonts/kill.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   2. ESTILOS GERAIS DO SITE
   ============================================================ */

body {
    background-color: #F5F5F5;
}

/* ============================================================
   3. TÍTULO DO SITE
   ============================================================ */

.site-title {
    font-family: 'kill', sans-serif;
    font-size: 5.3em;
    letter-spacing: 0em;
    margin-top: -30px;
    margin-bottom: -5px;
    text-transform: uppercase;
    text-align: center;
}

/* ============================================================
   4. MENU PRINCIPAL
   ============================================================ */

.menu-primary {
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    color: #000;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}

/* Mantém alinhamento com o campo de busca */
.menu-primary-container {
    margin: 0 auto;
    max-height: 0;
}

/* ============================================================
   5. CORES POR ITEM DO MENU (CATEGORIAS TEMÁTICAS)
   ============================================================ */

/* Azul Royal */
.menu-item-1159 a {
    border-bottom: 5px solid #4169E1;
}
.menu-item-1159 a:hover {
    border-bottom: none;
}

/* Laranja Forte */
.menu-item-1160 a {
    border-bottom: 5px solid #FF4500;
}
.menu-item-1160 a:hover {
    border-bottom: none;
}

/* Verde Oliva */
.menu-item-1164 a {
    border-bottom: 5px solid #6B8E23;
}
.menu-item-1164 a:hover {
    border-bottom: none;
}

/* Ouro */
.menu-item-1161 a {
    border-bottom: 5px solid #DAA520;
}
.menu-item-1161 a:hover {
    border-bottom: none;
}

/* Roxo Escuro */
.menu-item-1519 a {
    border-bottom: 5px solid #9400D3;
}
.menu-item-1519 a:hover {
    border-bottom: none;
}

/* Magenta Profundo */
.menu-item-1569 a {
    border-bottom: 5px solid #b300b3;
}
.menu-item-1569 a:hover {
    border-bottom: none;
}

/* ============================================================
   6. WIDGETS (SIDEBAR)
   ============================================================ */

.widget-title {
    font-family: 'Raleway', sans-serif;
    font-size: 1.1em;
    color: #808080;
    font-weight: 400;
    letter-spacing: -0.05em;
}

/* estilo de texto/links dentro da sidebar */
.widget-text {
    display: block;
    font-family: "Open Sans", sans-serif;
    color: var(--sidebar-text);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.5;
}

/* Barras inferiores */
.widget-1 .widget-title { border-bottom: 5px solid #6495ED; width: 6.6em; }
.widget-2 .widget-title { border-bottom: 5px solid #6495ED; width: 3.5em; }
.widget-3 .widget-title { border-bottom: 5px solid #6495ED; width: 6.8em; }
.widget-4 .widget-title { border-bottom: 5px solid #6495ED; width: 6.3em; }
.widget-5 .widget-title { border-bottom: 5px solid #6495ED; width: 9em;   }
.widget-6 .widget-title { border-bottom: 5px solid #6495ED; width: 2.6em; }
.widget-7 .widget-title { border-bottom: 5px solid #6495ED; width: 3.7em; }
.widget-8 .widget-title { border-bottom: 5px solid #6495ED; width: 1.2em; }
.widget-9 .widget-title { border-bottom: 5px solid #6495ED; width: 5em;   }
.widget-10 .widget-title { border-bottom: 5px solid #6495ED; width: 3.1em;   }

/* ============================================================
   7. POSTS — LISTAGEM E SINGLE
   ============================================================ */

.post-title {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    letter-spacing: -0.07em;
}

.post-featured-image {
    text-align: center;
}

.post-summary,
.post-content {
    text-align: justify;
    font-size: 0.9em;
}

/* Links dentro do conteúdo
.post-content a {
    color: #ffffff;
    background-color: #808080;
    padding: 0 4px;
}  DESATIVADO - Backg Links dos Posts * /

/* ============================================================
   8. ÍCONES / DECORAÇÕES
   ============================================================ */

.fa-icons-1 {
    display: inline-block;
    float: none;
    font-size: 2em;
    text-align: center;
    letter-spacing: 0.10em;
    list-style-type: none;
}

/* ============================================================
   9. BUSCA NO CABEÇALHO
   ============================================================ */

.site-header .search-form-container {
    position: absolute;
    top: 8px;
    right: 1.5em;
}

/* ============================================================
   10. METADADOS DO POST
   ============================================================ */

.comments-link {
    font-size: 0.95em;
    line-height: 1.5;
}

/* Fix leve para desktop — não interfere no mobile */
@media (min-width: 801px) {
    .menu-primary-container {
        max-height: none !important;
    }
}

/* ============================================================
   11. CONTÊINER DO LOGO
   Mantém as duas palavras alinhadas em duas linhas.
============================================================ */
.stacked-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 0.7;     /* espaço vertical entre as palavras */
    gap: -28; /* mantém o espaçamento vertical personalizado */
}

/* ============================================================
   11.1 ESTILO BASE
   Ambas as palavras têm o mesmo tamanho e são links.
============================================================ */
.stacked-logo__line {
    font-size: clamp(72px, 10vw, 140px);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        transform 0.35s ease,
        opacity 0.25s ease;
}

/* ============================================================
   11.2 LINHA SUPERIOR (“sete”) – FORÇANDO COR EXCLUSIVA
============================================================ */
.stacked-logo .stacked-logo__line--top {
    color: var(--logosete-static);
}

.stacked-logo .stacked-logo__line--top:hover {
    color: var(--logosete-hover);
    transform: scale(1.05);
}

/* ============================================================
   11.3 LINHA INFERIOR (“ventos”) – FORÇANDO COR EXCLUSIVA
============================================================ */
.stacked-logo .stacked-logo__line--bottom {
    color: var(--logoventos-static);
}

.stacked-logo .stacked-logo__line--bottom:hover {
    color: var(--logoventos-hover);
    transform: scale(1.05);
}

/* ============================================================
   11.4 OPCIONAL — efeito conjunto no contêiner (se desejar)
============================================================ */
/*
.stacked-logo:hover .stacked-logo__line {
    opacity: 0.95;
}
*/

/* ============================================================
   12. Estilo do shortcode Flag / Spotlight
   ============================================================ */

   .post-content .ritorna-flag-link {
    background-color: var(--flag-bg);
    color: var(--flag-text);
    padding: 0 4px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

/* Hover apenas quando for link */
.post-content a.ritorna-flag-link:hover,
.post-content a.ritorna-flag-link:focus {
    background-color: var(--flag-hover);
}

/* Remove o underline do link */
.post-content a.ritorna-flag-link,
.post-content a.ritorna-flag-link:hover,
.post-content a.ritorna-flag-link:focus {
    text-decoration: none;
}

/* Ícone */
.post-content .ritorna-icon {
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    color: currentColor;
    font-size: 0.95em;
}

/* ============================================================
   Mapeamento semântico – Font Awesome 6
   ============================================================ */

/* Type: Música */
.post-content .type-music .ritorna-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f001";
}

/* Type: Filme */
.post-content .type-film .ritorna-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f008";
}

/* Type: Legenda */
.post-content .type-subs .ritorna-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f15c";
}

/* Type: Fotos / Galerias */
.post-content .type-gallery .ritorna-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f302";
}

/* Type: Spotlight / Destaque */
.post-content .type-spotlight .ritorna-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f005";
}

/* Type: Badge - New */
.post-content .type-new .ritorna-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\e0b7"; /* bolt */
}

.post-content .type-new {
    background-color: var(--down-hover);
}

/* Tone: Available (conteúdo disponível, não novo) */
.post-content .tone-available {
    background-color: rgba(0, 153, 102, 0.18);
    color: currentColor;
    font-weight: 500;
}

/* Ícone do tone AVAILABLE */
.post-content .tone-available .ritorna-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f058"; /* circle-check */
}

/* Opcional: remover o ícone do AVAILABLE (desativado) */
/*
.post-content .tone-available .ritorna-icon {
    display: none;
}
*/

/* Tone: Note (Informativo e discreto) (DESATIVADO)*/
/*
.post-content .tone-note {
    background-color: rgba(128, 128, 128, 0.15);
    color: currentColor;
    font-weight: 500;
}

/** Ícone do tone NOTE (DESATIVADO)**/
/*
.post-content .tone-note .ritorna-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f05a"; /* circle-info */
}

/* Opcional: remover o ícone do NOTE (DESATIVADO) */
/*
.post-content .tone-note .ritorna-icon {
    display: none;
}
*/

/* ============================================================
   13. MODOS CLARO E ESCURO
   ============================================================ */

/* 13.1 Botão flutante dark/light mode */
.dark-toggle-btn {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary); /* acompanha o tema */
    color: var(--text-main);         /* acompanha o tema */
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 99999; /* sempre acima de tudo */
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.dark-toggle-btn:hover {
    transform: scale(1.08);
}

/* 13.2 VARIÁVEIS DE COR — TEMA CLARO */
/* (você pode personalizar as cores aqui) */
:root {
    --bg-main: #f5f5f5;        /* fundo global (claro) */
    --bg-secondary: #f1f1f1;   /* usado em elementos menores */
    --text-main: #111111;      /* texto primário */
    --text-secondary: #505050; /* texto secundário */
    --link-color: #0d4fb9;     /* cor padrão dos links */
    --link-visited: #9900ff;   /* links já visitados */
    --link-hover: #4d9900;     /* links em hover */
    --border-color: #cfcfcf;   /* bordas sutis */
    --special-titles: #111111;   /* títulos especiais */

    --boxespec-main: #d9d9d9;      /* box especiais como tags por ex */
    --espec-main: #1a1a1a;         /* links dos boxes especiais */
    --boxespec-hover: #0066ff;     /* boxes especiais em hover */
    --espec-hover: #ffff66;        /* links especiais em hover */

    --pagn-currentbox: #333333;    /* box link pagn atual */
    --pagn-currentborder: #dddddd; /* borda box pagn atual */
    --pagn-currentlink: #ffffff;   /* cor texto pagn atual */

    --pagn-mainlink: #000000;      /* cor texto pagn */
    --pagn-nexthover: #4d9900;     /* cor link pagn hover */

    --pagn-nextbox: #dddddd;       /* box link pagn prox */
    --pagn-nextborder: #a6a6a6;    /* borda box pagn prox */
    --pagn-nextlink: #0066ff;      /* cor link pagn prox */

    --logosete-static:  #0f5bd7;  /* azul da linha superior (modo claro) */
    --logosete-hover:   #0d0d0d;  /* roxo ao passar o mouse (modo claro) */

    --logoventos-static: #4d9900; /* verde da linha inferior (modo claro) */
    --logoventos-hover:  #1e1e1e; /* vermelho ao passar o mouse (modo claro) */

    --menuprimary-static:  #0d0d0d; /* top menu estático (modo claro) */
    --menuprimary-reaction:  #404040; /* top menu reativo (modo claro) */

    --down-bg: #0d4fb9;       /* fundo para links download */
    --down-text: #f1f1f1;    /* texto links download */
    --down-hover: #4d9900;    /* fundo hover / active */

    --flag-bg: #0d4fb9;       /* fundo para flag */
    --flag-text: #f1f1f1;    /* texto flag */
    --flag-hover: #4d9900;    /* fundo hover / active */

    --table-bg-header: #e6e6e6;      /* tabelas: header */
    --table-bg-row: transparent;       /* tabelas: linha 1 efeito zebra */
    --table-bg-row-alt: #f1f1f1;     /* tabelas: linha 2 efeito zebra */
    --table-bg-hover: #e0e0e0;      /* tabelas: hover das linhas */

    --sidebar-text: #1e1e1e;   /* texto sidebar tema claro */

    --svlz-audiobackg: #1a1a1a;   /* backg box plugin svlz */
    --svlz-audiobuttonbackg: #6cb4ff;   /* backg box plugin svlz */
    --svlz-audiometa: #f1f1f1;   /* cor texto plugin svlz */
    --svlz-servicelogo: #f1f1f1;   /* cor logo plugin svlz */
}

/* 13.3 VARIÁVEIS DE COR — TEMA ESCURO */
/* Só alteramos as variáveis; o resto do tema muda sozinho. */
html.dark {
    --bg-main: #0d0d0d;        /* fundo global (escuro) */
    --bg-secondary: #1e1e1e;   /* usado no botão e mínimos detalhes */
    --text-main: #e0e0e0;      /* texto claro */
    --text-secondary: #bcbcbc; /* texto secundário */
    --link-color: #6cb4ff;     /* cor padrão dos links */
    --link-visited: #ff0099;   /* links já visitados */
    --link-hover: #00cc66;     /* links em hover */
    --border-color: #333333;   /* bordas discretas no escuro */
    --special-titles: #dddddd;   /* títulos especiais (escuro) */

    --boxespec-main: #404040;      /* box especiais como tags por ex */
    --espec-main: #f2f2f2;         /* links dos boxes especiais */
    --boxespec-hover: #ffff66;     /* boxes especiais em hover */
    --espec-hover: #0066ff;        /* links especiais em hover */

    --pagn-currentbox: #dddddd;    /* box link pagn atual escuro */
    --pagn-currentborder: #333333; /* borda box pagn atual escuro */
    --pagn-currentlink: #000000;   /* cor texto pagn atual escuro */

    --pagn-mainlink: #ffffff;      /* cor texto pagn escuro */
    --pagn-nexthover: #00cc66;     /* cor link pagn hover escuro */

    --pagn-nextbox: #333333;       /* box link pagn prox escuro */
    --pagn-nextborder: #666666;    /* borda box pagn prox escuro */
    --pagn-nextlink: #6cb4ff;      /* cor link pagn prox escuro */

    --logosete-static:  #33c2ff;  /* azul claro (modo escuro) */
    --logosete-hover:   #f5f5f5;  /* rosa neon no hover (modo escuro) */

    --logoventos-static: #00e673; /* verde brilhante (modo escuro) */
    --logoventos-hover:  #f1f1f1; /* verde-amarelado no hover (modo escuro) */

    --menuprimary-static:  #f5f5f5; /* top menu estático (modo escuro) */
    --menuprimary-reaction:  #bfbfbf; /* top menu reativo (modo escuro) */

    --down-bg: #6cb4ff;       /* fundo para links download modo escuro */
    --down-text: #1e1e1e;    /* texto links download modo escuro */
    --down-hover: #00cc66;    /* fundo hover modo escuro / active */

    --flag-bg: #6cb4ff;       /* fundo para flag modo escuro */
    --flag-text: #1e1e1e;    /* texto flag modo escuro */
    --flag-hover: #00cc66;    /* fundo hover modo escuro / active */

    --table-bg-header: #1e1e1e;      /* tabelas: header, modo escuro */
    --table-bg-row: transparent;       /* tabelas: linha 1 efeito zebra, modo escuro */
    --table-bg-row-alt: #171717;     /* tabelas: linha 2 efeito zebra, modo escuro */
    --table-bg-hover: #262626;      /* tabelas: hover das linhas, modo escuro */

    --sidebar-text: #f1f1f1;   /* texto sidebar tema escuro */

    --svlz-audiobackg: #f2f2f2;   /* backg box plugin svlz (tema escuro) */
    --svlz-audiobuttonbackg: #6cb0ff;   /* backg box plugin svlz (tema escuro) */
    --svlz-audiometa: #1e1e1e;   /* cor texto plugin svlz (tema escuro) */
    --svlz-servicelogo: #1e1e1e;   /* cor logo plugin svlz (tema escuro) */
}

/* 13.4 APLICAÇÃO GLOBAL DO BACKGROUND E TEXTO */
/* O body é o ÚNICO responsável pela cor de fundo do site. */
body {
    background: var(--bg-main) !important;
    color: var(--text-main);
}

/* 13.5 REMOÇÃO COMPLETA DE FUNDOS INTERNOS */
/* (Evita "caixas" no menu, posts, sidebar, widgets etc.) */
header,
footer,
nav,
article,
section,
aside,
.widget,
.entry-content,
#page,
#content,
.comment,
.site-header,
.site-footer {
    background: transparent !important;
}

/* 13.6 APLICAÇÃO DE BORDAS (sem fundo) */
hr,
.border,
.widget,
.entry-content,
.comment,
aside {
    border-color: var(--border-color) !important;
}

/*************************************************
    14. Customizações Gerais do tema escuro
 *************************************************/

/* Títulos posts, comentários, sidebar */
.post-title {
    color: var(--text-main) !important;
}

.widget-title {
    color: var(--text-main) !important;
}

.comment-reply-title {
    color: var(--text-main) !important;
}

/* Títulos H3 (ex. compartilhamento) */
h3 {
    color: var(--special-titles);

}

/* Margem esquerda do bloco de citações */
blockquote {
  border-left: solid 3px var(--special-titles);
}

/* Links e interações */
a:link {
    color: var(--link-color);
}

a:visited {
    color: var(--link-visited);
}

a:hover {
    color: var(--link-hover);
}

/* Tags do post */
.post-tags a:link {
    background: var(--boxespec-main);
    color: var(--espec-main);
}

.post-tags a:hover {
    background: var(--boxespec-hover);
    color: var(--espec-hover);
}

/* Paginação de post e do blog */
.further-reading a:hover,
.further-reading a:active,
.further-reading a:focus {
    color: #4d9900;
}

.pagination {
    text-align: center;
    color: var(--pagn-mainlink);
    margin: 3em 0;
}

.pagination .current {
    background-color: var(--pagn-currentbox);
    color: var(--pagn-currentlink);
    border: 1px solid var(--pagn-currentborder);
    border-radius: .25rem;
    padding: .25rem 1rem;
}

.pagination a:link,
.pagination a:visited {
    background-color: var(--pagn-nextbox);
    border: 1px solid var(--pagn-nextborder);
    color: var(--pagn-nextlink);
    border-radius: .25rem;
    padding: .25rem 1rem;
}

.pagination a:hover {
    color: var(--pagn-nexthover);
}

/* Top menu */
.menu-primary a {
    color: var(--menuprimary-static);
}

.menu-primary a:link, .menu-primary a:visited, .menu-primary a:hover, .menu-primary a:active, .menu-primary a:focus {
    color: var(--menuprimary-reaction);
}

/* ============================================================
   15. TABLEPRESS — Integração forçada com CSS do Ritorna
   ============================================================ */

/* Base */
.tablepress {
    background: transparent !important;
    color: var(--text-main);
    border-collapse: collapse;
    width: 100%;
}

/* Cabeçalho */
.tablepress thead th {
    background-color: var(--table-bg-header) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 600;
}

/* Células */
.tablepress tbody td {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

/* Zebra — FORÇANDO contra o CSS interno */
.tablepress tbody tr.odd td {
    background-color: var(--table-bg-row) !important;
}

.tablepress tbody tr.even td {
    background-color: var(--table-bg-row-alt) !important;
}

/* Hover — FORÇANDO */
.tablepress tbody tr:hover td {
    background-color: var(--table-bg-hover) !important;
}

/* Links da primeira coluna */
.tablepress tbody td:first-child a {
    color: var(--link-color) !important;
    font-weight: 500;
    text-decoration: none;
}

.tablepress tbody td:first-child a:hover,
.tablepress tbody td:first-child a:focus {
    color: var(--link-hover) !important;
    text-decoration: underline;
}

/* =========================================================
   16. Sete Ventos Sharing Module
   Estilo sóbrio, alinhado aos links do blog
   ========================================================= */

/* Separador discreto */
.svsm-share {
	display: flex;
	gap: 14px;
	margin-top: 26px;
	padding-top: 14px;
	border-top: 1px solid var(--border-color, #ddd);
	align-items: center;
}

/* Ícones como links simples */
.svsm-share a,
.svsm-share button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;

	/* remove underline em TODOS os métodos possíveis */
	text-decoration: none !important;
	border-bottom: none !important;
	box-shadow: none !important;

	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Estados interativos sem underline */
.svsm-share a:hover,
.svsm-share a:focus,
.svsm-share a:active,
.svsm-share button:hover,
.svsm-share button:focus,
.svsm-share button:active {
	text-decoration: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	color: inherit; /* mantém a cor padrão do tema */
}

/* Hover sutil, editorial */
.svsm-share a:hover,
.svsm-share button:hover {
	opacity: 0.7;
	transform: translateY(-1px);
}

/* Feedback ao copiar link */
.svsm-copy.copied {
	opacity: 1;
}

/* Tooltip "Link copiado" */
.svsm-copy {
	position: relative;
}

/* Tooltip escondida por padrão */
.svsm-copy::after {
	content: "Link copiado";
	position: absolute;
	bottom: 140%;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-size: 0.75rem;
	padding: 0.35rem 0.6rem;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 10;
}

/* Tooltip visível após copiar */
.svsm-copy.copied::after {
	opacity: 1;
	transform: translateX(-50%) translateY(-4px);
}

/* Tema escuro – mantém consistente */
[data-theme="dark"] .svsm-copy::after {
	background: rgba(255, 255, 255, 0.9);
	color: #000;
}

/* ============================================================
   17.1 DARK MODE TOGGLE — BLINDAGEM TOTAL CONTRA CSS HOSTIL
   Garante visibilidade mesmo com TablePress, plugins e wrappers
   ============================================================ */

/*
   Estratégia:
   - isolation: cria um novo contexto de empilhamento
   - position: fixed + inset seguro
   - transform: none → evita viewport falso
   - pointer-events explícito
   - z-index absurdamente alto (mas controlado)
*/

.dark-toggle-btn {
    position: fixed !important;

    /* Posicionamento absoluto em relação ao viewport real */
    bottom: 22px;
    right: 22px;

    /* Blindagem estrutural */
    isolation: isolate;
    transform: none !important;
    filter: none !important;
    contain: none !important;

    /* Garante interação */
    pointer-events: auto;
    visibility: visible;
    opacity: 1;

    /* Acima de QUALQUER coisa do tema/plugins */
    z-index: 2147483647;

    /* Segurança visual */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   17.2 DARK MODE TOGGLE — RITORNA
   Estrutura blindada + visual elegante (padrão)
   ------------------------------------------------------------
   • O visual elegante (glass) está ATIVO
   • O visual minimal está logo abaixo, COMENTADO
   • Para trocar: basta comentar/descomentar blocos
   ============================================================ */


/* ============================================================
   17.3 ESTRUTURA BASE (NÃO MEXER)
   Responsável por posição, clique, empilhamento e funcionamento
   ============================================================ */

   .dark-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    border: none;
    border-radius: 50%;

    z-index: 99999;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease,
        opacity 0.25s ease;
}

.dark-toggle-btn:hover {
    transform: scale(1.08);
}

/* ============================================================
   17.4 VISUAL A — ELEGANTE / PREMIUM (ATIVO)
   Botão flutuante com efeito "glass"
   ============================================================ */

.dark-toggle-btn {
    width: 54px;
    height: 54px;

    /* Fundo translúcido */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);

    /* Ícone */
    color: #ffffff;
    font-size: 22px;

    /* Sombra sofisticada */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* Ajuste específico no tema escuro */
html.dark .dark-toggle-btn {
    background: rgba(0, 0, 0, 0.28);
    color: #e6e6e6;
}

/* ============================================================
   17.4.1 CONTROLE DOS ÍCONES (Lua / Sol)
   ============================================================ */

html:not(.dark) .dark-toggle-btn .fa-moon { display: block; }
html:not(.dark) .dark-toggle-btn .fa-sun  { display: none;  }

html.dark .dark-toggle-btn .fa-moon { display: none; }
html.dark .dark-toggle-btn .fa-sun  { display: block; }


/* ============================================================
   17.4 VISUAL B — MINIMAL / DISCRETO (FALLBACK)
   ------------------------------------------------------------
   Para usar este estilo:
   • Comente TODO o bloco 15.2 acima
   • Descomente este bloco
   ============================================================ */

/*
.dark-toggle-btn {
    width: 48px;
    height: 48px;

    background: var(--bg-secondary);
    color: var(--text-main);

    font-size: 20px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

html.dark .dark-toggle-btn {
    background: var(--bg-secondary);
    color: var(--text-main);
}
*/

/* ============================================================
   17.5 DARK MODE TOGGLE — FIX DEFINITIVO DE ÍCONE (FA6 via CSS)
   Independe do HTML legado (fa fa-moon)
   ============================================================ */

/* Garante posicionamento correto */
#dark-toggle {
    width: 48px;
    height: 48px;
    position: relative;
}

/* Esconde qualquer <i> legado (FA4/5) */
#dark-toggle i {
    display: none !important;
}

/* ÍCONE VIA CSS (Font Awesome 6) */
#dark-toggle::before {
    content: "\f186"; /* lua */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    color: var(--text-main);

    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

/* Quando o modo escuro estiver ATIVO → mostra SOL */
html.dark #dark-toggle::before {
    content: "\f185"; /* sol */
}