/* css/tools-main.css - CÓDIGO FINAL CORREGIDO E INEQUÍVOCO */

/* ==========================================================
   LAYOUT PRINCIPAL Y TIPOGRAFÍA (MODO CLARO)
   ========================================================== */

html, body {
    background-color: #f4f7fa; 
    margin: 0;
    font-family: Arial, sans-serif !important; 
    min-height: 100vh;
    padding-top: 0px; 
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: #333; 
    overflow-x: auto;
}

/* 🛑 CORRECCIÓN CRÍTICA: Asegura que el contenido fluya por encima del banner fijo de 60px */
body {
    padding-bottom: 100px; /* 60px del banner fijo + 10px de margen (ESTADO NORMAL) */
}

/* FIX CRÍTICO: El contenedor de las herramientas */
#tool-wrapper {
    margin-left: 50px; 
    transition: none;
    padding: 10px; 
}

/* FIX CRÍTICO: Distribución y Marco de Páginas Estáticas (Contacto, About) */
.static-page-wrapper {
    margin-left: 50px; 
    padding: 20px; 
    transition: margin-left 0.3s ease-in-out; 
}


/* Contenedor del contenido principal (.container) - Reglas unificadas */
.container {
    max-width: 90%; 
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-height: 80vh; 
    position: relative; 
    margin: 0 auto; 
    
    padding-top: 0px !important; 
}

/* ==========================================================
   FLEXBOX GLOBAL: ALINEACIÓN DE TÍTULO Y CONTROLES
   ========================================================== */

/* 1. Neutralizar posicionamiento absoluto de los controles globales */
#header-top-controls,
#language-switcher {
    position: static !important; 
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
}

/* 2. Contenedor principal de la barra de título (#main-title-bar) */
#main-title-bar {
    display: flex;
    justify-content: flex-start; 
    align-items: center; 
    
    padding: 0 120px 0 0; 
    margin-bottom: 10px; 
    padding-top: 20px; 
}

/* 3. Estilo de los controles internos (Luna y ES/EN) */
#header-top-controls {
    display: flex;
    align-items: center;    
    gap: 10px; 
    margin-left: auto; 
    flex-shrink: 0;
}

/* 4. Título (Centrado con Margen Automático) */
h1 {
    margin-left: auto; 
    margin-right: auto; 
    color: #007bff; 
    font-size: 1.5em; 
    text-align: center !important; 
    flex-grow: 1; 
    z-index: 60; 
    margin-top: 0;
    margin-bottom: 10px;
}

/* ==========================================================
   SIDEBAR Y EXPANSION
   ========================================================== */

#sidebar {
    position: fixed; top: 0; left: 0; z-index: 1000; height: 100vh;
    width: 50px; background-color: #2b3e50; 
    transition: width 0.3s ease-in-out; 
    overflow-x: hidden;
    color: white;
    display: flex;
    flex-direction: column;
}

/* Estado Expandido */
#sidebar.expanded { width: 250px; }
#sidebar.expanded + #tool-wrapper { margin-left: 250px; }
#sidebar.expanded + #tool-wrapper + footer .max-w-6xl { margin-left: 250px !important; width: calc(100% - 250px) !important; }

/* Botón de Toggle */
.sidebar-toggle {
    background: none; border: none; color: white; font-size: 1.5em; padding: 0; cursor: pointer;
    position: absolute; top: 0; left: 0; width: 50px; height: 50px; text-align: center; outline: none;
    display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease-in-out;
}
.sidebar-toggle:hover { background-color: rgba(255, 255, 255, 0.15); border-radius: 50%; transform: rotate(15deg); }

/* Contenido de navegación */
#nav-content {
    margin-top: 50px; padding: 10px 0; flex-grow: 1; overflow-y: auto;
    opacity: 0; transition: opacity 0.1s; pointer-events: none; 
}
#sidebar.expanded #nav-content { opacity: 1; pointer-events: auto; transition-delay: 0.2s; }

/* Estilos de los enlaces del menú */
#tool-menu-list { list-style: none; padding: 0; margin: 0; }
#tool-menu-list a {
    display: block; padding: 10px 15px; color: #f8f8f8; text-decoration: none; white-space: nowrap; 
    transition: background-color 0.2s;
}
#tool-menu-list a:hover { background-color: #3d5267; }
#tool-menu-list .active-tool a { background-color: #1a73e8; color: white; font-weight: bold; }

/* Encabezado "Información" */
.menu-info-header {
    font-size: 0.9em; font-weight: bold; color: #bbb; margin: 15px 0 5px 15px;
    padding-left: 5px; border-left: 3px solid #6c757d; text-transform: uppercase;
}


/* ==========================================================
   PUBLICIDAD Y CONTROLES SUPERIORES (ANCHO FIJO 728PX CENTRADO)
   ========================================================== */

/* Espacio Publicitario (ad-block) - POSICIÓN FIJA */
.ad-block {
    height: 90px; 
    max-width: 970px; /* 🛑 ANCHO MÁXIMO FIJO */
    width: 100%;     
    background-color: #eee;
    text-align: center;
    line-height: 60px; 
    border: 1px solid #ccc;
    font-weight: bold;
    color: #666;
    
    position: fixed;
    bottom: 0; 
    z-index: 10001;
    margin: 0;
    padding: 0; 

    /* 🛑 TRANSICIÓN: Sincronizada con el sidebar (left y transform para el centrado) */
    transition: left 0.3s ease-in-out, transform 0.3s ease-in-out; 

    /* 🛑 ESTILOS PARA SIDEBAR COLAPSADO (Defecto) - CENTRADO MATEMÁTICO */
    left: calc(50% + 25px); /* Mueve el punto de centrado 25px a la derecha */
    transform: translateX(-50%); /* Centra el bloque respecto a su propio ancho */
    transition: left 0.3s ease-in-out, transform 0.3s ease-in-out, width 0.3s, height 0.3s;
}

/* Regla para centrar el contenido (el anuncio de 728px) DENTRO del ad-block */
.ad-block > * { 
    max-width: 728px;
    margin-left: auto;
    margin-right: auto;
    display: block; 
}

/* 🛑 AJUSTE DE AD-BLOCK AL EXPANDIR EL SIDEBAR */
#sidebar.expanded ~ .ad-block {
    left: calc(50% + 125px); /* Mueve el punto de centrado 125px a la derecha */
    transform: translateX(-50%); 
}

/* Regla para ocultar banners internos por defecto y mostrar el Large */
.ad-block > div { 
    display: none; 
    margin-left: auto;
    margin-right: auto;
}
.ad-large-desktop {
    display: block !important;
}

.ad-mobile { display: none; }
.ad-desktop { display: block; }

/* Controles de Idioma y Tema (Mantenidos) */
#language-switcher { 
    display: flex; gap: 5px; z-index: 50; 
}
#language-switcher button {
    border: 1px solid #ccc; background-color: #f4f4f4; padding: 4px 8px; cursor: pointer;
    font-size: 0.85rem; font-weight: bold; color: #333; transition: background-color 0.2s;
}
#language-switcher button:hover:not(.active-lang) { background-color: #e0e0e0; }
#language-switcher .active-lang { 
    background-color: #3b82f6; color: white; font-weight: bold; border-color: #3b82f6;
}
#theme-switcher button {
    background: none; border: none; cursor: pointer; font-size: 1.2rem;
    color: #333; padding: 5px; transition: color 0.2s, transform 0.2s;
}
#theme-switcher button:hover { color: #007bff; transform: scale(1.1); }


/* ==========================================================
   OTROS ESTILOS Y CORRECCIONES (INCLUYE ESTILOS DE FORMULARIO BASE)
   ========================================================== */

.text-content p { line-height: 1.6; margin-bottom: 15px; color: #333; }
.text-content h2 { color: #0056b3; border-bottom: 2px solid #ccc; padding-bottom: 5px; margin-top: 25px; margin-bottom: 15px; }
.text-content ul { list-style: disc; margin-left: 20px; padding-left: 0; }
.text-content li { margin-bottom: 5px; }

.text-column p {
    /* HEREDA O FUERZA LOS ESTILOS DEL TEXT-CONTENT */
    line-height: 1.6; 
    margin-bottom: 15px; 
    color: #333;
}

/* REGLAS BASE DE FORMULARIO (MODO CLARO) - INTEGRADO DE contact.css */
label {
    display: block; 
    font-size: 0.875rem; 
    font-weight: 500; 
    color: #374151; 
}

input[type="text"], 
input[type="email"], 
textarea {
    width: 100%;
    padding: 0.5rem 0.75rem; 
    margin-top: 0.25rem; 
    margin-bottom: 1rem;
    border: 1px solid #d1d5db; 
    border-radius: 0.375rem; 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
    color: #1f2937; 
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-family: Arial, sans-serif !important;
    resize: vertical;
}

/* Estilo al enfocar */
input[type="text"]:focus, 
input[type="email"]:focus, 
textarea:focus {
    border-color: #3b82f6; 
    outline: 0;
    box-shadow: 0 0 0 1px #3b82f6, 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
}
/* FIN DE REGLAS BASE DE FORMULARIO */


/* Estilos de Contenedor de Formulario (para Contacto) - INTEGRADO DE contact.css */
.contact-container {
    background-color: white; 
    padding: 2rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
    max-width: 600px; 
    margin-left: auto; margin-right: auto; margin-top: 2rem; 
}

/* Estilo del botón (Send Message) */
.contact-container button[type="submit"] {
    background-color: #2563eb; 
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500; 
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
    width: 100%;
    display: flex;
    justify-content: center;
}
.contact-container button[type="submit"]:hover {
    background-color: #1d4ed8; 
}

.divider {
    text-align: center;
    margin: 1.5rem 0;
    color: #6b7280; 
    font-size: 0.875rem;
}
/* FIN DE ESTILOS DE CONTACTO */


/* ==========================================================
   ESTILOS DE TEMA OSCURO (DARK MODE) - INTEGRACIÓN COMPLETA
   ========================================================== */
   
html.dark { background-color: #0f0f0f; color: #e0e0e0; }
html.dark .container { background-color: #1e1e1e; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); }

/* DARK MODE PARA CONTACTO - INTEGRADO DE contact.css */
html.dark .contact-container {
    background-color: #1f2937; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

html.dark label {
    color: #9ca3af; 
}

html.dark input[type="text"], 
html.dark input[type="email"], 
html.dark textarea {
    background-color: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
    font-family: Arial, sans-serif !important;
}

html.dark input[type="text"]:focus, 
html.dark input[type="email"]:focus, 
textarea:focus {
    border-color: #60a5fa; 
    box-shadow: 0 0 0 1px #60a5fa, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

html.dark .divider {
    color: #6b7280; 
}
/* FIN DE DARK MODE PARA CONTACTO */

html.dark #sidebar { background-color: #1e1e1e; border-right: 1px solid #333; }
html.dark .sidebar-toggle { color: #ccc; background-color: #1e1e1e; }
html.dark .sidebar-toggle:hover { background-color: #333; }
html.dark #tool-menu-list a { color: #c0c0c0; }
html.dark #tool-menu-list a:hover { background-color: #333; color: #ffffff; }
html.dark #tool-menu-list .active-tool a { background-color: #004d99; }
html.dark .menu-info-header { color: #999; border-left: 3px solid #555; }

html.dark .card, html.dark .box {
    background-color: #2a2a2a; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); border: 1px solid #333;
}
html.dark .ad-block { background-color: #2a2a2a; color: #888888; border: 1px solid #444; }
html.dark a { color: #4da6ff; }
html.dark h1, html.dark h2, html.dark h3 { color: #f0f0f0; }
html.dark #theme-switcher button { color: #f7d08a; background: none; border: none; }
html.dark #theme-switcher button:hover { color: #ffd99e; background-color: rgba(255, 255, 255, 0.1); }
html.dark #language-switcher button { background-color: #383838; color: #e0e0e0; border-color: #555; }
html.dark #language-switcher button:hover:not(.active-lang) { background-color: #454545; }
html.dark #language-switcher .active-lang { background-color: #1a73e8; border-color: #1a73e8; }
html.dark .text-content p { color: #c0c0c0; }
html.dark .text-content h2 { color: #4da6ff; border-bottom: 2px solid #333; }
html.dark .text-content li { color: #c0c0c0; }
html.dark .text-content p strong, html.dark .text-content ul strong { color: #ffffff; }
html.dark body { background-color: #121212; color: #e0e0e0; }


/* ==========================================================
   RESPONSIVE DESIGN Y MEDIA QUERIES (ADAPTACIÓN A MÓVIL)
   ========================================================== */

/* BREAKPOINT 1: DESKTOP NORMAL (< 1025px, > 768px) -> MUESTRA 728x60 */
@media (max-width: 1024px) and (min-width: 769px) { 
    body {
        padding-bottom: 70px !important; /* 60px banner + 10px margen */
    }
    .ad-block {
        width: 728px !important; 
        height: 60px !important;
        line-height: 60px !important;
    }
    .ad-large-desktop { display: none !important; }
    .ad-medium-desktop { display: block !important; }
    .ad-mobile { display: none !important; }
}

/* BREAKPOINT 2: Adaptación móvil y Publicidad (< 768px) */
@media (max-width: 768px) {
    /* Distribución general */
    .static-page-wrapper { margin-left: 0; padding: 10px; } 
    
    /* Reglas de Título/Controles para Móvil (GLOBALES) */
    #main-title-bar {
        padding: 0 10px;
        flex-direction: column; 
        text-align: center;
    }
    h1 {
        max-width: 100%;
        text-align: center !important;
        margin-bottom: 10px;
        margin-left: 0 !important; 
        margin-right: 0 !important;
    }
    #header-top-controls {
        margin-bottom: 10px;
        margin-left: 0 !important; 
        margin-right: 0 !important;
        
        /* Centrar los botones cuando están apilados */
        justify-content: center;
        width: 100%;
    }
    
    /* Publicidad - MOVIL: Ignora el sidebar, centra como antes */
    .ad-block { 
        height: 50px; 
        line-height: 50px; 
        max-width: 320px; 
        
        /* Restauramos el centrado completo en móvil (sin sidebar) */
        left: 50%;
        transform: translateX(-50%);
        width: 320px; 
        
        /* Desactivamos la transición en móvil para consistencia */
        transition: none; 
    }
    /* Aseguramos que el contenido del ad-block respete el tamaño en móvil */
    .ad-block > * { 
        max-width: 320px;
    }
    
    .ad-large-desktop, .ad-medium-desktop { display: none !important; }
    .ad-mobile { display: block !important; }
    .ad-desktop { display: none; }

    .container {
        padding: 10px !important; /* Reducir el padding interno de 2rem a 1rem */
    }

    .contact-container {
        padding: 0.5rem !important;

    }

    input[type="text"], input[type="email"], textarea {
        display: flex;
        padding-inline: 0px;
    }
    
}


/* ==========================================================
   FIX: FOOTER Y UTILIDADES ESENCIALES
   ========================================================== */

/* 1. FIX Estructural del Footer (Alineación) */
.footer-fixed-align {
    width: 100vw !important;
    margin-left: 0 !important;
    display: flex;
    justify-content: center;
    position: relative; 
    left: 0;
}

/* 2. Contenido Interno (div.max-w-6xl): Compensación del Sidebar Colapsado (50px) */
.footer-fixed-align .max-w-6xl {
    margin-left: 50px !important; 
    width: calc(100% - 50px) !important; 
    margin-right: auto !important;
    transition: margin-left 0.3s ease-in-out; 
    padding-left: 1rem !important; 
    padding-right: 1rem !important;
}

/* 3. FIX para Modo Expandido */
#sidebar.expanded + #tool-wrapper + footer .max-w-6xl {
    margin-left: 250px !important; 
    width: calc(100% - 250px) !important; 
}

/* 4. FIX para Móvil (Sin Sidebar) */
@media (max-width: 768px) {
    .footer-fixed-align { width: 100% !important; margin-left: 0 !important; display: block; }
    .footer-fixed-align .max-w-6xl { margin-left: auto !important; width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* --- UTILIDADES DE TAILWIND REQUERIDAS EN EL FOOTER (Mantenidas para la estructura) --- */
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.text-center { text-align: center !important; }
.text-sm { font-size: 0.875rem !important; }
.border-t { border-top: 1px solid #e5e7eb !important; } 
.text-gray-600 { color: #4b5563 !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-blue-600 { color: #2563eb !important; }
.font-semibold { font-weight: 600 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.space-x-4 > * + * { margin-left: 1rem !important; }

/* Dark Mode Utilitarios del Footer */
html.dark .dark\:border-gray-700 { border-top-color: #374151 !important; }
html.dark .dark\:bg-gray-900 { background-color: #111827 !important; }
html.dark .dark\:text-gray-400 { color: #9ca3af !important; }
html.dark .dark\:text-gray-500 { color: #6b7280 !important; }
html.dark .dark\:text-blue-400 { color: #60a5fa !important; }

/* ==========================================================
   OTROS ESTILOS Y CORRECCIONES
   ========================================================== */
   
   .text-content p { 
    line-height: 1.6; 
    margin-bottom: 15px; 
    color: #333; 
}
.text-content h2 { 
    color: #0056b3; 
    border-bottom: 2px solid #ccc; 
    padding-bottom: 5px; 
    margin-top: 25px; 
    margin-bottom: 15px; 
}

/* --- FIX PARA EL SALTO DE LÍNEA EN EL ENLACE DE CONTACTO (Página Acerca de) --- */
.contact-link-wrapper a {
    display: inline-block; 
    margin-top: 20px; 
    margin-bottom: 5px; 
}

/* ==========================================================
   AJUSTES ESPECÍFICOS PARA MODO PANTALLA COMPLETA (.is-fullscreen)
   SOLUCIONES FINALES E INEQUÍVOCAS
   ========================================================== */

/* 🛑 ANULACIÓN CLAVE DEL WRAPPER (ELIMINAR MARGEN DE SIDEBAR Y SCROLL HORIZONTAL) */
/* Anula el margin-left: 50px de #tool-wrapper, que empuja el contenido y causa el scroll. */
#tool-wrapper .container.is-fullscreen {
    margin-left: 0px !important; 
}

/* 🛑 REGLAS DE POSICIONAMIENTO Y ALTURA DEL CONTENEDOR DE LA HERRAMIENTA */
.container.is-fullscreen {
    /* 1. MARGEN SUPERIOR: Se mantiene en 0px para ocupar el borde superior */
    padding: 0px;
    margin-top: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important; 
    padding-right: 0px !important;
    min-height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    height: calc(100vh - 60px) !important; 
    max-width: none;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    
}


/* 🛑 AJUSTE DE POSICIÓN DEL BOTÓN DE SALIR (BAJARLO) */
#fullscreenToggleBtn {
    /* Resetear la posición normal */
    position: static; 
}
.container.is-fullscreen #fullscreenToggleBtn {
    position: fixed; 
    right: 20px;     
    top: 25px;       /* Ajuste para bajar el botón */
    z-index: 10002;  
    background-color: rgba(0, 0, 0, 0.6); 
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

/* 🛑 CONTROL DE ELEMENTOS DE CABECERA Y PIE EN FULL SCREEN (CORRECCIÓN FINAL) */

/* 1. Ocultar el Título y el Footer */
.container.is-fullscreen #main-title-bar,
.container.is-fullscreen ~ footer {
    display: none !important;
}

/* 2. OCULTAR SIDEBAR (FIX): Solo lo ocultamos si el contenedor está en FS */
/* Si el .container.is-fullscreen está activo, se oculta el sidebar, que es su hermano indirecto. */
#sidebar {
    /* Si el sidebar está antes de #tool-wrapper en el DOM y .container.is-fullscreen es un descendiente de #tool-wrapper, 
       esta es la forma más directa de apuntar al sidebar sin causarle conflicto permanente: */
    display: block; /* Aseguramos que esté visible en estado normal */
}

/* Oculta el sidebar cuando se entra en Full Screen */
.container.is-fullscreen + #tool-wrapper ~ #sidebar,
#sidebar:has(+ #tool-wrapper > .container.is-fullscreen) { 
    display: none !important;
}

/* 🛑 AJUSTE DEL AD-BLOCK EN FULL SCREEN: Asegura que se pegue al centro de la ventana completa */
.container.is-fullscreen ~ .ad-block {
    left: 50% !important; /* Centrado absoluto respecto a 100vw */
    transform: translateX(-50%) !important; 
}


/* Mensajes de Estado (#message) */
#message {
    position: fixed;
    top: 250px;
    left: 50%;
    z-index: 1000;
    width: auto;
    transform: translateX(-40%);
    padding: 12px 15px;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease-in-out;
    text-align: center;
}

.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@media (max-width: 768px) {
    .initial-seo-grid {
        flex-direction: column;
        gap: 20px;
    }

    .ad-column {
        flex: 1 1 100%;
        max-width: 100%;
        order: -1;
    }

    .text-column {
        flex: 1 1 100%;
    }

    .in-content-ad-block {
        max-width: 320px;
        height: 100px;
        line-height: 100px;
        margin: 0 auto;
    }

    .editor-panel {
        height: 50vh;
    }
}

/* ==========================================================
   AJUSTE RESPONSIVO DE BOTONES (Umbral: 475px)
   ========================================================== */
   @media (max-width: 475px) {
    
    /* 1. Contenedor de botones: Cambio a pila vertical */
    .controls {
        flex-direction: column; /* Apila los botones verticalmente */
        align-items: stretch;   /* Estira los botones para que ocupen todo el ancho */
        gap: 8px;               /* Espacio vertical entre ellos */
    }

    /* 2. Botones individuales: Ancho completo y optimización de texto */
    .controls button {
        width: 100%;       /* Ocupa el ancho completo del contenedor flex */
        min-width: unset;  /* Elimina cualquier restricción de ancho mínimo */
        font-size: 0.9em;  /* Reduce ligeramente la fuente para mejor ajuste */
        padding: 12px 10px; /* Ajusta el padding vertical */
        white-space: normal; /* Permite que el texto se envuelva si es muy largo, aunque el 100% de ancho debería evitarlo */
    }
}

.initial-seo-grid {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-top: 20px;
}

.ad-column {
    flex: 0 0 300px;
    max-width: 300px;
    text-align: center;
}

.text-column {
    flex: 1;
    min-width: 0;
}

.text-column h2.seo-header {
    margin-top: 0;
}

.in-content-ad-block {
    margin: 0;
    max-width: 300px;
    width: 100%;
    height: 250px;
    text-align: center;
    line-height: 250px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    font-weight: bold;
    color: #666;
    box-sizing: border-box;
    display: inline-block;
}

html.dark .in-content-ad-block {
    background-color: #2a2a2a;
    color: #888888;
    border: 1px solid #444;
}

html.dark .text-column p {
    color: #c0c0c0; /* Coincide con html.dark .text-content p */
}