/* 1. EL CONTENEDOR MAESTRO (955px y centrado) */
#wpforo #wpforo-wrap {
    width: 955px !important; 
    max-width: 95% !important; 
    margin: 0 auto !important;
    display: block !important;
    overflow: visible !important;
}

/* 2. COLUMNA IZQUIERDA (Aumentamos al 74% para dar más aire) */
#wpforo #wpforo-wrap .wpforo-content {
    width: 74% !important; 
    float: left !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    min-width: 0 !important; /* Permite que se encoja */
}

/* 3. COLUMNA DERECHA (Sidebar más estrecha para ayudar) */
#wpforo #wpforo-wrap .wpforo-right-sidebar {
    width: 25% !important;
    float: right !important;
    box-sizing: border-box !important;
}

/* 4. LO QUE HACÍA QUE FUNCIONARA (Tablas elásticas) */
#wpforo .wpf-cat-list, 
#wpforo .wpf-thread-list, 
#wpforo table {
    table-layout: fixed !important; /* OBLIGA a la tabla a no salirse */
    width: 100% !important;
    min-width: 0 !important;
}

/* 5. EVITAR EL "EMPUJE" HORIZONTAL (Salto de línea forzado) */
#wpforo #wpforo-wrap .wpforo-content * {
    white-space: normal !important; /* Permite que "Respuestas" se corte si no cabe */
    overflow-wrap: break-word !important;
    word-break: break-all !important; /* Esto es lo que hacía que pusiera Res-puestas */
}

/* 6. LIMPIEZA PARA QUE EL PADRE NO SE CORTE POR ABAJO */
#wpforo #wpforo-wrap:after {
    content: "";
    display: table;
    clear: both;
}
/* --- AJUSTE PARA MÓVILES Y TABLETS --- */
@media (max-width: 955px) {
    /* 1. El contenedor principal deja de tener ancho fijo y se vuelve elástico */
    #wpforo #wpforo-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        display: block !important;
    }

    /* 2. La columna izquierda ocupa todo el ancho y deja de flotar */
    #wpforo #wpforo-wrap .wpforo-content {
        width: 100% !important;
        float: none !important;
        display: block !important;
        padding-right: 0 !important;
        margin-bottom: 30px !important; /* Espacio antes de la sidebar */
    }

    /* 3. La sidebar ocupa todo el ancho y se pone debajo */
    #wpforo #wpforo-wrap .wpforo-right-sidebar {
        width: 100% !important;
        float: none !important;
        display: block !important;
        clear: both !important;
    }

    /* 4. Ajuste extra para que las tablas internas no se corten en pantallas pequeñas */
    #wpforo .wpf-thread-list, 
    #wpforo .wpf-cat-list, 
    #wpforo table {
        table-layout: auto !important; /* Permite que el navegador ajuste las columnas según el espacio móvil */
    }
}
/* 1. FORZAR QUE LAS TABLAS NO MIDAN MÁS QUE EL MÓVIL */
#wpforo .wpf-cat-list, 
#wpforo .wpf-thread-list, 
#wpforo table {
    table-layout: fixed !important; /* OBLIGATORIO: las columnas se adaptan al ancho del móvil */
    width: 100% !important;
    min-width: 0 !important; /* Elimina anchos mínimos de wpForo */
}

/* 2. AJUSTE DE COLUMNAS INTERNAS EN MÓVIL */
/* Reducimos las estadísticas al mínimo para dar espacio al título */
#wpforo .wpf-cat-stat-posts, 
#wpforo .wpf-cat-stat-topics {
    width: 45px !important; 
    font-size: 10px !important;
    padding: 2px !important;
}

/* 3. EVITAR QUE EL TEXTO "EMPUJE" LA TABLA HACIA LA DERECHA */
#wpforo .wpf-cat-title, 
#wpforo .wpf-thread-title,
#wpforo .wpf-cat-last-post-title {
    white-space: normal !important; /* Salto de línea para que no se corte */
    word-wrap: break-word !important;
    word-break: break-all !important; /* Rompe la palabra si es necesario (ej: Res-puestas) */
    display: block !important;
    max-width: 100% !important;
}