/* Custom CSS for Tailwind template */

/*
   *  [ USER BADGES ]
   */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    margin: 0 0.0rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Default badge */
.badge {
    background-color: #e2e8f0;
    color: #475569;
}

.dark .badge {
    background-color: #334155;
    color: #e2e8f0;
}

/* Primary */
.badge-primary {
    background-color: #6366f1;
    color: #ffffff;
}

.dark .badge-primary {
    background-color: #6366f1;
    color: #ffffff;
}

/* Secondary */
.badge-secondary {
    background-color: #64748b;
    color: #ffffff;
}

.dark .badge-secondary {
    background-color: #475569;
    color: #ffffff;
}

/* Success */
.badge-success {
    background-color: #10b981;
    color: #ffffff;
}

.dark .badge-success {
    background-color: #10b981;
    color: #ffffff;
}

/* Info */
.badge-info {
    background-color: #0ea5e9;
    color: #ffffff;
}

.dark .badge-info {
    background-color: #0ea5e9;
    color: #ffffff;
}

/* Warning */
.badge-warning {
    background-color: #f59e0b;
    color: #1e2937;
}

.dark .badge-warning {
    background-color: #fbbf24;
    color: #1e2937;
}

/* Danger */
.badge-danger {
    background-color: #ef4444;
    color: #ffffff;
}

.dark .badge-danger {
    background-color: #ef4444;
    color: #ffffff;
}

/* Light */
.badge-light {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.dark .badge-light {
    background-color: #1e2937;
    color: #e2e8f0;
    border-color: #334155;
}

/* Dark */
.badge-dark {
    background-color: #1e2937;
    color: #ffffff;
}

.dark .badge-dark {
    background-color: #f8fafc;
    color: #0f172a;
}

/* Hover effects */
a.badge:hover,
a.badge:focus,
.badge:hover,
.badge:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    text-decoration: none;
}

.dark a.badge:hover,
.dark a.badge:focus,
.dark .badge:hover,
.dark .badge:focus {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

/*
   *  [ Pagination ]
   */

.nl-pagination {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.nl-pagination-link {
    display: inline-flex;
    min-width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    background: #fff;
    padding: 0 0.75rem;
    color: rgb(15 23 42);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.nl-pagination-link:hover {
    background: rgb(241 245 249);
}

.nl-pagination-link.active {
    border-color: rgb(79 70 229);
    background: rgb(79 70 229);
    color: #fff;
}

.nl-pagination-link.active:hover {
    background: rgb(99 102 241);
}

.nl-pagination-link.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

html.dark .nl-pagination-link {
    border-color: rgb(51 65 85);
    background: rgb(15 23 42);
    color: rgb(248 250 252);
}

html.dark .nl-pagination-link:hover {
    background: rgb(30 41 59);
}

html.dark .nl-pagination-link.active {
    border-color: rgb(79 70 229);
    background: rgb(79 70 229);
    color: #fff;
}

/*
   *  [ Dark mode icon ]
   */

.fa-moon {
    color: #f1c400;
}

.fa-sun {
    color: #f39c00;
}

/*
 *  [ EMOJI SIZING ]
 */

.joypixels,
.twemoji {
    height: 1em;
    width: 1em;
    vertical-align: middle;
}

#reactions {
    margin-top: 1rem;
    padding: .7em 1.2em .7em 1.2em;
    min-height: 32.5px;
    font-size: 12px;
}

/* ====================== TINY MCE DARK MODE FIX ====================== */

/* Main editor container */
body.dark .tox-tinymce {
    border-color: #0b1224 !important;
    box-shadow: none !important;
}

/* Toolbar */
body.dark .tox .tox-toolbar__primary,
body.dark .tox .tox-toolbar__primary > div {
    background-color: #0b1224 !important;
    border-bottom: 1px solid #1e293b !important;
}

body.dark .tox .tox-menubar {
    background-color: #0b1224 !important;
    border-bottom: 1px solid #1e293b !important;
}

body.dark .tox .tox-toolbar__group {
    background-color: transparent !important;
}

/* Buttons & Icons */
body.dark .tox .tox-tbtn {
    color: #cbd5e1 !important;
}

body.dark .tox .tox-tbtn:hover,
body.dark .tox .tox-tbtn--active {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Menu / Dropdowns */
body.dark .tox .tox-menu {
    background-color: #0b1224 !important;
    border-color: #0e1629 !important;
}

body.dark .tox .tox-collection__item {
    color: #e2e8f0 !important;
}

body.dark .tox .tox-collection__item:hover {
    background-color: #0b1224 !important;
}

/* Editable Area (most important) */
/* Main Content Area - This is the most important part */
body.dark .tox .tox-edit-area__iframe,
body.dark .tox .mce-content-body,
body.dark body.mce-content-body {
    background-color: #020617 !important;
    color: #e2e8f0 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

body.dark body.mce-content-body,
body.dark .tox .mce-content-body {
    background-color: #0b1224 !important;   /* slate-900 */
    color: #e2e8f0 !important;              /* slate-200 */
    font-family: system-ui, -apple-system, sans-serif !important;
    line-height: 1.7 !important;
}

/* Headings & Links inside editor */
body.dark .tox .mce-content-body h1,
body.dark .tox .mce-content-body h2,
body.dark .tox .mce-content-body h3 {
    color: #f8fafc !important;
}

body.dark .tox .mce-content-body a {
    color: #6366f1 !important;   /* your indigo */
}

/* Code blocks */
body.dark .tox .mce-content-body pre,
body.dark .tox .mce-content-body code {
    background-color: #0b1224 !important;
    color: #e2e8f0 !important;
}

/* Status bar */
body.dark .tox .tox-statusbar {
    background-color: #0b1224 !important;
    color: #94a3b8 !important;
    border-top: 1px solid #0b1224 !important;
}

/*
   *  [ COOKIE NOTICE ]
   */

.cc-window.cc-floating {
    padding: 1rem 1.5rem;
    background-color: #fff !important;
    color: rgba(0, 0, 0, .68) !important;
    -webkit-box-shadow: 0 1px 3px 0 #bababb, 0 0 1px 1px #bababb;
    box-shadow: 0 1px 3px 0 #bababb, 0 0 1px 1px #bababb;
    border: none;
    border-radius: .28571429rem;
    cursor: default;
    font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 18px;
    opacity: 1;
    transition: .5s all ease;
}

/* MineVida - cookie settings/revoke tab */
.cc-revoke {
    background: rgba(11, 18, 36, .96) !important;
    color: transparent !important;
    border: 1px solid rgba(241, 196, 0, .32) !important;
    border-bottom: 0 !important;
    border-radius: .65rem .65rem 0 0 !important;
    padding: .52rem .72rem !important;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .22) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

/* Cookie icon: keeps the original Cookie Consent button clickable */
.cc-revoke::before {
    content: "🍪";
    display: inline-block;
    font-size: 21px !important;
    line-height: 1 !important;
    color: initial !important;
    transform: translateY(1px);
    transition: transform .18s ease, filter .18s ease;
}

.cc-revoke:hover,
.cc-revoke:focus {
    background: rgba(23, 31, 52, .98) !important;
    color: transparent !important;
    border-color: rgba(251, 191, 36, .55) !important;
    text-decoration: none !important;
}

.cc-revoke:hover::before,
.cc-revoke:focus::before {
    transform: translateY(1px) scale(1.08);
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, .35));
}

/*
   *  [ Select2 ]
   */

.ts-control {
    min-height: 38px !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgb(226 232 240) !important;
    background: rgb(255 255 255) !important;
    color: rgb(15 23 42) !important;

    padding: 6px 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}

.ts-wrapper {
    margin-top: 0.5rem;
}

/* Focus */
.ts-wrapper.focus .ts-control {
    border-color: rgb(99 102 241) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,.15) !important;
}

/* Dropdown */
.ts-dropdown {
    border-radius: 0.75rem !important;
    border: 1px solid rgb(226 232 240) !important;
    background: rgb(255 255 255) !important;
    color: rgb(15 23 42) !important;

    box-shadow:
            0 10px 15px -3px rgba(0,0,0,.1),
            0 4px 6px -4px rgba(0,0,0,.1) !important;

    overflow: hidden;
    z-index: 50;
}

/* Dropdown options */
.ts-dropdown .option {
    padding: 10px 12px;
}

/* Selected tags */
.ts-wrapper.multi .ts-control > div {
    background: rgb(99 102 241) !important;
    color: white !important;

    border-radius: 0.5rem;
    padding: 2px 8px;
    margin: 2px;
}

/* Input inside control */
.ts-control input {
    color: inherit !important;
}

/* Dark mode */
.dark .ts-control {
    background: rgb(11,18,36) !important;
    border-color: rgb(30,41,59) !important;
    color: rgb(241 245 249) !important;
}

.dark .ts-dropdown {
    background: rgb(11,18,36) !important;
    border-color: rgb(30,41,59) !important;
    color: rgb(241 245 249) !important;
}

.dark .ts-dropdown .active {
    background: rgb(30 41 59) !important;
}


/*
 * [ MineVida - navegación oscura cálida ]
 * Sustituye el tono azul/slate de la barra superior en modo oscuro
 * por un negro-dorado cálido, manteniendo la transparencia y el blur.
 */
.dark .sticky.top-0.z-50 {
    background-color: rgba(31, 25, 8, .82) !important;
    border-bottom-color: rgba(212, 175, 55, .20) !important;
}

/* Estados activos/hover de los enlaces principales de la navegación */
.dark .sticky.top-0.z-50 a:hover,
.dark .sticky.top-0.z-50 summary:hover {
    background-color: rgba(212, 175, 55, .10) !important;
}

/* Botones redondos/cuenta de la barra superior */
.dark .sticky.top-0.z-50 summary > span,
.dark .sticky.top-0.z-50 a.rounded-full {
    border-color: rgba(212, 175, 55, .18) !important;
}

/* Elemento activo del menú */
.dark .sticky.top-0.z-50 .dark\:bg-slate-900 {
    background-color: rgba(212, 175, 55, .12) !important;
}


/*
 * [ MineVida - correcciones navegación cálida v2 ]
 * Evita hover cuadrado en logo/perfil y hace opacos los desplegables.
 */

/* El enlace del logo no debe recibir el fondo rectangular del hover general */
.dark .sticky.top-0.z-50 > div > div > a:first-child:hover {
    background-color: transparent !important;
}

/* Los <summary> son contenedores: no pintar el rectángulo completo */
.dark .sticky.top-0.z-50 summary:hover {
    background-color: transparent !important;
}

/* El hover se aplica al botón redondo real de mensajes/perfil/ajustes */
.dark .sticky.top-0.z-50 summary:hover > span {
    background-color: rgba(212, 175, 55, .12) !important;
    border-color: rgba(212, 175, 55, .35) !important;
}

/* Desplegables superiores: fondo sólido cálido, sin transparencia */
.dark .sticky.top-0.z-50 details > div.absolute {
    background-color: rgb(24, 22, 17) !important;
    border-color: rgba(212, 175, 55, .22) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .48) !important;
}

/* Separadores dentro de los desplegables */
.dark .sticky.top-0.z-50 details > div.absolute .dark\:bg-slate-800 {
    background-color: rgba(212, 175, 55, .16) !important;
}

/* Opciones de los desplegables */
.dark .sticky.top-0.z-50 details > div.absolute a:hover {
    background-color: rgba(212, 175, 55, .11) !important;
}


/*
 * [ MineVida - centrar desplegables de avisos y mensajes v3 ]
 * Los dos primeros details del bloque derecho corresponden a avisos/mensajes.
 * Centra cada panel respecto a su icono sin afectar al menú del perfil.
 */
@media (min-width: 768px) {
    .dark .sticky.top-0.z-50 details:nth-of-type(1) > div.absolute,
    .dark .sticky.top-0.z-50 details:nth-of-type(2) > div.absolute {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}


/*
 * [ MineVida - footer cálido v4 ]
 * Usa la misma familia de color que la navegación superior.
 */
.dark footer {
    background-color: rgba(55, 45, 18, .96) !important;
    border-top-color: rgba(212, 175, 55, .28) !important;
}

/* Enlaces del footer: conservamos legibilidad y añadimos el acento dorado al hover */
.dark footer a:hover {
    color: #f1c400 !important;
}


/*
 * [ MineVida - transiciones degradadas v6 ]
 * Suaviza la unión navegación -> contenido y contenido -> footer.
 */

/* La barra conserva su tono y se desvanece hacia abajo */
.dark .sticky.top-0.z-50 {
    background:
        linear-gradient(
            to bottom,
            rgba(31, 25, 8, .98) 0%,
            rgba(31, 25, 8, .94) 62%,
            rgba(31, 25, 8, .78) 82%,
            rgba(31, 25, 8, 0) 100%
        ) !important;
    padding-bottom: 12px;
    margin-bottom: -12px;
}

/* El footer entra progresivamente desde el contenido */
.dark footer {
    position: relative;
    background-color: rgba(55, 45, 18, .96) !important;
    border-top-color: transparent !important;
}

.dark footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -42px;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(55, 45, 18, 0) 0%,
        rgba(55, 45, 18, .28) 38%,
        rgba(55, 45, 18, .68) 72%,
        rgba(55, 45, 18, .96) 100%
    );
}


/*
 * [ MineVida - navegación cálida clara + unión limpia v7 ]
 * Aclara la cabecera y elimina la línea inferior residual.
 */
.dark .sticky.top-0.z-50 {
    background:
        linear-gradient(
            to bottom,
            rgba(55, 45, 18, .96) 0%,
            rgba(51, 42, 17, .92) 55%,
            rgba(45, 37, 15, .68) 78%,
            rgba(31, 25, 8, 0) 100%
        ) !important;

    border-bottom: 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;

    padding-bottom: 18px;
    margin-bottom: -18px;
}

/* Evita que pseudo-elementos o separadores del header dibujen una línea */
.dark .sticky.top-0.z-50::after {
    border: 0 !important;
    box-shadow: none !important;
}


/*
 * [ MineVida - dorado cálido v8 ]
 * Más dorado/amarillo y menos mostaza.
 * El degradado del header termina antes para que no baje tanto sobre el contenido.
 */
.dark .sticky.top-0.z-50 {
    background:
        linear-gradient(
            to bottom,
            rgba(72, 59, 14, .97) 0%,
            rgba(68, 55, 13, .94) 52%,
            rgba(61, 49, 12, .72) 70%,
            rgba(48, 39, 10, .34) 84%,
            rgba(48, 39, 10, 0) 100%
        ) !important;

    border-bottom: 0 !important;
    box-shadow: none !important;
    padding-bottom: 10px;
    margin-bottom: -10px;
}

/* Footer: mismo carácter dorado, ligeramente más luminoso */
.dark footer {
    background-color: rgba(76, 62, 15, .97) !important;
    border-top-color: transparent !important;
}

/* Entrada al footer con el nuevo dorado */
.dark footer::before {
    top: -34px;
    height: 34px;
    background: linear-gradient(
        to bottom,
        rgba(76, 62, 15, 0) 0%,
        rgba(76, 62, 15, .24) 36%,
        rgba(76, 62, 15, .64) 70%,
        rgba(76, 62, 15, .97) 100%
    ) !important;
}


/*
 * [ MineVida - paleta interior dorada v9 ]
 * Fondo central carbón cálido, superficies en capas cálidas y footer visualmente más bajo.
 */

/* Fondo general: elimina el matiz azul/slate sin volver amarilla toda la página */
.dark body,
.dark #app {
    background-color: rgb(18, 17, 13) !important;
}

/* Zona principal de contenido */
.dark main {
    background:
        linear-gradient(
            to bottom,
            rgb(20, 19, 15) 0%,
            rgb(23, 21, 16) 50%,
            rgb(25, 22, 15) 100%
        ) !important;
}

/* Superficies habituales: tarjetas, paneles y menús */
.dark .dark\:bg-slate-950 {
    background-color: rgb(20, 19, 15) !important;
}

.dark .dark\:bg-slate-900 {
    background-color: rgb(29, 27, 20) !important;
}

.dark .dark\:bg-slate-800 {
    background-color: rgb(39, 35, 24) !important;
}

/* Bordes slate -> dorado muy apagado */
.dark .dark\:border-slate-800,
.dark .dark\:border-slate-700 {
    border-color: rgba(212, 175, 55, .16) !important;
}

/* Hover de superficies interiores */
.dark .dark\:hover\:bg-slate-800:hover,
.dark .dark\:hover\:bg-slate-900:hover {
    background-color: rgba(212, 175, 55, .10) !important;
}

/*
 * Footer más bajo:
 * el color no empieza tan pronto y la transición se concentra justo al final.
 */
.dark footer::before {
    top: -20px !important;
    height: 20px !important;
    background: linear-gradient(
        to bottom,
        rgba(76, 62, 15, 0) 0%,
        rgba(76, 62, 15, .18) 42%,
        rgba(76, 62, 15, .70) 78%,
        rgba(76, 62, 15, .97) 100%
    ) !important;
}


/*
 * [ MineVida - footer integrado v10 ]
 * Elimina la línea luminosa y hace que el fondo central llegue de forma natural al footer.
 */
.dark footer {
    background-color: rgb(35, 32, 23) !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

/* Quitamos el pseudo-degradado anterior: era el que se percibía como una línea */
.dark footer::before {
    content: none !important;
    display: none !important;
}

/* Transición muy amplia y suave al final del contenido, sin franja dorada */
.dark main {
    background:
        linear-gradient(
            to bottom,
            rgb(20, 19, 15) 0%,
            rgb(23, 21, 16) 72%,
            rgb(28, 26, 19) 92%,
            rgb(35, 32, 23) 100%
        ) !important;
}


/*
 * [ MineVida - masthead cálido v12 ]
 * Selector exacto de navbar.tpl:
 * <div class="... bg-gradient-to-t from-white via-white/70 to-transparent
 *             dark:from-slate-950 dark:via-slate-950/70">
 *
 * El v11 buscaba bg-gradient-to-b, pero el banner real usa bg-gradient-to-t.
 */
.dark .bg-gradient-to-t.from-white.via-white\/70.to-transparent {
    --tw-gradient-from: rgb(20, 19, 15) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(20, 19, 15, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops:
        var(--tw-gradient-from),
        rgba(20, 19, 15, .70) var(--tw-gradient-via-position),
        var(--tw-gradient-to) !important;
}

/* Selector adicional por las clases dark exactas del masthead */
.dark .dark\:from-slate-950.dark\:via-slate-950\/70 {
    --tw-gradient-from: rgb(20, 19, 15) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(20, 19, 15, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops:
        var(--tw-gradient-from),
        rgba(20, 19, 15, .70) var(--tw-gradient-via-position),
        var(--tw-gradient-to) !important;
}


/*
 * [ MineVida - headers dorados v14 ]
 * Headers de panel ligeramente dorados, manteniendo contraste con el cuerpo.
 */

/* Cabeceras que en Tailwind son bg-slate-900/50 o bg-slate-900 */
.dark .bg-slate-900\/50,
.dark .dark\:bg-slate-900\/50,
.dark .bg-slate-900,
.dark .dark\:bg-slate-900 {
    background-color: rgb(40, 34, 15) !important;
}

/* En perfiles/paneles, refuerza la separación inferior en dorado */
.dark .border-b.border-slate-800,
.dark .dark\:border-slate-800 {
    border-color: rgba(212, 175, 55, .24) !important;
}

/* Pestaña activa: un punto más luminosa que el propio header */
.dark .bg-slate-800,
.dark .dark\:bg-slate-800 {
    background-color: rgb(48, 40, 16) !important;
}


/*
 * [ MineVida - subforos oscuros v15 ]
 * La v14 doraba también bg-slate-900, usado por las filas de subforos.
 * Recuperamos para esas superficies el carbón cálido oscuro de la v12.
 */

/* Filas/listados dentro de los paneles del foro */
.dark .divide-y > div.bg-slate-900,
.dark .divide-y > div.dark\:bg-slate-900,
.dark .divide-y > li.bg-slate-900,
.dark .divide-y > li.dark\:bg-slate-900 {
    background-color: rgb(29, 27, 20) !important;
}

/* Alternativa para filas que usan slate-900/50 */
.dark .divide-y > div.bg-slate-900\/50,
.dark .divide-y > div.dark\:bg-slate-900\/50,
.dark .divide-y > li.bg-slate-900\/50,
.dark .divide-y > li.dark\:bg-slate-900\/50 {
    background-color: rgb(29, 27, 20) !important;
}

/* Mantiene el hover de las filas discreto y cálido */
.dark .divide-y > div:hover,
.dark .divide-y > li:hover {
    background-color: rgb(34, 31, 21) !important;
}


/*
 * [ MineVida - foro con cabecera dorada y filas oscuras v16 ]
 * Selector exacto de forum_index.tpl:
 * section#forum-node = tarjeta completa
 * > primer div = cabecera
 * > .divide-y > div = cada subforo
 */

/* La tarjeta ya no arrastra el dorado de bg-slate-900 a todas sus filas */
.dark section#forum-node {
    background-color: rgb(29, 27, 20) !important;
}

/* Solo la cabecera de cada categoría conserva el dorado de la v14 */
.dark section#forum-node > div:first-child {
    background-color: rgb(40, 34, 15) !important;
}

/* Cada fila de subforo vuelve a carbón oscuro */
.dark section#forum-node > .divide-y > div {
    background-color: rgb(29, 27, 20) !important;
}

/* Hover suave que ya te gustó */
.dark section#forum-node > .divide-y > div:hover {
    background-color: rgb(34, 31, 21) !important;
}

/* Separadores discretos entre subforos */
.dark section#forum-node > .divide-y {
    border-color: rgba(212, 175, 55, .12) !important;
}


/*
 * [ MineVida - limpieza final v17 ]
 * 1) Elimina gradientes accidentales en huecos vacíos del perfil.
 * 2) Elimina el gradiente accidental de News/Novedades cuando no hay contenido.
 * 3) Integra la pestaña de cookies en la paleta y la oculta casi por completo en reposo.
 */

/* PERFIL: las zonas de contenido vacías deben ser superficie plana */
.dark .profile .bg-gradient-to-b,
.dark .profile .bg-gradient-to-t,
.dark #profile .bg-gradient-to-b,
.dark #profile .bg-gradient-to-t,
.dark [class*="profile"] .bg-gradient-to-b,
.dark [class*="profile"] .bg-gradient-to-t {
    background-image: none !important;
    background-color: rgb(20, 19, 15) !important;
}

/* NEWS / NOVEDADES: elimina el fade vertical del contenedor vacío */
.dark .news .bg-gradient-to-b,
.dark .news .bg-gradient-to-t,
.dark #news .bg-gradient-to-b,
.dark #news .bg-gradient-to-t,
.dark [class*="news"] .bg-gradient-to-b,
.dark [class*="news"] .bg-gradient-to-t {
    background-image: none !important;
    background-color: rgb(20, 19, 15) !important;
}

/*
 * Respaldo para bloques vacíos grandes que usan el gradiente slate original.
 * No toca el masthead: exige que el bloque esté dentro de main.
 */
.dark main .from-slate-900.to-transparent,
.dark main .from-slate-950.to-transparent,
.dark main .dark\:from-slate-900.dark\:to-transparent,
.dark main .dark\:from-slate-950.dark\:to-transparent {
    background-image: none !important;
    background-color: rgb(20, 19, 15) !important;
}

/* COOKIE: misma paleta dorada/negra de MineVida */
.cc-revoke {
    background: rgb(40, 34, 15) !important;
    color: #f1c400 !important;
    border-color: rgba(241, 196, 0, .34) !important;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, .25) !important;

    /* La librería ya desplaza el botón; lo escondemos todavía más en reposo */
    transform: translateY(calc(100% - 5px)) !important;
    transition: transform .28s ease, background-color .2s ease,
                border-color .2s ease, box-shadow .2s ease !important;
}

/* Al acercar el ratón a la pequeña franja visible, reaparece entero */
.cc-revoke:hover,
.cc-revoke:focus,
.cc-revoke:focus-visible {
    transform: translateY(0) !important;
    background: rgb(55, 46, 16) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, .58) !important;
    box-shadow: 0 -5px 18px rgba(0, 0, 0, .34) !important;
}

/* La galleta conserva el tamaño y queda visible solo al desplegarse */
.cc-revoke::before {
    color: inherit !important;
}


/*
 * [ MineVida - corrección real de gradientes + cookie v18 ]
 *
 * El gradiente indeseado NO estaba en esos componentes:
 * lo provocaba nuestra regla global ".dark main" de la v10.
 * Tanto profile.tpl como index.tpl contienen un <main> interno,
 * así que heredaban el degradado pensado para la página completa.
 */

/* Los <main> internos de Perfil y News vuelven a ser transparentes/planos. */
.dark #profile > main,
.dark .grid.lg\:grid-cols-12 > main {
    background: transparent !important;
    background-image: none !important;
}

/* Perfil: superficie principal plana; la tarjeta conserva sus propios fondos. */
.dark #profile > main {
    background-color: transparent !important;
}

/* Inicio/News: el main de la rejilla no debe dibujar ningún rectángulo degradado. */
.dark body .grid.gap-6.lg\:grid-cols-12 > main {
    background: transparent !important;
    background-image: none !important;
}

/*
 * COOKIE v18
 * Más visible cuando está cerrada y separada del borde lateral.
 */
.cc-revoke {
    /* dejamos una "asa" visible de unos 14px en vez de 5px */
    transform: translateY(calc(100% - 14px)) !important;

    /* la alejamos ligeramente de la esquina/borde */
    left: 18px !important;
    right: auto !important;

    background: rgb(48, 40, 16) !important;
    border-color: rgba(241, 196, 0, .42) !important;
}

/* Al pasar por la parte visible, aparece completa en la misma posición */
.cc-revoke:hover,
.cc-revoke:focus,
.cc-revoke:focus-visible {
    transform: translateY(0) !important;
    background: rgb(62, 51, 17) !important;
}


/*
 * [ MineVida - cookie derecha + pestaña más visible v19 ]
 * Recupera su posición original a la derecha y deja más pestaña visible cerrada.
 */
.cc-revoke {
    left: auto !important;
    right: 18px !important;

    /* Antes dejábamos 14px; ahora asoman 26px */
    transform: translateY(calc(100% - 26px)) !important;
}

.cc-revoke:hover,
.cc-revoke:focus,
.cc-revoke:focus-visible {
    transform: translateY(0) !important;
}


/*
 * [ MineVida - TinyMCE integrado con la paleta v20 ]
 * El azul venía del bloque DARK MODE FIX original de Tailwind (#0b1224 / #020617).
 */
body.dark .tox-tinymce {
    border-color: rgba(212, 175, 55, .20) !important;
    background-color: rgb(20, 19, 15) !important;
}

body.dark .tox .tox-toolbar__primary,
body.dark .tox .tox-toolbar__primary > div,
body.dark .tox .tox-menubar {
    background-color: rgb(29, 27, 20) !important;
    border-color: rgba(212, 175, 55, .16) !important;
}

body.dark .tox .tox-tbtn {
    color: #e5e1d6 !important;
}

body.dark .tox .tox-tbtn:hover,
body.dark .tox .tox-tbtn--active {
    background-color: rgb(48, 40, 16) !important;
    color: #f8fafc !important;
}

body.dark .tox .tox-menu {
    background-color: rgb(29, 27, 20) !important;
    border-color: rgba(212, 175, 55, .18) !important;
}

body.dark .tox .tox-collection__item:hover {
    background-color: rgb(40, 34, 15) !important;
}

body.dark .tox .tox-edit-area,
body.dark .tox .tox-edit-area__iframe {
    background-color: rgb(20, 19, 15) !important;
}

body.dark .tox .tox-statusbar {
    background-color: rgb(29, 27, 20) !important;
    color: #a8a29e !important;
    border-top-color: rgba(212, 175, 55, .14) !important;
}


/*
 * [ MineVida - hover logo/nombre v21 ]
 * Hace evidente que el bloque superior izquierdo (logo + MINEVIDA) es clicable,
 * sin recuperar el fondo cuadrado que eliminamos anteriormente.
 */
.dark .sticky.top-0.z-50 > div > div > a:first-child {
    transition: filter .20s ease, text-shadow .20s ease, transform .20s ease !important;
}

.dark .sticky.top-0.z-50 > div > div > a:first-child:hover,
.dark .sticky.top-0.z-50 > div > div > a:first-child:focus-visible {
    background-color: transparent !important;
    filter: brightness(1.28) drop-shadow(0 0 7px rgba(241, 196, 0, .30)) !important;
    text-shadow: 0 0 9px rgba(251, 191, 36, .38) !important;
    transform: translateY(-1px);
}


/*
 * [ MineVida - logo protagonista v22 ]
 * Oculta el texto MINEVIDA y hace el logo bastante más grande.
 * Conserva el hover luminoso del enlace sin añadir fondo.
 */

/* Oculta únicamente el texto/nombre situado junto al logo. */
.dark .sticky.top-0.z-50 > div > div > a:first-child > span {
    display: none !important;
}

/* Logo más grande manteniendo proporciones. */
.dark .sticky.top-0.z-50 > div > div > a:first-child img {
    height: 3.25rem !important;
    width: auto !important;
    object-fit: contain !important;
    transition: filter .20s ease, transform .20s ease !important;
}

/* El enlace no crea caja ni fondo alrededor del logo. */
.dark .sticky.top-0.z-50 > div > div > a:first-child {
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Iluminación más marcada al pasar por el logo. */
.dark .sticky.top-0.z-50 > div > div > a:first-child:hover img,
.dark .sticky.top-0.z-50 > div > div > a:first-child:focus-visible img {
    filter:
        brightness(1.35)
        drop-shadow(0 0 5px rgba(241, 196, 0, .50))
        drop-shadow(0 0 12px rgba(251, 191, 36, .28)) !important;
    transform: scale(1.06) !important;
}


/*
 * [ MineVida - subforos y temas carbón v23 ]
 * Las cabeceras conservan el dorado; las filas interiores dejan de ser amarillo sólido.
 */

/* Filas de listados internos de subforos/temas */
.dark main .divide-y > a,
.dark main .divide-y > div {
    background-color: rgb(29, 27, 20) !important;
}

/* Hover cálido pero discreto */
.dark main .divide-y > a:hover,
.dark main .divide-y > div:hover {
    background-color: rgb(34, 31, 21) !important;
}

/* Separadores integrados con la paleta */
.dark main .divide-y {
    border-color: rgba(212, 175, 55, .12) !important;
}

/*
 * Listado de TEMAS: añade un pequeño icono de documento a la izquierda
 * sin tocar los iconos de conversación que ya tienen foros/subforos.
 */
.dark main a[href*="/topic/"] {
    position: relative;
}

.dark main a[href*="/topic/"]::before {
    content: "▤";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    margin-right: .75rem;
    flex: 0 0 2.15rem;
    border-radius: .65rem;
    background-color: rgb(40, 34, 15);
    border: 1px solid rgba(212, 175, 55, .10);
    color: #e5e1d6;
    font-size: 1.05rem;
    line-height: 1;
    vertical-align: middle;
}

.dark main a[href*="/topic/"]:hover::before {
    background-color: rgb(48, 40, 16);
    color: #fbbf24;
}


/*
 * [ MineVida - temas más estructurados v24 ]
 * Hace que cada fila de tema respire más y da protagonismo al icono/documento.
 */

/* Más espacio vertical en las filas que contienen temas */
.dark main .divide-y > div:has(a[href*="/topic/"]),
.dark main .divide-y > a[href*="/topic/"] {
    min-height: 5.75rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Icono de documento más grande, cuadrado y alineado con el bloque de información */
.dark main a[href*="/topic/"]::before {
    width: 2.75rem !important;
    height: 2.75rem !important;
    flex-basis: 2.75rem !important;
    margin-right: .9rem !important;
    border-radius: .7rem !important;
    font-size: 1.30rem !important;
    background-color: rgb(40, 34, 15) !important;
    border: 1px solid rgba(212, 175, 55, .16) !important;
}

/* Un poco más de aire entre título y metadatos del tema */
.dark main a[href*="/topic/"] {
    line-height: 1.35 !important;
}

/* El bloque del último usuario también gana presencia y queda equilibrado */
.dark main .divide-y > div:has(a[href*="/topic/"]) > div:last-child {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
}


/*
 * [ MineVida - iconos nativos de temas v25 ]
 * El icono ya vive en view_forum.tpl: no se cuela en las miniaturas de "último tema".
 */

/* Desactiva el icono genérico ::before de v23/v24. */
.dark main a[href*="/topic/"]::before {
    content: none !important;
    display: none !important;
}

/* Caja grande y consistente para el icono real del tema. */
.dark .minevida-topic-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    min-width: 3.5rem !important;
    border-radius: .8rem !important;
    background-color: rgb(40, 34, 15) !important;
    border-color: rgba(212, 175, 55, .18) !important;
    color: #e5e1d6 !important;
    font-size: 1.35rem !important;
}

/* Fijados: chincheta dorada para distinguirlos de un vistazo. */
.dark .minevida-topic-icon--sticky {
    color: #fbbf24 !important;
    background-color: rgb(48, 40, 16) !important;
}

/* Temas normales: documento claro, más neutro. */
.dark .minevida-topic-icon--normal {
    color: #e5e1d6 !important;
}

/* La fila mantiene aire suficiente alrededor del bloque informativo. */
.dark main .divide-y > div:has(.minevida-topic-icon) {
    min-height: 6.25rem !important;
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
}