/* Estilos del Foro - reutiliza variables de /css/style.css (colores, tipografías) */

/* Reserva siempre el espacio de la barra de scroll vertical, para que .foro-wrap
   (ancho en %) no cambie de anchura en píxeles cuando el contenido crece lo
   suficiente como para que aparezca la barra (p.ej. al escribir un tema largo
   en "Nuevo tema"), evitando que el editor se estreche mientras se escribe. */
html {
    scrollbar-gutter: stable;
}

.foro-nav {
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 0 20px;
    font-family: var(--font-clean);
    font-size: 0.9rem;
}

.foro-nav a {
    color: var(--color-accent);
    text-decoration: none;
}

.foro-nav a:hover {
    color: var(--color-highlight);
}

.foro-wrap {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 60px;
    font-family: var(--font-clean);
    color: var(--color-text);
}

.foro-header {
    text-align: center;
    margin-bottom: 30px;
}

.foro-header-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    margin-bottom: 10px;
}

.foro-header h1 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
}

.foro-header h1 a {
    color: var(--color-accent);
    text-decoration: none;
}

.foro-user-box-compacta {
    font-size: 0.8rem;
    white-space: nowrap;
}

.foro-user-box-compacta > img {
    width: 24px;
    height: 24px;
}

.foro-user-box-compacta .foro-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.foro-user-box-compacta .foro-idioma-boton {
    padding: 6px 8px;
    font-size: 0.78rem;
}

.foro-login-box {
    text-align: center;
    background: var(--color-paper);
    border: 1px solid var(--color-highlight);
    border-radius: 10px;
    padding: 40px 20px;
}

.foro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-accent);
    color: var(--color-paper);
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-family: var(--font-clean);
    font-size: 0.95rem;
    line-height: normal;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
}

.foro-btn.foro-btn-danger {
    background: #c62828;
}

.foro-btn.foro-btn-danger:hover {
    background: #8e0000;
}

.foro-btn:hover {
    background: var(--color-wood);
}

.foro-btn.secundario {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.foro-btn-cancelar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--color-text);
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    padding: 10px 18px;
    font-family: var(--font-clean);
    font-size: 0.95rem;
    cursor: pointer;
}

.foro-btn-cancelar:hover {
    background: #f5f0e8;
    border-color: #c9b896;
}

.foro-selector-idioma {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.foro-idioma-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    background: var(--color-paper);
    color: var(--color-text);
    cursor: pointer;
}

.foro-idioma-boton img {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.foro-idioma-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 150px;
    background: var(--color-paper);
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    z-index: 20;
    overflow: hidden;
}

.foro-idioma-menu.abierto {
    display: block;
}

.foro-idioma-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

.foro-idioma-opcion:hover {
    background: var(--color-accent);
    color: var(--color-paper);
}

.foro-idioma-opcion img {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.foro-notif-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.foro-notif-boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    background: var(--color-paper);
    color: var(--color-accent);
    font-size: 1rem;
    cursor: pointer;
}

.foro-notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #a50e0e;
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foro-notif-menu {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    width: 340px;
    max-width: 90vw;
    max-height: 420px;
    overflow-y: auto;
    background: var(--color-paper);
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    z-index: 30;
}

.foro-notif-menu.abierto {
    display: block;
}

.foro-notif-vacio {
    padding: 16px;
    font-size: 0.85rem;
    opacity: 0.75;
    text-align: center;
}

.foro-notif-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #efe6d3;
    text-decoration: none;
    color: var(--color-text);
}

.foro-notif-item:last-child {
    border-bottom: none;
}

.foro-notif-item:hover {
    background: #f5f0e8;
}

.foro-notif-item.no-leido {
    background: #fbf2df;
}

.foro-notif-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.foro-notif-texto {
    min-width: 0;
    font-size: 0.85rem;
}

.foro-notif-hilo {
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foro-notif-fecha {
    font-size: 0.72rem;
    opacity: 0.65;
    margin-top: 2px;
}

.foro-prefijo-selector {
    position: relative;
    flex: 0 0 220px;
}

.foro-prefijo-boton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    background: var(--color-paper);
    color: var(--color-text);
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.foro-prefijo-boton:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.12);
}

.foro-prefijo-boton span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.foro-prefijo-menu {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    width: 300px;
    max-width: 90vw;
    background: var(--color-paper);
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    z-index: 30;
}

.foro-prefijo-menu.abierto {
    display: block;
}

.foro-prefijo-buscador {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #d8c9a8;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--color-paper);
    color: var(--color-text);
}

.foro-prefijo-buscador:focus {
    outline: none;
}

.foro-prefijo-lista {
    max-height: 280px;
    overflow-y: auto;
}

.foro-prefijo-opcion {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 10px;
    padding: 8px 12px;
    font-size: 0.86rem;
    cursor: pointer;
    white-space: nowrap;
}

.foro-prefijo-opcion:hover {
    background: #f5f0e8;
}

.foro-prefijo-num {
    text-align: right;
    opacity: 0.8;
}

.foro-prefijo-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
}

.foro-categoria {
    margin-bottom: 48px;
}

/* Vista de escritorio: muchas categorías en Phoenix, se agrupan en 3 columnas
   más compactas. En móvil se queda igual que antes (una sola columna). */
@media (min-width: 900px) {
    #foro-contenido.foro-contenido-indice {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px 32px;
    }

    #foro-contenido.foro-contenido-indice .foro-categoria {
        margin-bottom: 0;
    }

    /* Sin la fila 60px genérica de .foro-wrap: aquí abajo no hay nada más,
       así que el margen inferior se reduce al mismo gap vertical que ya
       separa dos filas de categorías (8px), para que no aparezca scroll
       vertical de sobra. Si se añade otra fila de categorías, este mismo
       hueco queda igual que el que ya hay entre filas actualmente. */
    .foro-wrap.foro-wrap-indice {
        padding-bottom: 8px;
    }
}

.foro-categoria h2 {
    font-family: var(--font-heading);
    color: var(--color-accent);
    border-bottom: 2px solid var(--color-highlight);
    padding-bottom: 0px;
    margin-bottom: 10px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    height: 48px;
}

/* El enlace es el contenedor flex real: así el icono y el texto se centran
   entre sí sin depender de la línea base (que varía entre <img> y <i>). */
.foro-categoria h2 a {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    line-height: 1;
}

.foro-categoria-icono {
    width: 33px;
    height: 33px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
    align-self: center;
    pointer-events: auto;
    user-select: none;
    cursor: pointer;
}

i.foro-categoria-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    line-height: 1;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

i.foro-categoria-icono.fa-comments {
    background-image: linear-gradient(135deg, #4fc3f7, #1565c0);
}

i.foro-categoria-icono.fa-utensils {
    background-image: linear-gradient(135deg, #ba68c8, #6a1b9a);
}

i.foro-categoria-icono.fa-toolbox {
    background-image: linear-gradient(135deg, #90a4ae, #37474f);
}

i.foro-categoria-icono.fa-video {
    background-image: linear-gradient(135deg, #ec407a, #880e4f);
}

.foro-subforo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-paper);
    border: 1px solid #e0d5c0;
    border-radius: 8px;
    padding: 2px 18px;
    margin-bottom: 5px;
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.15s ease;
}

.foro-subforo:hover {
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.15);
}

.foro-subforo .foro-subforo-info {
    flex: 1;
    min-width: 0;
}

.foro-subforo .foro-subforo-info h3 {
    font-family: var(--font-clean);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-accent);
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

.foro-subforo .foro-subforo-info p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.foro-subforo .foro-subforo-info p:empty {
    display: none;
}

.foro-subforo-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: right;
    font-size: 0.78rem;
    opacity: 0.75;
    white-space: nowrap;
    margin-right: 14px;
    flex-shrink: 0;
}

.foro-subforo-stats span:not(:last-child) {
    border-right: 1px solid #d8c9a8;
    padding-right: 10px;
}

.foro-punto-no-leido {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-left: 8px;
    vertical-align: middle;
}

.foro-badge-no-leido {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-accent);
    color: var(--color-paper);
    font-size: 0.7rem;
    font-weight: 700;
}

.foro-hilo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-paper);
    border: 1px solid #e0d5c0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.foro-hilo-row.foro-arrastrando {
    opacity: 0.35;
}

.foro-hilo-drag-handle {
    color: var(--color-accent);
    cursor: grab;
    opacity: 0.6;
    flex-shrink: 0;
}

.foro-hilo-drag-handle:active {
    cursor: grabbing;
}

.foro-hilo-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: var(--color-text);
}

.foro-hilo-row .foro-hilo-meta {
    font-size: 0.8rem;
    opacity: 0.75;
    text-align: right;
    white-space: nowrap;
}

/* Tarjeta de borrador en "Mis borradores" (perfil.html): a diferencia de .foro-hilo-row
   (fila horizontal con drag handle + enlace), aquí título/resumen/botones van apilados
   verticalmente, así que usa su propia clase con display:block en vez de flex. */
.foro-borrador-card {
    display: block;
    background: var(--color-paper);
    border: 1px solid #e0d5c0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.foro-borrador-card .foro-hilo-meta {
    text-align: left;
    white-space: normal;
}

.foro-borrador-donde {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.foro-borrador-donde-badge {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-paper);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 10px;
    flex-shrink: 0;
}

.foro-borrador-donde-nombre {
    color: var(--color-text);
    font-weight: 600;
    font-style: italic;
}

.foro-borrador-titulo {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.foro-borrador-resumen {
    font-style: italic;
    opacity: 0.8;
    line-height: 1.4;
    margin-bottom: 6px;
}

.foro-borrador-fecha {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-bottom: 10px;
}

.foro-borrador-acciones {
    display: flex;
    gap: 8px;
    align-items: center;
}

.foro-hilo-titulo {
    /* font-weight controlado por inline style según no_leido */
}

.foro-hilo-titulo .fa-thumbtack {
    color: var(--color-highlight);
    margin-right: 6px;
}

.foro-hilo-fenix {
    width: 40px;
    height: 40px;
    margin-right: 0;
    vertical-align: middle;
    opacity: 0.8;
}

.foro-post {
    /* Padding horizontal (12px) igual al padding horizontal de .foro-editor y mismo
       border (1px) para que el ancho de columna de .foro-post-contenido coincida en
       píxeles exactos con el ancho de .foro-editor (ambos hijos directos de .foro-wrap
       a 100% de ancho) y el texto se parta igual al escribir que al publicar. */
    background: var(--color-paper);
    border: 1px solid #e0d5c0;
    border-radius: 8px;
    padding: 16px 12px 24px 12px;
    margin-bottom: 12px;
    box-sizing: border-box;
    width: 100%;
}

.foro-post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    position: relative;
}

.foro-post img.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.foro-post .foro-post-autor {
    font-weight: 600;
    color: var(--color-accent);
}

.foro-post .foro-post-fecha {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-left: 8px;
}

.foro-post-menu-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 1.2rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.foro-post-menu-btn:hover {
    opacity: 1;
}

.foro-post-menu {
    background: var(--color-paper);
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 150px;
    overflow: hidden;
}

.foro-post-menu button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
    color: inherit;
    transition: background 0.15s;
}

.foro-post-menu button:hover {
    background: rgba(139, 69, 19, 0.1);
}

.foro-post-menu button:not(:last-child) {
    border-bottom: 1px solid #e0d5c0;
}

.foro-post .foro-post-contenido {
    line-height: 1.5;
    word-wrap: break-word;
}

.foro-post-contenido img {
    max-width: 100%;
    border-radius: 6px;
    margin: 6px 0;
}

.foro-post-contenido a {
    color: var(--color-accent) !important;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.foro-post-contenido a:visited {
    color: var(--color-accent) !important;
}

.foro-post-contenido a:hover {
    color: var(--color-wood) !important;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .foro-post-contenido a:hover {
        background-image: linear-gradient(90deg, var(--color-wood), #a8791f, var(--color-accent), #a8791f, var(--color-wood));
        background-size: 300% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent !important;
        animation: foro-enlace-degradado 3.125s linear infinite;
    }
}

@keyframes foro-enlace-degradado {
    to {
        background-position: 300% center;
    }
}

.foro-post-contenido ul,
.foro-post-contenido ol {
    margin: 8px 0 8px 22px;
}

/* Editor de texto enriquecido (nuevo tema / responder) */
.foro-editor-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.foro-editor-toolbar button {
    width: 34px;
    height: 34px;
    background: var(--color-paper);
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 0.9rem;
}

.foro-editor-toolbar button:hover {
    background: var(--color-accent);
    color: var(--color-paper);
}

.foro-editor-flotante {
    display: none;
    position: absolute;
    gap: 2px;
    background: #2b2b2b;
    border-radius: 6px;
    padding: 4px;
    z-index: 1000;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.foro-editor-flotante::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2b2b2b;
}

.foro-editor-flotante button {
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

.foro-editor-flotante button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.foro-editor {
    /* Padding=12px en formularios (nuevo tema/responder), pero sin padding dentro de .foro-post
       (durante edición) para evitar doble padding que reduce el ancho de línea. */
    width: 100%;
    min-height: 240px;
    margin-bottom: 10px;
    font-family: var(--font-clean);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-paper);
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    padding: 12px;
    overflow-wrap: break-word;
    outline: none;
    box-sizing: border-box;
}

.foro-post .foro-editor {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}

#nt-titulo {
    font-size: 1.1rem;
    padding: 18px 16px;
    background: var(--color-paper);
}

.foro-editor:focus {
    outline: none;
}

.foro-editor a {
    color: var(--color-accent) !important;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.15s ease;
}

.foro-editor a:visited {
    color: var(--color-accent) !important;
}

.foro-editor a:hover {
    color: var(--color-wood) !important;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .foro-editor a:hover {
        background-image: linear-gradient(90deg, var(--color-wood), #a8791f, var(--color-accent), #a8791f, var(--color-wood));
        background-size: 300% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent !important;
        animation: foro-enlace-degradado 3.125s linear infinite;
    }
}

.foro-post .foro-editor:focus {
    border: none;
    box-shadow: none;
}

#foro-hilo-titulo[contenteditable="true"] {
    outline: none;
    border: none;
    box-shadow: none;
}

.foro-editor img {
    max-width: 100%;
    border-radius: 6px;
}

.foro-form textarea,
.foro-form input,
.foro-form select {
    width: 100%;
    margin-bottom: 10px;
}

/* Estilo unificado de campos de texto/selects/textarea en todo el foro */
.foro-wrap input[type="text"],
.foro-wrap input[type="date"],
.foro-wrap input[type="number"],
.foro-wrap input[type="email"],
.foro-wrap select,
.foro-wrap textarea {
    font-family: var(--font-clean);
    font-size: 0.92rem;
    color: var(--color-text);
    background: var(--color-paper);
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    padding: 9px 12px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.foro-wrap input[type="text"]:focus,
.foro-wrap input[type="date"]:focus,
.foro-wrap input[type="number"]:focus,
.foro-wrap input[type="email"]:focus,
.foro-wrap select:focus,
.foro-wrap textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.12);
}

.foro-wrap input::placeholder,
.foro-wrap textarea::placeholder {
    color: #a8987a;
}

/* Campos embebidos en filas de tabla: más compactos que en formularios */
.foro-wrap table.foro-tabla input,
.foro-wrap table.foro-tabla select {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.85rem;
}

.foro-wrap table.foro-tabla input[type="number"] {
    width: 70px;
}

.foro-wrap table.foro-tabla input[type="checkbox"] {
    width: auto;
    accent-color: var(--color-accent);
}

.foro-fila-form input,
.foro-fila-form select {
    flex: 1 1 180px;
}

.foro-form label {
    font-size: 0.85rem;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.foro-borrador-aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 10px;
    background: rgba(139, 69, 19, 0.08);
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.foro-borrador-botones {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 4px;
}

.foro-btn-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: var(--font-clean);
    font-size: 0.8rem;
    cursor: pointer;
    color: #fff;
}

.foro-btn-mini.foro-btn-mantener {
    background: #2e7d32;
}

.foro-btn-mini.foro-btn-mantener:hover {
    background: #1b5e20;
}

.foro-btn-mini.foro-btn-eliminar {
    background: #c62828;
}

.foro-btn-mini.foro-btn-eliminar:hover {
    background: #8e0000;
}

.foro-alerta {
    background: #fce8e6;
    border: 1px solid #d93025;
    color: #a50e0e;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.foro-vacio {
    text-align: center;
    padding: 30px;
    opacity: 0.7;
}

.foro-breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.foro-breadcrumb a {
    color: var(--color-accent);
}

.foro-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.foro-modal {
    background: var(--color-paper);
    border-radius: 10px;
    padding: 24px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.foro-modal-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.foro-modal label {
    display: block;
    font-weight: 600;
    margin: 12px 0 6px;
}

.foro-modal input[type="text"],
.foro-modal input:not([type]) {
    width: 100%;
    padding: 8px;
    border: 1px solid #d8c9a8;
    border-radius: 6px;
}

.foro-subforo-intro {
    background: #fbf6ea;
    border: 1px solid #e0d5c0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}