/* Importamos el estilo base de prosilver */
@import url("../../prosilver/theme/stylesheet.css");
@import url("templates.css");

/* ========================================= */
/* VARIABLES GLOBALES DEL TEMA (HROL)        */
/* ========================================= */
:root {
    /* Imágenes */
    --imagen-deco: url('https://2img.net/i.imgur.com/EkeInIa.png');
    --imagen-deco2: url('https://2img.net/i.imgur.com/5FsRC8e.png');
    --firma-imagen: var(--imagen-deco);
    --firma-titulo: 'We Are Demigods';
    
    /* Colores Principales y Acentos */
    --accent1: #ead3a2;
    --accent2: #f5edcd;
    --fondo: #3a3a3a;
    --foroborde: rgba(255, 227, 165, 0.12);
    --text: #777777;
    --title: #ffffff;
    --title2: #e0e0e0;
    --title3: #bdbdbd;
    --subtitle: #bbbbbb;
    --subtitle2:rgb(75, 75, 75)b;
    
    /* Fondos oscuros (Cajas, menús, etc) */
    --tbckg0: rgba(0,0,0,0.4);
    --dbckg0: #0a0a0a;
    --dbckg1: #0c0c0c;
    --dbckg2: #0e0e0e;
    --dbckg3: #101010;
    --dbckg4: #181818;
    --dbckg5: rgb(8 8 8 / 65%);
    --dbckg6: rgb(8 8 8 / 35%);
    --dbckg7: rgba(255, 255, 255, 0.11);
    --dbckgblackgrey: rgb(39 39 39);
    
    --frow: rgba(20, 20, 20, 0.92);
    
    /* Scrollbar */
    --scroll: rgba(255,255,255,0.1);
    --scroll-bckg: #060606;
    --scroll-thumb: #333333;
    --scroll-track: #1c1c1c;
    
    /* Bordes */
    --border0-c: rgba(255,255,255,0.1);
    --border1-c: #131313;
    --border2-c: #1c1c1c;
    --border0: 1px solid var(--border0-c);
    --border1: 1px solid var(--border1-c);
    --border2: 1px solid var(--border2-c);
    
    /* Tipografía: Tamaños */
    --fs-body: 14px;
    --fs-h0: clamp(100px, 40vw, 160px);
    --fs-h1: 50px;
    --fs-h2: 40px;
    --fs-h3: 30px;
    --fs-h4: 20px;
    --fs-h5: 16px;
    --fs-small: 13px;
    --fs-smaller: 11px;
    --fs-tiny: 10px;
    --fs-mini: 9px;
    
    /* Tipografía: Fuentes */
    --f-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --f-greekfont: 'Caesar Dressing', cursive;
    --f-mono: 'Space Mono', monospace;
    --f-titles: 'Cinzel', serif;
    --f-font1: 'Metal Mania', system-ui;
    --f-font2: 'Jim Nightshade', cursive;
    --f-font3: 'Girassol', cursive;
    --f-font4: 'Squada One', cursive;
    
    /* Efectos y Sombras */
    --shadow-d: 1px 1px rgba(0,0,0,0.1),-1px 1px rgba(0,0,0,0.1),1px -1px rgba(0,0,0,0.1),-1px -1px rgba(0,0,0,0.1), 1px 0px rgba(0,0,0,0.1),-1px 0px rgba(0,0,0,0.1),0px 1px rgba(0,0,0,0.1),0px -1px rgba(0,0,0,0.1);
    --shadow-b: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black, 1px 0px black, -1px 0px black, 0px -1px black, 0px 1px black;
    
    /* Colores de Grupos/Rangos */
    --olimpo: #C4C4C4; 
    --semidios: #D6CA77;
    --semititan: #f59d9d;
    --criatura: #affab1;
    --campistas: #6e6e6e;
}

/* ========================================= */
/* APLICACIÓN GLOBAL AL FORO                 */
/* ========================================= */

/* Sobrescribimos el fondo, color y fuente de TODO el foro de un plumazo */
html, body {
    background-color: var(--dbckg1);
    color: var(--text);
    font-family: var(--f-main);
    font-size: 14px; /* Tamaño de letra base para todo el foro */
    line-height: 1.6; /* Interlineado para que sea cómodo leer */
}

/* Sobrescribimos todos los enlaces por defecto para que no sean el azul feo de prosilver */
a, a:link, a:visited {
    color: var(--title2);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, a:active {
    color: var(--accent1); /* Al pasar el ratón se iluminan en blanco */
    transition: color 0.3s ease;
}

.postlink {
    border-bottom-color: #ffffff26;
}

.postlink:hover {
    color: var(--title2);
    font-weight: bold;
    background-color:initial;
}

.postlink:visited {
    color: var(--title2);
    text-decoration: none;
    border-bottom-color: #ffffff26;
}

.postbody .content b,
.postbody .content strong {
    color: var(--title2);
}

.postbody .content em,
.postbody .content i:not(.icon):not(.fa):not([class*="fa-"]) {
    color: var(--title3);
}

/* ========================================= */
/* SCROLL GLOBAL DEL FORO (Estilo Olimpo)    */
/* ========================================= */

/* Para Firefox (Usa tu color de acento dorado y fondo oscuro) */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--accent1) var(--dbckg1);
}

/* Para Chrome, Edge, Opera, Safari y tablillas internas */
::-webkit-scrollbar {
    width: 8px; /* Fino y sutil, pero lo suficiente para agarrarlo cómodamente */
    height: 8px; /* Para cuando haya scroll horizontal en tablas */
}

/* El carril por donde baja la barra */
::-webkit-scrollbar-track {
    background: var(--dbckg1); /* Fondo oscuro liso */
    border-left: 1px solid var(--foroborde); /* Pequeña línea separadora */
}

/* La barra (El detalle dorado/griego) */
::-webkit-scrollbar-thumb {
    background: var(--accent1); /* Tu color dorado principal */
    border-radius: 10px; /* Bordes redondeados y modernos */
    border: 2px solid var(--dbckg1); /* Crea un falso margen para que no toque los bordes, queda muy elegante */
}

/* Efecto al pasar el ratón por encima de la barra */
::-webkit-scrollbar-thumb:hover {
    background: var(--accent2); /* Se ilumina ligeramente */
}

/* ========================================= */
/* CUADRO DE INFORMACION DEL RATON       */
/* ========================================= */

/* Estilo para el Tooltip Flotante que sigue al ratón */
#mi_tooltip_flotante {
    display: none;              /* Oculto por defecto */
    position: absolute;         /* Posición absoluta para poder moverse */
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px 5px;
    background: var(--dbckg5);
    border: 5px solid var(--border1-c);
    color: var(--title);             /* Letras Grises */
    padding: 2px 5px;           /* Espaciado interno */
    font-size: 12px;            /* Tamaño de letra */
    border-radius: 3px;         /* Borde ligeramente redondeado */
    z-index: 10000;             /* Asegura que flote sobre todo lo demás */
    pointer-events: none;       /* El ratón ignora el cuadro (para poder clicar debajo) */
    white-space: nowrap;        /* Evita saltos de línea extraños */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4); /* Pequeña sombra para profundidad */
}

/* ========================================= */
/* OVERRIDES GENERALES DE PROSILVER          */
/* Adaptación de plantillas no editadas      */
/* ========================================= */

/* 1. Fondo general de la página y texto base */
body {
    background-color: var(--fondo);
    color: var(--text);
}

/* 2. Paneles principales (Registro, Perfil, Mensajes Privados) */
.panel {
    color: var(--text);
    border-radius: 5px;
    background-color: var(--dbckg1);
    border: 1px solid #1a1a1a;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 20px;
    margin: 20px;
}

/* 3. Colores de fondo alternos (Listas de miembros, opciones, reglas) */
/* Reemplazamos los tonos grises/celestes de prosilver por tus oscuros */
.bg1 {
    background-color: var(--dbckg1);
    border: 1px solid #1a1a1a;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 20px;
    margin: 20px;
}

.bg2 {
    background-color: var(--dbckg2);
    border: 1px solid #1a1a1a;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 20px;
    margin: 20px;
}

.bg3 {
    background-color: var(--dbckg3);
    border: 1px solid #1a1a1a;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 20px;
    margin: 20px;
}

/* 4. Envoltorios de los foros y temas (si hay alguno sin editar) */
.forabg, .forumbg {
    background-color: var(--dbckg0);
    background-image: none; /* Esto elimina el degradado azul por defecto de prosilver */
    border: 1px solid var(--foroborde);
}

/* 5. Colores de enlaces generales y al pasar el ratón */
a {
    color: var(--accent1);
}

a:hover {
    color: var(--title);
    text-decoration: none;
}

/* 6. Títulos por defecto (H1, H2, H3) que no tengan clases propias */
h1, h2, h3, h4 {
    color: var(--title2);
    font-family: var(--f-titles);
    margin-right: initial;
}

/* 7. Separadores (líneas horizontales) */
hr {
    border-color: var(--foroborde);
    border-top: 1px solid var(--foroborde);
}

/* 8. Botones estándar de prosilver (Submit, Cancelar, etc) */
.button {
    background-color: var(--dbckg2);
    border: 1px solid var(--foroborde);
    color: var(--title2);
    background-image: none; /* Quitamos brillos antiguos */
}

.button:hover {
    background-color: var(--dbckg0);
    color: var(--accent1);
    border-color: var(--accent1);
}

/* 1. Cajas de texto, áreas de mensaje y desplegables */
.inputbox, select, textarea {
    background-color: var(--dbckg4);
    color: var(--title2);
    border: 1px solid var(--border1-c);
}

/* Brillo naranja al hacer clic en una caja de texto */
.inputbox:focus, select:focus, textarea:focus {
    border-color: var(--accent1);
    box-shadow: 0 0 3px var(--accent1);
    outline: none;
}

/* 2. Menús desplegables nativos (iconos de tuerca, notificaciones, etc.) */
.dropdown .dropdown-contents {
    background-color: var(--dbckg1);
    border: 1px solid var(--border1-c);
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

/* Color de los enlaces dentro de los menús desplegables */
.dropdown-contents > li > a {
    color: var(--subtitle);
}

.dropdown-contents > li > a:hover {
    background-color: var(--dbckg3);
    color: var(--accent1);
}

/* 3. Tablas generales (Usadas en la lista de miembros, Panel de Control, etc.) */
table.table1 thead th {
    background-color: var(--dbckg2);
    color: var(--title);
    border-bottom: 2px solid var(--accent1);
    text-transform: uppercase;
}

table.table1 tbody tr {
    border-bottom: 1px solid var(--border2-c);
}

table.table1 tbody tr:hover {
    background-color: var(--dbckg4); /* Ligero brillo al pasar el ratón por una fila */
}

/* 4. Paginación general (Páginas 1, 2, 3...) */
.pagination li a {
    background-color: var(--dbckg3);
    color: var(--subtitle);
    border: 1px solid var(--border1-c);
    border-radius: 3px;
}

.pagination li a:hover {
    background-color: var(--accent1);
    color: #000000;
    border-color: var(--accent1);
}

/* Página actual activa */
.pagination li.active span {
    background-color: var(--accent1);
    color: #000000;
    border: 1px solid var(--accent1);
    border-radius: 3px;
    font-weight: bold;
}

/* 5. Notificaciones de éxito y error */
.error {
    color: #ff4d4d; /* Rojo suave para destacar en fondo oscuro */
    font-weight: bold;
}

.notice {
    background-color: var(--dbckg0);
    border: 1px solid var(--border1-c);
    color: var(--subtitle);
    padding: 10px;
}


dl.faq dt {
    color: var(--title2);
}

.content {
    color: var(--text);
    font-family: var(--f-body);
}

body#phpbb .content h2, 
body#phpbb .panel h2,
body#phpbb h2.faq-title {
    color: var(--title2);
    border-bottom-color: var(--border0-c);
    font-size: var(--fs-h4);
    font-weight: bolder;
    font-family: var(--f-titles);
}

dd label{
    color:var(--title2)
}

dt label{
    color:var(--title2)
}

fieldset dl:hover dt label {
    color:var(--title)
}

dl.details dd {
    color: var(--text);
}

dl.details dt {
    color: var(--title2);
}

h2.ucp-title {
    font-family: var(--f-titles);
    color: var(--title2);
    font-weight: bolder;
    text-align: center;
}

.responsive-tab{
    top: 5px;
}

.responsive-tab .responsive-tab-link:before {
    border-color: var(--text);
}

.responsive-tab .responsive-tab-link:hover:before {
    border-color: var(--title2)
}

.content li{
    list-style-type: square;
    margin: 10px 0px;
}

/* ========================================= */
/* GENERALIZACION DE PANEL DE CONTROL DEL USUARIO */
/* Y MENSAJES   */
/* ========================================= */

/* 1. Menú lateral (Navegación del UCP / MCP) */
body#phpbb #cp-menu {
    margin-bottom: 20px;
}

/* Enlaces del menú lateral */
body#phpbb #navigation a {
    background: var(--dbckg2);
    color: var(--subtitle);
    border: 1px solid var(--border1-c);
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 0;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
}

/* Efecto al pasar el ratón por el menú lateral */
body#phpbb #navigation a:hover {
    background: var(--dbckg4);
    color: var(--accent1);
    text-decoration: none;
}

/* Pestaña activa (La sección donde te encuentras) */
body#phpbb #navigation #active-subsection a {
    background: var(--accent1);
    color: #000000;
    font-weight: bold;
    border: 1px solid #000000;
}

body#phpbb #navigation #active-subsection a:hover {
    background: var(--accent2);
    color: #000000;
}

/* 2. Listas de opciones y formularios (Preferencias, Ajustes) */
body#phpbb .cp-main fieldset dl {
    border-bottom: 1px dashed var(--border2-c);
    color: var(--text);
    padding: 8px 8px;
    background-color: var(--dbckg0);
}

/* Efecto nativo de Prosilver al pasar el ratón por una fila de opciones (adaptado a oscuro) */
body#phpbb .cp-main fieldset dl:hover {
    background-color: var(--dbckg2);
}

/* Títulos de las opciones (Ej: "Mostrar email:") */
body#phpbb .cp-main fieldset dt label {
    color: var(--title);
    font-family: var(--f-titles, serif);
    font-size: 14px;
}

/* Textos pequeños explicativos debajo de las opciones */
body#phpbb .cp-main fieldset dt span {
    color: var(--subtitle);
    font-size: 11px;
}

/* 3. Pequeños bloques en el panel izquierdo (Amigos, Colores) */
body#phpbb .cp-mini {
    background-color: var(--dbckg1);
    border: 1px solid var(--border1-c);
    margin-top: 15px;
    padding: 10px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4);
}

/* 4. Arreglo de los títulos dentro del Panel Central (Ajustes de Mensajes, etc) */
body#phpbb .cp-main h3 {
    color: var(--accent1);
    border-bottom: 1px solid var(--border2-c);
    font-family: var(--f-titles);
    text-transform: uppercase;
    margin-bottom: 15px;
    padding-bottom: 5px;
}

ul.topiclist li{
    color: var(--text);
}

ul.topiclist dd{
    border: none;
}

/* ========================================= */
/* 1. FONDO ESTÁTICO DE LA PANTALLA          */
/* ========================================= */

body {
    background-image: linear-gradient(to right, rgb(0 0 0 / 95%) 0%, /* Izquierda: Oscuro cálido (95% opacidad) */ rgb(0 0 0 / 70%) 50%, /* Centro: Naranja brillante (50% opacidad, deja ver más la foto) */ rgb(0 0 0 / 95%) 100% /* Derecha: Oscuro cálido (95% opacidad) */), url(./images/background.webp);
    background-attachment: fixed;
    /* background-size: 100% auto; */
    /* background-position: top center; */
    background-repeat: repeat;
    background-color: #111111;
}

/* ========================================= */
/* 2. HEADER               */
/* ========================================= */

#hrol-hero-header {
    /* height: 100vh; */
    width: 100%;
    /* Pon aquí la ruta de la imagen que irá en el header */
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra el texto en el medio de la pantalla */
}

.hrol-hero-content {
    text-align: center;
    width: 100%;
}

.hrol-logo {
    height: auto;
    display: block;
    width: 1300px;
    margin: -15px auto -140px auto;
}


/* Para quitar el color blanco de fondo del foro y que se vea el body fijado */
.wrap {
    background-color: transparent !important;
    border: none !important;
}


/* ========================================= */
/* 3. ESTRUCTURA BARRA LATERAL (FLEXBOX)     */
/* ========================================= */
#hrol-main-container {
    display: flex;
    align-items: flex-start; /* Evita que la barra lateral se estire verticalmente */
    gap: 20px; /* Separación entre sidebar y foro */
    max-width: 1200px; /* Ancho máximo del conjunto */
    /*margin: 20px auto; /* Centrado en pantalla */
}

#hrol-sidebar {
    width: 60px; /* Barra mucho más estrecha */
    height: 100%;
    flex-shrink: 0;
    position: fixed; left: 0;
    top: 0; 
    background: var(--dbckg0);
    border: var(--border1); 
    border-radius: 7px;
    padding: 85px 0; /* Espaciado arriba y abajo, 0 a los lados */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los iconos horizontalmente */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Sombra elegante */
}

/* Estilos de los iconos en la barra */
.hrol-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espacio vertical entre cada icono */
}

.hrol-sidebar-menu li a {
    color: var(--text);
    font-size: 15px; /* Tamaño de los iconos */
    display: flex;
    justify-content: center;
    gap: 5px;
    transition: color 0.3s ease; /* Efecto suave al pasar el ratón */
}

.hrol-sidebar-menu li a:hover {
    color: var(--accent1); 
    font-weight: bolder;
}

/* El foro ocupa el resto del espacio */
#page-body {
    flex-grow: 1;
    width: 100%;
}

/* --- ESTILOS DE LOS AVATARES EN LA BARRA LATERAL --- */

/* Contenedor del Avatar Principal */
.hrol-main-avatar-container {
    position: relative;
    margin: 20px 0; /* Separa un poco el avatar del resto de iconos */
    display: flex;
    justify-content: center;
}

.hrol-main-avatar img {
    width: 80px;
    height: 130px;
    border: 10px solid var(--dbckg0);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    transform: translateX(10px);
}

/* Mantenemos el efecto al hacer hover, O cuando el menú desplegable está visible */
.hrol-main-avatar:hover img,
.dropdown-visible .hrol-main-avatar img {
    transform: translateX(30px) scale(1.3); /* Sobresale un poco más al pasar el ratón */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    border-color: var(--dbckg0); /* Color distintivo */
}

/* Contenedor de las Cuentas Vinculadas */
.hrol-linked-accounts-container {
    margin: -10px 0;
}

/* Ajuste manual de posición para el menú del avatar */
.hrol-main-avatar-container .dropdown {
    /* Mueve el menú 10px más abajo respecto a su anclaje nativo */
    margin-top: -25px; 
    /* Lo desplaza 5px a la izquierda */
    margin-left: 135px; 
}

.hrol-linked-accounts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* Espacio vertical entre los avatares vinculados */
}

.hrol-linked-avatar img {
    width: 40px; /* Más pequeño que el principal */
    height: 55px;
    border: 2px solid var(--dbckg0);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.hrol-linked-avatar:hover img {
    transform: scale(1.2);
    border: 2px solid #CCCCCC;
    
}

/* ========================================= */
/* CAJA PRINCIPAL (Fondo Translúcido)        */
/* ========================================= */
.hrol-cuerpo-translucido {
    max-width: 1200px; /* El ancho de tu foro */
    margin: 40px auto; /* Centrado y con margen arriba/abajo */
    
    /* Fondo oscuro translúcido */
    background-color: rgba(10, 10, 10, 0.7); 
    
    /* El borde interior oscuro sólido */
    border: 10px solid #000000; 
    
    /* El truco del segundo borde ancho semi-transparente */
    /* box-shadow: X Y Blur Spread Color */
    box-shadow: 0 0PX 10px 15px color-mix(in srgb, var(--accent1) 10%, transparent);
    
    padding: 30px; /* Margen interior para que el contenido no pegue a los bordes */
    box-sizing: border-box;
}

/* Como el tablón ya tiene su propio margen, se lo quitamos para que no empuje demasiado dentro de la nueva caja */
#tablon {
    margin-top: 0 !important;
}

/* ========================================= */
/* BARRA DE NAVEGACIÓN STICKY (MIGAS DE PAN) */
/* ========================================= */
#hrol-sticky-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    /*background-color: color-mix(in srgb, var(--accent1) 70%, transparent);*/
    background-color: color-mix(in srgb, #000000 80%, transparent);
    border-bottom: var(--border2);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto;
    padding: 10px 0; 
    box-sizing: border-box;
    
    /* Animación un poco más rápida para evitar tirones (0.4s en vez de 0.8s) */
    transition: max-width 0.4s ease, border-radius 0.4s ease;
    border-radius: 5px; 
}

/* Estado Pegado (Expansión total) */
#hrol-sticky-nav.is-stuck {
    max-width: 100%; 
    border-radius: 0;
}


.hrol-nav-inner {
    display: flex;
    justify-content: space-between; /* Mantiene las migas a la izquierda y el futuro perfil a la derecha */
    align-items: center;
    width: 100%; /* Toma todo el ancho disponible */
    padding: 0 40px; /* Margen de seguridad para que el texto no pegue literalmente con el plástico del monitor */
    box-sizing: border-box; /* Evita que el padding rompa el ancho total */
}

/* La lista de las migas de pan */
.hrol-breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Por si la ruta es muy larga, que baje de línea elegantemente */
    gap: 10px; /* Separación entre cada elemento */
}

/* Enlaces base de las migas */
.hrol-breadcrumbs li a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--f-mono);
    font-size: var(--fs-tiny);
    letter-spacing: 1px;
    transition: color 0.3s ease;
    filter: drop-shadow(1px 1px 0 black);
    font-weight: bold;
}

/* El nombre principal del foro (Sitename) */
.hrol-crumb-main a {
    color: var(--title2) !important;
    font-family: var(--f-greekfont) !important;
    font-weight: bold;
    font-size: var(--fs-h4) !important;
}

.hrol-crumb-main a:hover {
    color: var(--title);
    filter: drop-shadow(2px 2px 0 black);
}

/* Categorías y Subforos (Más grisáceos) */
.hrol-crumb a {
    color: var(--text);
    padding-top: 1px;
}

/* Al pasar el ratón por los enlaces grises */
.hrol-crumb a:hover {
    color: var(--title);
}

/* Icono separador ( > ) */
.hrol-crumb-separator {
    color: var(--accent1);
}

/* ========================================= */
/* TABLÓN PRINCIPAL (GRID & FLEX)            */
/* ========================================= */

/* ========================================= */
/* TABLÓN PRINCIPAL OPTIMIZADO               */
/* ========================================= */
#tablon {
    max-width: 1200px;
    margin: 20px auto 30px auto;
    display: grid;
    grid-template-columns: 340px 1fr 280px 80px; 
    grid-template-rows: 35px 200px 80px 100px 50px; 
    grid-template-areas:
        "links links links links"
        "last ambi nov staff"
        "last weather nov staff"
        "eventos eventos eventos eventos"
        "ticker ticker ticker ticker";
    gap: 5px;
}

/* Cajas comunes */
.tbox { padding: 15px; box-sizing: border-box; overflow: auto; border: 10px solid transparent;}
.tbox::-webkit-scrollbar { width: 4px; }
.tbox::-webkit-scrollbar-thumb { background: var(--accent1); }

/* 1. Links */
.tblinks { grid-area: links; display: flex; gap: 5px; }
.tblinks a {
    flex: 1;
    background: var(--dbckg1);
    display: flex; justify-content: center; align-items: center;
    font: var(--fs-tiny) var(--f-mono);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}
.tblinks a:hover { color: var(--dbckg0); background: var(--accent1); }

/* ========================================= */
/* 2. ÚLTIMOS TEMAS (Extensión Propia)       */
/* ========================================= */

/* Contenedor principal de la columna izquierda */
.tblast { 
    grid-area: last; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-right: 5px; 
}
.tblast::-webkit-scrollbar { width: 4px; }
.tblast::-webkit-scrollbar-thumb { background: var(--dbckg2); }

/* Caja individual de cada tema */
.tbtopic { 
    background: var(--dbckg5); 
    padding: 10px;
    margin: 5px 0px 15px 5px;
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    display: flex; 
    justify-content: flex-start;
    align-items: center;
    position: relative; /* Fundamental para que el triángulo no se salga */
    overflow: hidden;   /* Corta el cuadrado para que parezca un triángulo */
    transition: background 0.3s ease;
}
.tbtopic:hover { 
    background: var(--dbckg4); 
}

/* Ocultamos el icono del rayo (em) */
.tbtopic > em {
    display: none;
}

/* Contenedor de los textos */
.tbtopic > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    width: 100%;
}

/* Título del Tema (Principal) */
.tbtopic > span > a { 
    font-size: var(--fs-small);
    line-height: 1.2; 
    font-weight: 700; 
    color: var(--subtitle); 
    text-decoration: none; 
    text-transform: uppercase;
    transition: color 0.3s;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    overflow: hidden;
}
.tbtopic > span > a:hover { 
    color: var(--accent1); 
}

/* Contenedor de Fecha y Autor */
.tbtopic > span > u { 
    font: var(--fs-mini) var(--f-mono); 
    font-weight: normal;
    text-decoration: none; 
    text-transform: uppercase;
    color: var(--text); 
    opacity: 0.6; /* Hace que llame menos la atención */
}

/* El enlace específico del Autor (Más pequeño) */
.tbtopic > span > u a {
    font-size: var(--fs-tiny); 
    color: var(--text);
    font-weight: 600; 
    transition: color 0.3s;
}
.tbtopic > span > u a:hover {
    color: var(--accent1);
}

/* ========================================= */
/* INDICADOR DE [NUEVO] - TRIÁNGULO ANIMADO  */
/* ========================================= */
.badge-new {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background-color: var(--accent1);
    transform: rotate(45deg);
    font-size: 0; /* Oculta la palabra [NUEVO] */
    color: transparent;
    margin: 0;
    animation: pulse-new 2s infinite ease-in-out;
}

/* Animación de parpadeo suave y barata en rendimiento */
@keyframes pulse-new {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* 3. Ambi & 5. Nov */
.tbambi { 
    grid-area: ambi; 
    background: var(--dbckg0); 
    font-size: var(--fs-small); 
    line-height: 1.5; 
    color: var(--text); 
    text-align: center; /* Texto centrado */
    display: flex;
    align-items: center; /* Centrado vertical */
}
.tbnov { 
    grid-area: nov; 
    background: var(--dbckg2); 
    font-size: var(--fs-body); 
    line-height: 1.8; 
    color: var(--text); 
    text-align: center; /* Texto centrado */
}
.tbnov a { color: var(--subtitle); text-decoration: none; transition: color 0.3s; }
.tbnov a:hover { color: var(--accent1); }

/* 4. Weather */
.tbweather {
    grid-area: weather; background: var(--dbckg1);
    display: flex; align-items: center; padding: 0 20px; gap: 15px;
}
.tbweather em { font-size: var(--fs-h3); color: var(--accent1); }
.tbweather span { text-transform: uppercase; display: flex; flex-direction: column; color: var(--subtitle); }
.tbweather span b { font-size: var(--fs-small); line-height: 1.2; }
.tbweather span i { font: var(--fs-mini) var(--f-mono); }
.tbdiscord { margin-left: auto; } /* Empuja Discord a la derecha */
.tbdiscord img { height: 35px; transition: transform 0.3s; }
.tbdiscord:hover img { transform: scale(1.1); }

/* 6. Staff */
.tbstaff { grid-area: staff; display: flex; flex-direction: column; gap: 5px; justify-content: space-between; }
.tbstaff span { position: relative; width: 80px; height: 80px; border: 5px solid var(--dbckg0); box-sizing: border-box; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.tbstaff span img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s; }
.tbstaff span a {
    position: relative; z-index: 2; background: var(--dbckg0); border: var(--border0);
    width: 35px; height: 35px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    color: var(--subtitle); font-size: var(--fs-small); text-decoration: none;
    transform: scale(0); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tbstaff span:hover img { opacity: 0.3; }
.tbstaff span:hover a { transform: scale(1); color: var(--accent1); }

/* 7. Eventos */
.tbeventos { grid-area: eventos; display: flex; gap: 5px; text-transform: uppercase; background: transparent; }
.tbeventos > span { background: var(--dbckg0); width: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; flex-shrink: 0; }
.tbeventos > span em { font-size: var(--fs-h3); color: var(--accent1); }
.tbeventos > span b { font-size: var(--fs-mini); font-family: var(--f-mono); color: var(--subtitle); }
.tbeventos a {
    flex: 1; background: var(--dbckg0); display: flex; flex-direction: column; justify-content: center; padding: 0 20px;
    text-decoration: none; position: relative; overflow: hidden; transition: background 0.3s; align-items: center;
}
.tbeventos a b { font-size: var(--fs-small); color: var(--subtitle); transition: color 0.3s; }
.tbeventos a i { font: var(--fs-mini) var(--f-mono); color: var(--text); padding-top: 5px; transition: color 0.3s; }
.tbeventos a:hover b { color: var(--accent1); }
.tbeventos a:hover i { color: var(--subtitle); }
/* El efecto del número gigante de fondo */
.tbeventos a::before {
    content: '01';
    position: absolute;
    right: 20px;
    bottom: -32px;
    font-size: 100px;
    font-family: var(--f-font1);
    color: var(--title);
    font-weight: bolder;
    opacity: 0.06;
    transition: opacity 0.3s;
}
.tbeventos a:hover::before { opacity: 0.15}


/* 8. Ticker de Avisos (Sin Marquee) */
.tbticker { 
    grid-area: ticker; 
    display: flex; 
    background: var(--dbckg1); 
    border: var(--border1); 
    align-items: center; 
    overflow: hidden; 
    width: 95%; 
    justify-self: center; 
    height: 45px; 
    margin-top: 10px; 
    border-radius: 4px;
}
.tbticker-icon { background: var(--dbckg0); color: var(--accent1); padding: 0 15px; height: 100%; display: flex; align-items: center; z-index: 2; }
.tbticker-text-container { flex: 1; overflow: hidden; white-space: nowrap; position: relative; }
.tbticker-text {
    display: inline-block; padding-left: 100%;
    animation: marquee-clean 25s linear infinite;
    color: var(--subtitle); font: var(--fs-small) var(--f-mono); text-transform: uppercase;
}



@keyframes marquee-clean {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ========================================= */
/* CABECERAS GLOBALES LIMPIAS (Corregido)    */
/* ========================================= */

body#phpbb .forabg, 
body#phpbb .forumbg {
    background: transparent;
    padding: 0;
    margin-bottom: 50px; 
    border: none;
    border-radius: 0;
}
body#phpbb .forabg .inner,
body#phpbb .forumbg .inner {
    background: transparent;
    padding: 0;
}

/* 1. ESTÉTICA DE LA BARRA (Para ambas: Índice y Temas) */
body#phpbb ul.topiclist li.header {
    background: color-mix(in srgb, var(--accent1) 60%, transparent); 
    border: 1px solid var(--border1-c);
    padding: 5px 20px; 
    border-radius: 0;
    margin: 10px 0px;
    padding-bottom: 3px;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    /* Le hemos quitado el "display: flex" y el "clear: both" de aquí */
}

/* 2. ESTRUCTURA SOLO PARA EL ÍNDICE (.forabg) */
body#phpbb .forabg ul.topiclist li.header {
    display: flex;
    align-items: center;
    clear: both; 
}
body#phpbb .forabg ul.topiclist li.header dt { width: 100%; }
body#phpbb .forabg ul.topiclist li.header dt .list-inner { padding: 0; margin: 0; }

/* 3. OCULTAR COLUMNAS SOLO EN EL ÍNDICE (.forabg) */
body#phpbb .forabg ul.topiclist li.header dd {
    display: none;
}

/* 4. ESTILO DEL TEXTO (Títulos) */
/* 4. ESTILO DEL TEXTO (Títulos) */
body#phpbb .forumbg ul.topiclist li.header .list-inner,
body#phpbb .forumbg ul.topiclist li.header .list-inner a,
body#phpbb .forabg ul.topiclist li.header .list-inner,
body#phpbb .forabg ul.topiclist li.header .list-inner a {
    font-family: var(--f-titles); 
    font-size: var(--fs-small);
    color: var(--subtitle);
    text-transform: capitalize;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.3s ease;
}

body#phpbb .forumbg ul.topiclist li.header .list-inner a:hover,
body#phpbb .forabg ul.topiclist li.header .list-inner a:hover {
    color: var(--title);
}

/* 5. ESTILO DE COLUMNAS (Respuestas, Vistas) SOLO EN TEMAS (.forumbg) */
body#phpbb .forumbg ul.topiclist li.header dd {
    display: block; /* Volvemos a mostrarlas */
    color: var(--subtitle);
    font-family: var(--f-mono); /* Opcional: fuente monoespaciada para los números */
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 5px; /* Lo alineamos un poco con el título */
}

/* ========================================= */
/* GRID DE FOROS (La Magia Asimétrica)       */
/* ========================================= */

.hrol-forums-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Si el pequeño lo ves muy bajo, sube esto a 200px o 220px */
    grid-auto-rows: minmax(200px, auto); 
    gap: 15px; 
    margin-bottom: 40px;
}

/* ========================================= */
/* LA TARJETA DEL FORO (El Contenedor)       */
/* ========================================= */

/* EL FORO POR DEFECTO */
/* Si no pones ninguna clase en el panel, ocupará todo el ancho (2 columnas) */
.hrol-forum-card {
    position: relative;
    background-color: var(--dbckg1);
    background-size: cover;
    background-position: center;
    border: 1px solid #1a1a1a;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
    overflow: hidden;
    display: flex;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    
    
    /* CAMBIO AQUÍ: Por defecto ocupa las 2 columnas */
    grid-column: span 2; 
    grid-row: span 1;
    height: 100%;
}

/* La capa de cristal oscuro sobre la imagen */
.hrol-forum-overlay {
    background: rgba(10, 10, 10, 0.7); /* Oscurece la imagen un 70% */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 20px 20px 20px;
    box-sizing: border-box;
    transition: background 0.4s ease;
}

/* Al pasar el ratón, la imagen se aclara un poco */
.hrol-forum-card:hover .hrol-forum-overlay {
    background: rgba(10, 10, 10, 0.4); 
}

/* ========================================= */
/* TEXTOS CENTRALES (Título y Estadísticas)  */
/* ========================================= */

.hrol-forum-center {
    display: flex;
    flex-direction: row; /* Pone los elementos uno al lado del otro */
    align-items: center;
    justify-content: space-evenly; /* Reparte el espacio equitativamente */
    flex-grow: 1;
    width: 100%;
    gap: 20px;
}

/* Mantiene el título y los stats centrados entre sí */
.hrol-forum-main-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Al estar lado a lado, le quitamos el margin-top de 25px al lastpost */
.hrol-forum-card .hrol-forum-lastpost {
    margin-top: 0; 
}

/* 2. Foros Altos, Cuadrados y Principal: APILADOS VERTICALMENTE (Como los tenías) */
.hrol-forum-card.hrol-cuadrado .hrol-forum-center,
.hrol-forum-card.hrol-alto .hrol-forum-center,
.hrol-forum-card.hrol-principal .hrol-forum-center {
    flex-direction: column; /* Vuelve a poner uno debajo del otro */
    justify-content: center;
}

/* Les devolvemos tu margen superior para separarlo del título */
.hrol-forum-card.hrol-cuadrado .hrol-forum-lastpost,
.hrol-forum-card.hrol-alto .hrol-forum-lastpost,
.hrol-forum-card.hrol-principal .hrol-forum-lastpost {
    margin-top: 25px; 
}


/* 3. Foros Pequeños: OCULTAR EL LASTPOST */
.hrol-forum-card.hrol-pequeno .hrol-forum-lastpost {
    display: none !important;
}

/* Título Gigante del Foro */
.hrol-forum-title {
    margin: 0;
    padding: 0;
}

/*///EFECTO PARA TITULO DE FOROS ///*/ 

/* 1. Animación del nerviosismo TDAH (Usando propiedades independientes) */
@keyframes jitter {
  0%   { translate: 0 0; }
  25%  { translate: -1px 1px; rotate: -1deg; }
  50%  { translate: 1px -1px; rotate: 1deg; }
  75%  { translate: -1px -1px; }
  100% { translate: 1px 1px; }
}

/* 2. BASE DEL ENLACE */
.hrol-forum-title a {
    font-family: var(--f-greekfont);
    font-size: var(--fs-h1);
    color: var(--title);
    text-decoration: none;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.9);
    transition: color 0.3s ease, text-shadow 0.3s ease; 
}

/* 3. BASE DE LAS LETRAS (Span) */
.hrol-forum-title a span {
    display: inline-block; 
    transition: color 0.3s ease, scale 0.2s; /* Transición para que el giro se vea suave */
    
    /* Variables de escala base (1 = normal) */
    --espejo-x: 1;
    --espejo-y: 1;
    
    /* Propiedad CSS moderna para la escala independiente */
    scale: var(--espejo-x) var(--espejo-y);
}

/* 4. EFECTO HOVER: Resplandor General del Bronce */
.hrol-forum-title a:hover {
    color: var(--accent1);
    text-shadow: 2px 2px 10px rgba(0,0,0,0.9), 
                 0 0 8px var(--accent1), 
                 0 0 15px #d4af37; 
}

/* 5. ¡CORRECCIÓN!: Clases dinámicas con la jerarquía correcta */
.hrol-forum-title a span.letra-nerviosa {
    animation: jitter 0.3s infinite alternate ease-in-out; 
}

.hrol-forum-title a span.espejo-h { 
    --espejo-x: -1; /* Gira sobre el eje horizontal (izq/der) */
} 

.hrol-forum-title a span.espejo-v { 
    --espejo-y: -1; /* Gira sobre el eje vertical (arriba/abajo) */
}

/*//////////////*/

/* Estadísticas (Temas / Posts) */
.hrol-forum-stats {
    font-family: var(--f-mono);
    font-size: var(--fs-mini);
    color: var(--subtitle);
    margin-top: 5px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}
.hrol-sep {
    color: var(--accent1); /* La barra diagonal en amarillo/color de acento */
    margin: 0 5px;
}

.hrol-lp-title {
    color: var(--subtitle);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
}
.hrol-lp-title:hover { color: var(--accent1); }
.hrol-lp-author { color: var(--accent1); }

/* ========================================= */
/* INFO DEL ÚLTIMO MENSAJE (Diseño con Avatar) */
/* ========================================= */

/* Contenedor principal */
.hrol-forum-lastpost {
    margin-top: 25px; /* Espacio con las estadísticas de arriba */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Espacio entre el avatar y el bloque de texto */
    text-align: left; /* Alineamos el texto a la izquierda */
    width: 100%;
    max-width: 320px; /* Limitamos el ancho para que no se desparrame */
    background-color: rgba(10, 10, 10, 0.7);
    border: 1px solid #000000;
    /*box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);*/
    padding: 10px;
    box-sizing: border-box;
        transition: all 0.3s ease;
}

.hrol-forum-lastpost:hover {
    background-color: rgba(10, 10, 10, 0.9);
    border: 1px solid #858585;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
}

/* -- Contenedor y Estilo del Avatar -- */
.hrol-lp-avatar-container {
    flex-shrink: 0; /* Evita que el avatar se aplaste */
    width: 50px;    /* Ancho fijo */
    height: 75px;   /* Alto fijo (proporción rectangular vertical) */
    overflow: hidden;
    border-radius: 3px; /* Esquinas ligeramente redondeadas */
    background-color: var(--dbckg2); /* Fondo por si tarda en cargar */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
}

/* Forzamos la imagen del avatar a llenar el contenedor */
.hrol-lp-avatar-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recorta la imagen para llenar el rectángulo sin deformarse */
    display: block;
    border-radius: 0 !important; /* Quitamos cualquier redondeo previo de la extensión */
}

/* -- Contenedor de Textos -- */
.hrol-lp-text-container {
    display: flex;
    flex-direction: column; /* Apila los textos verticalmente */
    justify-content: center;
    overflow: hidden; /* Necesario para el ellipsis del título */
}

/* Título del Último Tema */
.hrol-lp-title {
    font-family: var(--f-titles);
    font-size: var(--fs-small);
    color: var(--title);
    text-transform: capitalize;
    text-decoration: none;
    letter-spacing: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 4px;
    display: block;
}
.hrol-lp-title:hover {
    color: var(--accent1);
    text-decoration: none;
}

/* Autor y Fecha (Estilos comunes) */
.hrol-lp-author,
.hrol-lp-time {
    font-family: var(--f-mono);
    font-size: 10px; /* Texto pequeño */
    color: var(--subtitle);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
    display: block;
}

/* Estilo específico para el enlace del autor */
.hrol-lp-author a {
    color: var(--accent1); /* Color de acento para el nombre */
    font-weight: bold;
    text-decoration: none;
}

/* ========================================= */
/* BOTONES DE SUBFOROS (Fila Inferior)       */
/* ========================================= */

.hrol-subforums-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px 5px;
    border-radius: 10px;
    border: 1px solid #000000;
    margin-top: 30px;
    transition: all 0.3s ease;
    
}

.hrol-subforums-container:hover {
    background-color: rgb(0 0 0 / 60%);
    transition: all 0.3s ease;
    border: 1px solid #858585;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px 5px;
    
}

.hrol-subforum-link {
    background: rgba(0, 0, 0, 0.8); /* Fondo negro de los botones */
    border: 2px solid var(--border1-c);
    padding: 6px 12px;
    font-family: var(--f-mono);
        font-size: var(--fs-smaller);
        font-weight: 800;
    color: var(--subtitle) !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.hrol-subforum-link:hover {
        background: var(--dbckg7);
    color: var(--title) !important;
    font-weight: bold;
    text-decoration: none;
    border-color: var(--dbckg0);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
}

/* ========================================= */
/* LAS 4 CLASES DE TAMAÑO (Para tu Extensión)*/
/* ========================================= */

/* 1. FORO PEQUEÑO (La nueva clase: Ocupa solo la mitad del ancho) */
.hrol-forum-card.hrol-pequeno {
    grid-column: span 1; 
    grid-row: span 1; /* Altura: 180px */
}

/* 2. FORO CUADRADO (Estrecho, pero el doble de alto) */
.hrol-forum-card.hrol-cuadrado {
    grid-column: span 1; 
    grid-row: span 2; /* Altura: 180px + 180px + 15px de hueco = 375px */
}

/* 3. FORO ALTO (Estrecho, pero el triple de alto) */
.hrol-forum-card.hrol-alto {
    grid-column: span 1; 
    grid-row: span 3; /* Altura: 180x3 + huecos = 570px */
}

/* 4. FORO PRINCIPAL (Gigante: Todo el ancho y 2 filas de alto) */
.hrol-forum-card.hrol-principal {
    grid-column: span 2; 
    grid-row: span 3; /* Altura: 375px */
    /* Nota: Si el principal lo quieres MUY gigante (como dijiste de span 4 antes), 
       puedes ponerle grid-row: span 3; o span 4; aquí sin problema */
}

/* ========================================= */
/* RESPONSIVE (Móviles)                      */
/* ========================================= */
@media (max-width: 800px) {
    .hrol-forums-grid {
        grid-template-columns: 1fr; /* En móviles, todos en 1 sola columna */
    }
    .hrol-forum-card {
        grid-column: span 1 !important; /* Anula los foros anchos */
        grid-row: span 1 !important;    /* Anula los foros gigantes altos */
        min-height: 300px !important;   /* Altura estándar para todos en móvil */
    }
}

/* ========================================= */
/* AMBIENTACION                    */
/* ========================================= */

.hrol-rules {
    color: #dbdbdb;
    background-color: rgb(255 255 255 / 15%);
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    margin: 20px 0px;
    padding: 15px 10px;
}

/* ========================================= */
/* CABECERA DE VIEWFORUM (Bloques Separados) */
/* ========================================= */

/* El Contenedor Padre (Ahora es invisible, solo ordena) */
body#phpbb .hrol-viewforum-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Obliga a que botones y título midan igual de alto */
    gap: 15px; /* Espacio entre el rectángulo del título y la zona de botones */
    padding-bottom: 30px;
}

/* Título a la izquierda */
body#phpbb .hrol-vf-title a {
    font-family: var(--f-titles, serif);
    font-size: 18px;
    color: var(--title);
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
}

body#phpbb .hrol-vf-title a:hover {
    color: var(--title2);
}

/* Contenedor derecho (Botones) */
body#phpbb .hrol-vf-actions {
    display: flex;
    gap: 15px; /* Separación entre cada botón cuadrado */
    align-items: center;
}

/* Eliminar márgenes raros que pueda añadir la clase quickmod al div */
body#phpbb .hrol-vf-actions .quickmod {
    margin: 0;
    padding: 0;
}

/* -- Zona Izquierda (El rectángulo del Título) -- */
.hrol-vf-title {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Hace que este bloque ocupe todo el espacio sobrante a la izquierda */
    
    /* ¡Aquí va tu estilo! */
    padding: 0px 20px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    justify-content: space-between;
    gap: 20px;
}
.hrol-vf-title a {
    font-family: var(--f-titles); 
    font-size: 14px;
    color: var(--title, #ffffff);
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1.5px;
}
.hrol-vf-title a:hover {
    color: var(--accent1);
}

/* -- Zona Derecha (Contenedor de Botones) -- */
.hrol-vf-actions {
    display: flex;
    gap: 10px; /* Separación entre el botón verde y los botones negros */
}

/* Botón Nuevo Tema*/
.hrol-btn-newtopic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 100px;
    background-color: var(--accent1);
    color: var(--dbckg4) !important;
    text-decoration: none;
    font-size: 16px;
    
    /* El mismo estilo de borde y sombra que el título */
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}
.hrol-btn-newtopic:hover {
    background-color: var(--accent2);
    color:#000 !important;
}

/* Botones secundaros (Check y Ojo - Bloques negros) */
.hrol-btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    background-color: var(--dbckg4);
    color: var(--title)!important;
    font-size: 14px;
    text-decoration: none;
    
    /* El mismo estilo de borde y sombra */
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}
.hrol-btn-action:hover {
    background-color: var(--accent2);
    color: #000 !important;
}

/* Responsive: Ajustes para móvil */
@media (max-width: 600px) {
    .hrol-viewforum-header { 
        flex-direction: column; /* En móviles los ponemos uno debajo de otro */
        height: auto; 
    }
    .hrol-btn-newtopic, .hrol-btn-action { padding: 15px; }
}

/* ========================================= */
/* OCULTAR COLUMNAS EN LAS BARRAS SEPARADORAS*/
/* ========================================= */

/* Oculta "Respuestas", "Vistas" y "Último mensaje" SOLO en los headers separadores */
body#phpbb .forumbg ul.topiclist li.header dd {
    display: none !important;
}

/* Forzamos a que el título ("Temas", "Temas Fijos") pueda ocupar toda la barra */
body#phpbb .forumbg ul.topiclist li.header dt {
    width: 100% !important;
}

/* ========================================= */
/* DISEÑO DE LOS TEMAS (FILAS TIPO TARJETA)  */
/* ========================================= */

/* phpBB no trae estas clases, así que las creamos para que tu HTML funcione */
.flex { display: flex; }
.flex-col { flex-direction: column; }

/* ========================================= */
/* 1. LIMPIAR EL FONDO VIEJO DE PHPBB        */
/* ========================================= */
/* Le quitamos a phpBB sus fondos grises y márgenes para que no estorben a tu diseño */
body#phpbb ul.topiclist li.row {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 20px; /* Separación entre tarjetas */
}
body#phpbb ul.topiclist li.row:hover {
    background: transparent; /* Anulamos el efecto hover feo de prosilver */
}

/* ========================================= */
/* 2. TU CAJA PRINCIPAL (.ftopic)            */
/* ========================================= */
/* Aquí aplicamos tu fondo oscuro y el sombreado doble que te gusta */
.ftopic {
    background-color: rgb(8 8 8 / 65%);
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 15px 20px;
    align-items: center; /* Centra todo verticalmente */
    justify-content: space-between; /* Separa izquierda, centro y derecha */
    margin: 5px;
    gap: 20px;
    transition: background-color 0.3s ease;
}
.ftopic:hover {
    background-color: rgb(45 45 45 / 75%); /* Pequeño brillo al pasar el ratón */
}

/* Solo temas fijos */
.forumbg:not(.announcement) li.row.sticky > .ftopic {
    box-shadow: 0 0 0 5px rgb(146 133 103 / 23%);
}

/* Solo anuncios */
.forumbg.announcement li.row > .ftopic {
    box-shadow: 0 0 0 5px rgb(144 144 144 / 23%);
}

.ftopic.ftopic-locked {
    box-shadow: 0 0 0 5px rgb(33 13 13 / 40%);
}

/* ========================================= */
/* 3. ZONA IZQUIERDA: TÍTULO Y AUTOR         */
/* ========================================= */
.ftinfo {
    flex-grow: 1; /* Esto empuja las estadísticas y el último mensaje a la derecha */
    justify-content: center;
}
.ftitle i.ftitlespecial {
    font-family: var(--f-titles);
    font-size: var(--fs-h5);
    font-weight: 600;
    color: var(--subtitle);
    padding-right: 5px;
}

.ftitle a.topictitle {
    font-family: var(--f-titles);
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    text-transform: capitalize;
    text-decoration: none;
    letter-spacing: 1px;
}
.ftitle a.topictitle:hover {
    color: var(--accent1);
}
.ftauthor {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--text);
    text-transform: uppercase;
    margin-top: -3px;
}

/* Le quitamos la restricción de color para que el estilo de grupo de phpBB brille */
.ftauthor a, .ftauthor span { 
    font-weight: bold; 
    text-decoration: none;
}

/* ========================================= */
/* 4. ZONA CENTRAL: ESTADÍSTICAS EN CAJAS    */
/* ========================================= */
.ftdata {
    gap: 20px; /* Reducimos un poquito la separación porque las cajas ocupan más */
    text-align: center;
    align-items: center;
}

/* El diseño de la caja (Estilo Header) */
.ftdata > span {
    background-color: rgba(0, 0, 0, 0.4); /* Fondo translúcido oscuro */
    border: 1px solid #000000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4); /* El sombreado que usamos en la cabecera */
    padding: 10px 15px; /* Espacio interior para que el texto respire */
    min-width: 70px; /* Ancho mínimo para que ambas cajas midan lo mismo */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

/* Efecto hover opcional para las cajitas */
.ftopic:hover .ftdata > span {
    background-color: rgb(14, 14, 14);
}

/* El Número */
.ftdata b {
    font-family: var(--f-font1);
    font-size: 30px; /* Un pelín más pequeño para encajar en la caja */
    color: #ffffff;
    line-height: 1;
}

/* El Texto */
.ftdata em {
    font-family: var(--f-mono, sans-serif);
    font-size: var(--fs-mini);
    color: var(--accent1);
    font-style: normal;
    text-transform: uppercase;
}

/* ========================================= */
/* 5. ZONA DERECHA: ÚLTIMO MENSAJE Y AVATAR  */
/* ========================================= */
.ftlast {
    align-items: center;
    gap: 15px; /* Separación entre avatar y los textos */
    min-width: 220px; /* Ancho fijo para que todas las cajas midan lo mismo */
    
    /* ¡NUEVO: El diseño de caja idéntico al de las estadísticas! */
    background-color: rgba(0, 0, 0, 0.4); 
    border: 1px solid #000000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4);
    padding: 10px 15px;
    box-sizing: border-box; /* Evita que el padding deforme el ancho */
    
    /* Distribuimos el contenido: Avatar a la izquierda, textos a la derecha */
    justify-content: space-between; 
    transition: background-color 0.3s ease;
}

.ftopic:hover .ftlast {
    background-color: rgb(14, 14, 14);
}

/* El Avatar en pequeñito */
.ftlast-avatar {
    width: 50px;
    height: 50px;
    flex-shrink: 0; /* Evita que se aplaste */
}
.ftlast-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: 1px solid #333333;
}

/* Los textos alineados a la derecha */
.ftlastinfo {
    align-items: flex-end; /* Empuja los textos a la derecha */
    text-align: right;
}
.ftlastauthor {
    font-family: var(--f-titles, serif);
    font-size: 14px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
}
.ftlastdate {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--text);
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.ftlastdate i { font-size: 10px; } /* Separa un poco la flechita de la fecha */

/* ========================================= */
/* ADAPTACIÓN PARA MÓVILES                   */
/* ========================================= */
@media (max-width: 700px) {
    .ftopic {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .ftdata { gap: 15px; }
    .ftlast { width: 100%; justify-content: flex-start; }
    .ftlastinfo { align-items: flex-start; text-align: left; }
}

/* ========================================= */
/* FOOTER ESTADÍSTICAS (ESTILO FOROACTIVO)   */
/* ========================================= */

#stats {
    background-color: var(--dbckg2);
    border: 1px solid var(--border1-c);
    margin-top: 20px;
    padding: 10px;
    box-shadow: 0 0 0 5px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 1. BARRA DE ENLACES SUPERIOR (.stlinks) */
.stlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    background-color: var(--dbckg1);
    padding: 8px;
    border: 1px solid var(--border1-c);
}

.stlinks a {
    flex-grow: 1;
    text-align: center;
    background-color: var(--dbckg4);
    color: var(--subtitle);
    padding: 8px 0;
    border: 1px solid var(--border1-c);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.stlinks a:hover {
    background-color: var(--accent1);
    color: #161616;
    border-color: var(--accent1);
    text-decoration: none;
}

/* 2. CONTENEDOR CENTRAL GRID */
.st-main-content {
    display: grid;
    grid-template-columns: 1fr 120px 250px; /* Izquierda variable, Centro fijo, Derecha fijo */
    gap: 10px;
    min-height: 150px;
}

@media (max-width: 800px) {
    .st-main-content {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
}

/* COLUMNA IZQ: USUARIOS ONLINE (.stahora) */
.stahora {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
}

.stbox {
    background-color: var(--dbckg1);
    padding: 15px;
    border: 1px solid var(--border1-c);
    flex-grow: 1;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text);
}

.stbox.hrol-span-full a:hover {
	text-decoration: none;
    color: var(--accent1);
}

.stbox h4 {
    margin-bottom: 5px;
    font-family: var(--f-titles);
    font-size: 14px;
    color: var(--accent1);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border1-c);
    padding-bottom: 5px;
}

.stahoratotal {
    display: flex;
    gap: 5px;
}

.stahoratotal span {
    background-color: var(--dbckg3);
    border: 1px solid var(--border1-c);
    padding: 5px 10px;
    font-size: 11px;
    flex-grow: 1;
    text-align: center;
    font-family: var(--f-mono);
    color: var(--subtitle);
}
.stahoratotal b { color: var(--accent2); }


/* COLUMNA CENTRAL: DATOS VERTICALES (.stdata) */
.stdata {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    height: 100%;
    width: 15%;
}

.stdata > span {
    background-color: var(--dbckg4);
    border: 1px solid var(--border1-c);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.stdata b {
    font-family: var(--f-font1);
    font-size: 30px;
    color: #ffffff;
    line-height: 1;
}
.stdata em {
    font-family: var(--f-mono, sans-serif);
    font-size: var(--fs-mini);
    color: var(--accent1);
    font-style: normal;
    text-transform: uppercase;
}

.stats-left-col{
    width: 100%;
}


.st-newest-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--accent1);
    display: block;
    margin-bottom: 2px;
}


/* 3. LEYENDA GRUPOS (.stgroups) */
.stgroups {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background-color: var(--dbckg1);
    border: 1px solid var(--border1-c);
    font-size: 11px;
    text-transform: uppercase;
}

/* Forzamos estilo en los enlaces de leyenda nativos de phpBB */
.stgroups a {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--g-color) 25%, transparent);
    border: 1px solid var(--border1-c);
    text-decoration: none;
    font-weight: bold;
}

/* 3. LEYENDA GRUPOS (.stgroups) - MODO GRID */
.stgroups {
    display: grid;
    /* Esto crea columnas automáticas. 
       Si hay 4 grupos, crea 4 columnas. Si hay 5, crea 5. 
       'minmax(150px, 1fr)' asegura que en móviles bajen de línea si no caben. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px; /* Espacio entre las cajas */
    padding: 15px;
    background-color: var(--dbckg1);
    border: 1px solid var(--border1-c);
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding no rompa el 100% */
}

/* Diseño de la Caja de Grupo */
.hrol-group-box {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el contenido horizontalmente */
    gap: 10px;
    position: relative;
    
    /* Dimensiones */
    padding: 25px 10px;
    width: 100%; /* Ocupa toda su celda del grid */
    box-sizing: border-box;

    /* Estilo Visual Base */
    background-color: var(--dbckg2);
    border: 1px solid var(--g-color); 
    color: var(--g-color) !important;
    
    /* EL EFECTO DE SOMBRA GRANDE (Bordeado exterior) */
    /* Usamos la variable --g-shadow que definiremos en el HTML */
    box-shadow: 0 0 0 4px var(--g-shadow, rgba(255,255,255,0.1)); 

    /* Tipografía */
    font-family: var(--f-titles);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hrol-group-box i {
    font-size: 16px;
}

/* Efecto Hover */
.hrol-group-box:hover {
    background-color: var(--g-color);
    color: #111 !important; /* Texto oscuro para contraste */
    box-shadow: 0 0 15px var(--g-shadow); /* Glow más intenso */
    transform: translateY(-2px);
}

.hrol-stats-grid {
    display: grid;
    /* Definimos las dos columnas de abajo: 70% y 30% */
    grid-template-columns: 7fr 3fr; 
    gap: 15px;
    flex-grow: 1;
    width:85%;
}

/* LA CLAVE: Hace que la caja superior ocupe todo el ancho */
.hrol-span-full {
    grid-column: 1 / -1; 
}

/* Estilo común de las cajas (mismo de antes) */
.hrol-stats-grid .stbox {
    background-color: rgba(10, 10, 10, 0.9);
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Ajustes visuales */
.hrol-stat-title {
    font-family: var(--f-titles, serif);
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #222;
    padding-bottom: 5px;
    margin-bottom: 8px;
    display: block;
    text-decoration: none;
}

/* Centrar contenido de la caja pequeña derecha */
.hrol-cell-side.flex-center {
    justify-content: center;
    align-items: center;
    background: var(--dbckg4);
}

.hrol-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--accent1);
    font-weight: bold;
    margin-bottom: 5px;
}

/* RESPONSIVE */
@media (max-width: 700px) {
    .st-main-content { flex-direction: column; }
    .hrol-stats-grid { grid-template-columns: 1fr; margin-right: 0; margin-bottom: 20px;}
    /* En móvil, todas ocupan todo el ancho automáticamente */
}

/* ========================================= */
/* PERSONALIZACIÓN DEL ACTION-BAR  */
/* ========================================= */

body#phpbb .action-bar.actions-jump {
    background: color-mix(in srgb, var(--accent1) 30%, transparent);
    border: 1px solid var(--border1-c);
    padding: 1px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: -10px;
}

/* 1. EL BOTÓN "IR A" (La parte difícil) */
/* Usamos selector encadenado: .button.dropdown-trigger */
/* Esto suma mucha especificidad y gana a la clase .button normal */

body#phpbb .jumpbox-return a{
    color: var(--title);
    font-family: var(--f-titles);
    font-size: var(--fs-h5);
    margin-top: 5px;
    padding: 0px 50px;
}

body#phpbb .jumpbox-return a:hover{
    color: var(--title2);
    font-weight: bold;
}
    
body#phpbb .jumpbox .button.dropdown-trigger {
    background-color: var(--dbckg5);
    border: 3px solid var(--subtitle);
    background-image: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4);
    color: #ffffff;
    border-radius: 0;
    padding: 5px 15px;
    display: inline-flex;
    justify-content: space-between;
    min-width: 200px;
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    font-family: var(--f-titles);
    font-weight: bold;
}

/* Arreglamos el icono de la flechita dentro del botón */
body#phpbb .jumpbox .button.dropdown-trigger .icon {
    color: var(--accent1);
}

/* ESTADO HOVER (Al pasar el ratón por el botón) */
body#phpbb .jumpbox .button.dropdown-trigger:hover {
    background-color: #141414;
    border-color: var(--accent1);
    color: var(--title2);
    background-image: none; /* Aseguramos que no vuelva el degradado */
    text-decoration: none;
    text-shadow: 0px 0px 0 #FFFFFF;
}


/* 2. LA CAJA DESPLEGABLE (Contenedor) */
body#phpbb .dropdown .dropdown-contents {
    border-radius: 0;
    padding: 10px;
    margin: 10px;
    z-index: 200;
    background-color: rgba(10, 10, 10, 0.7);
    border: 10px solid #000000;
    box-shadow: 0 0PX 10px 5px 
color-mix(in srgb, var(--accent1) 10%, transparent);
    min-width: 160px;
}


/* 3. CATEGORÍAS (Títulos) */
/* Atacamos directamente al enlace de categoría */
body#phpbb .dropdown-contents li a.jumpbox-cat-link {
    background-color: color-mix(in srgb, var(--accent1) 90%, transparent);
    color: var(--dbckg0);
    font-family: var(--f-titles);
    text-transform: capitalize;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: 1px solid #333;
    padding: 10px 15px;
    display: block;
}
body#phpbb .dropdown-contents li a.jumpbox-cat-link:hover {
    background-color: color-mix(in srgb, var(--accent1) 60%, transparent);;
    color: #fff;
    text-decoration: none;
}


/* 4. FOROS (Sub-enlaces) */
body#phpbb .dropdown-contents li a.jumpbox-sub-link {
    background-color: transparent;
    color: #cccccc;
    border-bottom: 1px solid #1a1a1a;
    padding: 8px 15px;
    display: block;
    text-decoration: none;
    transition: background-color 0.2s;
}

/* Flechitas de indentación (Spacer) */
body#phpbb .dropdown-contents li a.jumpbox-sub-link span.spacer {
    background-color: transparent;
    color: #555;
    font-size: 10px;
    margin-right: 5px;
}

/* Hover en los Foros */
body#phpbb .dropdown-contents li a.jumpbox-sub-link:hover {
    background-color: var(--dbckg4);
    color: #ffffff;
}
body#phpbb .dropdown-contents li a.jumpbox-sub-link:hover span.spacer {
    color: var(--accent1, #d4af37);
}


/* 5. ELIMINAR EL PIQUITO BLANCO (Pointer) */
/* Esto ocultará el triangulito blanco que une el botón con la caja */
body#phpbb .dropdown .pointer {
    display: none; 
}
/* O si prefieres mantenerlo pero negro: */
/*
body#phpbb .dropdown .pointer-inner {
    border-color: #0a0a0a transparent transparent transparent;
}
*/

/* ========================================= */
/* ESTILOS DE LA PAGINACIÓN NATIVA HROL      */
/* ========================================= */

body#phpbb .hrol-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background-color: var(--dbckg4);
    color: var(--title) !important;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* 1. MATAMOS LOS PUNTOS DE LISTA Y LA PONEMOS HORIZONTAL */
body#phpbb .hrol-pagination ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none; /* Esto elimina los puntitos blancos feos */
    gap: 3px; /* Separación entre números */
}

body#phpbb .hrol-pagination ul li {
    display: flex;
    margin: 0;
    padding: 0;
}

/* 2. APLASTAMOS EL DISEÑO DEL BOTÓN BLANCO NATIVO (.button) */
body#phpbb .hrol-pagination ul li a.button,
body#phpbb .hrol-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    background-color: #e0e0e03b;
    background-image: none;
    border: 2px solid #121212;
    color: var(--title2);
    font-family: var(--f-mono);
    font-size: var(--fs-smaller);
    border-radius: 0;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: none;
    padding: 0 5px;
}

/* 3. EFECTO HOVER (Al pasar el ratón) */
body#phpbb .hrol-pagination ul li a.button:hover,
body#phpbb .hrol-pagination ul li a.button:focus {
    background-color: var(--accent2);
    color: var(--dbckg4);
    background-image: none;
    text-shadow: 0 0 BLACK;
}

/* 4. PÁGINA ACTIVA (La que estás viendo actualmente) */
body#phpbb .hrol-pagination ul li.active span {
    background-color: var(--accent1);
    color: black;
    border-color: var(--accent1);
    font-weight: bold;
}

/* 5. LOS PUNTOS SUSPENSIVOS (...) Y EL BOTÓN DE SALTO DE PÁGINA */
body#phpbb .hrol-pagination ul li.ellipsis span {
    background-color: transparent;
    border: none;
    color: var(--subtitle, #888888);
}

body#phpbb .hrol-pagination ul li a.button:hover .icon, 
body#phpbb .hrol-pagination ul li a.button:focus .icon {
    color: var(--dbckg4);
}

/* Oculta el icono de la flechita nativa para "saltar a página" que molesta visualmente */
body#phpbb .hrol-pagination ul li.dropdown-page-jump {
    display: none;
}

/* ========================================= */
/* VIEWTOPIC: DISEÑO DE LOS MENSAJES         */
/* ========================================= */

/* Limpiamos estilos residuales de prosilver */
body#phpbb .post {
    background: transparent;
    border: none;
    margin-bottom: 40px; /* Separación grande entre mensajes */
    padding: 0;
}

/* Topic Title */

body#phpbb .topic-title {
    background: black;
    display: flex;
    align-items: center;
    margin: 9px 0px;
    padding: 0px 0px 0px 20px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    gap: 25px;
}

body#phpbb .topic-title a{
    color: var(--title);
    font-family: var(--f-greekfont);
    font-size: var(--fs-h3);
}
body#phpbb .topic-title a:hover{
    color: var(--accent1);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0 0 8px var(--accent1), 0 0 15px #d4af37;
}

/* 1. LA TARJETA PRINCIPAL DEL MENSAJE */
body#phpbb .hrol-post-card {
    /* Aquí de color de grupos */
    --groupc75: color-mix(in srgb, var(--groupc) 75%, transparent);
    --groupc50: color-mix(in srgb, var(--groupc) 50%, transparent);
    --groupc25: color-mix(in srgb, var(--groupc) 25%, transparent);
    --groupc10: color-mix(in srgb, var(--groupc) 10%, transparent);

    border: 2px solid rgb(0 0 0);
    box-shadow: 0 0 0 5px var(--border2-c);
    /*/box-shadow: 0 0 0 10px var(--groupc10);/*/
    display: flex;
    flex-direction: column;
    border-radius: 0px;

}


/* 2. LA CABECERA DEL MENSAJE (.pheader) */

/* Contenedor principal en columna */
body#phpbb .pheader {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--dbckg4);
    padding: 0px 20px 0px 15px;
    background-color: var(--groupc10);
}

/* Fila superior: Nombre y avatar a los extremos */
body#phpbb .pheader-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Fila inferior: La nueva barra con el pattern griego */
body#phpbb .pheader-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--dbckg6);
    background-image: url(images/greek_patern.png);
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    padding: 0px 20px;
    z-index: 1;
}

/* Alineación de los grupos de botones y fecha */
body#phpbb .phright-info, 
body#phpbb .phcontact {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Estilo de los botones (Citar, Editar, etc) integrados en tu theme */
body#phpbb .phbotones a,
body#phpbb .phcontact a, body#phpbb .phdate {
    font-family: var(--f-mono, sans-serif);
    font-size: var(--fs-mini);
    color: var(--subtitle);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.3s;
    isolation: isolate;
    background: rgb(24 24 24);
    border: 3px solid #000000;
    padding: 5px 10px;
    margin-bottom: -8px;
    margin-top: -5px;
}

/* Efecto al pasar el ratón */
body#phpbb .phbotones a:hover,
body#phpbb .phcontact a:hover {
    color: var(--title);
    background-color: #2b2b2b;
}



/* Estilo de la fecha integrado */
body#phpbb .phdate {
    color: var(--subtitle);
    font-family: monospace; /* Fuente de lectura clara */
    font-size: 11px;
}


/* Nombre del usuario */
body#phpbb .phname, 
body#phpbb .phname a {
    font-family: var(--f-greekfont);
    font-size: var(--fs-h1);
    text-transform: capitalize;
    text-decoration: none;
    isolation: isolate;
    filter: drop-shadow(2px 2px 0 black);
    transition: color 0.5s;
    color: var(--groupc) !important;
    margin-left: 10px;
}

body#phpbb .phname, 
body#phpbb .phname a:hover {
    font-family: var(--f-greekfont);
    font-size: var(--fs-h1);
    text-transform: capitalize;
    text-decoration: none;
    isolation: isolate;
    filter: drop-shadow(2px 2px 0 black);
    color: var(--title2) !important;
    transition: color 0.5s;
}

/* Zona Derecha de la Cabecera */
body#phpbb .phright {
    gap: 15px;
    align-items: center;
}
body#phpbb .phenv {
    align-items: flex-end; /* Alinea texto a la derecha */
}
body#phpbb .phdate {
    font-family: var(--f-mono, sans-serif);
    border-bottom: 1px solid var(--groupc);
    font-size: 10px;
    color: var(--subtitle, #888888);
    text-transform: uppercase;
    letter-spacing: 1px;
}

body#phpbb .hrol-header-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Separación entre la paginación y los botones */
}

/* ========================================= */
/* EFECTO AVATAR DIFUMINADO (CABECERA POST)  */
/* ========================================= */

/* 1. Convertimos la cabecera en la "jaula" */
body#phpbb .post .pheader {
    position: relative;
    overflow: hidden; 
}

/* 2. La imagen sale de su contenedor, se pega a la derecha y pilla el 100% del alto del pheader */
body#phpbb .post .pheader .hrol-temp-icon img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto; 
    max-width: 60%;
    object-fit: cover;
    z-index: 0;
    
    /* Máscara de difuminado */
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
    
    pointer-events: auto;

    transition: filter 0.5s ease;
    filter: brightness(0.5) grayscale(0.5);
}

body#phpbb .post .pheader:hover .hrol-temp-icon img {
    filter: brightness(0.8);
}



/* 3. Aseguramos que los textos y botones queden por encima de la imagen difuminada */
body#phpbb .post .pheader .phleft,
body#phpbb .post .pheader .phright {
    position: relative;
    z-index: 2;
}

/* 3. EL CUERPO DEL MENSAJE (.postenv) */
body#phpbb .postenv {
    justify-content: space-between;
    background: var(--dbckg5);
}

/* Área de texto */
body#phpbb .postbody {
    border: 15px solid #050505;
    padding: 24px;
    outline: var(--border1);
    outline-offset: -16px;
    margin: 15px;
    overflow: hidden;
    background: var(--dbckg1);
}

body#phpbb .postbody .content {
    color:var(--text);
}

/* Firma */
body#phpbb .signature_separator {
    height: 1px;
    background-color: #1a1a1a;
    margin: 30px 0 15px 0;
}
body#phpbb .signature {
    font-family: var(--f-titles, serif);
    font-size: 10px;
    text-transform: uppercase;
    color: var(--subtitle, #888888);
    letter-spacing: 2px;
}


/* ========================================= */
/* AVATAR Y PERFIL EN LOS MENSAJES           */
/* ========================================= */

/* 1. Contenedor Principal (Hace que acompañe al texto al hacer scroll) */
body#phpbb .postprofile {
    width: 260px;
    flex-shrink: 0;
    padding: 20px 0px;
    position: sticky;
    top: 40px;
    align-self: flex-start;
    border: 0px;
    margin: 0px !important;
}

/* 2. El Envoltorio del Avatar (La "ventana" que oculta lo que sobra) */
body#phpbb .pp-env {
    border: 1px solid #363636;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    width: 250px;
    height: 400px;
    overflow: hidden;
    position: sticky;
    top: 55px;
    box-sizing: border-box;
    outline: 5px solid rgb(0 0 0);
    background: var(--dbckg0);
}

/* 3. La Imagen del Avatar */
body#phpbb .pp-avatar {
    width: 100%;
    height: 100%;
}
body#phpbb .pp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para que la imagen llene la caja sin deformarse */
    transition: all 4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición suave */
}

/* 4. La Capa de Color (Invisibe de normal) */
body#phpbb .pp-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: color-mix(in srgb, var(--groupc, #d4af37) 15%, rgba(0,0,0,0.6));
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none; /* Para que no interfiera con los clics */
}

/* 5. La Caja de Información (Escondida abajo) */
body#phpbb .pp-info-box {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%); /* Escondida fuera del cuadro hacia abajo */
    transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* ========================================= */
/* EFECTOS HOVER (Al poner el ratón)         */
/* ========================================= */

/* Difuminar y ampliar el avatar */
body#phpbb .pp-env:hover .pp-avatar img {
    filter: blur(4px) grayscale(50%);
    transform: scale(1.3);
}

/* Mostrar la capa de color del grupo */
body#phpbb .pp-env:hover .pp-overlay {
    opacity: 1;
}

/* Subir la caja de información */
body#phpbb .pp-env:hover .pp-info-box {
    transform: translateY(0);
}


/* ========================================= */
/* SISTEMA DE PESTAÑAS (CSS Puro)            */
/* ========================================= */

/* Ocultar los inputs reales */
body#phpbb .pp-tab-radio {
    display: none;
}

/* Ocultar los contenidos por defecto */
body#phpbb .pp-tab-content {
    display: none;
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto; /* Scroll interno si hay mucha info */
    color: #fff;
}

/* Lógica de las pestañas: Mostrar el div cuando su radio esté "checked" */
body#phpbb #tab-gen-p1:checked ~ .pp-tab-gen, /* Pongo p1 de ejemplo, funciona con el ID real */
body#phpbb .pp-tab-radio[id^="tab-gen-"]:checked ~ .pp-tab-gen,
body#phpbb .pp-tab-radio[id^="tab-com-"]:checked ~ .pp-tab-com {
    display: flex;
}

/* Navegación (Los botones de abajo) */
body#phpbb .pp-tabs-nav {
    display: flex;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0, 0, 0, 0.8);
    height: 30px;
}

body#phpbb .pp-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-titles, serif);
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--subtitle, #888888);
    cursor: pointer;
    transition: all 0.3s;
}

body#phpbb .pp-tab-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

/* Iluminar el botón de la pestaña activa usando el color del grupo */
body#phpbb .pp-tab-radio[id^="tab-gen-"]:checked ~ .pp-tabs-nav label[for^="tab-gen-"],
body#phpbb .pp-tab-radio[id^="tab-com-"]:checked ~ .pp-tabs-nav label[for^="tab-com-"] {
    color: var(--groupc, #d4af37);
    box-shadow: inset 0 -3px 0 var(--groupc, #d4af37);
}

/* ========================================= */
/* DISEÑO DE LOS CAMPOS DE PERFIL (GENERAL)  */
/* ========================================= */

/* 1. El Rango del Usuario (Título superior) */
body#phpbb .pp-rank {
    text-align: center;
    font-family: var(--f-titles, serif);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--groupc, #d4af37); /* Subrayado con el color del grupo */
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* 2. Contenedor de la lista de campos */
body#phpbb .pp-fields {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Separación entre cada fila */
}

/* 3. Cada fila individual (Nombre : Valor) */
body#phpbb .pp-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #333333; /* Línea de puntos sutil para guiar la vista */
    padding-bottom: 5px;
}

/* 4. La etiqueta (Ej: "EDAD:", "RAZA:") */
body#phpbb .pp-label {
    font-family: var(--f-mono, monospace);
    font-size: 9px;
    color: var(--accent1, #d4af37);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 5. El valor (Ej: "25", "Elfo") */
body#phpbb .pp-value {
    font-size: 11px;
    color: #cccccc;
    text-align: right;
    max-width: 60%; /* Evita que valores muy largos empujen el nombre del campo */
    word-wrap: break-word; /* Rompe el texto si es demasiado largo */
}

/* 5. Texto Citado */
    
body#phpbb blockquote{
    padding: 10px;
    border: 0;
    margin: 0 auto;
    border-left: 2px solid var(--groupc50);
    background: var(--dbckg3);
    transition: background 0.3s;
}

body#phpbb blockquote:hover{
    background: var(--groupc10);
    transition: background 0.3s;
}

body#phpbb blockquote cite, .uncited::before{
    color: var(--title2);
    font-family: var(--f-titles);
    font-size: var(--fs-small);
    padding: 0px 10px;
    margin-bottom: -3px;
}

body#phpbb .imcger-quote{
    font-size: var(--fs-small);
}

body#phpbb blockquote cite a, .uncited a{
    color: var(--title);
}

body#phpbb blockquote cite a:hover, .uncited a:hover{
    color: var(--groupc);
}

body#phpbb blockquote cite:before, .uncited:before {
    display: none;
}

body#phpbb blockquote cite > span {
    display: none;
}


/* ========================================= */
/* Cuadro de Dados    */
/* ========================================= */

.postbody .dp-box{
    margin-top: 20px;
    padding: 15px;
    border: 2px dashed #d4d4d4;
    background-color: #fcfcfc;
    border-radius: 8px;
    background-color: rgb(28 28 28 / 65%);
    border: 10px double var(--dbckg0);
    box-shadow: 0 0PX 10px 5px color-mix(in srgb, #ffffff 10%, transparent);
    border-radius: 0px;
}

.postbody .dp-group-special{
    margin-top: 20px;
    padding: 15px;
    border: 2px dashed var(--fondo);
    background-color: var(--dbckg0);
    box-shadow: 0 0PX 5px 5px color-mix(in srgb, var(--groupc50) 10%, transparent);
    border-radius: 0px;

}

.postbody .dp-intro{
    color: #ffffff;
    font-family: var(--f-titles);
    font-size: 1.1em;
    letter-spacing: 1px;
}

.postbody .dp-math-box{
    margin-top: 15px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    background-color: #000000;
    border: 1px solid #8b8b8b;
    border-bottom: 3px solid #9b9b9b;
    border-radius: 0px;
    box-shadow: 0px 0px 10px rgb(255 255 255 / 45%);
}

.postbody .dp-math-result{
    font-family: var(--f-font4);
    font-size: 2em;
    font-weight: 100;
    color: var(--title);
    letter-spacing: 1px;
}

.postbody .dp-name{
    font-size: 0.9em;
    color: #595959;
    font-family: var(--f-mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 15px;
}

.postbody .dp-math-legend{
    font-size: 0.75em;
    font-family: var(--f-mono);
    color: #818181;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
    border-top: 1px dashed #818181;
    padding-top: 5px;
    width: 100%;
    text-align: center;
    filter: drop-shadow(0px 0px 1px #000000);
}

/* ========================================= */
/* EXTENSIÓN: LINKED ACCOUNTS (EN SIDEBAR)   */
/* ========================================= */

/* 1. Limpiamos los estilos feos nativos de la extensión */
body#phpbb aside#hrol-sidebar li#linked_accounts {
    background: transparent !important;
    margin: 0; 
    padding: 0; 
    border: none;
}

body#phpbb aside#hrol-sidebar li#linked_accounts ul {
    list-style: none; 
    margin: 0; 
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Separación si tienes varias cuentas vinculadas */
}

/* 2. Ocultamos el nombre de usuario (Para mantener la sidebar limpia) */
body#phpbb aside#hrol-sidebar li#linked_accounts .username {
    display: none !important; 
}

/* 3. Estilizamos el enlace para que se comporte como los otros iconos */
body#phpbb aside#hrol-sidebar li#linked_accounts a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Quitamos padding extra para que no ensanche la barra */
    background: transparent;
}

/* 4. Convertimos el avatar gigante en un icono cuadrado elegante */
body#phpbb aside#hrol-sidebar li#linked_accounts img.avatar {
    width: 28px !important; /* Mismo tamaño aproximado que tus iconos FontAwesome */
    height: 28px !important;
    max-height: 28px !important;
    object-fit: cover;
    border-radius: 4px; /* Un poquito redondeado */
    border: 1px solid var(--border1-c, #333333);
    transition: all 0.3s ease;
    opacity: 0.7; /* Ligeramente apagado de normal */
}

/* 5. Efecto al pasar el ratón (Se ilumina) */
body#phpbb aside#hrol-sidebar li#linked_accounts a:hover img.avatar {
    border-color: var(--accent1, #d4af37);
    opacity: 1;
    transform: scale(1.1);
}

/* ========================================= */
/* ESTILOS BASE PARA GAME-ICONS (ICONIFY)    */
/* ========================================= */

body#phpbb span.iconify {
    display: inline-flex;
    vertical-align: middle;
    color: currentColor; /* Esto hace que el icono tome el color del texto que lo rodea */
    transition: all 0.3s ease;
}

/* Efecto hover general: si un icono de game-icons está dentro de un botón tuyo */
body#phpbb .hrol-btn-icon:hover span.iconify,
body#phpbb .pp-field:hover span.iconify {
    color: var(--accent1, #d4af37);
    transform: scale(1.1); /* Efecto de pequeño latido al poner el ratón */
}

/* ========================================= */
/* INSIGNIA DE CLASE / FACCIÓN               */
/* ========================================= */

body#phpbb .hrol-class-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px 0 20px 0; /* Espaciado para que respire */
}

/* El Icono Gigante de Fondo */
body#phpbb .hrol-class-badge .badge-icon {
    font-size: 65px; /* Tamaño gigante */
    color: #6b8e6b; /* El tono verde de tus Centauros/Hoplitas */
    opacity: 0.9;
    line-height: 1;
}

/* El Texto Superpuesto */
body#phpbb .hrol-class-badge .badge-text {
    font-family: var(--f-titles, 'Impact', sans-serif);
    font-size: 13px;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* El truco: un margen negativo para que "suba" y pise el icono */
    margin-top: -20px;
    z-index: 2;
    
    /* Sombra dura (stroke) para que sea legible 100% sobre el icono */
    text-shadow:
        -1px -1px 0 #0a0a0a,
         1px -1px 0 #0a0a0a,
        -1px  1px 0 #0a0a0a,
         1px  1px 0 #0a0a0a,
         0px  3px 5px rgba(0,0,0,0.8);
}

/* ========================================= */
/* QUICK LOGIN (Identificarse en el Índice)  */
/* ========================================= */
.hrol-quicklogin-box {
    background-color: var(--dbckg2);
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    margin: 20px auto 40px auto;
    max-width: 800px; /* Evita que se estire por toda la pantalla */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hrol-ql-header h3 {
    font-family: var(--f-titles);
    font-size: var(--fs-h4);
    text-transform: uppercase;
    margin: 0;
    border: none;
    letter-spacing: 1px;
}

.hrol-ql-header h3 a {
    color: var(--title);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hrol-ql-header h3 a:hover {
    color: var(--accent1);
}

.hrol-ql-fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
}

/* Cajas donde se escribe (Usuario / Contraseña) */
.hrol-input-container {
    display: flex;
    align-items: center;
    background-color: var(--dbckg0);
    border: 1px solid var(--border1-c);
    padding: 5px 15px;
    color: var(--accent1); /* Color del icono */
    width: 200px; 
}

.hrol-input {
    background: transparent !important;
    border: none !important;
    color: var(--title) !important;
    font-family: var(--f-mono);
    padding: 8px;
    outline: none;
    font-size: 13px;
    box-shadow: none !important;
    width: 100%; 
}

.hrol-input::placeholder {
    color: #666666;
    text-transform: uppercase;
    font-size: 10px;
}

/* Opciones: Recordarme y Olvidé la contraseña */
.hrol-ql-options {
    display: flex;
    flex-direction: column;
    font-family: var(--f-mono);
    font-size: 10px;
    text-transform: uppercase;
    gap: 5px;
    margin: 0px 30px 0px 10px;
}

.hrol-checkbox-lbl {
    color: var(--subtitle);
    cursor: pointer;
}

.hrol-forgot-pass {
    color: var(--text);
    transition: color 0.3s;
    text-decoration: none;
}

.hrol-forgot-pass:hover {
    color: var(--title);
}

/* Botón de Identificarse */
.hrol-btn-login {
    background-color: var(--accent1);
    color: #000 !important;
    font-family: var(--f-titles);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid #000;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.4);
    padding: 10px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hrol-btn-login:hover {
    background-color: var(--accent2);
}

/* ========================================= */
/* CALLOUT DISCORD (Caja de Aviso Llamativa) */
/* ========================================= */
.hrol-discord-callout {
    width: 100%;
    margin-top: 25px;
    padding: 15px;
    background-color: var(--dbckg0); /* Fondo más profundo */
    border-left: 4px solid var(--accent1); /* Franja naranja/dorada lateral */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* Sombra interna para dar profundidad */
}

/* Icono más grande y brillante */
.hrol-discord-callout i {
    color: var(--accent1);
    font-size: 1.4em;
    text-shadow: 0 0 8px var(--accent1);
}

/* Texto del aviso */
.hrol-discord-callout span {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--title);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

/* Enlace a Discord resaltado */
.hrol-discord-callout a {
    color: var(--accent1);
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.hrol-discord-callout a:hover {
    color: var(--accent2);
    border-bottom: 1px solid var(--accent2);
}

/* ========================================= */
/* FOOTER PERSONALIZADO (Aviso y Admin)      */
/* ========================================= */
.hrol-footer-main {
    background-color: var(--dbckg0); /* El negro más oscuro de tu paleta */
    border-top: 5px solid var(--accent1); /* Línea superior naranja brillante */
    padding: 40px 20px;
    margin-top: 60px; /* Separación con el resto del foro */
    color: var(--subtitle);
    box-shadow: 0 -10px 20px rgba(0,0,0,0.5); /* Sombra hacia arriba */
}

.hrol-footer-content {
    max-width: 1200px; /* El mismo ancho que tu foro */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

/* 1. Zona de Textos Legales */
.hrol-footer-disclaimer {
    flex: 2; /* Ocupa el doble de espacio que los botones */
    font-family: var(--f-body);
    font-size: var(--fs-small);
    line-height: 1.7;
}

.hrol-footer-disclaimer h4 {
    color: var(--title);
    font-family: var(--f-titles);
    font-size: var(--fs-h4);
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border1-c);
    padding-bottom: 10px;
}

.hrol-footer-disclaimer p {
    margin-bottom: 10px;
    text-align: justify;
}

/* 2. Zona de Botones (Admin/Mod) */
.hrol-footer-actions {
    flex: 1; /* Ocupa un tercio del espacio */
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: stretch; /* Los botones se estiran al mismo ancho */
}

/* Estilo Base de Botones Gigantes */
.hrol-admin-btn, .hrol-mod-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    font-family: var(--f-titles);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4); /* Tu sombra de cajitas característica */
}

/* Color Botón de Admin (Naranja/Oro) */
.hrol-admin-btn {
    background-color: var(--accent1);
    color: var(--dbckg0) !important;
}

/* Color Botón de Mod (Gris/Plata de tu paleta) */
.hrol-mod-btn {
    background-color: var(--subtitle);
    color: var(--dbckg0) !important;
}

/* Efectos Hover */
.hrol-admin-btn:hover, .hrol-mod-btn:hover {
    background-color: var(--title);
    color: var(--dbckg0) !important;
    transform: translateY(-2px);
}

/* 3. Enlaces Pequeños (Cookies y Créditos ocultos) */
.hrol-footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    gap: 10px;
}

.hrol-footer-links a {
    color: var(--text);
    font-size: 10px;
    font-family: var(--f-mono);
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hrol-footer-links a:hover {
    color: var(--accent1);
}

/* Hacemos los créditos de phpBB casi invisibles */
.hrol-tiny-credits {
    font-size: 8px;
    color: #222222; /* Gris super oscuro, casi negro */
    text-align: center;
    line-height: 1.2;
}

.hrol-tiny-credits a {
    color: #333333 !important;
    text-decoration: none;
}

/* Adaptación a Móviles */
@media (max-width: 800px) {
    .hrol-footer-content {
        flex-direction: column; /* Apila el texto arriba y los botones abajo */
        gap: 30px;
    }
    .hrol-footer-disclaimer, .hrol-footer-actions {
        width: 100%;
    }
}

/* ========================================= */
/* FOOTER EN CAJAS (Estilo Translúcido)      */
/* ========================================= */
.hrol-footer-box {
    /* Como ya hereda .hrol-cuerpo-translucido, solo ajustamos márgenes */
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 20px; /* Un poco menos de padding que el contenedor principal */
}

.hrol-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas exactamente iguales */
    gap: 20px;
}

/* Las celdas interiores (mismo estilo oscuro con borde que usamos arriba) */
.hrol-footer-cell {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 20px;
    color: var(--subtitle);
    font-size: var(--fs-small);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

/* Títulos de las celdas */
.hrol-footer-title {
    font-family: var(--f-titles);
    font-size: var(--fs-h4);
    color: var(--title);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border1-c);
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hrol-footer-title i {
    color: var(--accent1); /* Icono de color de acento */
}

.hrol-footer-cell p {
    margin-bottom: 10px;
    text-align: justify;
}

/* Contenedor para los botones del Footer (En Cuadrícula) */
.hrol-footer-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas del mismo tamaño */
    gap: 10px;
    margin-bottom: auto; /* Empuja los créditos hacia el fondo */
    width: 100%;
}

/* Reducimos el padding para que quepan bien dos por fila */
.hrol-footer-buttons .hrol-btn-action {
    padding: 10px;
    font-size: 11px; /* Letra un poco más pequeña */
}

/* LA MAGIA: Si hay un número impar de botones (ej: 3), el último ocupa toda la fila */
.hrol-footer-buttons .hrol-btn-action:last-child:nth-child(odd) {
    grid-column: span 2;
}


/* --- BOTONES ESPECIALES EXTERNOS (STAFF) --- */
.hrol-staff-footer {
    max-width: 1200px; /* Mismo ancho máximo del foro */
    margin: -30px auto 40px auto; /* Margen negativo para pegarlo al cuadro de arriba */
    display: flex;
    gap: 20px; /* Misma separación que el grid interior */
}

/* Estructura compartida de botones de Staff */
.hrol-staff-footer .hrol-btn-action {
    flex-grow: 1; /* Hacemos que se repartan el ancho 50/50 o 100% si solo hay 1 */
    padding: 15px;
    font-family: var(--f-titles);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Botón de Administración */
.hrol-btn-action.hrol-btn-admin {
    background-color: var(--accent1);
    color: #000 !important;
}
.hrol-btn-action.hrol-btn-admin i { color: #000; }
.hrol-btn-action.hrol-btn-admin:hover {
    background-color: var(--title);
}

/* Botón de Moderación */
.hrol-btn-action.hrol-btn-mod {
    background-color: var(--dbckg5);
    color: var(--title) !important;
    border-color: var(--subtitle);
}
.hrol-btn-action.hrol-btn-mod:hover {
    background-color: var(--subtitle);
    color: #000 !important;
}

/* Créditos de phpBB ultra discretos */
.hrol-tiny-credits {
    margin-top: 20px;
    font-family: var(--f-mono);
    font-size: 8px;
    text-transform: uppercase;
    color: #444444;
    text-align: center;
    border-top: 1px dashed #222222;
    padding-top: 10px;
}

.hrol-tiny-credits a {
    color: #555555 !important;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 800px) {
    .hrol-footer-grid {
        grid-template-columns: 1fr;
    }
    .hrol-staff-footer {
        flex-direction: column; /* Apila botones en móvil */
        margin-top: -20px;
        padding: 0 10px;
    }
}

/* ========================================= */
/* ESTILOS DEL EDITOR Y RESPUESTA (HROL)     */
/* ========================================= */

/* 1. Ocultar caja de emoticonos y expandir ancho al 100% en Editor Completo */
body#phpbb #postform #smiley-box {
    display: none;
    width: 0;
}
body#phpbb #postform #message-box,
body#phpbb #qr_postform #message-box {
    width: 100%;
    float: none;
}

/* 2. Fondo oscuro y cuadrado para el fondo general de la respuesta */
body#phpbb #postform .panel,
body#phpbb #qr_postform .panel {
    background-color: var(--dbckg1);
    border: 1px solid var(--dbckg3);
    border-radius: 0;
}

/* 3. Estilo de la caja de texto (textarea) y del campo Asunto */
body#phpbb #postform .message-box textarea.inputbox,
body#phpbb #qr_postform .message-box textarea.inputbox,
body#phpbb #postform input.inputbox,
body#phpbb #qr_postform input.inputbox,
body#phpbb #poll-panel textarea.inputbox {
    background-color: var(--dbckg0);
    color: var(--text);
    border: 1px solid var(--fondo);
    border-radius: 0;
    padding: 12px;
    box-shadow: none; /* Apagamos la sombra interna blanca nativa de prosilver */
}

.inputbox:hover {
    border-color: var(--accent1);
}

/* 4. Efecto de borde Naranja al hacer clic para escribir */
body#phpbb #postform .message-box textarea.inputbox:focus,
body#phpbb #qr_postform .message-box textarea.inputbox:focus,
body#phpbb #postform input.inputbox:focus,
body#phpbb #qr_postform input.inputbox:focus {
    border-color: var(--accent1);
    box-shadow: none; /* Apagamos el resplandor azul nativo */
    outline: none;
}

/* 5. Estilo oscuro para todos los botones (Enviar, Visualizar, Negrita...) */
body#phpbb #postform .submit-buttons input.button1,
body#phpbb #postform .submit-buttons input.button2,
body#phpbb #qr_postform .submit-buttons input.button1,
body#phpbb #qr_postform .submit-buttons input.button2,
body#phpbb #format-buttons button.button,
body#phpbb #format-buttons input.button2 {
    background-color: var(--dbckg3);
    background-image: none; /* Muy importante: Apaga el degradado gris nativo */
    color: var(--subtitle);
    border: 1px solid var(--fondo);
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
}

/* 6. Efecto de color Naranja al pasar el ratón por los botones */
body#phpbb #postform .submit-buttons input.button1:hover,
body#phpbb #postform .submit-buttons input.button2:hover,
body#phpbb #qr_postform .submit-buttons input.button1:hover,
body#phpbb #qr_postform .submit-buttons input.button2:hover,
body#phpbb #format-buttons button.button:hover,
body#phpbb #format-buttons input.button2:hover {
    background-color: var(--dbckg2);
    color: var(--accent1);
    border-color: var(--accent1);
}

/* ========================================= */
/* CABECERA VIEWTOPIC Y ESTADO DE TEMA (HRol)*/
/* ========================================= */

/* 1. Convertimos el contenedor del título en Flexbox */
h2.topic-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

h2.topic-title a {
    flex: 1;
    word-break: break-word;
}

/* 2. El cuadro cuadrado de estado/progreso a la derecha */
body#phpbb .hrol-status-square {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--dbckg2);
    border: 1px solid var(--foroborde);
    width: 80px;  /* Hacemos el cuadro más grande */
    height: 80px; /* Cuadrado perfecto */
    padding: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    position: relative; 
    overflow: hidden; 
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 2.1 ¡NUEVO! Fondo sutil dependiendo de la fase usando CSS moderno (:has) */
body#phpbb .hrol-status-square:has(.phase-1) {
    background-color: color-mix(in srgb, var(--accent1) 12%, var(--dbckg2));
    border-color: color-mix(in srgb, var(--accent1) 30%, transparent);
}
body#phpbb .hrol-status-square:has(.phase-2) {
    background-color: color-mix(in srgb, #2ecc71 12%, var(--dbckg2));
    border-color: color-mix(in srgb, #2ecc71 30%, transparent);
}

body#phpbb .hrol-status-square:has(.phase-done) {
    background-color: color-mix(in srgb, #cc2e2e 12%, var(--dbckg2));
    border-color: color-mix(in srgb, #cc2e2e 30%, transparent);
}

/* 3. Botón de cierre (Candado) convertido en TRIÁNGULO superior derecho */
body#phpbb .hrol-status-btn-close {
    position: absolute;
    top: 0;
    right: -1px;
    background-color: #bc2a4d; 
    color: #ffffff !important; 
    width: 55px; /* Área de corte del triángulo */
    height: 42px;
    /* MAGIA: Recorta el cuadrado dejando solo la mitad superior derecha */
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    transition: background-color 0.3s ease;
    z-index: 2;
}

body#phpbb .hrol-status-btn-close:hover {
    background-color: #ff4d79; 
}

body#phpbb .hrol-status-btn-close i {
    /* Movemos el icono a la parte más ancha del triángulo */
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 12px;
}

/* 4. Texto/Icono de Fase (SIEMPRE CENTRADOS AUTOMÁTICAMENTE) */
body#phpbb .hrol-status-phase {
    font-family: var(--f-titles, 'Impact', sans-serif);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 16px; /* Letra un poco más grande para acompañar la caja */
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1;
}

/* Colores para las distintas fases */
body#phpbb .hrol-status-phase.phase-1 { color: var(--accent1, #ff7f35); }
body#phpbb .hrol-status-phase.phase-2 { color: #2ecc71; }

/* Color para el icono de la X cuando no hay fase activa */
body#phpbb .hrol-status-phase.phase-done { 
    color: #bc2a4d; 
    font-size: 24px; /* X más grande */
}

/* 5. La etiqueta de Tipo de Tema (Movida abajo a la izquierda) */
body#phpbb .hrol-badge-type {
    align-items: center;
    padding: 15px 20px;
    background-color: var(--dbckg4);
    color: var(--subtitle);
    text-decoration: none;
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    font-family: var(--f-titles);
}

/* ========================================= */
/* ESTILOS DE LA BOTONERA DEL EDITOR (HROL)  */
/* ========================================= */

/* Contenedor principal: crea la barra continua */
body#phpbb .hrol-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--dbckg1, #0c0c0c); /* Usamos tu fondo oscuro */
    padding: 8px 8px;
    margin-bottom: 0; 
}

/* Separación entre elementos desplegables */
body#phpbb .hrol-editor-toolbar .dropdown-container {
    margin-right: 2px;
}

/* Diseño plano para cada botón individual */
body#phpbb .hrol-toolbar-btn-flat {
    background: transparent; /* Fondo transparente para que se vea la barra base */
    border: none;
    color: var(--subtitle, #bbbbbb);
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Efecto al pasar el ratón por encima del botón */
body#phpbb .hrol-toolbar-btn-flat:hover {
    background: var(--dbckg4, #101010); /* Se ilumina ligeramente el fondo */
    color: var(--accent1, #ff7f35); /* Cambia al color de acento de tu foro */
}

/* Ajuste sutil para la flechita de los menús desplegables */
body#phpbb .hrol-toolbar-btn-flat .caret {
    margin-left: 5px;
    font-size: 0.9em;
}

/* ========================================= */
/* RESPUESTA RÁPIDA UNIFICADA (HROL)         */
/* ========================================= */

/* 1. La caja maestra que envuelve botonera y área de texto */
body#phpbb .hrol-qr-container {
    background: var(--dbckg2, #0e0e0e);
    border-radius: 4px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4); /* Añadimos tu sombreado característico */
    border: 2px solid rgb(0 0 0);
    box-shadow: 0 0 0 5px var(--border2-c);
}

body#phpbb fieldset.fields1 div{
    margin-bottom: -3px;
}

/* 2. Ajuste de la botonera inyectada por la extensión */
body#phpbb .hrol-editor-toolbar {
    background: var(--dbckg1, #0c0c0c);
    padding: 6px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px; /* Separación entre iconos */
    border-bottom: 1px dashed var(--foroborde, rgba(255, 227, 165, 0.12));
    justify-content: center;
}

/* 3. El área de texto limpia */
body#phpbb .hrol-textarea {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text);
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
    font-family: var(--f-body);
}


/* Ocultamos líneas horizontales intrusas de phpbb */
body#phpbb hr {
    display: none;
}

/* ========================================= */
/* CONTADOR DE PALABRAS Y CARACTERES (HROL)  */
/* ========================================= */
body#phpbb .hrol-counter-box {
    text-align: right;
    font-family: var(--f-mono, monospace);
    font-size: var(--fs-mini);
    color: var(--subtitle, #bbbbbb);
    padding: 5px 15px;
    background: transparent;
    border-top: 1px dashed var(--foroborde, rgba(255, 227, 165, 0.12));
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body#phpbb .hrol-counter-box span {
    color: var(--accent1, #ff7f35);
    font-weight: bold;
    font-size: var(--fs-mini);
}

/* ======================================================= */
/* ESTILOS DEL EDITOR COMPLETO (POSTING) - HROL            */
/* ======================================================= */

/* 1. Contenedor principal del mensaje (fondo oscuro y borde) */
body#phpbb form#postform .message-box {
    background: var(--tbckg0, rgba(0,0,0,0.4));
    border: 1px solid var(--foroborde, rgba(255, 227, 165, 0.12));
    padding: 10px;
    border-radius: 4px;
}

/* 2. El área donde se escribe el texto (transparente para ver el fondo) */
body#phpbb form#postform .message-box textarea {
    background: transparent;
    border: none;
    color: var(--subtitle, #bbbbbb);
    font-family: inherit;
    resize: vertical;
}

/* ======================================================= */
/* UNIFICACIÓN DE BOTONES EDITOR COMPLETO (POSTING) - HROL */
/* ======================================================= */

/* Quitamos el fondo oscuro general del editor porque ahora usamos la caja hrol-qr-container */
body#phpbb form#postform .message-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* --- Cabecera de Editor de Posteos (Izquierda Título, Derecha Acción) --- */
body#phpbb .hrol-posting-header {
    display: flex;
    justify-content: space-between; /* Empuja el titulo a la izq y la accion a la der */
    align-items: baseline; /* Alinea los textos por su base inferior */
    flex-wrap: wrap; /* Evita que se rompa si alguien lo mira desde un móvil pequeño */
}

body#phpbb .hrol-posting-action {
    color: var(--subtitle, #888888); /* Usa tu color de subtítulo o un grisáceo por defecto */
    font-size: 13px; /* Letras más pequeñas */
    font-weight: normal; 
    text-transform: uppercase; /* Las pone en mayúsculas para que quede más elegante (opcional, si no te gusta puedes borrar esta línea) */
    opacity: 0.8; /* Le baja un poquito la opacidad para que no compita con el título principal */
}

/* --- Formulario Superior: Filas separadas para Asunto y Tipo de Tema --- */

/* 1. Contenedor principal de la fila */
body#phpbb .hrol-input-row,
body#phpbb .hrol-ext-row dl {
    display: flex;
    background: var(--dbckg2, #0e0e0e);
    border: 2px solid rgb(0 0 0);
    margin-bottom: 5px !important;
    border-radius: 4px;
    overflow: hidden;
    
}

/* 2. La Etiqueta (Asunto, Tipo de tema...) con fondo Accent */
body#phpbb .hrol-input-label,
body#phpbb .hrol-ext-row dt {
    background: var(--dbckg4);
    padding: 10px 15px;
    color: var(--text-color, #ffffff);
    display: flex;
    align-items: center;
    width: 20%; 
    min-width: 120px;
    box-sizing: border-box;
    border-right: 2px solid rgb(0 0 0); /* Línea divisoria entre texto y campo */
}

/* 2.5 Fuerza a la etiqueta <label> interna a obedecer nuestros colores y estilos */
body#phpbb .hrol-input-label label,
body#phpbb .hrol-ext-row dt label {
    color: var(--title2);
    font-weight: bold;
    font-size: var(--fs-h5);
    line-height: normal;
    cursor: text;
    font-family: var(--f-titles);
}

/* 3. El cuadro donde se escribe o se despliega */
body#phpbb .hrol-input-field,
body#phpbb .hrol-ext-row dd {
    flex-grow: 1; /* Ocupa todo el resto del ancho disponible */
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

/* 4. Quitamos los estilos base de phpBB a los inputs y selects para que se fundan */
body#phpbb .hrol-input-field input,
body#phpbb .hrol-ext-row dd input,
body#phpbb .hrol-ext-row dd select {
    width: 100%;
    height: 100%;
    background: transparent !important;
    padding: 10px 15px !important;
    box-sizing: border-box;
    box-shadow: none !important;
    color: inherit;
    border-radius: 0 !important;
    outline: none; /* Quita el resplandor azul al hacer clic */
}

/* --- Estilo para los menús desplegables (Select) y sus Opciones --- */

/* 1. Aseguramos que el ratón se convierta en una "manita" al pasar por encima */
body#phpbb .hrol-ext-row dd select {
    cursor: pointer !important;
    appearance: auto; /* Mantiene la flechita nativa para que el usuario sepa que es un desplegable */
}

/* 2. Colores de la lista de opciones que se despliega al hacer clic */
body#phpbb .hrol-ext-row dd select option,
body#phpbb select option {
    background-color: #181818 !important; /* Fondo oscuro para las opciones */
    color: #e0e0e0 !important; /* Texto claro */
    padding: 5px 10px; /* Un poco de espacio para que no estén apretadas */
    font-size: 13px;
    text-align: center;
}

/* 3. Estilo para cuando haces clic en el desplegable (quita el borde azul por defecto) */
body#phpbb .hrol-ext-row dd select:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* --- Truco para intentar forzar el color amarillo en la lista --- */
body#phpbb select option:hover,
body#phpbb select option:focus,
body#phpbb select option:active,
body#phpbb select option:checked {
    background-color: #ffd700 !important; /* Intento 1: Color de fondo amarillo */
    background: linear-gradient(#ffd700, #ffd700) !important; /* Intento 2: El truco para engañar a Windows */
    color: #000000 !important; /* Texto negro para que se pueda leer sobre el fondo amarillo */
}

/* --- Eliminar el padding rebelde de prosilver en las extensiones --- */
body#phpbb fieldset .hrol-ext-row dl {
    padding: 0 !important;
}

/* ========================================= */
/* BOTONES DE ENVÍO (DISEÑO ÚNICO HROL)      */
/* ========================================= */

/* Contenedor centralizado para cualquier botonera */
body#phpbb .submit-buttons,
body#phpbb .hrol-submit-buttons {
    background: transparent;
    border: none;
    padding: 0;
    margin: 20px 0;
    text-align: center;
}

/* Todos los botones de envío se verán iguales (Mayor especificidad para vencer a prosilver) */
body#phpbb form#postform .submit-buttons input[type="submit"],
body#phpbb form#qr_postform .submit-buttons input[type="submit"],
body#phpbb .hrol-submit-buttons input[type="submit"] {
    background: var(--dbckg4, #181818);
    background-image: none !important; /* Vital: Anula el degradado de prosilver */
    border-radius: 0 !important; /* Vital: Bordes rectos */
    border: 1px solid #000000;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
    color: var(--title, #ffffff);
    padding: 10px 20px;
    font-family: var(--f-titles, serif);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0px 10px 15px;
    text-shadow: none; /* Anula la sombra de texto de prosilver */
}

/* Efecto Hover unificado y forzado */
body#phpbb form#postform .submit-buttons input[type="submit"]:hover,
body#phpbb form#qr_postform .submit-buttons input[type="submit"]:hover,
body#phpbb .hrol-submit-buttons input[type="submit"]:hover {
    background: var(--accent1, #ff7f35) !important;
    color: #000000 !important;
}

/* ========================================= */
/* BOTONES DE EXTENSIONES (DADOS/CONSUMIBLES)*/
/* ========================================= */

/* Contenedor principal independiente */
body#phpbb .hrol-extension-btn {
    cursor: pointer;
    margin: 15px !important;
    padding: 10px 15px; /* Le damos su propio espacio interno */
    background: var(--dbckg4, #181818); /* Fondo oscuro propio */
    border: 2px solid var(--dbckg0, #0a0a0a); /* Borde oscuro */
    box-shadow: 0 0 5px rgba(0,0,0,0.5); /* Sombreado elegante */
    transition: all 0.3s ease;
}

/* Efecto al pasar el ratón */
body#phpbb .hrol-extension-btn:hover {
    border-color: var(--accent1, #ff7f35) !important;
    background: var(--dbckg4, #181818) !important;
    box-shadow: 0 0 12px rgba(255, 127, 53, 0.2);
}

/* Ajustes de alineación interna para centrar */
body#phpbb .hrol-extension-btn .hrol-btn-title {
    display: flex;
    justify-content: center; /* Esto CENTRA el texto y el icono */
    align-items: center;
    width: 100%;
    position: relative; /* Necesario para anclar el símbolo + a la derecha */
    pointer-events: none;
    margin: 0px;
}

/* ESTILO DEL TEXTO Y EL ICONO */
body#phpbb .hrol-extension-btn .hrol-btn-title span:first-child {
    color: var(--accent2, #ffac7b) !important; /* Usamos un color distinto (tu naranja suave) */
    font-family: var(--f-titles, serif) !important;
    font-size: 14px !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el icono y el texto */
}

/* Al pasar el ratón, el texto se vuelve blanco para destacar */
body#phpbb .hrol-extension-btn:hover .hrol-btn-title span:first-child {
    color: var(--title, #ffffff) !important;
}

/* El símbolo + anclado a la derecha */
body#phpbb .hrol-btn-indicator {
    position: absolute;
    right: 0; /* Lo empuja a la derecha del todo sin desentrar el texto */
    font-weight: bold;
    color: var(--accent1, #ff7f35) !important;
    font-size: 1.6em !important;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Animación del + */
body#phpbb .hrol-extension-btn:hover .hrol-btn-indicator {
    transform: scale(1.3) rotate(90deg);
    color: var(--title, #ffffff) !important;
}

/* ========================================= */
/* PANELES DESPLEGABLES (DADOS Y CONSUMIBLES)*/
/* ========================================= */

/* Contenedor principal del panel desplegable */
body#phpbb .hrol-extension-panel {
    background: var(--dbckg4, #0c0c0c);
    border: 5px solid var(--dbckg0, #0a0a0a);
    padding: 20px;
    margin: -15px 15px 15px 15px !important;
    margin-bottom: 20px;
    color: var(--text, #777777);
}

/* Títulos y textos explicativos dentro del panel */
body#phpbb .hrol-extension-panel label,
body#phpbb .hrol-extension-panel dt {
    color: var(--title, #ffffff);
    font-family: var(--f-titles, serif);
}

body#phpbb .hrol-extension-panel span {
    font-size: var(--fs-small);
    color: var(--accent1);
}

/* Cajas de selección (Selects) e Inputs generales */
body#phpbb .hrol-extension-panel select,
body#phpbb .hrol-extension-panel input.inputbox {
    background: var(--dbckg3, #101010);
    color: var(--title2, #e0e0e0);
    border: 1px solid var(--dbckg0, #0a0a0a);
    padding: 6px;
    border-radius: 0;
    outline: none;
}


/* ========================================= */
/* BOTONES DE ACCIÓN DENTRO DEL PANEL        */
/* ========================================= */

body#phpbb form#postform .hrol-extension-panel button.button2 {
    background: var(--dbckg2, #0e0e0e);
    color: var(--title2, #e0e0e0);
    border-radius: 0;
    text-transform: uppercase;
    font-family: var(--f-titles, serif);
    font-size: var(--fs-smaller);
    padding: 6px 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%; /* El botón de añadir ocupará todo el ancho */
}

body#phpbb form#postform .hrol-extension-panel button.button2:hover {
    background: var(--accent1, #ff7f35);
    color: var(--dbckg0, #0a0a0a);
    font-weight: bold;
}

/* Botón específico de eliminar (La 'X' roja) */
body#phpbb form#postform .hrol-extension-panel button.button2[onclick*="remove"] {
    background: var(--dbckg2, #0e0e0e);
    border-color: #8a0b29;
    color: #d31141;
    width: auto; /* Para que la X no ocupe el 100% como el de añadir */
    margin-left: 5px;
}

body#phpbb form#postform .hrol-extension-panel button.button2[onclick*="remove"]:hover {
    background: #d31141;
    color: #ffffff;
}

/* ========================================= */
/* ALINEACIÓN DE COLUMNAS (IGUALAR ALTURAS)  */
/* ========================================= */

body#phpbb form#postform .hrol-extension-panel fieldset dl {
    display: flex;
    flex-wrap: nowrap; /* Impide que se pongan uno debajo del otro */
    align-items: stretch;
    margin: 0;
}

/* Columna izquierda (Textos y Títulos) */
body#phpbb form#postform .hrol-extension-panel fieldset dl dt {
    flex: 0 0 25%;
    max-width: 25%;
    margin-right: 20px;
    border-right: 2px solid var(--accent1) !important; /* Tu línea naranja restaurada */
    margin-bottom: 0;
    box-sizing: border-box;
}

/* Columna derecha (Los selectores de dados/consumibles) */
body#phpbb form#postform .hrol-extension-panel fieldset dl dd {
    flex: 0 0 73%;
    max-width: 73%;
    padding-left: 20px;
    margin-left: 0 !important;
    box-sizing: border-box;
}

/* Adaptación para pantallas de móviles */
@media (max-width: 700px) {
    body#phpbb form#postform .hrol-extension-panel fieldset dl {
        flex-wrap: wrap;
        flex-direction: column;
    }
    body#phpbb form#postform .hrol-extension-panel fieldset dl dt,
    body#phpbb form#postform .hrol-extension-panel fieldset dl dd {
        flex: 0 0 100%;
        max-width: 100%;
    }
    body#phpbb form#postform .hrol-extension-panel fieldset dl dt {
        border-right: none !important;
        border-bottom: 1px solid var(--dbckg0, #0a0a0a) !important;
        padding-right: 0;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    body#phpbb form#postform .hrol-extension-panel fieldset dl dd {
        padding-left: 0;
    }
}

/* ========================================= */
/* ALINEACIÓN INTERNA DE LAS FILAS DEFINITIVA*/
/* ========================================= */

body#phpbb form#postform .hrol-extension-panel .dicepro-row,
body#phpbb form#postform .hrol-extension-panel .consumable-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    width: 100%;
    flex-wrap: nowrap;
}

/* El selector principal se estira y anula a prosilver */
body#phpbb form#postform .hrol-extension-panel .dicepro-row select:first-child,
body#phpbb form#postform .hrol-extension-panel .consumable-row select:first-child {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
    margin-right: 30px;
}

/* Elementos de la derecha rígidos para que no se aplasten */
body#phpbb form#postform .hrol-extension-panel .dicepro-row label,
body#phpbb form#postform .hrol-extension-panel .consumable-row label,
body#phpbb form#postform .hrol-extension-panel .dicepro-row select[name="dicepro_qty[]"],
body#phpbb form#postform .hrol-extension-panel .consumable-row select[name="sag_consume_qty[]"],
body#phpbb form#postform .hrol-extension-panel .dicepro-row button,
body#phpbb form#postform .hrol-extension-panel .consumable-row button {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Pequeño ajuste para que el select de los números tenga un tamaño lógico */
body#phpbb form#postform .hrol-extension-panel .dicepro-row select[name="dicepro_qty[]"],
body#phpbb form#postform .hrol-extension-panel .consumable-row select[name="sag_consume_qty[]"] {
    min-width: 60px;
}

/* ========================================= */
/* PANEL DE OPCIONES PRINCIPAL               */
/* ========================================= */

/* Ajustamos el espaciado y los colores de los textos de las opciones */
body#phpbb form#postform #options-panel fieldset > div {
    margin-bottom: 10px;
}

body#phpbb form#postform #options-panel label {
    display: flex;
    align-items: center;
    gap: 8px; /* Separación entre el cuadradito y el texto */
    color: var(--title, #ffffff);
    font-family: var(--f-text, sans-serif); /* Usamos tu tipografía de texto normal */
    cursor: pointer;
}

/* Le damos un toque moderno a las casillas de verificación (Checkboxes) */
body#phpbb form#postform #options-panel input[type="checkbox"] {
    accent-color: var(--accent1, #ff7f35); /* Tiñe el checkbox de naranja cuando se marca (Navegadores modernos) */
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: var(--dbckg3, #101010);
    border: 1px solid var(--dbckg0, #0a0a0a);
}

/* ========================================= */
/* EXTENSIÓN "PUBLICAR COMO" (DESTACADO)     */
/* ========================================= */

body#phpbb .hrol-post-as-box {
    background: var(--dbckg3);
    border: 5px solid var(--dbckg0, #0a0a0a);
    padding: 5px 25px;
    margin-bottom: 20px !important;
}

body#phpbb .hrol-post-as-box dl {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

body#phpbb .hrol-post-as-box dt {
    width: 35%;
    font-family: var(--f-titles, serif);
    color: var(--accent1, #ff7f35);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

body#phpbb .hrol-post-as-box dd {
    width: 65%;
}

/* El desplegable de las cuentas */
body#phpbb .hrol-post-as-box select {
    width: 100%;
    background: var(--dbckg2, #0e0e0e);
    color: var(--title, #ffffff);
    border: 1px solid var(--dbckg5);
    padding: 10px;
    font-size: 14px;
    font-family: var(--f-titles, serif);
    cursor: pointer;
    outline: none;
}

/* Adaptación para móviles del "Publicar como" */
@media (max-width: 700px) {
    body#phpbb .hrol-post-as-box dl {
        flex-direction: column;
        align-items: flex-start;
    }
    body#phpbb .hrol-post-as-box dt,
    body#phpbb .hrol-post-as-box dd {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* ========================================= */
/* PESTAÑAS NATIVAS (OPCIONES, ENCUESTA...)  */
/* ========================================= */

body#phpbb #tabs {
    margin-bottom: 10px;
    margin-left: 15px;
}

body#phpbb #tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Apariencia de botón oscuro para las pestañas */
body#phpbb #tabs .tab > a {
    display: block;
    background: var(--dbckg2, #0e0e0e);
    color: var(--text, #777777);
    padding: 10px 15px;
    border: 5px solid var(--dbckg0, #0a0a0a);
    border-bottom: 0px;
    text-transform: uppercase;
    font-family: var(--f-titles, serif);
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: none;
}

/* Efecto al pasar el ratón por encima de una pestaña */
body#phpbb #tabs .tab > a:hover {
    background: var(--accent1, #ff7f35) !important;
    color: #000000 !important;
    border-bottom: 0px;
}

/* Pestaña activa (La que está abierta) */
body#phpbb #tabs .tab.activetab > a {
    background: var(--dbckg4);
    color: var(--title2);
    border: 5px solid var(--dbckg0, #0a0a0a);
    border-bottom: 0px;
}

/* ========================================= */
/* VISTA PREVIA Y REVISIÓN DE TEMA (SIN AVATAR) */
/* ========================================= */

body#phpbb .hrol-review-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--border1-c);
    padding-bottom: 10px;
    flex-wrap: wrap;
}

body#phpbb .hrol-review-author {
    font-family: var(--f-titles, serif);
    font-size: var(--fs-h4);
    color: var(--accent1);
    text-transform: uppercase;
    font-weight: bold;
}

/* Forzamos el color del enlace del autor para que no pille el de su grupo (que no está cargado) */
body#phpbb .hrol-review-author a {
    color: var(--accent1) !important;
    text-decoration: none;
}

body#phpbb .hrol-review-time {
    font-family: var(--f-mono, monospace);
    font-size: 10px;
    color: var(--subtitle);
    text-transform: uppercase;
}

/* Botones pequeños para Citar/Info */
body#phpbb .hrol-review-buttons {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

body#phpbb .hrol-review-buttons a {
    font-family: var(--f-mono, monospace);
    font-size: 9px;
    color: var(--subtitle);
    border: 1px solid var(--border1-c);
    padding: 3px 8px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    background-color: var(--dbckg1);
}

body#phpbb .hrol-review-buttons a:hover {
    background-color: var(--accent1);
    color: #000000;
    border-color: var(--accent1);
}

/* ========================================= */
/* POSTBIT */
/* ========================================= */

/* --- ESTILOS PARA LOS CAMPOS DE PERFIL (Iconify + Diccionario) --- */

.rolhub-caja-perfil {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px; /* Espacio entre una línea y la de abajo */
    font-size: 13px;
    color: #cccccc; /* Cambia el color a tu gusto */
}

.icono-automatico {
    font-size: 18px; /* Tamaño del icono */
    color: var(--accent1); /* Un color dorado para el icono, bórralo si no lo quieres */
}

/* ========================================= */
/* PESTAÑA GENERAL DEL PERFIL (HROL)         */
/* ========================================= */

body#phpbb .pp-tab-gen {
    position: relative;
    padding: 50px 10px 10px 10px;
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
    gap: 30px;
    z-index: 1;
    overflow: hidden; /* Evita que el rayo se salga por los lados */
}

/* 1. Icono de Fondo (Rayo Morado) */
body#phpbb .hrol-pg-bg-icon {
    position: absolute;
    top: 120px;
    right: 90px; 
    z-index: 0;
    pointer-events: none;
    scale: 12;
    opacity: 0.4;
}

body#phpbb .hrol-pg-bg-icon i {
    display: inline-block;
    line-height: 1;
    font-size: 220px !important; /* El !important obliga al icono a crecer ignorando sus estilos base */
}

/* Si tu script "icono-automatico" inserta un SVG o un Iconify, forzamos su tamaño heredado */
body#phpbb .hrol-pg-bg-icon span,
body#phpbb .hrol-pg-bg-icon svg {
    width: 1em;
    height: 1em;
}

/* 2. Bloque Ascendencia */
body#phpbb .hrol-pg-ascendencia {
    text-align: center;
    display: flex;
    flex-direction: column;
}

body#phpbb .hrol-pg-asc-label {
    font-family: var(--f-mono, sans-serif);
    font-size: 11px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: -5px; /* Acerca la palabra Poseidon */
}

body#phpbb .hrol-pg-asc-name {
    font-family: var(--f-titles, serif);
    font-size: 38px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9); /* Sombreado duro para asegurar la lectura sobre el rayo */
    line-height: 1.1;
}

/* 3. Estadísticas (EXP, PR, DRACMAS) */
body#phpbb .hrol-pg-stats {
    display: flex;
    justify-content: center;
    gap: 25px;
    width: 100%;
}

body#phpbb .hrol-pg-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body#phpbb .hrol-pg-stat-lbl {
    font-family: var(--f-titles, serif);
    font-size: var(--fs-smaller);
    color: var(--accent1, #ead3a2); /* Tono dorado */
    font-weight: 100;
    margin-bottom: -5px;
    letter-spacing: 1px;
}

body#phpbb .hrol-pg-stat-val {
    font-family: var(--f-titles, serif);
    font-size: var(--fs-h3);
    font-weight: bold;
    color: #e0e0e0;
    line-height: 1;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

/* 4. Cuadro Rojo / MiniAvatar */
body#phpbb .hrol-pg-miniavatar {
    width: 200px;
    height: 100px;
    background-color: #ff0000; /* Fondo rojo exacto de tu boceto */
    border: 1px solid #000000; /* Borde interior fino */
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5); /* Borde exterior grueso oscuro */
    overflow: hidden;
    border-radius: 2px;
}

body#phpbb .hrol-pg-miniavatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Centra y recorta la imagen sin deformarla */
}

/* ========================================= */
/* ARREGLO DEL ICONO DE FONDO (PESTAÑA GEN)  */
/* ========================================= */

/* 1. La pestaña general debe poder contener elementos absolutos y ocultar lo que se salga */
body#phpbb .pp-tab-gen {
    position: relative;
    overflow: hidden;
}

/* 2. Aseguramos que los textos, avatares y demás se queden POR ENCIMA del fondo */
body#phpbb .pp-tab-gen > div:not(.hrol-pg-bg-icon) {
    position: relative;
    z-index: 2;
}

/* ========================================= */
/* PESTAÑA DE COMBATE (CÍRCULO Y EQUIPO)     */
/* ========================================= */

body#phpbb .pp-tab-com {
    padding: 15px 5px 10px 5px;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Contenedor del Círculo (Bloqueado para que no encoja) */
body#phpbb .hrol-com-circle-env {
    position: relative;
    width: 170px;
    height: 170px;
    flex-shrink: 0;
    margin: 0 auto;
    top: 10px;
}

/* Anillo decorativo de fondo (Patrón Griego) */
body#phpbb .hrol-com-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 180px;
    transform: translate(-50%, -50%);
    background-image: url(images/circle_pattern.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Símbolo central de Ascendencia */
body#phpbb .hrol-com-center-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
body#phpbb .hrol-com-center-icon .icono-automatico {
    font-size: 80px;
    color: var(--accent1);
    opacity: 0.5;
    transition: 0.3s;
}
body#phpbb .hrol-com-center-name {
font-family: var(--f-titles, serif);
    font-size: var(--fs-small);
    color: var(--title);
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgb(0 0 0);
    margin-top: 25px;
    position: absolute;
    z-index: 2;
    transition: 0.3s;
}

body#phpbb .hrol-com-center-icon:hover .icono-automatico {
    opacity: 1;
    font-size: 85px;
}
body#phpbb .hrol-com-center-icon:hover .hrol-com-center-name {
    opacity: 0;
}

/* Textos de los Stats */
body#phpbb .hrol-com-stat {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    z-index: 2;
}
body#phpbb .hrol-com-sval {
    font-family: var(--f-titles, serif);
    font-size: 24px;
    color: #ffffff;
    line-height: 1;
    font-weight: bolder;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
    transition: 0.3s;
}

body#phpbb .hrol-com-sval:hover {
    font-size: 30px;
}


body#phpbb .hrol-com-slbl {
    font-family: var(--f-mono, monospace);
    font-size: 8px;
    color: var(--title2);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: -2px;
}

/* Excepción visual para el Nivel (para que destaque más) */
body#phpbb .pos-top .hrol-com-slbl {
    font-family: var(--f-titles, serif);
    font-size: 11px;
    font-weight: bold;
    color: var(--title2);
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

body#phpbb .pos-top .hrol-com-sval {
    font-family: var(--f-titles, serif);
    font-size: 30px;
    color: var(--accent1);
    line-height: 1;
    font-weight: bolder;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
    transition: 0.3s;
}

body#phpbb .pos-top .hrol-com-sval:hover {
    font-size: 35px;
}

/* Posiciones exactas del círculo (Agujas del reloj) */
body#phpbb .pos-top { top: -10px; left: 50%; transform: translateX(-50%); }
body#phpbb .pos-tl  { top: 10px; left: 0px; }
body#phpbb .pos-tr  { top: 10px; right: 0px; }
body#phpbb .pos-l   { top: 50%; left: -25px; transform: translateY(-50%); }
body#phpbb .pos-r   { top: 50%; right: -25px; transform: translateY(-50%); }
body#phpbb .pos-bl  { bottom: 10px; left: 0px; }
body#phpbb .pos-br  { bottom: 10px; right: 0px; }
body#phpbb .pos-bot { bottom: -15px; left: 50%; transform: translateX(-50%); }

/* Contenedor de Clase y Arma */
body#phpbb .hrol-com-clase-arma {
    display: flex;
    justify-content: space-between;
    width: 80%;
    padding: 0 15px;
}
body#phpbb .hrol-com-ca-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
body#phpbb .hrol-com-ca-val {
    font-family: var(--f-titles, serif);
    font-size: 12px;
    font-weight: bold;
    color: var(--accent1);
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
body#phpbb .hrol-com-ca-lbl {
    font-family: var(--f-mono, monospace);
    font-size: var(--fs-mini);
    color: var(--title2);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: -5px;
}

/* ========================================= */
/* CAJA DE EQUIPO (Optimizada para espacio)  */
/* ========================================= */
body#phpbb .hrol-com-equipo-env {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid #000000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4);
    width: 90%;
    /* Reducimos el padding inferior a 5px para ganar espacio */
    padding: 10px 10px 5px 10px; 
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    margin-top: 5px;
    gap: 10px;
}

/* Centrado perfecto del título EQUIPO */
body#phpbb .hrol-com-eq-title {
    font-family: var(--f-titles, serif);
    font-size: 12px;
    color: var(--accent1);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: absolute;
    top: -15px;
    
    /* El truco CSS infalible para centrar elementos absolutos */
    left: 50%;
    transform: translateX(-50%);
}

/* ========================================= */
/* SLOTS DE EQUIPO (SCROLL HORIZONTAL FINO)  */
/* ========================================= */
body#phpbb .hrol-com-eq-slots {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    padding-bottom: 3px; /* Solo 3 píxeles, recuperamos espacio */
    
    /* Scroll elegante y sin fondo para Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--accent1) transparent;
}

/* 1. Grosor de la barra: Súper fina (3px) */
body#phpbb .hrol-com-eq-slots::-webkit-scrollbar {
    height: 3px; 
}

/* 2. El carril: Totalmente transparente para que no ocupe espacio visual */
body#phpbb .hrol-com-eq-slots::-webkit-scrollbar-track {
    background: transparent; 
    border: none;
}

/* 3. La barrita: Solo se verá una línea dorada elegante */
body#phpbb .hrol-com-eq-slots::-webkit-scrollbar-thumb {
    background: var(--accent1); 
    border-radius: 4px;
}

/* ========================================= */
/* OBJETOS INDIVIDUALES (Magia del scroll)   */
/* ========================================= */
body#phpbb .hrol-com-eq-slots > div {
    margin: 2px !important;
    /* ESTA ES LA MAGIA: Impide que se aplasten y fuerza el scroll */
    flex-shrink: 0 !important; 
}

/* Botón flecha del inventario (Arriba a la derecha) */
body#phpbb .hrol-com-inv-link {
    position: absolute;
    top: -13px; /* A la misma altura visual que el título */
    right: 15px; /* Pegadito al margen derecho de la caja */
    
    background-color: var(--dbckg0);
    border: 1px solid var(--border1-c);
    padding: 0px 4px 1px 4px;
    font-family: var(--f-titles, serif);
    font-size: 14px; /* Un pelín más grande para que la flecha se vea bien */
    color: var(--accent1);
    text-decoration: none;
    transition: 0.3s;
    line-height: 1.2;
}

body#phpbb .hrol-com-inv-link:hover {
    background-color: var(--accent1);
    color: #000000;
    border-color: var(--accent1);
}

/* Ajuste de tamaño para los iconos de Clase y Arma */
body#phpbb .hrol-com-ca-val .icono-automatico {
    font-size: 36px; /* Puedes subir o bajar este número según veas */
    color: var(--accent1); /* Color dorado/naranja */
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    margin: -1px;
}

/* Pequeño efecto al pasar el ratón */
body#phpbb .hrol-com-ca-box:hover .icono-automatico {
    transform: scale(1.1);
    color: var(--title); /* Se vuelve blanco al poner el ratón */
}

/* =======================================================
   PERFIL DE USUARIO - ESTILO HROL (SIN CELDAS + LOGO GIGANTE)
   ======================================================= */

.hrol-perfil-wrapper {
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(4px);
    padding: 20px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    border: 2px solid rgb(0 0 0);
    box-shadow: 0 0 0 5px var(--border2-c);
    margin: initial;
}

/* Subimos las columnas para que estén por encima del logo de fondo */
.hrol-perfil-col-avatar,
.hrol-perfil-col-contenido,
.hrol-perfil-bottom {
    position: relative;
    z-index: 1; 
}

/* --- COLUMNA DE LA IZQUIERDA: AVATAR VERTICAL --- */
.hrol-perfil-col-avatar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hrol-perfil-avatar {
    height: 100%;
    width: 100%;
}

.hrol-perfil-avatar img {
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    display: block;
    border: 15px solid #050505;
    outline: var(--border1);
    outline-offset: -16px;
}

/* --- COLUMNA DE LA DERECHA: CONTENIDO --- */
.hrol-perfil-col-contenido {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* CABECERA CENTRADA */
.hrol-perfil-cabecera-wrapper {
    position: relative;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ahora es un div, así que le quitamos los márgenes por defecto */
.hrol-perfil-nombre {
    margin: 0;
    padding: 0;
}

.hrol-perfil-nombre span {
    font-family: var(--f-titles);
    color: var(--title2);
    font-size: var(--fs-h1);
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.1;
    text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.9);
}

.hrol-perfil-ascendencia {
    font-family: var(--f-titles);
    font-size: var(--fs-small);
    color: var(--subtitle);
    letter-spacing: 0.5px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.hrol-perfil-ascendencia span {
    display: block;
}

.hrol-ascendencia-highlight {
    font-weight: 700;
    color: var(--accent1, #4CAF50);
    text-transform: uppercase;
    font-size: var(--fs-h2);
    margin-top: -13px;
    text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.9);
}

/* LOGO DE ASCENDENCIA GIGANTE DETRÁS DE TODO EL PERFIL */
.hrol-ascendencia-bg-logo {
    position: absolute;
    right: -60px;
    bottom: 120px;
    opacity: 0.07; /* Muy sutil para no molestar la lectura */
    pointer-events: none; /* Evita que moleste si haces click */
    z-index: 0; /* Al fondo del todo */
}

/* Hacemos el icono inmenso */
.hrol-ascendencia-bg-logo .icono-automatico,
.hrol-ascendencia-bg-logo [data-icon] {
    font-size: 35rem !important; 
    line-height: 1;
}

/* MARCADORES DE PUNTOS Y MONEDAS */
.hrol-perfil-monedas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hrol-moneda-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 6px;
    flex-grow: 1;
    min-width: 90px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.hrol-moneda-num {
    color: var(--title2);
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
    font-weight: bolder;
    font-family: var(--f-titles);
    font-size: var(--fs-h3);
}

.hrol-moneda-label {
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: -10px;
    font-family: var(--f-titles);
    font-size: var(--fs-small);
}

/* ESTRUCTURA DE TEXTOS (GRID DIBUJADO) */
.hrol-perfil-middle {
    display: grid;
    grid-template-columns: 0.7fr 0.7fr 0.8fr; /* 3 columnas: Edad, Actividad, e Intereses (un poco más ancha) */
    grid-template-areas: 
        "edad actividad intereses"
        "labor labor intereses";
    gap: 20px 30px; /* 20px de separación vertical, 30px horizontal */
}

/* Asignamos cada caja a su palabra en el mapa de arriba */
.hrol-caja-edad { grid-area: edad; }
.hrol-caja-actividad { grid-area: actividad; }
.hrol-caja-labor { grid-area: labor; }
.hrol-caja-intereses { grid-area: intereses; }

.hrol-caja-info {
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hrol-caja-titulo {
    background: transparent;
    color: var(--accent1, #4CAF50);
    padding: 0;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 1.5px;
    border: none;
    font-family: var(--f-titles);
    font-size: var(--fs-small);
}

.hrol-caja-contenido {
    padding: 0;
    color: #ddd;
    line-height: 1.5;
    text-align: left;
    font-weight: bolder;
    font-family: var(--f-titles);
    font-size: var(--fs-h4);
    margin-top: -10px;
}

.scroll-personalizado {
    overflow-y: auto;
    padding-right: 5px;
}

.scroll-personalizado::-webkit-scrollbar {
    width: 3px;
}
.scroll-personalizado::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* --- BARRA INFERIOR (OCUPA TODO EL ANCHO DEL CONTENEDOR) --- */
.hrol-perfil-bottom {
    grid-column: 1 / -1; 
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 25px;
}

/* CONTENEDOR DE TODOS LOS BOTONES */
.hrol-perfil-admin-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px 20px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    flex-wrap: wrap;
    gap: 15px;
}

.hrol-ultima-conexion {
    font-size: 0.85rem;
    color: #777;
    letter-spacing: 0.5px;
}

.hrol-botones-foro {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: row;
}

/* LÍNEA SEPARADORA VERTICAL */
.hrol-separador-vertical {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 5px;
}

/* ENLACES AUTO-GENERADOS POR PHPBB (Ficha y Búsquedas) */
.hrol-link-auto {
    display: inline-flex;
}

.hrol-link-auto a {
    background: rgb(234 211 162 / 9%);
    color: var(--accent1, #4CAF50) !important;
    border: 1px solid #ead3a270;
    border-bottom-color: #ead3a270 !important;
    width: 78px;
    height: 36px;
    text-decoration: none;
    transition: all 0.25s ease;
    font-size: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hrol-link-auto a:hover {
    background: var(--accent1, #4CAF50);
    color: #000 !important;
}

/* Inyectamos el icono de Tarjeta para la FICHA */
.hrol-link-auto.fichaurl a::after {
    content: "\f2bb"; /* Icono de address-card en FontAwesome */
    font-family: "FontAwesome";
    font-size: 1.2rem; 
}

/* Inyectamos el icono de Lupa para BÚSQUEDAS */
.hrol-link-auto.busqueda a::after {
    content: "\f002"; /* Icono de search en FontAwesome */
    font-family: "FontAwesome";
    font-size: 1.2rem;
}

/* BOTONES DE ADMINISTRACIÓN Y FORO (Los cuadrados estándar) */
.hrol-btn-foro {
    color: #aaa;
    text-decoration: none;
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.02);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    padding-left: 2px;
}

.hrol-btn-foro:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent1, #4CAF50);
    border-color: var(--accent1, #4CAF50);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

/* --- RESPONSIVE ADAPTADO AL NUEVO LAYOUT --- */
@media (max-width: 900px) {
    .hrol-perfil-wrapper {
        grid-template-columns: 1fr;
    }
    .hrol-perfil-col-avatar {
        max-width: 200px;
        margin: 0 auto;
    }
    .hrol-perfil-avatar img {
        height: auto;
    }
    .hrol-perfil-middle {
        grid-template-columns: 1fr;
    }
    .hrol-perfil-admin-links {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .hrol-botones-foro {
        justify-content: center;
    }
}

/* ================================================================== */
/* SECCIÓN INFERIOR DEL PERFIL DE USUARIO (ESTADÍSTICAS E INVENTARIO) */
/* ================================================================== */

/* Contenedor principal inferior en dos columnas */
.hrol-inferior-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.4fr; /* Columna izquierda adaptada, derecha para inventario */
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

/* Columna izquierda: Panel contenedor de Estadísticas */
.hrol-inferior-col-stats {
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(4px);
    border: 2px solid rgb(0 0 0);
    -webkit-backdrop-filter: blur(4px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    box-shadow: 0 0 0 5px var(--border2-c);
    background-image: url(images/topleft_pattern.png);
    background-size: 220px;
    background-repeat: no-repeat;
}

/* Cabecera del panel */
.hrol-stats-seccion-header {
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
}

.hrol-stats-titulo {
    font-size: var(--fs-h2);
    color: var(--title, #ffffff);
    letter-spacing: 2px;
    margin: 0 0 -10px 0;
    font-weight: bolder;
    font-family: var(--f-titles);
}

/* Sublínea difuminada a los lados tipo RPG */
.hrol-stats-sublinea {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--accent1, #ead3a2);
    font-size: var(--fs-h5);
    font-family: var(--f-titles);
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hrol-stats-sublinea::before {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, rgba(234, 211, 162, 0.4), transparent);
}

.hrol-stats-sublinea::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(234, 211, 162, 0.4), transparent);
}


.hrol-inventario-placeholder {
    color: var(--text);
    font-style: italic;
    font-size: 12px;
}

/* ================================================================== */
/* SECCIÓN ESTADÍSTICAS DEL PERFIL DE USUARIO (TAMAÑO AMPLIADO)       */
/* ================================================================== */

/* Contenedor espacial del círculo místico del perfil (Más grande y espacioso) */
.hrol-prof-circle-env {
    position: relative;
    width: 300px;
    height: 320px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Anillo de guía circular interno ampliado (CON IMAGEN DE FONDO) */
.hrol-prof-ring {
    position: absolute;
    width: 300px;
    height: 300px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    /* Invocación de la imagen de fondo */
    background-image: url('images/circle_pattern.png');
    background-size: cover;
    background-position: center;
    opacity: 0.6; /* Un poco transparente para no ocultar la información */
}

/* Icono divino y texto en el centro geométrico */
.hrol-prof-center-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    text-align: center;
    width: 200px; /* Le damos una caja de impacto para que el ratón lo detecte fácil */
    height: 200px;
    cursor: default;
}

/* Icono central (Visible por defecto) */
.hrol-prof-center-icon .icono-automatico {
    font-size: 130px; /* Al estar solo, lo hacemos un poco más grande e imponente */
    color: var(--accent1);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Texto del Nombre (Oculto por defecto, superpuesto al icono) */
.hrol-prof-center-name {
    position: absolute; /* Lo saca del flujo para ponerlo justo encima del icono */
    font-size: 25px;
    font-weight: bold;
    color: var(--title, #ffffff); /* Lo ponemos blanco para que resalte sobre el icono de fondo */
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px var(--accent1); /* Brillo para asegurar lectura */
    opacity: 0; /* Oculto completamente */
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(0.8); /* Un poco más pequeño para hacer efecto de "zoom in" */
    pointer-events: none; /* Evita que el texto bloquee el ratón */
}

/* ------------------------------------------- */
/* EFECTO HOVER EN EL CENTRO                   */
/* ------------------------------------------- */
.hrol-prof-center-icon:hover .icono-automatico {
    opacity: 0.2; /* El icono se vuelve semitransparente (20%) */
    transform: scale(1.1); /* El icono crece sutilmente hacia el fondo */
}

.hrol-prof-center-icon:hover .hrol-prof-center-name {
    opacity: 1; /* El texto aparece */
    transform: scale(1); /* El texto recupera su tamaño original */
}

/* Cajas individuales para los Atributos (Como en el postrow, con Hitbox fija) */
body#phpbb .hrol-prof-stat {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px; /* Caja fija invisible más grande para atrapar el ratón */
    height: 60px;
    z-index: 10;
}

/* Números de estadísticas (Agrandan con font-size en el hover, no con transform) */
body#phpbb .hrol-prof-sval {
    font-family: var(--f-titles, serif);
    font-size: var(--fs-h3);
    color: #ffffff;
    line-height: 1;
    font-weight: bolder;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    transition: font-size 0.3s ease, color 0.3s ease;
}

body#phpbb .hrol-prof-sval:hover {
    font-size: var(--fs-h2);
    color: var(--accent1); /* Se ilumina con el color del foro */
}

/* Textos pequeños debajo del número */
body#phpbb .hrol-prof-slbl {
    font-family: var(--f-mono, monospace);
    font-size: 10px;
    color: var(--title2);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}

/* Excepción visual para el Nivel (Arriba del todo, destaca más) */
body#phpbb .hrol-prof-circle-env .pos-top .hrol-prof-slbl {
    font-family: var(--f-titles, serif);
    font-size: 12px;
    font-weight: bold;
    color: var(--title2);
    letter-spacing: 1px;
}

body#phpbb .hrol-prof-circle-env .pos-top .hrol-prof-sval {
    color: var(--accent1);
    font-size: var(--fs-h1)
}

body#phpbb .hrol-prof-circle-env .pos-top .hrol-prof-sval:hover {
    font-size: 60px;
}

/* Coordenadas adaptadas al círculo grande de 320px */
body#phpbb .hrol-prof-circle-env .pos-top { top: -5px; left: 50%; transform: translateX(-50%); }
body#phpbb .hrol-prof-circle-env .pos-tl  { top: 35px; left: 10px; }
body#phpbb .hrol-prof-circle-env .pos-tr  { top: 35px; right: 10px; }
body#phpbb .hrol-prof-circle-env .pos-l   { top: 50%; left: -25px; transform: translateY(-50%); }
body#phpbb .hrol-prof-circle-env .pos-r   { top: 50%; right: -25px; transform: translateY(-50%); }
body#phpbb .hrol-prof-circle-env .pos-bl  { bottom: 35px; left: 10px; }
body#phpbb .hrol-prof-circle-env .pos-br  { bottom: 35px; right: 10px; }
body#phpbb .hrol-prof-circle-env .pos-bot { bottom: -20px; left: 50%; transform: translateX(-50%); }

/* Dos Cuadros Inferiores de Perfil (Clase y Estilo) */
.hrol-prof-clase-arma {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}

.hrol-prof-ca-box {
    flex: 1;
    max-width: 150px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaciado entre el bloque del contenido y la etiqueta inferior */
    transition: all 0.3s ease;
}


.hrol-prof-ca-box:hover .hrol-prof-ca-val .icono-automatico {
    color: var(--accent1);
}


/* Contenedor del Icono + Texto Real */
.hrol-prof-ca-val {
    display: flex;
    flex-direction: column; /* Alínea el icono arriba y el texto abajo */
    align-items: center;
    justify-content: center;
    gap: 4px; /* Espaciado interno entre el icono y su texto */
}

/* Tamaño exclusivo para el icono automático de estos cuadros */
.hrol-prof-ca-val .icono-automatico {
    font-size: var(--fs-h1);
    color: var(--title, #ffffff);
    transition: all 0.3s ease;
}

/* Estilo para el texto real (Ej: Estrategos / Espada) */
.hrol-prof-ca-texto-real {
    font-family: var(--f-titles, serif);
    font-size: var(--fs-h5);
    color: var(--accent1); /* Color dorado de acento de tu foro */
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    text-align: center;
}

/* Etiqueta pequeña del fondo (CLASE / ESTILO) */
.hrol-prof-ca-lbl {
    font-family: var(--f-mono, monospace);
    font-size: 9px;
    color: var(--title2, #e0e0e0);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
}

/* ================================================================== */
/* DISEÑO DEL INVENTARIO RPG (COLUMNA DERECHA DEL PERFIL)             */
/* ================================================================== */

/* Ajuste del panel derecho contenedor */
.hrol-inferior-col-inventario {
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 2px solid rgb(0, 0, 0);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-shadow: 0 0 0 5px var(--border2-c);
    border-radius: 0px;
    background-image: url(images/bottomright_pattern.png);
    background-size: 320px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

.hrol-prof-inv-contenedor {
    width: 100%;
}

.hrol-prof-inv-titulo {
    text-align: center;
    font-size: var(--fs-h2);
    color: var(--title, #ffffff);
    letter-spacing: 2px;
    margin: 0 0 10px 0;
    font-weight: bolder;
    font-family: var(--f-titles);
}

/* ------------------------------------------------------------------ */
/* SISTEMA DE PESTAÑAS INTEGRADO CON CSS PURO                         */
/* ------------------------------------------------------------------ */
.hrol-inv-radio {
    display: none; /* Escondemos los círculos selectores nativos */
}

.hrol-inv-nav-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-bottom: 10px;
}

.hrol-inv-label {
    padding: 7px 14px 6px 14px;
    font-family: var(--f-titles, serif);
    font-size: var(--fs-smaller);
    font-weight: bold;
    color: var(--subtitle, #bbbbbb);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: 1px solid #e0e0e05c;
    transition: all 0.3s ease;
}

.hrol-inv-label:hover {
    color: #ffffff;
    background: rgb(38 38 38);
}

/* Cambia el estilo de la pestaña activa de forma automática */
#hrol-inv-tab1:checked ~ .hrol-inv-nav-tabs label[for="hrol-inv-tab1"],
#hrol-inv-tab2:checked ~ .hrol-inv-nav-tabs label[for="hrol-inv-tab2"] {
    color: black;
    font-weight: bolder;
    background: var(--accent1);
    border-color: rgb(0 0 0);
    box-shadow: 0 0 8px rgb(255 220 144 / 60%);
}

/* Ocultación y muestra de los paneles según la pestaña pulsada */
.hrol-inv-panel {
    display: none;
    width: 100%;
}

#hrol-inv-tab1:checked ~ .hrol-inv-content-tabs .panel-tab1 { display: block; }
#hrol-inv-tab2:checked ~ .hrol-inv-content-tabs .panel-tab2 { display: block; }

/* ------------------------------------------------------------------ */
/* CATEGORÍAS E ÍTEMS HORIZONTALES                                    */
/* ------------------------------------------------------------------ */
.hrol-prof-inv-categoria {
    margin-top: 20px;
    width: 100%;
}

/* Línea divisoria RPG (Artillería pesada con CSS Grid) */
body#phpbb .hrol-prof-inv-categoria {
    margin-top: 25px; 
    width: 100%;
    clear: both;
    display: block; 
}

body#phpbb .hrol-prof-inv-cat-title {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: var(--f-titles, serif);
    font-size: 13px;
    font-weight: bold;
    color: var(--accent1);
    letter-spacing: 1px;
    margin: 0 0 15px 0;
    padding: 0;
    border: none;
    text-transform: uppercase;
    background: transparent;
    width: 100%; /* ESTA ES LA MAGIA: Obliga a la cabecera a tener el ancho total para que la línea respire */
    box-sizing: border-box;
}

body#phpbb .hrol-prof-inv-categoria {
    margin-top: 20px;
    width: 100%;
    clear: both; /* Evita que otras capas ocultas por el scroll interfieran */
}

body#phpbb .hrol-prof-inv-cat-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(234, 211, 162, 0.4), transparent);
}

/* Rejilla Base (Manejo general del Scroll) */
.hrol-prof-inv-grid {
    display: grid;
    gap: 10px;
    width: 100%;
    overflow-y: auto; /* Activa el scroll vertical solo si es necesario */
    padding-right: 6px; /* Espacio para que la barra de scroll no pise los objetos */
    align-content: start; /* Mantiene los objetos pegados arriba si hay pocos */
}

/* Alturas dinámicas exactas para cada categoría */
.grid-equip {
    max-height: 150px; /* Muestra exactamente 2 filas antes de activar el scroll */
}

.grid-cons {
    max-height: 200px; /* Muestra exactamente 3 filas antes de activar el scroll */
}

.grid-mat {
    max-height: 450px; /* Al estar solo en su pestaña, le damos el equivalente al 100% de la columna izquierda para mantener simetría */
}

/* Scroll elegante, súper fino y sin fondo para Firefox en el perfil */
body#phpbb .hrol-prof-inv-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--accent1) transparent;
}

/* 1. Grosor de la barra: Súper fina (3px de ancho para scroll vertical) */
body#phpbb .hrol-prof-inv-grid::-webkit-scrollbar {
    width: 3px;
}

/* 2. El carril: Totalmente transparente para que no ocupe espacio visual */
body#phpbb .hrol-prof-inv-grid::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

/* 3. La barrita: Solo se verá una línea dorada elegante */
body#phpbb .hrol-prof-inv-grid::-webkit-scrollbar-thumb {
    background: var(--accent1);
    border-radius: 4px;
}

.panel-tab1 .hrol-prof-inv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-tab2 .hrol-prof-inv-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Estructura Base del Slot Horizontal */
.hrol-prof-inv-item {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid rgb(0 0 0);
    border-radius: 6px;
    padding: 8px;
    gap: 10px;
    transition: all 0.3s ease;
    min-width: 0; /* Crucial en Grid para evitar que el texto desborde y rompa las columnas */
}

.hrol-prof-inv-item:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--accent1);
    box-shadow: 0 0 8px rgba(234, 211, 162, 0.15);
}

/* Cuadrante del Icono a la izquierda */
.hrol-prof-inv-img-wrapper {
    width: 44px;
    height: 44px;
    min-width: 44px; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 2px;
    border: 1px solid var(--subtitle);
}

.hrol-prof-inv-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Columna derecha interna de textos */
.hrol-prof-inv-data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-width: 0; /* Evita que los textos largos empujen la caja hacia afuera */
}

/* Título arriba a la derecha (Texto adaptable a 2 líneas si es muy largo) */
.hrol-prof-inv-item-name {
    font-family: var(--f-titles, serif);
    font-size: 11px;
    font-weight: bold;
    color: var(--title, #ffffff);
    white-space: normal; /* Permite bajar de línea */
    line-height: 1.2;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Permite máximo 2 líneas. Si ocupa 3, pone puntos suspensivos. */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fila inferior para Tipo y Cantidad */
.hrol-prof-inv-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 4px;
}

/* Tipo abajo a la derecha */
.hrol-prof-inv-type {
    font-family: var(--f-mono, monospace);
    font-size: 8px;
    color: var(--subtitle, #bbbbbb);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65%;
}

/* Cantidad abajo a la derecha enmarcada */
.hrol-prof-inv-cantidad {
    font-family: var(--f-mono, monospace);
    font-size: var(--fs-smaller);
    font-weight: bold;
    color: var(--accent1);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(234, 211, 162, 0.2);
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
}

/* ================================================================== */
/* DISEÑO DE CUENTAS ENLAZADAS (TARJETAS RPG)                         */
/* ================================================================== */

/* 1. Limpieza de fondos por defecto de phpBB */
#profile_linked_accounts_list,
#profile_linked_accounts_list .inner {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 15px;
}

/* 2. Estilizar el título para que encaje con el foro */
#hrol-eventos-extra h2 {
    font-family: var(--f-titles, serif);
    font-size: var(--fs-h3, 20px);
    font-weight: bolder;
    color: var(--title2);
    letter-spacing: 2px;
    text-align: center;
    border: none;
    background: transparent;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* 3. Ocultar la cabecera de la tabla (Avatar | Nombre | Rango) */
#profile_linked_accounts_list thead {
    display: none;
}

/* 4. Convertir la Tabla en una Cuadrícula de 3 columnas (33%) */
#profile_linked_accounts_list table,
#profile_linked_accounts_list tbody {
    display: block;
    width: 100%;
    background: transparent !important;
    border: none !important;
}

#profile_linked_accounts_list tbody {
    display: grid;
    /* Intenta meter 3. Si la pantalla es pequeña, se adapta */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 15px;
}

/* 5. Convertir cada Fila (tr) en una Tarjeta RPG */
#profile_linked_accounts_list tr {
    display: grid;
    grid-template-columns: 160px 1fr; /* Columna 1: Avatar 45px | Columna 2: Textos */
    grid-template-rows: auto auto; /* Fila 1: Nombre | Fila 2: Rango */
    gap: 0 12px;
     background: rgba(15, 15, 15, 0.65);
     backdrop-filter: blur(4px);
     border: 2px solid rgb(0 0 0);
     box-shadow: 0 0 0 5px var(--border2-c);
    border-radius: 6px;
    padding: 10px;
    transition: all 0.3s ease;
}

#profile_linked_accounts_list tr:hover {
    box-shadow: 0 0 8px rgb(241 212 151 / 15%);
}

/* Quitar bordes y paddings a las celdas (td) */
#profile_linked_accounts_list td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 6. Cuadrante del Avatar (A la izquierda, abarcando 2 filas) */
#profile_linked_accounts_list td.avatar_col {
    grid-column: 1;
    grid-row: 1 / 3; /* Ocupa desde la fila 1 hasta la 3 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 145px;
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
}

/* Corrección de imágenes gigantes de Avatar (Fuerza a ser un cuadradito) */
#profile_linked_accounts_list td.avatar_col img.avatar {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover; /* Recorta el centro de la imagen si es rectangular */
}

/* 7. Cuadrante del Nombre (Arriba a la derecha) */
#profile_linked_accounts_list td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-family: var(--f-titles, serif);
    font-size: var(--fs-h4);
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#profile_linked_accounts_list td:nth-child(2) a.username {
    color: var(--title2);
    text-decoration: none;
}

#profile_linked_accounts_list td:nth-child(2) a.username:hover{
    font-weight: bolder;
    color:var(--title);
}

/* 8. Cuadrante del Rango (Abajo a la derecha) */
#profile_linked_accounts_list td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-family: var(--f-mono, monospace);
    font-size: 9px;
    color: var(--subtitle, #bbbbbb);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Extra: Si la extensión deja el rango vacío (celda .empty), rellenamos con CSS */
#profile_linked_accounts_list td:nth-child(3).empty::after {
    content: "Miembro";
    opacity: 0.5;
}

/* ========================================= */
/* PANEL DE CONTROL DE USUARIO (UCP)         */
/* ========================================= */

/* Ajustar el margen del panel principal (bg3) solo dentro del UCP */
body#phpbb.section-ucp .panel.bg3 {
    margin: -10px;
}

/* 1. Fondo del contenedor principal y cajas internas */
body#phpbb.section-ucp .panel-container .panel {
    background-color: #00000000;
    border: 0px solid var(--foroborde); /* Borde elegante acorde al tema */
    color: var(--text);
}

/* 2. Encabezados de las secciones dentro del panel (ej. "Preferencias de foro") */
body#phpbb.section-ucp .panel-container h3 {
    background-color: transparent;
    border-bottom: 1px solid var(--accent1); /* Línea dorada para separar secciones */
    color: var(--title);
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* 3. Ajuste de las cajas de campo (donde seleccionas opciones) */
body#phpbb.section-ucp .panel-container fieldset {
    border: 1px solid var(--dbckg3);
    background-color: var(--dbckg0);
    padding: 10px;
}

/* 4. Pie de página del panel (el botón de Enviar/Restablecer) */
body#phpbb.section-ucp .panel-container .panel .submit-buttons {
    background-color: transparent;
    border-top: 1px solid var(--foroborde);
    margin-top: 10px;
    padding-top: 10px;
}

/* ========================================= */
/* BBCODE: SPOILER (HRol Style)              */
/* ========================================= */

.hrol-spoiler {
    background-color: var(--dbckg1);
    border: 1px solid var(--foroborde);
    margin: 15px 0;
    overflow: hidden;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4);
}

.hrol-spoiler > summary {
    background-color: var(--dbckg4);
    color: var(--title2);
    padding: 10px 15px;
    font-family: var(--f-titles, serif);
    font-size: var(--fs-small);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-bottom: 1px solid transparent;
    text-align: center;
}

/* Efecto al pasar el ratón por encima del título del spoiler */
.hrol-spoiler > summary:hover {
    color: var(--title);
    background-color: var(--dbckg2);
}

/* Cuando el spoiler está abierto */
.hrol-spoiler[open] > summary {
    border-bottom-color: var(--foroborde);
}

.hrol-spoiler .spoiler-content {
    padding: 15px;
    color: var(--text);
    background-color: var(--dbckg0);
    font-family: var(--f-body, sans-serif);
}

/* --- ESTILO GLOBAL PARA CAJAS DE CÓDIGO --- */
div.codebox {
    margin: 20px 0;
    background-color: var(--dbckg2);
    border: 1px solid var(--border1-c);
    border-radius: 4px;
    padding: 10px;
}

/* Convertimos la cabecera en Flexbox y ocultamos el texto nativo "Código:" */
div.codebox p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border1-c);
    padding-bottom: 15px;
    font-size: 0 !important; 
}

/* Inyectamos la palabra "CÓDIGO" a la izquierda */
div.codebox p::before {
    content: "CÓDIGO";
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--subtitle);
}

/* Ocultamos el texto "Seleccionar todo" */
div.codebox p a {
    font-size: 0 !important; 
    text-decoration: none;
}

/* Inyectamos el icono FontAwesome (cuadrado con check) a la derecha */
div.codebox p a::after {
    content: "\f14a"; /* Código del icono fa-check-square-o */
    font-family: "FontAwesome";
    font-size: 11px;
    color: var(--text);
    transition: color 0.3s ease;
}

/* Efecto al pasar el ratón por el icono */
div.codebox p a:hover::after {
    color: var(--accent1);
}

div.codebox code{
    color: var(--accent1);
}



/* ========================================= */
/* PERFIL DE USUARIO: SKILLS                 */
/* ========================================= */

.hrol-skills-seccion {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(4px);
    border: 2px solid rgb(0, 0, 0);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 0 0 5px var(--border2-c);
    border-radius: 0px;
    margin-top: 20px;
}

/* Esquinas decorativas */
.hrol-skills-seccion .skill-corner {
    position: absolute;
    width: 120px;
    height: 120px;
    background-image: url("images/skill_bottom_pattern.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

/* Arriba izquierda = espejo vertical */
.hrol-skills-seccion .skill-corner.tl {
    top: 0;
    left: -4px;
    transform: scaleY(-1);
}

/* Arriba derecha = espejo horizontal + vertical */
.hrol-skills-seccion .skill-corner.tr {
    top: 0;
    right: -4px;
    transform: scale(-1, -1);
}

/* Abajo izquierda = normal */
.hrol-skills-seccion .skill-corner.bl {
    bottom: 0;
    left: -4px;
    transform: none;
}

/* Abajo derecha = espejo horizontal */
.hrol-skills-seccion .skill-corner.br {
    bottom: 0;
    right: -4px;
    transform: scaleX(-1);
}

/* Contenido por encima */
.hrol-skills-seccion > *:not(.skill-corner) {
    position: relative;
    z-index: 1;
}

            .hrol-skills-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 15px;
                margin-top: 15px;
                align-items: start;
            }
            .hrol-skill-card {
                    padding: 15px 25px 0px;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    overflow: hidden;
                    background: var(--dbckg6);
                    border: 3px solid rgb(0 0 0);
                    transition: all 0.3s ease;
                    min-width: 0;
            }

            .hrol-skill-card:hover {
                    background: var(--dbckg0);
                    box-shadow: 0 0 1px var(--skill-color);
            }

            /* Línea de color lateral basada en la base de datos */
            .hrol-skill-card::before {
                content: "";
                position: absolute;
                top: 0; left: 0; width: 4px; height: 100%;
                background: var(--skill-color, var(--accent1));
            }
            .hrol-skill-header {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 10px;
            }
            .hrol-skill-icon {
                width: 45px;
                height: 45px;
                border-radius: 4px;
                object-fit: cover;
                background-color: var(--dbckg0);
                border: 1px solid var(--foroborde);
            }
            .hrol-skill-title {
                font-family: var(--f-titles, sans-serif);
                font-size: var(--fs-h5);
                color: var(--title2);
                font-weight: bold;
                line-height: 1.2;
                text-shadow: 0 0 8px rgb(0 0 0 / 50%);
            }
            .hrol-skill-group {
                font-size: 0.7em;
                color: var(--accent1);
                text-transform: uppercase;
                letter-spacing: 1px;
                display: block;
            }
            .hrol-skill-short {
                font-size: var(--fs-small);
                color: var(--subtitle);
                font-style: italic;
                margin: -5px 0px 15px;
                flex-grow: 1;
            }
            /* Adaptación del spoiler nativo para la tarjeta de skill */
            .hrol-skill-card .hrol-spoiler {
                margin-top: auto;
            }
            .hrol-skill-card .hrol-spoiler summary {
                background-color: transparent;
                border: 1px solid var(--foroborde);
                color: var(--subtitle);
                font-size: 0.85em;
                padding: 6px;
                text-align: center;
                border-radius: 4px;
                transition: all 0.2s;
            }
            .hrol-skill-card .hrol-spoiler summary:hover {
                background-color: var(--foroborde);
                color: var(--title2);
            }
            .hrol-skill-card .hrol-spoiler .spoiler-content {
                background-color: var(--dbckg0);
                border: 1px solid var(--foroborde);
                border-top: none;
                padding: 10px;
                font-size: 0.9em;
                border-radius: 0 0 4px 4px;
                margin-top: -2px;
                transition: ease 0.5s;
            }

            .hrol-skill-card .hrol-spoiler .spoiler-content u {
                    background: var(--dbckgblackgrey);
                    font: var(--fs-mini) var(--f-mono);
                    font-weight: 700;
                    text-transform: uppercase;
                    color: var(--subtitle);
                    line-height: var(--fs-mini);
                    padding: 3px;
                    display: inline-block;
                    vertical-align: middle;
                    text-decoration: none;
                    margin-right: 5px;
                    margin-bottom: 5px;
            }

                    .hrol-skill-card .hrol-spoiler .spoiler-content:hover i {
                    color: var(--title2);
                    transition: ease 0.5s;
            }

/* Estilo sutil para los <summary>, pero NO para .hrol-spoiler */
.postbody .content details:not(.hrol-spoiler) > summary {
    position: relative;
    display: block;
    cursor: pointer;
    list-style: none;
    color: var(--title2);
    font-weight: bold;
    border-bottom: 1px dotted #bdbdbd70;

    /* Espacio para el icono de la izquierda */
    padding-left: 32px;

    /* Espacio para el botón mostrar/ocultar */
    padding-right: 70px;

    padding-bottom: 3px;
    fill-opacity: initial;
    line-height: 35px;
    overflow: visible;
}

/* Quita el icono/flecha nativa */
.postbody .content details:not(.hrol-spoiler) > summary::-webkit-details-marker {
    display: none;
}

.postbody .content details:not(.hrol-spoiler) > summary::marker {
    content: "";
}

/* Cuadrado con + a la izquierda */
.postbody .content details:not(.hrol-spoiler) > summary::before {
    content: "+";

    position: absolute;
    left: 0;
    top: 50%;

    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid var(--text);
    border-radius: 3px;
    background: transparent;

    color: var(--title2);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;

    transform: translateY(-50%);
    transform-origin: center;
    padding-bottom: 2px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.25s ease,
        clip-path 0.25s ease,
        border-radius 0.25s ease;
}

/* Hover: el cuadrado se rellena */
.postbody .content details:not(.hrol-spoiler) > summary:hover::before {
    background: var(--title2);
    border-color: var(--title);
    color: var(--dbckg4);
}

/* Abierto: + pasa a -, se mantiene relleno y se convierte en rombo */
.postbody .content details:not(.hrol-spoiler)[open] > summary::before {
    content: "−";

    background: var(--title);
    border-color: var(--title);
    color: var(--dbckg4);

    border-radius: 2px;

    /* Forma de rombo sin girar el símbolo */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Botón mostrar/ocultar a la derecha del todo */
.postbody .content details:not(.hrol-spoiler) > summary::after {
    content: "mostrar";

    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    font-size: 0.65rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    color: var(--text2);
    border: 1px solid var(--foroborde);
    border-radius: 999px;

    padding: 2px 7px;
    opacity: 0.75;
    line-height: initial;
}

.postbody .content details:not(.hrol-spoiler)[open] > summary::after {
    content: "ocultar";
}

/* Hover del summary */
.postbody .content details:not(.hrol-spoiler) > summary:hover {
    color: var(--title);
    border-bottom-color: var(--title);
}

/* El details necesita ser referencia para la línea interior */
.postbody .content details:not(.hrol-spoiler) {
    position: relative;
}

/* Línea vertical del contenido desplegado */
.postbody .content details:not(.hrol-spoiler)[open]::before {
    content: "";

    position: absolute;
    left: -10px;
    top: 2.7em;
    bottom: -0.5em;

    border-left: 1px dotted var(--title3);
    opacity: 0.4;
}

/* Oculta las tarjetas de foros tipo Enlace.
   Los enlaces seguirán pudiendo verse en otras zonas si no usan hrol-forum-card. */
.hrol-forums-grid .hrol-forum-card.hrol-forum-link {
    display: none !important;
}