/* =============================================================================
   forum-2026.css — MaeloRO 30/09/2026. Foro: capa de modernizacion.
   -----------------------------------------------------------------------------
   Va DESPUES de style.css, forum-3d.css y /maeloro-ui.css (inc/layout.php). Solo aspecto: no cambia clases,
   textos, formularios ni JS del foro. Arregla lo visto en la auditoria (AUDITORIA-WEB-2026-09-30.md):
   tipografia del sistema distinta al resto de la web, el hilo en una columna estrecha, la lista de hilos que en
   el movil se salia 105 px por la derecha, filas del indice estiradas por las descripciones largas.
   Para desactivarla: quitar la linea <link ... forum-2026.css> de inc/layout.php.
   ============================================================================= */

/* ---------- tipografia: la misma de la portada (Inter para leer, Cinzel para los titulos) ---------- */
body { font-family: var(--mro-fuente); }
.nav-logo,
.category-title,
.threads-header h2,
.sidebar-card-title,
.forum-info-header h1,
.footer-logo { font-family: var(--mro-fuente-titulo); letter-spacing: .6px; }
.category-title { letter-spacing: 1.4px; }

/* icono del juego (gremio) en vez del emoji de espadas, igual que los titulos de la portada */
.nav-logo-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    font-size: 0;
    background: center / contain no-repeat url('/forum/img/gremio.png');
    
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
}
@media (hover: hover) {
    .nav-logo:hover .nav-logo-icon { background-image: url('/forum/img/gremio.png'); }
}

/* banner: el <img> ahora lleva width/height (sin saltos al cargar); la altura la sigue mandando style.css */
.site-banner-img { height: auto; }

/* ---------- ancho: todas las paginas usan el mismo ancho que el indice ---------- */
/* el <body> es flex en columna: con margin auto el contenedor se encogia al contenido (el hilo quedaba en ~610 px) */
.main-content { width: 100%; }

/* ---------- indice: mas sitio para el nombre y la descripcion del foro ---------- */
@media (min-width: 701px) {
    .forum-row { grid-template-columns: 40px minmax(0, 1fr) 72px 72px 170px; gap: 14px; }
}
.forum-desc { line-height: 1.5; }
.forum-row { transition: background-color var(--mro-t), box-shadow var(--mro-t); }

/* ---------- ruta (breadcrumb): los nombres largos saltan de linea en vez de salirse ---------- */
.breadcrumb { overflow-wrap: anywhere; row-gap: 2px; }

/* ---------- lista de hilos en el movil: cada hilo es una tarjeta de dos filas ---------- */
@media (max-width: 640px) {
    .thread-list thead { display: none; }
    .thread-list,
    .thread-list tbody { display: block; width: 100%; }
    .thread-list tr.thread-row {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        gap: 6px 16px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }
    .thread-list tr.thread-row:last-child { border-bottom: none; }
    .thread-list tr.thread-row:hover { background: var(--card2); }
    .thread-list tr.thread-row > td { display: block; padding: 0; border: 0; background: none; }
    .thread-list .thread-title-cell { grid-column: 1 / -1; width: auto; }
    .thread-list .thread-title { align-items: flex-start; overflow-wrap: anywhere; }
    .thread-list .thread-stat-cell { display: flex; align-items: baseline; gap: 4px; text-align: left; }
    .thread-list .thread-stat-num { display: inline; }
    .thread-list .thread-last-cell { text-align: right; white-space: normal; font-size: .76rem; line-height: 1.35; min-width: 0; }
    .thread-new-btn { margin-bottom: 10px; }
}

/* ---------- hilo ---------- */
.thread-header h1 { overflow-wrap: anywhere; }
.post-content { overflow-wrap: anywhere; }
.post-content img { height: auto; }

/* ---------- fondo: la misma ilustracion en version ligera (37 KB en vez de 645 KB); bajo el velo oscuro se ve igual ---------- */
body {
    background-image:
        radial-gradient(900px 400px at 50% 0%, rgba(91, 143, 180, .10), transparent 60%),
        linear-gradient(rgba(10, 16, 20, .87), rgba(10, 16, 20, .93)),
        url('/forum/maelowowfondo.png?v=20261018');
}