/* 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);
}

/* style.css pinta una textura de papel fija (body::before, z-index:9999) por encima de TODA la
   página como parte del tema visual del sitio; sin esto se ve también encima de las imágenes del
   foro (avatares, iconos de categoría, imágenes de un post...), dando un efecto de "ruido" que no
   se puede confundir con la propia imagen. Se sube el z-index solo de las imágenes del foro para
   que queden por encima de esa textura, sin tocar el resto de la página. */
.foro-wrap img {
    position: relative;
    z-index: 10000;
}

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

.foro-header-fila {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    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-migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.foro-migas .foro-migas-btn {
    padding: 5px 12px;
    font-size: 0.82rem;
}

.foro-migas .foro-migas-sep {
    opacity: 0.45;
    font-size: 0.82rem;
}

.foro-migas .foro-migas-actual {
    cursor: default;
    opacity: 0.85;
}

.foro-migas .foro-migas-actual:hover {
    background: transparent;
}

.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;
    flex-shrink: 0;
}

.foro-badge-no-leido {
    position: relative;
}

.foro-badge-no-leido img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.foro-badge-no-leido .foro-fenix-amarillo {
    position: absolute;
    top: 0;
    left: 0;
    animation: foro-fenix-crossfade 1.2s ease-in-out infinite alternate;
}

@keyframes foro-fenix-crossfade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.foro-hilo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-paper);
    border: 1px solid #e0d5c0;
    border-radius: 8px;
    /* Sin padding vertical: el alto de la fila lo define el margin de 2px
       arriba/abajo del icono del fénix (.foro-hilo-fenix), que es el elemento
       más alto. Añadir padding aquí sumaría espacio de más sobre ese margen. */
    padding: 0 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 {
    display: flex;
    align-items: center;
    gap: 10px;
    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 */
    display: flex;
    align-items: center;
    gap: 6px;
}

.foro-hilo-fenix {
    /* Ocupa el alto de la fila menos 2px de margen arriba y abajo: al ser
       flex y el elemento más alto, ese margen define el alto de la fila. */
    width: 32px;
    height: 32px;
    margin: 2px 0;
    flex-shrink: 0;
    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;
}

/* Tamaños de texto del editor (foro-tam-*): en em para que escale con el tamaño
   heredado del elemento donde estén anidados, no con un px fijo. */
.foro-tam-pequeno {
    font-size: 0.75em;
}

.foro-tam-grande {
    font-size: 1.5em;
}

.foro-tam-titulo {
    font-size: 2em;
    font-weight: 700;
}

/* El texto en negrita se colorea con el acento del sitio, tanto ya publicado como mientras
   se escribe en el editor. */
.foro-post-contenido b,
.foro-post-contenido strong,
.foro-editor b,
.foro-editor strong {
    color: var(--color-accent);
}

/* El texto subrayado se destaca con el dorado del sitio y un brillo suave, tanto ya publicado
   como mientras se escribe en el editor. */
.foro-post-contenido u,
.foro-editor u {
    color: var(--color-highlight);
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
}

/* Spoiler: el contenido se oculta hasta que se clica la etiqueta, tanto en un post ya publicado
   como dentro del editor (mientras se redacta/edita). Es un toggle: al abrir, la etiqueta de
   arriba cambia a "Ocultar X" y aparece una segunda etiqueta igual al final del contenido, para
   saber hasta dónde llega el spoiler y poder volver a cerrarlo desde ahí. Los spoilers ya
   publicados con el marcado antiguo (una sola etiqueta, sin fin) se siguen pudiendo abrir/cerrar
   igual, solo que sin el cambio de texto ni la etiqueta de cierre (no tienen esa estructura). */
.foro-post-contenido .foro-spoiler-contenido,
.foro-editor .foro-spoiler-contenido {
    display: none;
}

.foro-post-contenido .foro-spoiler.foro-spoiler-abierto .foro-spoiler-contenido,
.foro-editor .foro-spoiler.foro-spoiler-abierto .foro-spoiler-contenido {
    display: inline;
}

.foro-post-contenido .foro-spoiler-etiqueta,
.foro-editor .foro-spoiler-etiqueta {
    cursor: pointer;
    background: rgba(139, 69, 19, 0.1);
    border: 1px dashed var(--color-accent);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.85em;
    user-select: none;
    display: inline-block;
}

.foro-post-contenido .foro-spoiler-etiqueta:hover,
.foro-editor .foro-spoiler-etiqueta:hover {
    background: rgba(139, 69, 19, 0.18);
}

/* Botón "×" para quitar el spoiler (solo dentro del editor, ver foroInyectarBotonesQuitarSpoiler
   en foro-engine.js -nunca llega a guardarse, foro_sanear_html lo descarta al publicar-). La
   etiqueta de inicio pasa a flex solo en el editor para poder colocarlo a su derecha. */
.foro-editor .foro-spoiler-etiqueta-inicio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.foro-spoiler-quitar {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.9em;
}

.foro-spoiler-quitar:hover {
    opacity: 1;
    color: #c62828;
}

.foro-post-contenido .foro-spoiler-quitar {
    display: none;
}

.foro-spoiler-texto-abierto {
    display: none;
}

.foro-spoiler.foro-spoiler-abierto .foro-spoiler-texto-cerrado {
    display: none;
}

.foro-spoiler.foro-spoiler-abierto .foro-spoiler-texto-abierto {
    display: inline;
}

/* Al abrirse, una línea sólida en el borde que toca el contenido (abajo en la etiqueta de
   inicio, arriba en la de fin) marca claramente dónde empieza y termina lo revelado, en vez
   de que las dos etiquetas queden como dos cuadros dashed sueltos sin relación visual. */
.foro-spoiler.foro-spoiler-abierto .foro-spoiler-etiqueta-inicio {
    border-bottom-style: solid;
    margin-bottom: 1em;
}

.foro-post-contenido .foro-spoiler-etiqueta-fin,
.foro-editor .foro-spoiler-etiqueta-fin {
    display: none;
    margin-top: 1em;
    border-top-style: solid;
}

.foro-spoiler.foro-spoiler-abierto .foro-spoiler-etiqueta-fin {
    display: inline-block;
}

.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,
.foro-editor ul,
.foro-editor 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;
    /* Por encima de .foro-wrap img (z-index:10000), o quedaría tapado al aparecer sobre una
       imagen seleccionada. */
    z-index: 10001;
    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-flotante button[data-cmd="guardar"] {
    margin-left: 4px;
    padding-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px 0 0 4px;
    color: #6b6b6b;
    cursor: default;
}

.foro-editor-flotante button[data-cmd="guardar"].foro-flotante-guardar-activo {
    color: #6fdc8c;
    cursor: pointer;
}

.foro-editor-flotante button[data-cmd="guardar"].foro-flotante-guardar-activo:hover {
    background: rgba(111, 220, 140, 0.2);
}

/* Con una imagen seleccionada, el cuadro flotante solo muestra las herramientas que tienen
   sentido sobre una imagen (enlace, spoiler, restaurar tamaño, eliminar y guardar); con texto
   seleccionado es al revés: se ocultan esas dos últimas, específicas de imagen. */
.foro-editor-flotante [data-modo="imagen"] {
    display: none;
}
.foro-editor-flotante.foro-flotante-modo-imagen [data-modo="texto"] {
    display: none;
}
.foro-editor-flotante.foro-flotante-modo-imagen [data-modo="imagen"] {
    display: inline-block;
}

.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-editor img.foro-img-seleccionada {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    cursor: pointer;
}

/* La selección real (Range sobre el nodo <img>) sigue activa -para que Supr/Retroceso la borre-,
   pero sin el tinte azul que el navegador pinta por defecto sobre una imagen seleccionada: el
   único indicador visual de selección es el borde de arriba. */
.foro-editor img::selection {
    background-color: transparent;
}

.foro-img-asa {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--color-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: nwse-resize;
    /* Por encima de .foro-wrap img (z-index:10000) y del cuadro flotante, que puede aparecer a
       la vez sobre la misma imagen seleccionada. */
    z-index: 10002;
}

.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-foros input.s-nombre {
    font-weight: 700;
}

.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-historial-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foro-historial-item {
    border: 1px solid #e0d5c0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fbf6ea;
}

.foro-historial-fecha {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-accent);
    margin-bottom: 4px;
}

.foro-historial-resumen {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 8px;
    word-break: break-word;
}

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