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

/* View Transitions API (navegación MPA, solo Chromium) — DESACTIVADA: combinada con
   el fondo `background-attachment: fixed` del body (style.css), en Chrome Android
   provocaba que la página nueva se quedara en negro tras navegar (índice -> subforo
   y viceversa), sin repintarse hasta reiniciar la app. No hay forma fiable de
   desactivar esto solo en móvil vía CSS (el at-rule @view-transition no admite
   @media anidado con soporte garantizado), así que se quita del todo: se pierde el
   suavizado del parpadeo "Cargando..." pero se evita la pantalla negra, mucho peor.
@view-transition {
    navigation: auto;
}
*/

/* 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;
    flex-wrap: wrap;
    gap: 10px;
}

.foro-header-fila #foro-user-box {
    margin-left: auto;
}

.foro-redes-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mismo estilo que los iconos de red de "Mi perfil" (ver .foro-icono-* más abajo), replicado aquí
   para que la cabecera y el perfil se vean idénticos. Discord es la única excepción explícita -se
   deja con su badge morado de siempre, nunca se tocó en el perfil tampoco-. */
.foro-redes-header a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.foro-redes-header a:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}

/* El selector va cualificado con .foro-redes-header a para ganar en especificidad a la regla
   base de arriba (que fija 30px de ancho/alto) -una clase sola perdía y el recorte no se aplicaba-. */
.foro-redes-header a.foro-red-discord {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.65rem;
    background: #5865f2;
}

.foro-red-whatsapp {
    color: #25d366;
    font-size: 1.3rem;
}

.foro-red-instagram {
    font-size: 1.3rem;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.foro-red-facebook,
.foro-red-telegram {
    background: #fff;
    border-radius: 50%;
    font-size: 1.275rem;
}

.foro-red-facebook {
    color: #0866ff;
}

.foro-red-telegram {
    color: #26a5e4;
}

.foro-red-x {
    color: #fff;
    font-size: 1.1rem;
}

/* La label envuelve el icono en flex (en vez de un vertical-align a pelo) para que el círculo no
   quede recortado por la altura de línea del texto -con vertical-align negativo se veía cortada
   la mitad inferior del círculo, como una luna creciente-. */
.foro-label-red {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

/* Iconos de red en "Mi perfil", replicando los SVG del navegador Phoenix (icons/social/):
   Facebook y Telegram usan el glifo circular completo de FA (fa-facebook / fa-telegram) coloreado,
   con fondo blanco detrás para que la "f"/el avión (recortados en el glifo) salgan blancos;
   Instagram es el glifo suelto sin círculo, relleno con el degradado de marca vía background-clip. */
.foro-icono-facebook {
    color: #0866ff;
    background: #fff;
    border-radius: 50%;
    font-size: 1.1em;
}

.foro-icono-whatsapp {
    color: #25d366;
    font-size: 1.27em;
}

.foro-icono-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.265em;
}

.foro-icono-telegram {
    color: #26a5e4;
    background: #fff;
    border-radius: 50%;
    font-size: 1.1em;
}

.foro-icono-x {
    color: #fff;
    font-size: 1.1em;
}

.foro-icono-youtube {
    color: #ff0000;
    /* Parche blanco solo bajo el centro del glifo, para que el triángulo de play (recortado
       y transparente en fa-youtube) se vea blanco sin dejar borde blanco alrededor. */
    background: linear-gradient(#fff, #fff) center / 55% 55% no-repeat;
    font-size: 1.05em;
}

.foro-icono-tiktok {
    color: #fff;
    font-size: 1.155em;
}

/* Sin width/height propios -a diferencia del Discord de la cabecera, que vive dentro de un <a> de
   tamaño fijo-: aquí, igual que Facebook, se apoya en el font-size heredado del label (1.275rem)
   para que el glifo no desborde su caja circular (con tamaño fijo pequeño se recortaba en una
   esquina). El glifo de Discord (a diferencia del de Facebook) ocupa casi toda su caja de por sí,
   así que hace falta un pequeño padding para que quede el mismo margen morado alrededor que en la
   cabecera -si no, la parte blanca se ve desproporcionadamente grande-. */
.foro-icono-discord {
    color: #fff;
    background: #5865f2;
    border-radius: 50%;
    padding: 4px;
    font-size: 0.65em;
}

.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: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    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: transparent;
    color: #ef4444;
    border-color: #ef4444;
}

.foro-btn.foro-btn-danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

.foro-btn:hover {
    background: rgba(0, 210, 255, 0.12);
}

.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 rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 10px 18px;
    font-family: var(--font-clean);
    font-size: 0.95rem;
    cursor: pointer;
}

.foro-btn-cancelar:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
}

.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 rgba(255, 255, 255, 0.12);
    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 rgba(255, 255, 255, 0.12);
    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: #050714;
}

.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 rgba(255, 255, 255, 0.12);
    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: #dc2626;
    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 rgba(255, 255, 255, 0.12);
    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 rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: var(--color-text);
}

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

.foro-notif-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.foro-notif-item.no-leido {
    background: rgba(0, 210, 255, 0.12);
}

.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 rgba(255, 255, 255, 0.12);
    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(0, 210, 255, 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 rgba(255, 255, 255, 0.12);
    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 rgba(255, 255, 255, 0.12);
    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: rgba(255, 255, 255, 0.06);
}

.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: TSA solo tiene 3 categorías, se agrupan en 2 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(2, 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;
    }
}

@keyframes foro-luz-oro {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: 0% center;
    }
}

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

.foro-categoria h2 a {
    text-decoration: none;
}

.foro-cat-titulo-texto {
    background: linear-gradient(90deg,
        #f2c14e 0%, #f2c14e 35%,
        #ffe9a0 45%,
        #fffef5 50%,
        #ffe9a0 55%,
        #f2c14e 65%, #f2c14e 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: foro-luz-oro 4.5s linear infinite;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.9)) drop-shadow(0 2px 4px rgba(0,0,0,0.8)) drop-shadow(0 0 8px rgba(0,0,0,0.5));
}

.foro-cat-titulo-texto-azul {
    background: linear-gradient(90deg,
        #6ec3ea 0%, #6ec3ea 35%,
        #9adcf5 45%,
        #c3ecff 50%,
        #9adcf5 55%,
        #6ec3ea 65%, #6ec3ea 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: foro-luz-oro 4.5s linear infinite;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.9)) drop-shadow(0 2px 4px rgba(0,0,0,0.8)) drop-shadow(0 0 8px rgba(0,0,0,0.5));
}

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

/* El icono de SWGOH trae fondo negro propio: se difumina por arriba/izquierda/derecha
   (dejando el borde inferior intacto) para que se funda con el fondo oscuro del sitio. */
img.foro-categoria-icono[src*="swgoh-vader"] {
    mask-image: radial-gradient(ellipse 130% 140% at 50% 140%, black 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 130% 140% at 50% 140%, black 55%, transparent 100%);
}

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, #cfd8dc, #78909c);
}

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: rgba(18, 21, 44, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    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(0, 210, 255, 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;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    display: inline-block;
}

.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 rgba(255, 255, 255, 0.12);
    padding-right: 10px;
}

/* Ancho mínimo fijo para que "1 tema" no ocupe menos que "3 temas": sin esto, al ser
   más corto el texto, todo el bloque (badge incluido) se desplaza hacia la derecha
   -el bloque queda anclado por su borde derecho junto a la flecha, así que un texto
   más corto mueve el borde izquierdo (el badge) en vez de dejarlo fijo-. */
.foro-subforo-num-temas {
    min-width: 52px;
    text-align: left;
}

.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-seccion-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 20px 0 12px;
    padding: 8px 0;
    border-bottom: 2px solid var(--color-accent);
}

.foro-seccion-vacia {
    padding: 10px 12px;
    color: var(--color-text-muted, #888);
    font-size: 0.9rem;
    font-style: italic;
}

.foro-seccion-titulo .foro-cat-titulo-texto-azul {
    background: linear-gradient(90deg,
        #6ec3ea 0%, #6ec3ea 35%,
        #9adcf5 45%,
        #c3ecff 50%,
        #9adcf5 55%,
        #6ec3ea 65%, #6ec3ea 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: foro-luz-oro 4.5s linear infinite;
}

.foro-hilo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(18, 21, 44, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    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 8px;
    margin-bottom: 8px;
}

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

/* Tema oculto (solo lo ven administradores, ver .foro-badge-oculto): fila atenuada con borde
   punteado para diferenciarla de un tema normal a simple vista dentro del listado. */
.foro-hilo-row.foro-hilo-oculto {
    opacity: 0.55;
    border-style: dashed;
}

.foro-badge-oculto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
    vertical-align: middle;
}

.foro-aviso-oculto {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    color: #f59e0b;
    font-size: 0.9rem;
}

.foro-fila-cat.foro-arrastrando,
.foro-fila-sf.foro-arrastrando {
    opacity: 0.35;
}

.foro-drop-antes {
    box-shadow: inset 0 2px 0 0 var(--color-accent);
}

.foro-drop-despues {
    box-shadow: inset 0 -2px 0 0 var(--color-accent);
}

.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 rgba(255, 255, 255, 0.1);
    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: #050714;
    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: 4px;
    font-family: var(--font-clean);
    /* Con un título de 1 línea, el alto de la fila lo marca el icono del fénix (36px con
       su margen), más alto que el texto (24px), así que el texto queda centrado con
       margen de sobra arriba y abajo. Con un título largo que pasa a 2 líneas, el texto
       (48px) supera al icono y pasa a marcar él el alto de la fila -quedando sin ningún
       margen propio, pegado arriba y abajo-. Este padding vertical no cambia nada visible
       en el caso de 1 línea (sigue mandando el icono) pero da aire al de 2 líneas. */
    padding: 6px 0;
}

.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: rgba(18, 21, 44, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px 12px 48px 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(0, 210, 255, 0.1);
}

.foro-post-menu button:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Menú de borde de imagen: fila de círculos de color en vez de la lista vertical por defecto
   de .foro-post-menu. */
.foro-menu-borde {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    min-width: 0;
}

.foro-menu-borde-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 210px;
}

/* Anula el separador ".foro-post-menu button:not(:last-child) { border-bottom: ... }" pensado
   para el menú vertical por defecto: aquí los botones van en filas horizontales, y esa línea se
   colaría como un borde inferior desigual en cada círculo/botón que no sea el último de su fila. */
.foro-post-menu.foro-menu-borde button:not(:last-child) {
    border-bottom: none;
}

.foro-menu-borde button {
    display: block;
    width: auto;
    padding: 0;
}

/* Fila de grosores (1-4px): botones de texto en vez de círculos, con el activo resaltado en el
   color de acento del sitio. */
.foro-menu-borde-grosores button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 !important;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-texto-tenue, #999);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px;
    cursor: pointer;
}

.foro-menu-borde-grosores button:hover {
    color: inherit;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.foro-menu-borde-grosores button.foro-borde-grosor-activo {
    color: var(--color-accent);
    border-color: var(--color-accent) !important;
    background: rgba(0, 210, 255, 0.12);
}

/* Selectores con dos clases (".foro-menu-borde .foro-borde-swatch") a propósito: le dan más
   especificidad que ".foro-post-menu button" (que fija background:none/border genéricos para
   cualquier botón del menú) sin recurrir a !important, que rompía el degradado del selector de
   color libre de más abajo al ganarle también a él. */
.foro-menu-borde .foro-borde-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--foro-swatch-color, #fff);
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.1s;
}

/* Reafirma el color de fondo del swatch: ".foro-post-menu button:hover" (background cian
   translúcido) empata en nº de clases con este selector (2 clases + :hover cada uno) y le gana
   por tener además un selector de tipo ("button"), así que sin este background explícito el
   swatch se veía negruzco al pasar el ratón por encima. El resaltado es un anillo exterior
   (box-shadow), no un cambio de color interior. */
.foro-menu-borde .foro-borde-swatch:hover {
    background: var(--foro-swatch-color, #fff);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* Marca el color de borde que ya está aplicado a la imagen cuando se reabre el menú sobre ella. */
.foro-menu-borde .foro-borde-swatch.foro-borde-color-activo {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.35);
}

.foro-menu-borde .foro-borde-swatch-picker {
    position: relative;
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
    overflow: hidden;
}

.foro-borde-swatch-picker input[type="color"] {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 30px;
    height: 30px;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

.foro-menu-borde button[data-borde-quitar] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-texto-tenue, #999);
    flex-shrink: 0;
}

.foro-menu-borde button[data-borde-quitar]:hover {
    color: inherit;
}

.foro-post .foro-post-contenido {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.75;
    color: #63d0eb;
    word-wrap: break-word;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.1px;
}

/* 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 usa el mismo color sólido que el texto normal -sin degradado-, 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: #52c9e4;
}

/* El texto subrayado tiene su propio degradado azul (más oscuro que el de negrita, sin llegar
   a blanco), tanto ya publicado como mientras se escribe en el editor. Necesita fijar su propio
   background-image/-webkit-text-fill-color -no basta con "color"- porque .foro-post-contenido
   ya deja -webkit-text-fill-color:transparent en toda la caja (para su propio degradado base) y
   esa propiedad SÍ se hereda: sin este reset, el <u> queda con relleno transparente y se ve el
   degradado del ancestro por debajo en vez de un color propio. */
/* text-decoration-color es IMPRESCINDIBLE aquí (verificado con captura real en
   comidacasera-foro): Chromium pinta la línea del <u> con -webkit-text-fill-color en
   vez de con "color" cuando esa propiedad está fijada -truco de "texto con
   degradado"-, así que sin fijar text-decoration-color a mano la línea del
   subrayado sale transparente (invisible) aunque el texto se vea bien; solo se
   hacía visible al seleccionar el texto (el resaltado de selección repinta encima). */
/* background-attachment:fixed ancla el degradado al viewport en vez de a la caja de cada <u> -sin
   esto, cuando un tramo subrayado se parte en varios elementos <u> distintos (p.ej. una palabra en
   cursiva DENTRO de un subrayado más largo: la cursiva obliga a envolverla en su propio <u> anidado
   en vez de compartir el <u> del resto de la frase, ver foroNormalizarOrdenFormato), cada <u> pintaba
   el degradado completo (oscuro->claro) sobre SU PROPIO ancho, dando un salto de color visible justo
   donde empezaba/terminaba la cursiva en vez de una transición continua a lo largo de toda la frase. */
.foro-post-contenido u,
.foro-editor u {
    background-image: linear-gradient(90deg, #4dd8ff, #b8f2ff);
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration-color: #4dd8ff;
    text-shadow: 0 0 6px rgba(30, 200, 240, 0.4);
}

/* Subrayado + negrita combinados: si la negrita queda anidada DENTRO del subrayado (p.ej. se
   subraya primero y luego se pone en negrita esa misma selección), la regla de negrita de arriba
   -que aplica directamente sobre el <b>- gana por ser más específica que el degradado heredado
   del <u> ancestro (background-image no se hereda), y el texto sale con el degradado de negrita
   -que termina en blanco- en vez del degradado propio del subrayado. Aquí se repite el mismo
   degradado del <u> con un selector más específico todavía (dos elementos) para que gane sin
   necesidad de !important. */
.foro-post-contenido u b,
.foro-post-contenido u strong,
.foro-editor u b,
.foro-editor u strong {
    background-image: linear-gradient(90deg, #4dd8ff, #b8f2ff);
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration-color: #4dd8ff;
    text-shadow: inherit;
}

/* 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(0, 210, 255, 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(0, 210, 255, 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: #ef4444;
}

.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;
    /* Las imágenes son "inline" por defecto, lo que deja un hueco fantasma debajo (el espacio
       reservado para el descendente de la línea de texto, ej. la cola de una "g"). vertical-align
       las alinea con la base de la línea (donde ya se apoya el texto) en vez de dejarlas colgando
       de la línea base + descendente, eliminando ese hueco. "bottom" en vez de "middle" para que,
       si hay dos imágenes de distinta altura en la misma línea, se alineen por abajo entre sí en
       vez de quedar centradas una respecto a la otra. */
    vertical-align: bottom;
}

.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-highlight) !important;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .foro-post-contenido a:hover {
        background-image: linear-gradient(90deg, var(--color-accent), var(--color-highlight), var(--color-accent));
        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;
    }

    /* Chrome no extiende el degradado de arriba dentro de una etiqueta anidada (p.ej. <b>/<u> de
       un enlace parcialmente en negrita/subrayado): el hijo se queda con el color sólido en vez
       de continuar el mismo degradado animado del padre, dando la sensación de que "empieza de
       nuevo". Repetir el degradado también sobre el hijo, con la MISMA animación, arregla estos
       dos casos -se mueven sincronizados como una sola pieza-. */
    .foro-post-contenido a:hover b,
    .foro-post-contenido a:hover strong,
    .foro-post-contenido a:hover u {
        background-image: linear-gradient(90deg, var(--color-accent), var(--color-highlight), var(--color-accent));
        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;
    }

    /* La cursiva no admite el mismo arreglo: es un límite real de Chrome -el propio
       font-style:italic (con o sin degradado propio duplicado encima, probado) impide que
       -webkit-background-clip:text recorte limpiamente ese tramo, y sale un color lavado/blanco
       en vez del degradado. Como no hay forma de que ese tramo participe del degradado animado,
       se le deja un color sólido de la propia paleta (el mismo tono final del degradado) en vez
       de dejar que se vea roto/desvaído. */
    .foro-post-contenido a:hover i,
    .foro-post-contenido a:hover em {
        background: none;
        -webkit-text-fill-color: var(--color-highlight);
        color: var(--color-highlight) !important;
        animation: none;
    }
}

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

.foro-post-contenido ul,
.foro-post-contenido ol,
.foro-editor ul,
.foro-editor ol {
    /* Sin margin-left: el marcador (•/1.) debe quedar a la misma distancia del borde
       izquierdo que el texto normal de un párrafo (p.ej. el "●" que deja el reemplazo de
       símbolos al escribir "()"), no más metido hacia dentro. El reset global
       "* { padding: 0 }" (css/style.css) anula el padding-left que el navegador pone por
       defecto en <ul>/<ol> (~40px) para hacer sitio al marcador: sin padding propio, el
       marcador -con list-style-position:outside, también por defecto- se dibuja FUERA de la
       caja del elemento en vez de a su izquierda, pudiendo asomar más allá del borde de la
       tarjeta con textos pegados de fuera (p.ej. una lista copiada de un resultado de
       Google). Se restaura ese padding explícitamente (~1.2em, el mismo valor típico que ya
       traía el navegador) para que el marcador tenga sitio y quede alineado con el borde de
       los párrafos, en vez de depender del valor por defecto (que además varía entre
       navegadores). */
    margin: 8px 0;
    padding-left: 20px;
}

.foro-post-contenido li,
.foro-editor li {
    margin-bottom: 12px;
}

.foro-post-contenido .foro-lista-triangles,
.foro-editor .foro-lista-triangles {
    list-style-type: none;
    padding-left: 0;
}

.foro-post-contenido .foro-lista-triangles li::before,
.foro-editor .foro-lista-triangles li::before {
    content: '► ';
    color: inherit;
    margin-right: 4px;
}

/* 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 rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 0.9rem;
}

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

/* Resalta el botón cuando el formato ya está aplicado en el cursor/selección actual (negrita,
   cursiva, subrayado, enlace, tamaño), igual que hacen la mayoría de editores enriquecidos. */
.foro-editor-toolbar button.activo {
    background: var(--color-accent);
    color: #050714;
}

.foro-editor-flotante {
    display: none;
    position: absolute;
    gap: 2px;
    background: #1c2040;
    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: #1c2040;
}

/* Cuando el menú se coloca DEBAJO de la selección (dispositivos táctiles, ver JS
   actualizarFlotante), la flechita apunta hacia arriba en vez de hacia abajo. */
.foro-editor-flotante.foro-flotante-abajo::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1c2040;
}

.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.activo {
    background: var(--color-accent);
    color: #050714;
}

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

.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: 'Quicksand', sans-serif;
    font-size: 1.1rem;
    line-height: 1.75;
    letter-spacing: 0.1px;
    /* Mismo color sólido azulado que .foro-post-contenido, para que el editor se vea igual
       que el texto ya publicado mientras se escribe/edita. */
    color: #63d0eb;
    caret-color: #63d0eb;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
    background: rgba(18, 21, 44, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    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-codigo-copiable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-paper);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 4px 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    word-break: break-all;
}

.foro-codigo-texto {
    color: var(--color-accent);
    flex: 1;
    padding: 2px 4px;
}

.foro-codigo-btn {
    display: inline-block;
    background: var(--color-accent);
    color: #050714;
    border: none;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-clean);
    transition: opacity 0.15s;
}

.foro-codigo-btn:hover {
    opacity: 0.8;
}

.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-highlight) !important;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .foro-editor a:hover {
        background-image: linear-gradient(90deg, var(--color-accent), var(--color-highlight), var(--color-accent));
        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;
    margin: 6px 0;
    vertical-align: bottom;
}

.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 SOLA: el
   único indicador visual en ese caso es el contorno de arriba. Ojo: solo se suprime cuando lleva
   la clase foro-img-seleccionada (selección de UNA imagen completa vía seleccionar()) -si se
   selecciona un rango de texto que solo INCLUYE la imagen de paso (arrastrando por encima de
   párrafos con la imagen en medio), esa imagen no lleva esta clase y sí debe verse con el tinte
   azul normal, o no habría ninguna pista visual de que forma parte de lo seleccionado/copiado. */
.foro-editor img.foro-img-seleccionada::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;
    z-index: 1001;
}

.foro-editor img.foro-img-multiseleccionada {
    outline: 3px solid #ffe066;
    outline-offset: 1px;
    cursor: pointer;
}

.foro-unir-barra {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--color-paper);
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    font-family: var(--font-clean);
}

.foro-unir-contador {
    color: var(--color-text);
    font-size: 0.9rem;
    white-space: nowrap;
}

.foro-unir-barra button {
    background: var(--color-accent);
    color: #050714;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-family: var(--font-clean);
    white-space: nowrap;
}

.foro-unir-barra button:hover {
    filter: brightness(1.1);
}

.foro-unir-barra button[data-cancelar] {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 8px 10px;
}

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

/* "Mi perfil" a la izquierda y "Mis borradores"/"Mis créditos" a la derecha, cada uno ocupando
   la mitad de la página (en vez de ir apilados a ancho completo, que dejaba mucho espacio vacío
   al lado del formulario). El editor de nuevo tema/responder no usa esta clase -sigue a ancho
   completo, ver nota sobre .foro-editor/.foro-post en el resto del CSS-. */
.foro-perfil-columnas {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.foro-perfil-columnas>.foro-perfil-col {
    flex: 1 1 50%;
    min-width: 0;
}

@media (max-width: 700px) {
    .foro-perfil-columnas {
        flex-direction: column;
    }
}

/* "No tienes borradores guardados" etc.: centrado tiene sentido a ancho completo, pero aquí
   (columna o sección propia de "Mi perfil") queda raro sin nada alrededor con lo que centrarse
   -mejor a la izquierda-. */
#foro-borradores.foro-vacio,
#foro-borradores .foro-vacio,
#foro-creditos .foro-vacio {
    text-align: left;
    padding: 0;
}

/* Las etiquetas de campo del perfil (País, Zona horaria...) un 50% más grandes que el resto de
   labels del foro para que destaquen más en esta página concreta. Las opciones de checkbox
   (.foro-checkbox-opcion) quedan fuera, con su propio tamaño normal más abajo. */
#form-perfil label {
    font-size: 1.275rem;
}

#form-perfil label.foro-checkbox-opcion {
    font-size: 0.9rem;
    font-weight: normal;
}

#form-perfil .foro-form-nota {
    font-size: 0.85rem;
    opacity: 0.75;
    margin-top: -4px;
    margin-bottom: 24px;
}

/* Fondo propio para que las opciones de checkbox (notificaciones por email) se lean bien sobre
   el fondo oscuro del foro, en vez de quedar sueltas sin contraste. */
.foro-checkbox-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    background: var(--color-paper);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 8px;
}

/* 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 rgba(255, 255, 255, 0.12);
    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(0, 210, 255, 0.12);
}

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

/* 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;
    background: #b8e4f5;
    color: #111827;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.foro-wrap table.foro-tabla input:disabled {
    background: #9dd4ec;
    color: #111827;
    opacity: 1;
}

.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(0, 210, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

/* Variante del aviso de borrador en el listado del subforo: además del texto fijo, muestra el
   título y un resumen (informativo, no editable) del borrador, así que pasa a layout vertical
   en vez de la fila única del aviso dentro del propio formulario. */
.foro-borrador-aviso-subforo {
    flex-direction: column;
    align-items: stretch;
}

.foro-borrador-aviso-subforo .foro-borrador-botones {
    margin-top: 4px;
}

.foro-borrador-preview-titulo {
    font-weight: 700;
    font-family: var(--font-clean);
}

.foro-borrador-preview-texto {
    color: var(--color-texto-tenue, #999);
    font-size: 0.85rem;
    font-family: var(--font-clean);
    white-space: pre-line;
}

.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: #ef4444;
}

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

.foro-alerta {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid #ef4444;
    color: #fca5a5;
    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-recorte {
    max-width: min(94vw, 820px);
    text-align: center;
}

/* Rejilla 3x3 alrededor de la imagen: los 4 campos de margen (arriba/abajo/izquierda/derecha)
   quedan pegados a cada lado del lienzo, tal como se dibuja el ajuste manual del recorte. */
.foro-recorte-grid {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-items: center;
    gap: 10px;
}

.foro-recorte-campo-arriba { grid-column: 2; grid-row: 1; }
.foro-recorte-campo-izquierda { grid-column: 1; grid-row: 2; }
.foro-recorte-lienzo { grid-column: 2; grid-row: 2; }
.foro-recorte-campo-derecha { grid-column: 3; grid-row: 2; }
.foro-recorte-campo-abajo { grid-column: 2; grid-row: 3; }

.foro-recorte-campo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.foro-recorte-campo label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-texto-tenue, #999);
    margin: 0 !important;
}

.foro-recorte-campo-fila {
    display: flex;
    align-items: center;
    gap: 4px;
}

.foro-recorte-campo input[type="number"] {
    width: 44px;
    padding: 5px 4px;
    text-align: center;
    font-family: var(--font-clean);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-paper);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    margin: 0 !important;
    /* Quita las flechas de incremento/reducción nativas: se sustituyen por los botones −/+ de
       al lado, más fáciles de acertar con el ratón. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.foro-recorte-campo input[type="number"]::-webkit-outer-spin-button,
.foro-recorte-campo input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.foro-recorte-campo input[type="number"]:focus {
    outline: none;
    border-color: var(--color-accent);
}

.foro-recorte-campo-fila button {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text);
    background: var(--color-paper);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.foro-recorte-campo-fila button:hover {
    color: var(--color-accent);
    border-color: var(--color-accent) !important;
}

.foro-recorte-lienzo {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.foro-recorte-img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    -webkit-user-drag: none;
}

.foro-recorte-selector {
    position: absolute;
    border: 2px dashed var(--color-accent);
    background: rgba(0, 210, 255, 0.12);
    cursor: move;
    box-sizing: border-box;
}

/* "Ocultar guías": deja de pintarse el borde/relleno/asas/etiqueta, pero el selector se puede
   seguir arrastrando y redimensionando con normalidad (solo cambia lo visual). */
.foro-recorte-selector.foro-recorte-selector-oculto {
    border-color: transparent;
    background: transparent;
}

.foro-recorte-selector.foro-recorte-selector-oculto .foro-recorte-asa,
.foro-recorte-selector.foro-recorte-selector-oculto .foro-recorte-dimensiones {
    opacity: 0;
}

.foro-recorte-asa {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px;
    background: var(--color-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 1;
}

.foro-recorte-asa[data-dir="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.foro-recorte-asa[data-dir="ne"] { top: 0; right: 0; margin-right: -7px; cursor: nesw-resize; }
.foro-recorte-asa[data-dir="sw"] { bottom: 0; left: 0; margin-bottom: -7px; cursor: nesw-resize; }
.foro-recorte-asa[data-dir="se"] { bottom: 0; right: 0; margin-bottom: -7px; margin-right: -7px; cursor: nwse-resize; }

/* Tiras invisibles a lo largo de cada borde (no solo las 4 esquinas) para poder arrastrar y
   redimensionar el recorte también desde el borde superior/inferior/izquierdo/derecho. */
.foro-recorte-borde {
    position: absolute;
}
.foro-recorte-borde[data-dir="n"] { top: -5px; left: 0; right: 0; height: 10px; cursor: ns-resize; }
.foro-recorte-borde[data-dir="s"] { bottom: -5px; left: 0; right: 0; height: 10px; cursor: ns-resize; }
.foro-recorte-borde[data-dir="w"] { left: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.foro-recorte-borde[data-dir="e"] { right: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }

.foro-recorte-dimensiones {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-family: var(--font-clean);
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
}

.foro-menu-info-imagen {
    padding: 8px 14px;
    min-width: 0;
}

.foro-info-imagen-texto {
    font-family: var(--font-clean);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

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

/* Antes solo existía inline en admin.html (panel de traducciones de categorías/subforos); se
   comparte aquí también para el modal de traducciones del tema (topic.html), que es una página
   pública y no carga el <style> propio del panel admin. */
.foro-tab-btn {
    background: var(--color-paper);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-family: var(--font-clean);
}

.foro-tab-btn.activo {
    background: var(--color-accent);
    color: #050714;
}

.foro-chip-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-accent);
    font-size: 1.2rem;
    padding: 4px;
}

.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 rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: #0f2938;
    color: #e6f2f7;
}

.foro-modal input[type="text"]::placeholder,
.foro-modal input:not([type])::placeholder {
    color: #6b7f94;
}

.foro-historial-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foro-historial-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
}

.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: #9aa0bd;
    margin-bottom: 8px;
    word-break: break-word;
}

.foro-subforo-intro {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}


/* Móvil: el filter:drop-shadow triple-capa de los títulos de categoría es muy caro de
   recalcular por frame en GPUs de móvil (ralentiza el scroll). Se sustituye por
   text-shadow (barato, no recalcula blur por frame) manteniendo el degradado animado. */
@media (max-width: 768px) {
    /* Mitad del margen lateral de escritorio (80% ancho + 20px padding) para que
       quepan más títulos en una sola línea. */
    .foro-wrap {
        width: 100%;
        padding: 0 5% 60px;
    }

    /* 3px menos que en escritorio (6px), solo en móvil. */
    .foro-hilo-titulo {
        padding: 3px 0;
    }

    /* Menos separación entre el icono de fénix (no leído) y "N temas" para que
       quepa en una sola línea junto al nombre del subforo cuando dice "temas"
       (más ancho que "tema"). */
    .foro-subforo-stats {
        gap: 4px;
    }

    .foro-badge-no-leido img {
        width: 20px;
        height: 20px;
    }

    /* La animación del degradado (background-position moviéndose cada frame)
       también pesa en móvil: se desactiva y se deja fijo en el punto más
       brillante (30% del recorrido). */
    .foro-cat-titulo-texto {
        animation: none;
        background-position: 30% center;
        filter: brightness(1.4);
        text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    }

    /* El título de subforo (más pequeño, 1rem, que el de categoría de arriba) se ve
       grueso/borroso con el mismo glow de 6px que sí funciona en el título grande de
       categoría -a este tamaño de letra el resplandor difumina los bordes en vez de
       darle profundidad-. Probado también un contorno de 4 sombras sólidas: se veía
       casi negro, tapando el degradado azul. Se deja una única sombra pequeña con algo
       de blur (justo lo necesario para separar del fondo sin verse ni plano ni borroso). */
    .foro-cat-titulo-texto-azul {
        animation: none;
        background-position: 30% center;
        filter: brightness(1.4);
        text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    }

    /* El agarre de arrastrar-para-reordenar (solo admin) no tiene sentido en
       táctil y deja un hueco vacío a la izquierda del icono; se oculta en móvil. */
    .foro-hilo-drag-handle {
        display: none;
    }
}

/* Filas de tema (subforo.html): en vez de icono+título a la izquierda y
   respuestas+autor a la derecha en la misma línea (se aprieta y queda mal en
   pantallas estrechas), se apilan: icono+título arriba, respuestas+autor
   debajo, justificado a la derecha y en un tono más apagado (al quedar más
   cerca del título, un color más oscuro evita que compita con él). Solo en
   vertical: en horizontal (más ancho) se mantiene igual que en PC. */
@media (max-width: 768px) and (orientation: portrait) {
    /* El menú flotante de formato (negrita/cursiva/enlace/imagen/etc.) tiene hasta 11
       botones en una sola fila (30px + gap cada uno): en móvil vertical eso es más
       ancho que la pantalla, así que al seleccionar texto cerca del borde derecho el
       menú se salía y quedaba cortado. Se limita su ancho a ~6 botones y se le permite
       envolver en 2 filas -la posición vertical del menú (arriba de la selección) ya
       se recalcula sola en JS a partir de flotante.offsetHeight, así que crece hacia
       arriba automáticamente sin tocar la lógica de posicionamiento. */
    .foro-editor-flotante {
        flex-wrap: wrap-reverse;
        max-width: 200px;
        justify-content: center;
    }

    /* En vertical no cabe fecha + badge + "N temas" + flecha en una sola línea junto
       al nombre del subforo sin apretar demasiado. En vez de partir la fila en 2 líneas
       (como se probó antes), se quita directamente la fecha -el dato menos importante
       de los 3- y se mantiene todo en una sola línea, como estaba en origen. En
       horizontal (más ancho) sí se sigue mostrando, igual que en PC. */
    .foro-subforo-fecha {
        display: none;
    }

    /* Sin la fecha, el span anterior ("N temas") pasa a ser el último visible: le
       quitamos el separador que normalmente lo distingue del siguiente elemento. */
    .foro-subforo-stats > span:has(+ .foro-subforo-fecha) {
        border-right: none;
        padding-right: 0;
    }

    .foro-hilo-row {
        margin-bottom: 4px;
    }

    .foro-hilo-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    .foro-hilo-row .foro-hilo-meta {
        align-self: stretch;
        justify-content: flex-end;
        margin-top: -4px;
        text-align: right;
        white-space: normal;
        opacity: 0.55;
    }

    /* Cabecera en móvil vertical: el bloque de usuario (redes, campana, avatar,
       botones) no cabe junto al logo en una sola línea sin desbordar la pantalla.
       Se fuerza a su propia línea debajo (width:100% dentro del flex-wrap de
       .foro-header-fila) y se le permite envolver internamente en vez de forzar
       todo en una sola línea sin cortes (white-space:nowrap del estilo base). */
    .foro-header-fila #foro-user-box {
        width: 100%;
        margin-left: 0;
    }

    .foro-user-box-compacta {
        font-size: 0.64rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        white-space: normal;
        gap: 6px;
    }

    .foro-user-box-compacta > img {
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }

    .foro-user-box-compacta .foro-btn {
        padding: 5px 8px;
        font-size: 0.65rem;
        margin-left: 8px;
    }

    /* Solo iconos (sin texto) en los botones de Perfil/Admin/Salir */
    .foro-user-box-compacta .foro-btn.secundario {
        font-size: 0;
        padding: 4px;
    }

    .foro-user-box-compacta .foro-btn.secundario i {
        font-size: 1rem;
    }

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

    /* Migas de pan (Índice / Categoría / Subforo): más compactas para que quepan
       en una sola línea en vertical en vez de partirse en varias. */
    .foro-migas {
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: auto;
    }

    .foro-migas .foro-migas-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .foro-migas .foro-migas-sep {
        flex-shrink: 0;
    }
}

/* Esqueleto de carga del tema (hilo.html): mientras se espera la respuesta de
   api/foro_posts.php, en vez de dejar el área en blanco se muestra esto -mismo hueco
   aproximado que ocupará el título+primer post reales, con un brillo animado-. Se
   pinta ya en el HTML estático (sin esperar a JS) y desaparece solo, sustituido sin
   más trabajo: el título usa textContent (borra el span) y #foro-contenido usa
   innerHTML (borra todo el bloque) en cuanto llegan los datos reales. */
.foro-skeleton-title,
.foro-skeleton-avatar,
.foro-skeleton-line {
    display: inline-block;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.14) 37%, rgba(255, 255, 255, 0.06) 63%);
    background-size: 400% 100%;
    animation: foro-skeleton-shimmer 1.4s ease infinite;
}

@keyframes foro-skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.foro-skeleton-title {
    width: 55%;
    height: 1.6rem;
    vertical-align: middle;
}

.foro-skeleton-post {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px;
}

.foro-skeleton-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.foro-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.foro-skeleton-post-header .foro-skeleton-line {
    height: 12px;
}

.foro-skeleton-line {
    display: block;
    height: 12px;
    margin-bottom: 10px;
}

.foro-skeleton-line:last-child {
    margin-bottom: 0;
}

.foro-skeleton-line.corta {
    width: 30%;
}

.foro-skeleton-line.media {
    width: 70%;
}

.foro-skeleton-line.larga {
    width: 95%;
}

/* Indicador "Cargando..." bajo el esqueleto, mismo diseño (spinner en órbita +
   puntos latiendo) que el "Pensando/Trabajando..." de Phoenix Code, adaptado a los
   colores de este foro. */
.foro-skeleton-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

.foro-skeleton-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    background: radial-gradient(circle at center, #4da6ff 0 3px, transparent 4px);
}

.foro-skeleton-spinner::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid rgba(125, 211, 252, 0.25);
}

.foro-skeleton-spinner::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px #22d3ee;
    transform-origin: 2.5px 12px;
    animation: foro-skeleton-orbitar 1.4s steps(14) infinite;
}

@keyframes foro-skeleton-orbitar {
    to {
        transform: rotate(360deg);
    }
}

.foro-skeleton-cargando .foro-skeleton-dot {
    animation: foro-skeleton-latir 1.4s steps(1) infinite both;
}

.foro-skeleton-cargando .foro-skeleton-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.foro-skeleton-cargando .foro-skeleton-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes foro-skeleton-latir {

    0%,
    80%,
    100% {
        opacity: 0.2;
    }

    40% {
        opacity: 1;
    }
}

/* ==========================================================================
   Miniaturas de imagen (ver botón "miniatura" del editor en foro-engine.js) y
   su lightbox/galería al hacer clic. Los porcentajes de ancho son el pedido
   explícito del usuario: 20% en escritorio, 50% en móvil vertical, 33% en
   móvil horizontal.
   ========================================================================== */

.foro-post-contenido img.foro-img-miniatura,
.foro-editor img.foro-img-miniatura {
    display: inline-block;
    max-width: 20%;
    height: auto;
    cursor: zoom-in;
    vertical-align: top;
}

@media (max-width: 700px) and (orientation: portrait) {

    .foro-post-contenido img.foro-img-miniatura,
    .foro-editor img.foro-img-miniatura {
        max-width: 50%;
    }
}

@media (max-width: 900px) and (orientation: landscape) {

    .foro-post-contenido img.foro-img-miniatura,
    .foro-editor img.foro-img-miniatura {
        max-width: 33%;
    }
}

.foro-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foro-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

.foro-lightbox-cerrar,
.foro-lightbox-flecha {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.foro-lightbox-cerrar:hover,
.foro-lightbox-flecha:hover {
    background: rgba(255, 255, 255, 0.28);
}

.foro-lightbox-cerrar {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.foro-lightbox-flecha {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.foro-lightbox-anterior {
    left: 16px;
}

.foro-lightbox-siguiente {
    right: 16px;
}

.foro-lightbox-contador {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
}