/*
 * Blog TranspNet - Estilos
 * Compatível com Tailwind CSS e padrão visual do site
 */

:root {
    --primary: #0c1a24;
    --cta-primary: #FF6600;
    --cta-hover: #e63803;
    --text-primary: #0a151e;
    --text-secondary: #374151;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
}

/* Tipografia de artigos */
.prose {
    color: var(--text-primary);
    max-width: 65ch;
    line-height: 1.75;
    font-size: 1.125rem;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    font-family: 'Baloo', cursive;
    color: var(--primary);
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h2 {
    font-size: 1.875rem;
}

.prose h3 {
    font-size: 1.5rem;
}

.prose h4 {
    font-size: 1.25rem;
}

.prose p {
    margin-bottom: 1.25rem;
}

.prose ul,
.prose ol {
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
    padding-left: 0.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose ul li {
    list-style-type: disc;
}

.prose ol li {
    list-style-type: decimal;
}

.prose a {
    color: var(--cta-primary);
    text-decoration: underline;
    transition: color 0.2s;
}

.prose a:hover {
    color: var(--cta-hover);
}

.prose img {
    border-radius: 0.5rem;
    margin: 2rem auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    height: auto;
}

.prose blockquote {
    border-left: 4px solid var(--cta-primary);
    padding-left: 1rem;
    font-style: italic;
    color: var(--text-secondary);
    margin: 1.5rem 0;
    background-color: #f9fafb;
    padding: 1rem;
    border-radius: 0.25rem;
}

.prose code {
    background-color: #f3f4f6;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'Courier New', monospace;
    color: #1f2937;
}

.prose pre {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.prose pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    font-size: 0.875rem;
}

.prose strong,
.prose b {
    font-weight: 700;
    color: var(--primary);
}

.prose em,
.prose i {
    font-style: italic;
}

.prose hr {
    border: 0;
    border-top: 2px solid #e5e7eb;
    margin: 2rem 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.prose th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
}

body:not(.dark-blog) .prose th {
    background-color: var(--primary);
    color: white;
}

.prose td {
    padding: 0.75rem;
}

body:not(.dark-blog) .prose td {
    border: 1px solid #e5e7eb;
}

/* Linhas alternadas - apenas para tema CLARO (não usado no blog dark) */
body:not(.dark-blog) .prose tr:nth-child(even) {
    background-color: #f9fafb;
}

/* Utility: Truncate text */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Blog cards hover effect */
article {
    transition: transform 0.2s, box-shadow 0.2s;
}

article:hover {
    transform: translateY(-4px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .prose {
        font-size: 1rem;
    }

    .prose h2 {
        font-size: 1.5rem;
    }

    .prose h3 {
        font-size: 1.25rem;
    }

    .prose h4 {
        font-size: 1.125rem;
    }

    .prose pre {
        padding: 1rem;
        font-size: 0.8rem;
    }
}

/* Loading skeleton (opcional) */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Dark theme overrides for blog posts */
.dark-blog {
    background: linear-gradient(135deg, #0c1a24 0%, #1e3a5f 100%);
    color: #ffffff;
}

.dark-blog main {
    background: transparent;
}

.dark-surface {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.dark-blog .prose {
    color: #e5e7eb;
}

.dark-blog .prose h1,
.dark-blog .prose h2,
.dark-blog .prose h3,
.dark-blog .prose h4,
.dark-blog .prose strong {
    color: #ffffff;
}

.dark-blog .prose a,
.dark-blog main a:not(.navbar-transpnet a):not(footer a) {
    color: #FF6600;
}

.dark-blog .prose a:hover,
.dark-blog main a:not(.navbar-transpnet a):not(footer a):hover {
    color: #e63803;
}

/* =============================================================================
   PROTECAO NAVBAR E FOOTER - Manter padrao do site (branco)
   ============================================================================= */
.dark-blog .navbar-transpnet a,
.dark-blog .navbar-transpnet .nav-item,
.dark-blog #navbar-container a,
.dark-blog nav.navbar-transpnet a {
    color: #ffffff !important;
}

.dark-blog .navbar-transpnet a:hover,
.dark-blog .navbar-transpnet .nav-item:hover {
    color: #ffffff !important;
}

.dark-blog #footer-container a,
.dark-blog footer a {
    color: #ffffff !important;
}

.dark-blog #footer-container a:hover,
.dark-blog footer a:hover {
    color: #FF6600 !important;
}

.dark-blog .prose code {
    color: #FF6600;
    background: rgba(255, 255, 255, 0.08);
}

.dark-blog .info-box,
.dark-blog .highlight-box,
.dark-blog .cta-box,
.dark-blog .steps .step,
.dark-blog .comparison-table th,
.dark-blog .comparison-table td,
.dark-blog .faq-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
}

.dark-blog .comparison-table th,
.dark-blog .comparison-table td {
    color: #e5e7eb;
}

.dark-blog .cta-section .cta-button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dark-blog .cta-section .cta-button h4,
.dark-blog .cta-section .cta-button p {
    color: #e5e7eb;
}

.dark-blog .cta-section .cta-button a {
    background: linear-gradient(135deg, #FF6600 0%, #FF8833 100%);
    color: #ffffff;
}

.dark-blog .tag-pill,
.dark-blog .category-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dark-blog .share-buttons a,
.dark-blog .share-section a {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Share buttons - cores específicas por rede social */
.dark-blog .share-buttons a[href*="facebook"],
.dark-blog .share-section a[href*="facebook"] {
    background: #1877F2 !important;
    color: #ffffff !important;
}

.dark-blog .share-buttons a[href*="twitter"],
.dark-blog .share-section a[href*="twitter"] {
    background: #1DA1F2 !important;
    color: #ffffff !important;
}

.dark-blog .share-buttons a[href*="linkedin"],
.dark-blog .share-section a[href*="linkedin"] {
    background: #0A66C2 !important;
    color: #ffffff !important;
}

.dark-blog .share-buttons a[href*="wa.me"],
.dark-blog .share-buttons a[href*="whatsapp"],
.dark-blog .share-section a[href*="wa.me"],
.dark-blog .share-section a[href*="whatsapp"] {
    background: #25D366 !important;
    color: #ffffff !important;
}

/* Força texto branco em botões com bg Tailwind de cores */
.dark-blog a.bg-blue-600,
.dark-blog a.bg-blue-700,
.dark-blog a.bg-sky-500,
.dark-blog a.bg-green-500,
.dark-blog a.bg-green-600,
body.dark-blog a.bg-blue-600,
body.dark-blog a.bg-blue-700,
body.dark-blog a.bg-sky-500,
body.dark-blog a.bg-green-500 {
    color: #ffffff !important;
}

/* Footer - texto branco, hover laranja (padrao do site) */
.dark-blog footer,
.dark-blog footer *,
.dark-blog #footer-container,
.dark-blog #footer-container * {
    color: #ffffff !important;
}

.dark-blog .mt-12 a.inline-block {
    background: linear-gradient(135deg, #FF6600 0%, #FF8833 100%);
    color: #ffffff;
}

.dark-blog .text-gray-900,
.dark-blog .text-gray-800,
.dark-blog .text-gray-700,
.dark-blog .text-gray-600 {
    color: #e5e7eb !important;
}

.dark-blog .bg-white,
.dark-blog .bg-gray-50,
.dark-blog .bg-gray-100,
.dark-blog .bg-blue-50,
.dark-blog .bg-blue-100,
.dark-blog .bg-green-50,
.dark-blog .bg-red-50 {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.dark-blog .border-gray-200 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-blog .prose blockquote {
    border-left-color: #FF6600;
    color: #ffffff;
}

.dark-blog .prose table {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark-blog .prose thead {
    background: rgba(255, 255, 255, 0.06);
}

.dark-blog .prose tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

/* CTA Button padrão para blog - Cores oficiais com bom contraste */
.dark-blog .btn-cta,
.dark-blog a.btn-cta,
.dark-blog .cta-primary {
    background: linear-gradient(135deg, #FF6600 0%, #FF8833 100%) !important;
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 67, 3, 0.4);
    transition: all 0.3s ease;
}

.dark-blog .btn-cta:hover,
.dark-blog a.btn-cta:hover,
.dark-blog .cta-primary:hover {
    background: linear-gradient(135deg, #e63803 0%, #FF6600 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(255, 67, 3, 0.6);
    transform: translateY(-2px);
}

/* Sobrescreve classes Tailwind de gradiente laranja para garantir cores oficiais */
.dark-blog .bg-gradient-to-r.from-orange-500,
.dark-blog [class*="from-orange-500"][class*="to-red-500"] {
    background: linear-gradient(135deg, #FF6600 0%, #FF8833 100%) !important;
}

/* =============================================================================
   REGRAS GLOBAIS DE CONTRASTE - NUNCA REMOVER
   =============================================================================
   Estas regras garantem contraste adequado em TODOS os elementos do blog.
   Se voce esta lendo isso, NUNCA use bg-[#FF6600] sem text-white.
   Preferir: style="background: var(--cta-primary)" + class="text-white"

   ATUALIZACAO 2025-12-02: Regras fortalecidas para cobrir mais casos
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SECAO 1: CORRECAO DE TEXTOS - Classes Tailwind para tema claro
   ----------------------------------------------------------------------------- */

/* Textos escuros que ficam invisiveis no dark mode */
.dark-blog .text-gray-900,
.dark-blog .text-gray-800,
.dark-blog .text-gray-700,
.dark-blog .text-gray-600,
.dark-blog [class*="text-gray-9"],
.dark-blog [class*="text-gray-8"],
.dark-blog [class*="text-gray-7"],
.dark-blog [class*="text-gray-6"] {
    color: #ffffff !important;
}

/* Titulos e headings - garantir branco */
.dark-blog h1,
.dark-blog h2,
.dark-blog h3,
.dark-blog h4,
.dark-blog h5,
.dark-blog h6,
.dark-blog .prose h1,
.dark-blog .prose h2,
.dark-blog .prose h3,
.dark-blog .prose h4 {
    color: #ffffff !important;
}

/* Paragrafos e texto de conteudo */
.dark-blog .prose p,
.dark-blog .prose li,
.dark-blog article p,
.dark-blog article li {
    color: #ffffff !important;
}

/* Strong/Bold dentro de texto */
.dark-blog .prose strong,
.dark-blog .prose b,
.dark-blog article strong,
.dark-blog article b {
    color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
   SECAO 2: CORRECAO DE BACKGROUNDS - Fundos claros que criam "ilhas"
   ----------------------------------------------------------------------------- */

/* Fundos brancos e cinzas claros */
.dark-blog .bg-white,
.dark-blog .bg-gray-50,
.dark-blog .bg-gray-100,
.dark-blog [class*="bg-white"],
.dark-blog [class*="bg-gray-5"],
.dark-blog [class*="bg-gray-1"] {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #e5e7eb !important;
}

/* Fundos coloridos claros (boxes de destaque) */
.dark-blog .bg-blue-50,
.dark-blog .bg-blue-100,
.dark-blog .bg-green-50,
.dark-blog .bg-green-100,
.dark-blog .bg-red-50,
.dark-blog .bg-red-100,
.dark-blog .bg-yellow-50,
.dark-blog .bg-yellow-100,
.dark-blog [class*="bg-blue-5"],
.dark-blog [class*="bg-green-5"],
.dark-blog [class*="bg-red-5"],
.dark-blog [class*="bg-yellow-5"] {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Texto dentro de boxes coloridos */
.dark-blog .bg-blue-50 *,
.dark-blog .bg-green-50 *,
.dark-blog .bg-red-50 *,
.dark-blog .bg-yellow-50 * {
    color: #e5e7eb !important;
}

/* Titulos de boxes - cores especificas para cada tipo */
.dark-blog .bg-blue-50 .font-bold,
.dark-blog .bg-blue-50 strong,
.dark-blog [class*="bg-blue"] .font-bold {
    color: #93C5FD !important;
}

.dark-blog .bg-green-50 .font-bold,
.dark-blog .bg-green-50 strong,
.dark-blog [class*="bg-green"] .font-bold {
    color: #25D366 !important;
}

.dark-blog .bg-red-50 .font-bold,
.dark-blog .bg-red-50 strong,
.dark-blog [class*="bg-red"] .font-bold {
    color: #FF6B6B !important;
}

/* -----------------------------------------------------------------------------
   SECAO 3: BORDAS - Corrigir bordas cinzas
   ----------------------------------------------------------------------------- */

.dark-blog .border-gray-200,
.dark-blog .border-gray-300,
.dark-blog [class*="border-gray-2"],
.dark-blog [class*="border-gray-3"] {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* -----------------------------------------------------------------------------
   SECAO 4: TABELAS - Garantir legibilidade
   ----------------------------------------------------------------------------- */

.dark-blog table,
.dark-blog .prose table {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-blog thead,
.dark-blog .prose thead {
    background: rgba(255, 255, 255, 0.06) !important;
}

.dark-blog th,
.dark-blog .prose th {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-blog td,
.dark-blog .prose td {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-blog tbody tr:nth-child(even),
.dark-blog .prose tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* -----------------------------------------------------------------------------
   SECAO 5: BOTOES E CTAs - Fundo laranja = texto branco
   ----------------------------------------------------------------------------- */

/* Forca texto branco em QUALQUER elemento com fundo laranja */
[style*="background"][style*="ff4303"],
[style*="background"][style*="FF4303"],
[style*="background-color"][style*="ff4303"],
[style*="background-color"][style*="FF4303"],
[class*="bg-[#FF6600]"],
[class*="bg-[#FF6600]"],
.dark-blog [style*="ff4303"],
.dark-blog [class*="bg-[#FF6600]"] {
    color: #ffffff !important;
}

/* Forca texto branco em botoes com gradiente laranja */
[style*="gradient"][style*="ff4303"],
[class*="from-[#FF6600]"],
[class*="from-orange"],
.dark-blog a[class*="bg-[#FF6600]"],
.dark-blog button[class*="bg-[#FF6600]"],
.dark-blog a[style*="ff4303"],
.dark-blog button[style*="ff4303"] {
    color: #ffffff !important;
}

/* Botoes solidos - SEMPRE texto branco */
.dark-blog a[class*="bg-[#FF6600]"]:not([class*="/"]),
.dark-blog button[class*="bg-[#FF6600]"]:not([class*="/"]),
.dark-blog .inline-block[class*="bg-[#FF6600]"]:not([class*="/"]) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #FF6600 0%, #FF8833 100%) !important;
}

/* Hover states */
.dark-blog a[class*="bg-[#FF6600]"]:hover,
.dark-blog button[class*="bg-[#FF6600]"]:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #e63803 0%, #FF6600 100%) !important;
}

/* -----------------------------------------------------------------------------
   SECAO 6: TAGS E PILLS
   ----------------------------------------------------------------------------- */

/* Tags/Pills - Fundo claro (10% opacity) = texto branco com borda */
.dark-blog [class*="bg-[#FF6600]/10"],
.dark-blog [class*="bg-[#FF6600]/20"],
[class*="bg-[#FF6600]/10"],
[class*="bg-[#FF6600]/20"] {
    background: rgba(255, 67, 3, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid #FF6600 !important;
}

/* Tags/Pills no dark mode - usar bordas para visibilidade */
.dark-blog .tag-pill,
.dark-blog [class*="rounded-full"][class*="text-[#FF6600]"] {
    background: rgba(255, 67, 3, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid #FF6600 !important;
}

/* Categorias com bg transparente */
.dark-blog span[class*="bg-[#FF6600]"][class*="text-[#FF6600]"] {
    background: rgba(255, 67, 3, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid #FF6600 !important;
}

/* -----------------------------------------------------------------------------
   SECAO 7: BLOCKQUOTES E CODE
   ----------------------------------------------------------------------------- */

.dark-blog blockquote,
.dark-blog .prose blockquote {
    background: rgba(255, 255, 255, 0.03) !important;
    border-left-color: #FF6600 !important;
    color: #e5e7eb !important;
}

.dark-blog code:not(pre code),
.dark-blog .prose code:not(pre code) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FF6600 !important;
}

/* =============================================================================
   SECAO 8: RESPONSIVIDADE MOBILE - Forcas cores em telas pequenas
   =============================================================================
   Em dispositivos moveis, o Tailwind CDN pode carregar depois do blog.css,
   sobrescrevendo as cores. Estas regras garantem que o tema dark funcione.
   ============================================================================= */

@media (max-width: 768px) {
    /* Forca cores corretas no body e main */
    .dark-blog {
        background: linear-gradient(135deg, #0c1a24 0%, #1e3a5f 100%) !important;
        color: #ffffff !important;
    }

    /* Textos - garantir legibilidade */
    .dark-blog p,
    .dark-blog li,
    .dark-blog td,
    .dark-blog span:not([class*="text-"]):not([style*="color"]) {
        color: #ffffff !important;
    }

    /* Headings - sempre branco */
    .dark-blog h1,
    .dark-blog h2,
    .dark-blog h3,
    .dark-blog h4,
    .dark-blog h5,
    .dark-blog h6 {
        color: #ffffff !important;
    }

    /* Boxes coloridos - fundo escuro transparente */
    .dark-blog .bg-blue-50,
    .dark-blog .bg-green-50,
    .dark-blog .bg-red-50,
    .dark-blog .bg-yellow-50,
    .dark-blog [class*="bg-blue-5"],
    .dark-blog [class*="bg-green-5"],
    .dark-blog [class*="bg-red-5"] {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    /* Texto dentro de boxes */
    .dark-blog .bg-blue-50 p,
    .dark-blog .bg-green-50 p,
    .dark-blog .bg-red-50 p,
    .dark-blog .bg-blue-50 li,
    .dark-blog .bg-green-50 li,
    .dark-blog .bg-red-50 li {
        color: #e5e7eb !important;
    }

    /* Tabelas em mobile */
    .dark-blog table,
    .dark-blog .ir-table {
        background: rgba(255, 255, 255, 0.03) !important;
    }

    .dark-blog table td,
    .dark-blog .ir-table td {
        color: #e5e7eb !important;
        padding: 0.5rem !important;
        font-size: 0.85rem !important;
    }

    .dark-blog table th,
    .dark-blog .ir-table th {
        color: #FF6600 !important;
        padding: 0.5rem !important;
        font-size: 0.85rem !important;
    }

    /* Links e CTAs */
    .dark-blog a:not([class*="bg-"]) {
        color: #FF6600 !important;
    }

    /* Botoes com fundo laranja */
    .dark-blog a[class*="bg-[#FF6600]"],
    .dark-blog a.bg-\[\#FF6600\],
    .dark-blog [style*="background"][style*="ff4303"] {
        color: #ffffff !important;
        background: #FF6600 !important;
    }

    /* Classes Tailwind de texto escuro - forcar claro */
    .dark-blog .text-gray-900,
    .dark-blog .text-gray-800,
    .dark-blog .text-gray-700,
    .dark-blog .text-gray-600,
    .dark-blog .text-gray-500 {
        color: #e5e7eb !important;
    }

    /* Bordas */
    .dark-blog .border-gray-200,
    .dark-blog .border-gray-300,
    .dark-blog [class*="border-l-4"] {
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

    /* Grid de comparacao (desconto simplificado vs deducoes) */
    .dark-blog .grid > div[class*="rounded-lg"] {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    /* Calculadora CTA */
    .dark-blog .calculadora-cta {
        background: rgba(255, 67, 3, 0.1) !important;
        border-color: #FF6600 !important;
    }

    .dark-blog .calculadora-cta p,
    .dark-blog .calculadora-cta h3 {
        color: #ffffff !important;
    }

    /* Share buttons */
    .dark-blog .share-buttons a {
        color: #ffffff !important;
    }

    /* Dark surface (cards) */
    .dark-blog .dark-surface {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    /* Breadcrumb */
    .dark-blog nav[class*="text-sm"] span,
    .dark-blog nav[class*="text-sm"] a {
        color: #9ca3af !important;
    }

    /* Tags do artigo */
    .dark-blog span[class*="rounded-full"][class*="px-3"] {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
}

/* Regras extra para telas muito pequenas */
@media (max-width: 480px) {
    .dark-blog .ir-table {
        font-size: 0.75rem !important;
    }

    .dark-blog .ir-table td,
    .dark-blog .ir-table th {
        padding: 0.4rem !important;
    }

    .dark-blog .calculadora-cta {
        padding: 1rem !important;
    }

    .dark-blog .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================================
   CLASSES PADRAO PARA BOXES E PAINEIS
   ============================================================================= */

/* Info Box - Painel padrao escuro */
.dark-blog .info-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left-color: rgba(255, 255, 255, 0.3) !important;
}

.dark-blog .info-box p,
.dark-blog .info-box li {
    color: #e5e7eb !important;
}

.dark-blog .info-box .font-bold,
.dark-blog .info-box strong {
    color: #ffffff !important;
}

/* Formula - texto monospace branco */
.dark-blog .formula {
    font-family: monospace !important;
    font-size: 1.1rem !important;
    margin-top: 0.5rem !important;
    color: #ffffff !important;
}

/* Text-right para tabelas */
.dark-blog .text-right {
    text-align: right !important;
}

/* Category Badge - fundo escuro, borda branca (SEM laranja) */
.dark-blog .category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* =============================================================================
   CTA BUTTON - PADRAO DEFINITIVO PARA BOTOES (CONTEUDO DO BLOG)
   =============================================================================
   REGRA: Fundo laranja (#FF6600) + Texto BRANCO. SEMPRE.
   Use a classe .cta-button em TODOS os botoes de call-to-action.

   IMPORTANTE: Seletores restritos a main/article para NAO afetar o navbar.
   O navbar usa .navbar-cta-btn com estilos proprios (navbar.html).
   ============================================================================= */

.dark-blog main .cta-button,
.dark-blog article .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: #FF6600 !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.dark-blog main .cta-button:hover,
.dark-blog article .cta-button:hover {
    background: #e63803 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Variante outline - borda laranja, fundo transparente */
.dark-blog main .cta-button-outline,
.dark-blog article .cta-button-outline {
    display: inline-block;
    padding: 1rem 2rem;
    background: transparent !important;
    color: #FF6600 !important;
    font-weight: 700;
    border-radius: 0.5rem;
    border: 2px solid #FF6600 !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dark-blog main .cta-button-outline:hover,
.dark-blog article .cta-button-outline:hover {
    background: rgba(255, 67, 3, 0.1) !important;
    color: #FF6600 !important;
}

/* =============================================================================
   CORES INLINE PERMITIDAS - NAO SOBRESCREVER
   =============================================================================
   Cores inline legitimas para dark-blog (usadas em posts corretos):

   TEXTOS:
   - #ffffff - Titulos, strong, destaques
   - #ffffff - Paragrafos e texto principal
   - #93C5FD - Subtitulos H2/H3 (azul claro)
   - #9ca3af - Meta, breadcrumb, texto secundario
   - #e5e7eb - Texto alternativo

   BOXES COLORIDOS:
   - #25D366 (verde) - Titulo/texto de box verde
   - #5FE89A (verde claro) - Texto de box verde
   - #FF6B6B (vermelho) - Titulo de box vermelho
   - #FF9999 (vermelho claro) - Texto de box vermelho
   - #FF6600 (laranja) - Links e CTAs

   BACKGROUNDS (rgba):
   - rgba(96,165,250,0.1) - Box azul
   - rgba(37,211,102,0.1) - Box verde
   - rgba(248,113,113,0.1) - Box vermelho
   - rgba(255,67,3,0.1) - Box laranja/CTA
   - rgba(255,255,255,0.05) - Glass effect padrao
   ============================================================================= */

/* NAO usar NUCLEAR override - preserva cores inline legitimas */
/* As regras abaixo sao SELETIVAS - so corrigem classes Tailwind proibidas */

/* =============================================================================
   CORRECOES SELETIVAS - Apenas para classes Tailwind proibidas
   ============================================================================= */

/* Corrige classes Tailwind de texto escuro SEM afetar style inline */
.dark-blog .text-gray-900:not([style*="color"]),
.dark-blog .text-gray-800:not([style*="color"]),
.dark-blog .text-gray-700:not([style*="color"]),
.dark-blog .text-gray-600:not([style*="color"]) {
    color: #ffffff !important;
}

/* Corrige classes Tailwind de fundo claro SEM afetar style inline */
.dark-blog .bg-white:not([style*="background"]),
.dark-blog .bg-gray-50:not([style*="background"]),
.dark-blog .bg-gray-100:not([style*="background"]) {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Corrige classes Tailwind de fundo colorido claro SEM afetar style inline */
.dark-blog .bg-blue-50:not([style*="background"]),
.dark-blog .bg-blue-100:not([style*="background"]),
.dark-blog .bg-green-50:not([style*="background"]),
.dark-blog .bg-green-100:not([style*="background"]),
.dark-blog .bg-red-50:not([style*="background"]),
.dark-blog .bg-red-100:not([style*="background"]) {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Corrige texto dentro de boxes com classes Tailwind */
.dark-blog .bg-blue-50:not([style*="background"]) *,
.dark-blog .bg-green-50:not([style*="background"]) *,
.dark-blog .bg-red-50:not([style*="background"]) * {
    color: #ffffff !important;
}

/* Corrige cores de texto Tailwind proibidas */
.dark-blog .text-blue-700:not([style*="color"]),
.dark-blog .text-blue-600:not([style*="color"]) {
    color: #93C5FD !important;
}

.dark-blog .text-green-700:not([style*="color"]),
.dark-blog .text-green-600:not([style*="color"]) {
    color: #25D366 !important;
}

.dark-blog .text-red-700:not([style*="color"]),
.dark-blog .text-red-600:not([style*="color"]) {
    color: #FF6B6B !important;
}

/* =============================================================================
   DEFAULTS SEGUROS - Aplicados quando nao ha style inline
   ============================================================================= */

/* Headings SEM style inline - usa branco */
.dark-blog h1:not([style*="color"]),
.dark-blog h2:not([style*="color"]),
.dark-blog h3:not([style*="color"]),
.dark-blog h4:not([style*="color"]) {
    color: #ffffff !important;
}

/* Paragrafos SEM style inline - usa azul claro */
.dark-blog p:not([style*="color"]),
.dark-blog li:not([style*="color"]) {
    color: #ffffff !important;
}

/* Strong SEM style inline - usa branco */
.dark-blog strong:not([style*="color"]),
.dark-blog b:not([style*="color"]) {
    color: #ffffff !important;
}

/* =============================================================================
   REGRA NUCLEAR PARA STRONG/B - Nunca permitir texto escuro
   =============================================================================
   PROBLEMA: strong herda var(--primary) (#0c1a24) que é invisível no dark-blog.
   SOLUÇÃO: Forçar TODOS os strong/b a serem brancos, com exceção de style inline.
   ============================================================================= */
body.dark-blog strong,
body.dark-blog b,
body.dark-blog main strong,
body.dark-blog main b,
body.dark-blog article strong,
body.dark-blog article b,
body.dark-blog .prose strong,
body.dark-blog .prose b,
body.dark-blog li strong,
body.dark-blog li b,
body.dark-blog p strong,
body.dark-blog p b {
    color: #ffffff !important;
}

/* Exceção: strong com cor específica via style inline mantém a cor */
body.dark-blog strong[style*="color"],
body.dark-blog b[style*="color"] {
    /* Não sobrescreve - deixa o style inline funcionar */
}

/* =============================================================================
   ELEMENTOS ESPECIFICOS - Mantidos para compatibilidade
   ============================================================================= */

/* Links - laranja oficial (SEM afetar botoes, navbar ou footer) */
.dark-blog main a:not([class*="bg-"]):not([style*="background"]):not(.share-buttons a) {
    color: #FF6600 !important;
}

/* Botoes com fundo - texto branco */
.dark-blog a[class*="bg-"],
.dark-blog button[class*="bg-"],
.dark-blog a[style*="gradient"],
.dark-blog button[style*="gradient"] {
    color: #ffffff !important;
}

/* Share buttons */
.dark-blog .share-buttons a {
    color: #ffffff !important;
}

/* Tags e Pills (SEM style inline) */
.dark-blog .tag-pill:not([style*="background"]),
.dark-blog .category-pill:not([style*="background"]) {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* Breadcrumb SEM style inline */
.dark-blog nav.text-sm:not([style*="color"]) * {
    color: #9ca3af !important;
}

/* Code inline */
.dark-blog code:not(pre code):not([style*="color"]) {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FF6600 !important;
}

/* Tabelas SEM style inline */
.dark-blog table:not([style*="background"]) {
    background: rgba(255, 255, 255, 0.03) !important;
}

.dark-blog th:not([style*="color"]) {
    color: #ffffff !important;
}

.dark-blog td:not([style*="color"]) {
    color: #ffffff !important;
}

/* Classes especiais para valores monetarios */
.dark-blog .valor-destaque {
    color: #25D366 !important;
}

.dark-blog .valor-alerta {
    color: #FF6B6B !important;
}

/* =============================================================================
   OVERRIDE FINAL - Sobrescreve Tailwind CDN com prioridade maxima
   =============================================================================
   PROBLEMA: Tailwind CDN carrega DEPOIS do blog.css, sobrescrevendo regras.
   SOLUCAO: Usar seletores com maior especificidade e !important.
   ============================================================================= */

/* Fundos claros Tailwind - FORCAR fundo escuro translucido */
body.dark-blog .bg-white,
body.dark-blog .bg-gray-50,
body.dark-blog .bg-gray-100,
body.dark-blog div.bg-white,
body.dark-blog div.bg-gray-50,
body.dark-blog div.bg-gray-100,
body.dark-blog article.bg-white,
body.dark-blog table.bg-white,
body.dark-blog thead.bg-gray-100,
body.dark-blog tr.bg-gray-50 {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Code inline com fundo claro - corrigir */
body.dark-blog code.bg-gray-100 {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FF6600 !important;
}

/* Tabelas - garantir cores corretas */
body.dark-blog table,
body.dark-blog table.min-w-full {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-blog thead,
body.dark-blog thead.bg-gray-100 {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-blog th {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-blog td {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-blog tr.border-t {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Blockquotes */
body.dark-blog blockquote,
body.dark-blog blockquote.bg-gray-50 {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-blog blockquote span {
    color: #ffffff !important;
}

/* Tags de links (blog index) */
body.dark-blog a.bg-gray-100,
body.dark-blog a.hover\:bg-gray-200 {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body.dark-blog a.bg-gray-100:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Texto escuro Tailwind - FORCAR texto claro */
body.dark-blog .text-gray-900,
body.dark-blog .text-gray-800,
body.dark-blog .text-gray-700,
body.dark-blog .text-gray-600,
body.dark-blog .text-gray-500,
body.dark-blog h1.text-gray-900,
body.dark-blog h2.text-gray-900,
body.dark-blog h3.text-gray-800,
body.dark-blog h4.text-gray-800,
body.dark-blog p.text-gray-700,
body.dark-blog span.text-gray-700 {
    color: #ffffff !important;
}

/* Bordas escuras - clarear */
body.dark-blog .border-gray-200,
body.dark-blog .border-gray-300 {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Texto vermelho/verde Tailwind - preservar mas ajustar */
body.dark-blog .text-red-600 {
    color: #FF6B6B !important;
}

body.dark-blog .text-green-600,
body.dark-blog .text-green-700 {
    color: #25D366 !important;
}

/* CTA Box com fundo branco - corrigir */
body.dark-blog .cta-box {
    background: rgba(255, 67, 3, 0.1) !important;
}

body.dark-blog .cta-box h3 {
    color: #ffffff !important;
}

body.dark-blog .cta-box p {
    color: #e5e7eb !important;
}

/* Botao secundario (bg-white com borda laranja) */
body.dark-blog a.bg-white.border-\[#FF6600\],
body.dark-blog a[class*="bg-white"][class*="border-"] {
    background: transparent !important;
    color: #FF6600 !important;
}

body.dark-blog a.bg-white.border-\[#FF6600\]:hover {
    background: rgba(255, 67, 3, 0.1) !important;
}

/* Print styles */
@media print {
    .prose {
        font-size: 12pt;
        line-height: 1.5;
    }

    .prose a {
        text-decoration: underline;
        color: #000;
    }

    .prose a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
}

/* ==============================================
   UI/UX IMPROVEMENTS (2026-02-08)
   ============================================== */

/* Tabelas Responsivas */
.table-responsive,
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    position: relative;
}

.table-responsive table,
.overflow-x-auto table {
    min-width: 600px;
}

/* Skeleton Loader para Cards */
.skeleton-card {
    background: rgba(255,255,255,0.05);
    border-radius: 0.75rem;
    padding: 1.5rem;
    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-line {
    height: 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 0.25rem;
    margin-bottom: 0.75rem;
}

.skeleton-line.title {
    width: 75%;
    height: 1.5rem;
}

.skeleton-line.text {
    width: 100%;
}

.skeleton-line.short {
    width: 40%;
}

.skeleton-line.image {
    width: 100%;
    height: 180px;
    margin-bottom: 1rem;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Botao Carregar Mais com Spinner */
.btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 200px;
    padding: 0.75rem 2rem;
    background: #FF6600;
    color: white;
    border-radius: 0.5rem;
    font-weight: 700;
    transition: all 0.2s;
}

.btn-load-more:hover:not(:disabled) {
    background: #e63803;
}

.btn-load-more:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-load-more .btn-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Card Hover Lift Effect */
article.hover\:-translate-y-1:hover {
    transform: translateY(-4px);
}

/* Screen Reader Only (sr-only) - garantir disponibilidade */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}