@font-face {
    font-family: 'hc';
    src: url(https://dl.dropbox.com/s/r4401a1strw0k07/HighestCastellia.ttf) format('opentype');
}

@font-face {
    font-family: 'oli';
    src: url(https://dl.dropbox.com/s/fv3ekraai9xnma3/zai_OlivettiLettera22Typewriter.ttf) format('opentype');
}

@font-face {
    font-family: printvetica;
    src: url(https://dl.dropboxusercontent.com/scl/fi/wbyi1y4nf9xcf4hwj1cmw/Printvetica.otf?rlkey=brxrx6frywzbmzvq4u1ttj6cl&st=rl0mqoeu&dl=0);
}

@font-face {
    font-family: opensans;
    src: url(https://dl.dropboxusercontent.com/scl/fi/7t4vj7ju8o6aah06hg97b/OpenSans-VariableFont_wdth-wght.ttf?rlkey=0ax3sz6tvp3b07nhdd67l41zi&st=mt76ueuz&dl=0);
}

@font-face {
    font-family: antiqua;
    src: url(https://dl.dropboxusercontent.com/scl/fi/ywz8i0qj37imlvtffu006/Antiqua-Roman-Regular.otf?rlkey=7mrc1b2cry96hus2v6dsjvkk3&st=w0bjq98o&dl=0);
}

@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');


:root {
    --nav_size: 50px;
    --width_general: 85vw;
    --margen_general: 10vh auto;

    --negro: #272727;
    --negro2: #141010;
    --blanco: #DDDDDD;
    --acento: #763236;
    --gris: #C8C6C6;
    --gris2: #D4D4D4;
    --gris3: #D8D8D8;

    --texto: opensans;
    --deco: 'hc';
    --titulo: 'oli';
    --titulo2: antiqua;
    --subtitulo: printvetica;
    --mono: "Cutive Mono", monospace;

    --fs_xs: .5rem;
    --fs_s: .75rem;
    --fs_e: 1rem;
    --fs_m: 2.5rem;
    --fs_l: 4rem;
    --fs_xl: 8rem;

    @media (max-width: 768px) {
        --fs_xs: .25rem;
        --fs_s: .5rem;
        --fs_e: .75rem;
        --fs_m: 1.5rem;
        --fs_l: 3rem;
        --fs_xl: 6rem;
    }


    &:has(input[name="color-scheme"][value="light"]:checked) {
        color-scheme: light;
    }

    &:has(input[name="color-scheme"][value="dark"]:checked) {
        color-scheme: dark;
    }


}

/* === RESET Y BASE === */
@layer reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :where(html, body) {
        min-height: 100vh;
        scroll-behavior: smooth;
    }

    :where(ul, ol, menu) {
        list-style: none;
        padding-left: 0;
    }

    :where(h1, h2, h3, h4, h5, h6) {
        margin: 0;
        padding: 0;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    :where(img, svg, video, canvas, picture) {
        display: block;
        max-width: 100%;
    }

    :where(a, button, input, textarea, select) {
        color: inherit;
        font: inherit;
        text-decoration: none;
    }

    :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
        cursor: pointer;
    }

    div[style="height:3px"] {
        display: none !important;
    }
}

@layer base {
    body {
        font: 1rem var(--texto);
        width: 100%;
        min-height: 100vh;
        background-color: var(--background_color-body);
        background-image: var(--background_image-body);
        scroll-behavior: smooth;
    }

    .avatar {
        &>img {
            object-fit: cover;
            height: 100%;
            width: 100%;
        }

        &>a>img {
            object-fit: cover;
            height: 100%;
            width: 100%;
        }

        /* Variante mini */
        &.mini {
            --avatar-size: 80px;
            width: var(--avatar-size);
            height: var(--avatar-size);
        }

        /* Variante tema */
        &.medium {
            --avatar-size: 150px;
            width: var(--avatar-size);
            height: var(--avatar-size);
        }

        &.large {
            width: 300px;
            height: 400px;
        }

        &.circle {
            border-radius: 50%;
        }
    }

    .generatednavbar {
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
    }
}

/* === Componentes === */

@layer components {

    /* === Botones === */

    .button {
        /* Estilos base del botón */

        &:is(a) {
            /* Estilos específicos cuando es un enlace <a> */
        }

        &:is(button) {
            /* Estilos específicos cuando es un elemento <button> */
        }

        &:is(input) {
            /* Estilos específicos cuando es un input (type="button/submit") */
        }

        /* Botón con solo ícono */
        &:has(> i:only-child) {
            /* Estilos para botones que solo contienen un ícono */
            aspect-ratio: 1;


        }

        /* Botón con ícono + texto */
        &:has(> i:not(:only-child)) {
            /* Estilos para botones con ícono y texto */
            gap: 0.5rem;

            .icon-left & {
                /* Ícono a la izquierda */
            }

            .icon-right & {
                /* Ícono a la derecha */
                flex-direction: row-reverse;
            }
        }

        /* Botón con solo texto */
        &:not(:has(> i)) {
            display: flex;
            justify-content: center;
            align-items: center;

            .no-underline & {
                /* Variante sin subrayado */
                text-decoration: none;
            }
        }


        /* Botones en contenedor especial */
        .form-buttons & {
            padding: .5rem;
            background: red;
            color: white;
            font: 12px var(--texto);
            text-transform: uppercase;
            border: 0;

        }

        .mark-buttons & {
            padding: .5rem;
            background: red;
            color: white;
            font: 12px var(--texto);
            text-transform: uppercase;
            border: 0;

        }

        /* Estados interactivos */
        &:hover {
            /* Estilos hover */
        }

        &:active {
            /* Estilos active */
        }

        &:focus-visible {
            /* Estilos focus */
        }

        &[disabled] {
            /* Estilos disabled */
        }
    }

    input {

        &:focus {
            --border: 1px solid black;

            border: var(--border);
        }

        &[type="button"] {
            /* Estilos específicos para botones */
        }

        &[type="text"] {
            --border: 1px solid black;

            border: var(--border);
            padding: .5rem;
            flex-grow: 1;
        }

        &[type="email"] {
            /* Estilos para campos de email */
        }

        &[type="password"] {
            /* Estilos para campos de contraseña */
        }

        &[type="date"] {
            /* Estilos para campos de fecha */
        }

        &[type="number"] {
            /* Estilos para campos numéricos */
        }

        &[type="submit"] {

            /* Estilos para botones de envío */
            &:hover {}

            &:active {
                transform: scale(0.98);
            }
        }
    }

    /* === SELECT === */

    .select {

        select {

            &,
            &::picker(select) {
                appearance: base-select;
            }
        }

    }


    /* === SORTBOX === */


    #sort-box {
        display: flex;


        .button {}

        .sort-form {
            display: flex;
            gap: .75rem;
            align-items: center;

            b {}

            .group {

                .group {

                    #sort_order_d {}

                    label {}
                }
            }

            .button {}
        }
    }

    /* === JUMPBOX === */

    .jumpbox {

        label {
            display: flex;

            span {}

            .jumpbox-wrap {
                display: flex;

                input {}

                .btn {}
            }
        }
    }

}

/* === Header === */

@layer header {
    header {
        width: 100%;
        height: var(--nav_size);
        position: fixed;
        top: 0;
        left: 0;

        background: var(--background);

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
        justify-items: center;

        .header_wrapper {
            align-content: center;

            &:first-of-type {
                justify-self: start;
            }

            &:last-of-type {
                justify-self: end;
                display: flex;
                align-items: center;
            }

            &:nth-of-type(2) {
                display: flex;
                gap: .25rem;
                width: 100%;
                display: flex;
                justify-content: center;
                gap: .25rem;

                #breadcrumbs {
                    display: flex;
                    font-size: 0;

                    &>a {
                        font-size: .75rem;
                        display: flex;
                        align-items: center;
                        gap: .25rem;

                        &:before {
                            content: "\ea50";
                            font-family: boxicons !important;
                        }
                    }
                }
            }
        }

        button {
            border: none;
            transition: all 0.3s;
            cursor: pointer;

            &:hover,
            &:active,
            &:focus {
                background-color: red;
            }

            &:focus {
                border-color: red;
            }

            &[popovertarget="menu_user"] {

                .avatar {
                    height: var(--nav_size);
                    width: var(--nav_size);
                }
            }
        }
    }

    [popover] {
        border: none;
        display: flex;
        flex-direction: column;
        transition: translate 0.3s ease-out, display 0.3s ease-out allow-discrete;
    }


    #menu_forum[popover] {
        width: 30vw;
        margin: 0;
        padding: 0;
        height: 100vh;
        translate: -31vw;

        &:popover-open {
            translate: 0;
        }

        &::backdrop {
            backdrop-filter: blur(3px);
            background-color: rgb(0 0 0 / 0%);
            transition: all 0.3s allow-discrete;
        }

        &:popover-open::backdrop {
            background-color: color-mix(in srgb, black, transparent 50%);
        }
    }

    #menu_notifications[popover] {
        width: 80vw;
        margin: var(--margen_general);
        padding: 0;
        height: 80vh;
        translate: -100vw;

        &:popover-open {
            translate: 0;
        }
    }

    #menu_user[popover] {
        width: 30vw;
        margin: 0;
        padding: 0;
        height: 100vh;
        translate: 131vw;

        &:popover-open {
            translate: 70vw;
        }
    }


    @starting-style {
        #menu_forum[popover]:popover-open {
            translate: -31vw;

            &::backdrop {
                background-color: color-mix(in srgb, black, transparent 100%);
            }
        }

        #menu_notifications[popover]:popover-open {
            translate: -100vw;
        }

        #menu_user[popover]:popover-open {
            translate: 131vw;
        }
    }


    .menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem;
    }


    .theme-selector {
        display: flex;
        gap: 1rem;
        align-items: center;

        input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        label {
            cursor: pointer;
            display: inline-flex;
            position: relative;

            i {
                transition: all 0.3s ease;
            }
        }
    }

    #header-banner {
        width: 100%;
        height: 100vh;

        background-color: var(--background_color);
        background-image: var(--background_image);

        background-size: cover;
        background-repeat: no-repeat;

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

        a.header_title {
            font: var(--font);
            line-height: 1;
        }
    }
}

/* === Footer === */

@layer footer {
    .leyendagrupos {
        font-size: 0;

        a {
            font: 12px var(--texto);
        }
    }

    #footer_widgets {
        --background_image: url(https://i.imgur.com/6JYtcNZ.png);

        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        padding: 2rem;

        background-image: var(--background_image);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;


        .widgetlogo {
            .titulo {
                font: var(--fs_m) var(--deco);
                display: flex;
                flex-direction: column;
                line-height: 1;

                span {
                    font-size: calc(var(--fs_m)*1.3);
                }
            }

            & p {
                font-size: var(--fs_s);
                text-align: justify;
                margin-bottom: .5rem;
            }
        }
    }

    #page-footer {
        --background: var(--negro);
        --color: var(--blanco);

        padding: 1rem;
        background: var(--background);
        color: var(--color);

        .wrap {
            display: flex;
            align-items: center;

            .navbar {
                flex-grow: 1;

                .rightside {
                    display: flex;
                    justify-content: space-evenly;
                }
            }

            .copyright {
                display: flex;
                align-items: center;
                font-size: 0;
                gap: 1rem;

                &>a {
                    font: var(--fs_s) var(--mono);
                    text-transform: uppercase;
                }
            }
        }
    }
}

/* === Subforos === */

@layer subforos {
    .forum {
        .category-title {
            font: var(--font);
        }

        .forum-wrap {

            display: var(--display);
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            justify-content: center;
            gap: 1rem;

            .forum-section {
                display: grid;
                grid-template-rows: subgrid;
                grid-row: span 6;

                .title {
                    font: var(--font);
                }

                .image {

                    width: var(--width);
                    height: var(--height);

                    &>img {
                        object-fit: cover;
                        height: 100%;
                        width: 100%;
                    }

                    &:empty {
                        display: none;
                    }
                }

                .description {
                    text-align: justify;

                    br {
                        display: none;
                    }

                    &:empty {
                        display: none;
                    }
                }

                .statistics {
                    display: flex;
                    justify-content: space-evenly;

                    .topics {}

                    .posts {}
                }

                .links {
                    font: var(--font);

                    .forum_links {
                        display: flex;

                        &>a {
                            font: var(--font);
                        }
                    }

                    &:empty {
                        display: none;
                    }
                }

                .lastpost {
                    display: flex;
                    align-items: center;
                    gap: 1rem;

                    .avatar {
                        width: var(--avatar-size);
                        height: var(--avatar-size);
                    }

                    .data {
                        .topic {
                            font: var(--font);
                        }

                        .user {
                            font: var(--font);

                        }

                        .last-post-icon {
                            display: none;

                            img {}
                        }

                        .date {
                            font: var(--font);

                        }
                    }

                }

            }
        }

    }

}

/* === Lista temas o mensajes === */

@layer temas {
    .viewforum_body {
        --width: var(--width_general);

        width: var(--width);
        margin: var(--margen_general);

        .page-header {

            .forum_name {
                --font: var(--fs_l) var(--titulo2);
                text-transform: uppercase;
                text-align: center;

                font: var(--font);
            }

            #forum_description {

                .forum_links {

                    a {}
                }
            }

            .pagination {}
        }

        .posts {

            width: 100%;
            margin-top: 10vh;

            .posts-header {
                --font: var(--fs_m) var(--subtitulo);
                text-transform: uppercase;

                font: var(--font);
            }

            .posts-section {
                display: flex;
                gap: .5rem;
                margin-top: 1rem;
                border: 1px solid var(--gris);
                padding: 1rem;

                .posts-icon {

                    .material-icons {}

                    .participate-check {

                        .material-icons {}
                    }
                }

                .posts-content {
                    flex-grow: 1;

                    display: grid;
                    grid-template-columns: repeat(3, 1fr);

                    .posts-description {

                        .topic_title {}

                        .topic_author {

                            a {}
                        }

                        .topic_pagination {

                            .pagination {
                                display: flex;
                                gap: .5rem;
                                a {
                                    font:var(--fs_s) var(--mono);
                                    padding: .25rem .5rem;
                                    border: 1px solid red;
                                }
                                .page-sep {
                                    display: none;
                                }
                            }
                        }
                    }

                    .statistics {
                        justify-self: center;

                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        


                        .posts_statistics-replies {}

                        .posts_statistics-views {}
                    }

                    .lastpost {
                        justify-self: end;

                        display: flex;
                        flex-direction: row-reverse;
                        align-items: center;
                        gap: .5rem;

                        .avatar {
                            --avatarsize: 50px;

                            width: var(--avatarsize);
                            height: var(--avatarsize);

                            img {}
                        }

                        .data {
                            text-align: right;

                            .user {}

                            .date {}
                        }
                    }
                }
            }
        }

    }

}

/* === Tema === */

@layer topic {

    .topic-actions {

        .material-icons {
            display: none !important;
        }

        &>a {
            font: var(--font);
            padding: var(--padding);
            background: var(--background);
            color: var(--color);
        }

    }

    #topic {
        width: var(--width);
        margin: var(--margen_general);

        .header {
            .titulo {
                font: var(--font);
            }
        }


        .post-wrap {
            width: var(--width);
            margin: 0 auto;

            .link {}

            .date {
                font: var(--font);
            }

            .buttons {}

            .username {
                font: var(--font);

            }

            .rank {}

            .avatar {}

            .awards {}

            .details {}

            .rpg {}

            .contact {}

            .post {
                font: var(--font);
                line-height: 140%;

                .post-content {
                    text-align: justify;
                }
            }

        }
    }

    .topic_bottom {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        justify-content: center;

        .jumpbox {

            label {
                display: flex;

                span {}

                .jumpbox-wrap {
                    display: flex;

                    .select {

                        select {}
                    }

                    input {}

                    .btn {}
                }
            }
        }

        .quickmod {
            justify-self: center;

            input {}

            label {
                display: flex;

                span {}

                .quickmod-wrap {
                    display: flex;

                    .select {

                        select {}
                    }

                    input {}
                }
            }
        }

        .topic-admin {
            justify-self: end;
            align-self: center;

            .btn {

                .material-icons {}
            }
        }

        .block {

            .block-header {

                strong {}
            }

            .block-content {

                strong {}

                br {}

                a {}
            }
        }
    }
}

/* === POSTEAR === */

@layer postear {

    #posting_body {
        --width: var(--width_general);

        width: var(--width);
        margin: var(--margen_general);

        .page-header {
            --font: var(--fs_m) var(--titulo);
            text-transform: uppercase;

            font: var(--font);
        }

        #preview {
            .block-header {}

            .block-content {}
        }

        #postingbox {
            display: grid;
            grid-template-columns: calc(100% - 250px) 250px;
            gap: 1rem;

            &>.group.vertical {
                grid-row: span 1 !important;

                &>.group {
                    display: grid !important;
                    grid-template-columns: .3fr 1.7fr;

                    &:has(#add_username) {
                        display: flex !important;
                    }
                }
            }

            &>#smiley-box {
                grid-column-start: 2;
                grid-row-start: 2;

            }

            &>#message-box {
                grid-column-start: 1;
                grid-row-start: 2;

                #textarea_content {
                    width: 100% !important;
                    height: 100% !important;

                    #text_editor_textarea {}

                }

            }

            &>.form-buttons {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
                border: 0;
            }

            form[action="/privmsg"] & {
                &>.form-buttons {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1rem;
                    border: 0;
                }
            }

        }

    }

    .topic_review {

        .page-title {}

        br {}

        .block {

            display: flex;
            gap: 1rem;

            .avatar {
                --avatar_size: 200px;

                width: var(--avatar_size);
                height: var(--avatar_size);

                img {}
            }

            .block-content {
                flex-grow: 1;

                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(2, max-content);

                .message {
                    text-align: justify;
                    grid-column: span 2 / span 2;
                    grid-column-start: 1;
                    grid-row-start: 2;

                }

                .user {
                    --font: var(--fs_e) var(--titulo);

                    font: var(--font);
                    grid-column-start: 1;
                    grid-row-start: 1;
                }

                .date {
                    --font: var(--fs_s) var(--mono);

                    font: var(--font);
                    justify-self: end;
                    grid-column-start: 2;
                    grid-row-start: 1;

                }
            }
        }
    }

}

/* === SCEDITOR === */

@layer sceditor {
    .sceditor-container {

        width: 100% !important;
        height: 100% !important;
        position: static !important;
        box-sizing: border-box !important;
        background-clip: border-box !important;
        border: var(--border) !important;
        border-radius: 0 !important;
        font-size: 1rem var(--texto) !important;
        background: var(--background) !important;


        &>textarea {

            box-sizing: border-box !important;
            width: 100% !important;
            height: var(--height) !important;
            background: transparent !important;
            color: var(--color) !important;
            margin: 0 !important;
            resize: none !important;
            padding: 1rem !important;
            font: 100 1rem var(--texto) !important;
        }

        .sceditor-toolbar {
            background: var(--background) !important;
            height: 50px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 0 !important;
            background-clip: border-box !important;
            border-bottom: 0 !important;
            border-radius: 0 !important;
            padding: .25rem !important;
            gap: .25rem !important;

            .sceditor-group {
                background: transparent !important;
                background-clip: border-box !important;
                border-bottom: 0 !important;
                border-radius: 0 !important;
                display: flex !important;
                gap: .25rem !important;
                margin: 0 !important;
                padding: 0 !important;

                .sceditor-button {

                    height: 20px !important;
                    width: 20px !important;
                    padding: .25rem !important;

                    background-clip: border-box !important;
                    border-radius: 0 !important;

                    display: flex !important;
                    justify-content: center !important;
                    align-items: center !important;
                    background-size: contain !important;
                    background-position: center !important;

                    &:active {
                        background-color: transparent !important;
                        box-shadow: none !important;
                    }

                    &:hover {
                        background-color: transparent !important;
                        box-shadow: none !important;
                        filter: drop-shadow(0 0 10px white);
                    }

                    div {
                        background: transparent !important;
                        background-clip: padding-box;
                        border-bottom: 0 !important;
                        border-radius: 0 !important;
                        padding: 0 !important;
                    }

                }

                .sceditor-button-bold {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M17.061 11.22A4.46 4.46 0 0 0 18 8.5C18 6.019 15.981 4 13.5 4H6v15h8c2.481 0 4.5-2.019 4.5-4.5a4.48 4.48 0 0 0-1.439-3.28zM13.5 7c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5H9V7h4.5zm.5 9H9v-3h5c.827 0 1.5.673 1.5 1.5S14.827 16 14 16z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-italic {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M19 7V4H9v3h2.868L9.012 17H5v3h10v-3h-2.868l2.856-10z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-underline {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M5 18h14v2H5zM6 4v6c0 3.309 2.691 6 6 6s6-2.691 6-6V4h-2v6c0 2.206-1.794 4-4 4s-4-1.794-4-4V4H6z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-strike {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M20 11h-8c-4 0-4-1.816-4-2.5C8 7.882 8 6 12 6c2.8 0 2.99 1.678 3 2.014L16 8h1c0-1.384-1.045-4-5-4-5.416 0-6 3.147-6 4.5 0 .728.148 1.667.736 2.5H4v2h16v-2zm-8 7c-3.793 0-3.99-1.815-4-2H6c0 .04.069 4 6 4 5.221 0 6-2.819 6-4.5 0-.146-.009-.317-.028-.5h-2.006c.032.2.034.376.034.5 0 .684 0 2.5-4 2.5z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-left {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 19h16v2H4zm0-4h11v2H4zm0-4h16v2H4zm0-8h16v2H4zm0 4h11v2H4z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-center {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 19h16v2H4zm3-4h10v2H7zm-3-4h16v2H4zm0-8h16v2H4zm3 4h10v2H7z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-right {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-justify {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 7h16v2H4zm0-4h16v2H4zm0 8h16v2H4zm0 4h16v2H4zm2 4h12v2H6z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-bulletlist {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 6h2v2H4zm0 5h2v2H4zm0 5h2v2H4zm16-8V6H8.023v2H18.8zM8 11h12v2H8zm0 5h12v2H8z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-orderedlist {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M5.282 12.064c-.428.328-.72.609-.875.851-.155.24-.249.498-.279.768h2.679v-.748H5.413c.081-.081.152-.151.212-.201.062-.05.182-.142.361-.27.303-.218.511-.42.626-.604.116-.186.173-.375.173-.578a.898.898 0 0 0-.151-.512.892.892 0 0 0-.412-.341c-.174-.076-.419-.111-.733-.111-.3 0-.537.038-.706.114a.889.889 0 0 0-.396.338c-.094.143-.159.346-.194.604l.894.076c.025-.188.074-.317.147-.394a.375.375 0 0 1 .279-.108c.11 0 .2.035.272.108a.344.344 0 0 1 .108.258.55.55 0 0 1-.108.297c-.074.102-.241.254-.503.453zm.055 6.386a.398.398 0 0 1-.282-.105c-.074-.07-.128-.195-.162-.378L4 18.085c.059.204.142.372.251.506.109.133.248.235.417.306.168.069.399.103.692.103.3 0 .541-.047.725-.14a1 1 0 0 0 .424-.403c.098-.175.146-.354.146-.544a.823.823 0 0 0-.088-.393.708.708 0 0 0-.249-.261 1.015 1.015 0 0 0-.286-.11.943.943 0 0 0 .345-.299.673.673 0 0 0 .113-.383.747.747 0 0 0-.281-.596c-.187-.159-.49-.238-.909-.238-.365 0-.648.072-.847.219-.2.143-.334.353-.404.626l.844.151c.023-.162.067-.274.133-.338s.151-.098.257-.098a.33.33 0 0 1 .241.089c.059.06.087.139.087.238 0 .104-.038.193-.117.27s-.177.112-.293.112a.907.907 0 0 1-.116-.011l-.045.649a1.13 1.13 0 0 1 .289-.056c.132 0 .237.041.313.126.077.082.115.199.115.352 0 .146-.04.266-.119.354a.394.394 0 0 1-.301.134zm.948-10.083V5h-.739a1.47 1.47 0 0 1-.394.523c-.168.142-.404.262-.708.365v.754a2.595 2.595 0 0 0 .937-.48v2.206h.904zM9 6h11v2H9zm0 5h11v2H9zm0 5h11v2H9z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-horizontalrule {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M20.875 7H3.125C1.953 7 1 7.897 1 9v6c0 1.103.953 2 2.125 2h17.75C22.047 17 23 16.103 23 15V9c0-1.103-.953-2-2.125-2zm0 8H3.125c-.057 0-.096-.016-.113-.016-.007 0-.011.002-.012.008l-.012-5.946c.007-.01.052-.046.137-.046H5v3h2V9h2v4h2V9h2v3h2V9h2v4h2V9h1.875c.079.001.122.028.125.008l.012 5.946c-.007.01-.052.046-.137.046z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-quote {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.902 2.902 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789zM20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.902 2.902 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-code {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='m7.375 16.781 1.25-1.562L4.601 12l4.024-3.219-1.25-1.562-5 4a1 1 0 0 0 0 1.562l5 4zm9.25-9.562-1.25 1.562L19.399 12l-4.024 3.219 1.25 1.562 5-4a1 1 0 0 0 0-1.562l-5-4zm-1.649-4.003-4 18-1.953-.434 4-18z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-faspoiler {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M12 4.998c-1.836 0-3.356.389-4.617.971L3.707 2.293 2.293 3.707l3.315 3.316c-2.613 1.952-3.543 4.618-3.557 4.66l-.105.316.105.316C2.073 12.382 4.367 19 12 19c1.835 0 3.354-.389 4.615-.971l3.678 3.678 1.414-1.414-3.317-3.317c2.614-1.952 3.545-4.618 3.559-4.66l.105-.316-.105-.316c-.022-.068-2.316-6.686-9.949-6.686zM4.074 12c.103-.236.274-.586.521-.989l5.867 5.867C6.249 16.23 4.523 13.035 4.074 12zm9.247 4.907-7.48-7.481a8.138 8.138 0 0 1 1.188-.982l8.055 8.054a8.835 8.835 0 0 1-1.763.409zm3.648-1.352-1.541-1.541c.354-.596.572-1.28.572-2.015 0-.474-.099-.924-.255-1.349A.983.983 0 0 1 15 11a1 1 0 0 1-1-1c0-.439.288-.802.682-.936A3.97 3.97 0 0 0 12 7.999c-.735 0-1.419.218-2.015.572l-1.07-1.07A9.292 9.292 0 0 1 12 6.998c5.351 0 7.425 3.847 7.926 5a8.573 8.573 0 0 1-2.957 3.557z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-fahide {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M8.073 12.194 4.212 8.333c-1.52 1.657-2.096 3.317-2.106 3.351L2 12l.105.316C2.127 12.383 4.421 19 12.054 19c.929 0 1.775-.102 2.552-.273l-2.746-2.746a3.987 3.987 0 0 1-3.787-3.787zM12.054 5c-1.855 0-3.375.404-4.642.998L3.707 2.293 2.293 3.707l18 18 1.414-1.414-3.298-3.298c2.638-1.953 3.579-4.637 3.593-4.679l.105-.316-.105-.316C21.98 11.617 19.687 5 12.054 5zm1.906 7.546c.187-.677.028-1.439-.492-1.96s-1.283-.679-1.96-.492L10 8.586A3.955 3.955 0 0 1 12.054 8c2.206 0 4 1.794 4 4a3.94 3.94 0 0 1-.587 2.053l-1.507-1.507z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-table {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 21h15.893c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zm0-2v-5h4v5H4zM14 7v5h-4V7h4zM8 7v5H4V7h4zm2 12v-5h4v5h-4zm6 0v-5h3.894v5H16zm3.893-7H16V7h3.893v5z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-servimg {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='m9 13 3-4 3 4.5V12h4V5c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h8v-4H5l3-4 1 2z'%3E%3C/path%3E%3Cpath d='M19 14h-2v3h-3v2h3v3h2v-3h3v-2h-3z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-image {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM5 19V5h14l.002 14H5z'%3E%3C/path%3E%3Cpath d='m10 14-1-1-3 4h12l-5-7z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-link {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707 1.414-1.414-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071 4.983 4.983 0 0 0 3.535 1.462A4.982 4.982 0 0 0 12 19.071l.707-.707-1.414-1.414-.707.707a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.122-2.121z'%3E%3C/path%3E%3Cpath d='m12 4.929-.707.707 1.414 1.414.707-.707a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-embed {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='m10.998 16 5-4-5-4v3h-9v2h9z'%3E%3C/path%3E%3Cpath d='M12.999 2.999a8.938 8.938 0 0 0-6.364 2.637L8.049 7.05c1.322-1.322 3.08-2.051 4.95-2.051s3.628.729 4.95 2.051S20 10.13 20 12s-.729 3.628-2.051 4.95-3.08 2.051-4.95 2.051-3.628-.729-4.95-2.051l-1.414 1.414c1.699 1.7 3.959 2.637 6.364 2.637s4.665-.937 6.364-2.637C21.063 16.665 22 14.405 22 12s-.937-4.665-2.637-6.364a8.938 8.938 0 0 0-6.364-2.637z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-youtube {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M21.593 7.203a2.506 2.506 0 0 0-1.762-1.766C18.265 5.007 12 5 12 5s-6.264-.007-7.831.404a2.56 2.56 0 0 0-1.766 1.778c-.413 1.566-.417 4.814-.417 4.814s-.004 3.264.406 4.814c.23.857.905 1.534 1.763 1.765 1.582.43 7.83.437 7.83.437s6.265.007 7.831-.403a2.515 2.515 0 0 0 1.767-1.763c.414-1.565.417-4.812.417-4.812s.02-3.265-.407-4.831zM9.996 15.005l.005-6 5.207 3.005-5.212 2.995z'%3E%3C/path%3E%3C/svg%3E");
                }

                .sceditor-button-headers {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M18 20V4h-3v6H9V4H6v16h3v-7h6v7z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-size {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='m22 6-3-4-3 4h2v4h-2l3 4 3-4h-2V6zM9.307 4l-6 16h2.137l1.875-5h6.363l1.875 5h2.137l-6-16H9.307zm-1.239 9L10.5 6.515 12.932 13H8.068z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-color {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M5 18h14v3H5zm7.5-14h-1c-.401 0-.764.24-.921.609L5.745 16h2.173l1.273-3h5.604l1.268 3h2.171L13.421 4.61A1 1 0 0 0 12.5 4zm-2.46 7 1.959-4.616L13.95 11h-3.91z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-font {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M15 4h7v2h-7zm1 4h6v2h-6zm2 4h4v2h-4zM9.307 4l-6 16h2.137l1.875-5h6.363l1.875 5h2.137l-6-16H9.307zm-1.239 9L10.5 6.515 12.932 13H8.068z'%3E%3C/path%3E%3C/svg%3E") !important;
                }

                .sceditor-button-removeformat {}

                .sceditor-button-more {
                    display: none !important;
                }

                .sceditor-button-subscript {
                    display: none !important;
                }

                .sceditor-button-superscript {
                    display: none !important;
                }

                .sceditor-button-fascroll {
                    display: none !important;
                }

                .sceditor-button-faupdown {
                    display: none !important;
                }

                .sceditor-button-farand {
                    display: none !important;
                }

                .sceditor-button-twemojifa {
                    display: none !important;
                }

                .sceditor-button-mention {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23000000' height='800px' width='800px' version='1.1' id='Capa_1' viewBox='0 0 495.554 495.554' xml:space='preserve'%3E%3Cg id='XMLID_115_'%3E%3Cg id='XMLID_116_'%3E%3Cpath id='XMLID_117_' d='M353.732,451.163c3.388,10.912-2.324,22.536-13.024,26.545c-35.256,13.208-68.455,17.846-111.453,17.846 c-118.188,0-222.136-84.711-222.136-224.283C7.118,126.042,112.492,0,273.4,0c125.316,0,215.036,86.156,215.036,205.784 c0,103.949-58.388,169.434-135.282,169.434c-33.456,0-57.69-17.076-61.225-54.813h-1.423 c-22.095,36.324-54.124,54.813-91.861,54.813c-46.298,0-79.753-34.171-79.753-92.557c0-86.842,64.092-165.898,166.625-165.898 c17.074,0,35.438,2.328,51.491,6.064c19.1,4.444,31.434,22.886,28.295,42.243l-16.411,101.212 c-7.14,42.037-2.152,61.253,17.79,61.949c30.619,0.728,69.051-38.442,69.051-120.326c0-92.557-59.801-164.484-170.16-164.484 c-108.937,0-204.36,85.459-204.36,221.447c0,118.902,76.209,186.558,182.278,186.558c28.226,0,57.728-4.744,82.85-13.864 c5.426-1.969,11.42-1.629,16.591,0.935c5.171,2.565,9.08,7.133,10.792,12.646L353.732,451.163z M296.189,175.873 c-5.686-1.423-12.815-2.847-22.064-2.847c-47.017,0-84.035,46.27-84.035,101.11c0,27.053,12.117,44.117,35.594,44.117 c26.346,0,54.125-33.443,60.527-74.754L296.189,175.873z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
                }

                .sceditor-button-date {
                    display: none !important;
                }

                .sceditor-button-time {
                    display: none !important;
                }

                .sceditor-button-pastetext {
                    display: none !important;
                }

                .sceditor-button-source {
                    display: none !important;
                }

            }
        }

        .sceditor-grip {
            display: none !important;

        }

        .sceditor-resize-cover {
            display: none !important;

        }
    }

    .quick-reply-textarea-wrap {
        .sceditor-container {
            &>textarea {
                height: var(--height) !important;
            }
        }
    }
}

/* === MODIFICAR PERFIL === */

@layer cp {
    #wrap:has(.cp) {
        --width: 90vw;

        width: var(--width);
        margin: var(--margen_general);

        display: grid;
        grid-template-columns: 25vw calc(100% - 25vw);

        .cp-mobile-menu {
            display: none;
        }

        .cp-sidebar {
            grid-column-start: 1;
            grid-row-start: 1;
            position: relative;

            #tabs {
                position: sticky;
                top: var(--nav_size);

                li {
                    --font: var(--fs_e) var(--mono);

                    padding: .5rem;
                    font: var(--font);
                    transition: .3s linear;

                    &:hover {
                        background-color: red;
                        color: white;
                        transition: .3s linear;
                    }
                }

                & .activetab {
                    background: red;
                    color: white;
                }
            }
        }

        .cp {
            grid-column-start: 2;

            #smiley-box {
                display: none;
            }

            #postingbox {

                .fields1 {
                    border: 0;

                    #textarea_content {
                        width: 100% !important;
                    }

                }
            }

            .block-avatar {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }

            .mark-buttons {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;

                .material-icons {
                    display: none !important;

                }

                .btn,
                .button {
                    --background: red;
                    --color: white;

                    background: var(--background);
                    color: var(--color);
                    padding: .5rem;

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

            .form-buttons {

                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                margin-top: 1rem;
                border: 0;

                .btn {
                    --background: red;
                    --color: white;
                    --border: 0;

                    background: var(--background);
                    color: var(--color);
                    padding: .5rem;
                    border: var(--border);

                    &:only-child {
                        grid-column-start: 2;
                    }

                }

                & .group {
                    grid-column: span 2;
                }
            }

            .submit-buttons {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                border: 0;
                margin-top: 1rem;

                input {}

                .button1,
                .button2 {
                    --font: var(--fs_e) var(--mono);
                    --background: red;
                    --color: white;
                    --border: 0;

                    font: var(--font);
                    background: var(--background);
                    color: var(--color);
                    padding: .5rem;
                    border: var(--border);
                }

                .button1 {
                    grid-column-start: 2;
                    grid-row-start: 1;
                }

                .button2 {
                    grid-column-start: 1;
                    grid-row-start: 1;
                }

            }

        }


        .group {
            .block-content & {
                display: grid !important;
                grid-template-columns: .8fr 1.2fr;

                .inputbox {
                    width: 100% !important;
                }

                &:has(#profile_field_4_-12_0) {
                    display: none !important;
                }

                &:has(#profile_field_16_-7) {
                    display: none !important;
                }
            }


        }

        .profile_field_list {
            display: flex;

            &>li {
                display: flex;

            }
        }

        #profile-notifications {

            .block-header {}

            br {}

            form {

                #checkboxes {
                    width: 100%;

                    thead {
                        --background: purple;
                        --color: white;

                        background: var(--background);
                        color: var(--color);


                        tr {
                            display: grid;
                            grid-template-columns: 1.4fr .8fr .8fr;
                            padding: 1rem;


                            th {
                                width: 100%;

                                &:has(.material-icons) {
                                    display: none;
                                }

                            }

                        }
                    }

                    tbody {


                        tr {
                            display: grid;
                            grid-template-columns: 1.4fr .8fr .8fr;
                            padding: .5rem 0;

                            &:nth-child(even) {
                                background-color: lightyellow;
                            }

                        }
                    }
                }




            }

            .cp_notifs {

                .block-header {}

                .notification-row {
                    display: flex;
                    align-items: center;
                    gap: 1rem;

                    .notification-check {
                        display: flex;
                        align-items: center;
                    }

                    .notification-content {
                        flex-grow: 1;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                }
            }


        }
    }
}

/* === TEMAS Y MENSAJES SUPERVISADOS === */

@layer supervisados {

    #wrap:has(> form[action="/search?search_id=watchsearch"]) {
        --width: var(--width_general);

        width: var(--width);
        margin: var(--margen_general);
    }

    form[action="/search?search_id=watchsearch"] {
        .material-icons {
            display: none !important;
        }

        /***PÁGINA***/

        .block-topics {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .block-topics-content {
                display: flex;

                .block-topics-details {
                    display: flex;
                    gap: 1rem;

                    .block-topics-lastpost {
                        display: flex;
                    }
                }

                .block-topics-rightside {
                    display: flex;
                }

            }
        }

        /***CP***/

        .cp & {

            .posts-header {
                display: none;
            }

            .posts-content {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                padding: 1rem;
                margin-bottom: 1rem;

                .posts-description {
                    h3 {
                        padding-right: 0 !important;
                    }
                }

                .posts-statistics {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                .posts-lastpost {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                }
            }
        }

    }
}

/* === Utilidades === */

@layer utilities {
    .vertical {
        display: flex;
        flex-direction: column;
    }

    .horizontal {
        display: flex;
    }

    .group {
        --gap: 1rem;
        --borde: 1px solid red;

        display: flex;
        gap: var(--gap);
    }

    .group.vertical {
        justify-content: center;
    }

    .group.horizontal {
        align-items: center;
    }


}



/* === PERSONALIZACIÓN === */

@layer personalizacion {

    header {
        --background: #070101;
        z-index: 99999999;
    }

    #header-banner {
        --background_color: ;
        --background_image: url(https://dl.dropboxusercontent.com/scl/fi/064gdsip0xdxqsmezidpx/ZZWkEH5i_o.png?rlkey=aag7rdhbp6rodv1vv1okhjnul&st=p9cs43p3&dl=0);

        a.header_title {
            --font: ;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            text-transform: uppercase;
            align-items: center;
            justify-content: center;


            & span {
                &:first-of-type {
                    font: var(--fs_e) var(--titulo);
                    margin-bottom: 1rem;
                    color: var(--gris3);
                }

                &:nth-of-type(2) {
                    font: calc(var(--fs_xl) * 1.5) var(--deco);
                    color: transparent;
                    -webkit-text-stroke: 1px var(--blanco);
                    line-height: .8;
                }
            }

            &>img {
                object-fit: contain;
                width: 15vw;
                position: absolute;
                bottom: 0;
            }
        }
    }

    #tablon {
        .modulo:has(.ultimotema) {

            .ultimotema {
                display: grid;
                grid-template-columns: 60px auto;
                gap: 0 1rem;
                text-transform: uppercase;

                .ut_avatar {
                    width: 60px;
                    height: 60px;
                    grid-row: span 3;
                }

                .titulo {                    font: var(--fs_e) var(--subtitulo)
                }
                .fecha {
                    font: var(--fs_s) var(--texto);
                    letter-spacing: 2px;
                }
                .autor {
                    font: var(--fs_e) var(--subtitulo)
                }
            }
        }
    }

    #index {
        width: var(--width_general);
        margin: var(--margen_general);
    }

    #topic {
        --width: var(--width_general);

        .header {
            .titulo {
                --font: var(--fs_m) var(--deco);
            }
        }
    }

    .topic-actions {

        &>a {
            --font: var(--fs_s) var(--texto);
            --padding: .75rem;
            --background: var(--acento);
            --color: var(--blanco);

            text-transform: uppercase;
            letter-spacing: 2px;
        }
    }

    .post-wrap {
        --width: 100%;
        display: grid;
        grid-template-columns: 70px auto 350px;
        margin-top: 20vh;
        border-radius: .25rem;
        border: 1px solid color-mix(in srgb, var(--negro), var(--blanco) 1%);

        @media (max-width: 768px) {
            grid-template-columns: repeat(3, 1fr);

        }

        .header {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #38393C;
            padding: 5px;
            border-radius: .25rem 0 0 .25rem;

            @media (max-width: 768px) {
                grid-column: 1 / -1;
                flex-direction: row;
                border-radius: .25rem .25rem 0 0;
            }

            .avatar_header {
                --avatar_size: 60px;
                width: var(--avatar_size);
                height: var(--avatar_size);
                border-radius: .25rem;

                & img {
                    border-radius: .25rem;
                }

                @media (max-width: 768px) {
                    display: none;
                }



            }

            .date {
                --font: .75rem var(--mono);
                text-transform: uppercase;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                flex-grow: 1;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 1rem;
                padding-top: 10px;

                @media (max-width: 768px) {
                    writing-mode: horizontal-tb;
                    transform: rotate(0);
                    padding-right: 10px;
                }

                &:after {
                    background-color: var(--blanco);
                    content: "";
                    flex-grow: 1;
                    width: 1px;

                    @media (max-width: 768px) {
                        height: 1px;
                        min-width: 1px;
                    }
                }

            }
        }

        .aside {
            display: flex;
            flex-direction: column;
            align-items: center;

            background-color: var(--color_miembro);
            background-image: url(https://i.imgur.com/UawtgfI.jpeg);
            background-blend-mode: multiply;

            border-radius: 0 .25rem .25rem 0;

            padding: 25px;

            @media (max-width: 768px) {
                flex-direction: row;
                border-radius: 0;
                grid-column: 1 / -1;
            }

            .avatar {
                --avatar-size: 300px;
                height: var(--avatar-size);
                width: var(--avatar-size);

                @media (max-width: 768px) {
                    --avatar-size: 100px;
                }

            }



        }

        .username {
            --font: var(--fs_m) var(--subtitulo);
            text-transform: uppercase;

            & strong {
                font-weight: 100 !important;
                color: var(--blanco);
            }
        }

        .link {}



        .buttons {

            >ul {
                display: flex;
                flex-direction: column;
                gap: .5rem;

                @media (max-width: 768px) {
                    flex-direction: row;
                }
            }

        }



        .rank {}



        .awards {
            display: none;
        }

        .details {}

        .rpg {
            display: none;
        }

        .contact {}

        .post {
            --font: 1rem var(--texto);

            grid-column: 2;
            grid-row: 1;

            @media (max-width: 768px) {
                grid-column: 1 / -1;
            }

            .post-content {
                padding: 3rem;

                @media (max-width: 768px) {
                    padding: 1rem;
                }
            }
        }

    }

    /* = SCEDITOR = */

    .sceditor-container {
        --border: 1px solid black;
        --background: white;

        &>textarea {
            --height: 500px;
            --color: black;

        }

        .sceditor-toolbar {
            --background: black;

            .sceditor-button {
                filter: invert(1);
                transition: linear .3s;

                &:hover {
                    transform: scale(1.2);
                    transition: linear .3s;
                }
            }
        }
    }

    .quick-reply-textarea-wrap {
        .sceditor-container {
            &>textarea {
                --height: 300px;
            }
        }
    }

    .quick-reply-side-btns {
        display: flex;
        justify-content: flex-end;
        gap: .5rem;
        padding: .5rem 0;

        .quick-reply-send {
            display: flex;
            padding: .5rem .75rem;
            background: black;
            font-size: 0;
            color: white;

            &::before {
                content: "ENVIAR";
                font: 12px var(--texto);
                letter-spacing: 2px;
            }
        }


        .quick-reply-preview {
            display: flex;
            padding: .5rem .75rem;
            background: black;
            font-size: 0;
            color: white;

            &::before {
                content: "PREVISUALIZAR";
                font: 12px var(--texto);
                letter-spacing: 2px;
            }

        }
    }
}

@layer forospropios {
    .forum {
        .category-title {
            --font: var(--fs_xl) var(--titulo2);
            text-transform: uppercase;
            margin-top: 10vh;
        }

        .forum-wrap {
            --display: grid;
            --gap: ;

            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));

            .forum-section {
                padding: 1rem;
                grid-row: span 5;

                .title {
                    --font: calc(var(--fs_m) * .8) var(--titulo2);
                    text-transform: uppercase;
                    font-style: normal;

                }

                .image {
                    --width: 100%;
                    --height: 30vh;
                }

                .statistics {
                    display: none !important;
                }

                .links {
                    --font: var(--fs_e) var(--mono);
                    text-transform: uppercase;

                    .forum_links {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                        gap: .75rem;
                    }
                }

                .lastpost {

                    .avatar {
                        --avatar-size: 50px;
                    }

                    .data {
                        .topic {
                            --font: 10px var(--mono);
                            text-transform: uppercase;
                        }

                        .user {
                            --font: 12px var(--mono);
                        }

                        .date {
                            --font: 10px var(--texto);

                        }
                    }

                }

            }
        }

    }

    #c3 {
        .category-title {
            text-align: center;
        }

        .forum-section {
            &:first-of-type {
                grid-column: 1 / -1;
                position: relative;
                display: grid;
                grid-template-columns: repeat(2,1fr);

                .image {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    bottom: 0;
                    left: 0;

                    img {
                        object-fit: cover;
                        object-position: top;
                    }
                }

                .links, .description, .title, .lastpost {position: relative;}

                .title {
                    font-size: var(--fs_l);
                    grid-column: 1 / -1;
                    a {
                        position: relative;
                    }
                }

                .description {
                    grid-row: 2;
                    grid-column: 1;
                }

                .lastpost {
                    grid-row: 2;
                    grid-column: 2;
                }

                .links {
                    grid-column: 1 / -1;

                    .forum_links {
                        a {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
            }
        }
    }

    #c2 {

        .forum-section {
            position: relative;

            &:first-of-type {
                grid-column: 1 / -1;


            }
        }
    }

    #c4 {
        background-image: url(https://i.imgur.com/VUARZtT.png);
        background-size:contain;
        background-repeat: no-repeat;

        .forum-wrap {
            grid-template-columns: repeat(2,1fr);

            .forum-section {
                grid-column-start: 2;
                grid-row: span 2;
            }
        }

    }
}

/******SWITCHEROO*****/

:root {
    --gap-size: 16px;
    --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}

.switcheroo {
    transition: .2s ease;
    opacity: 1;
}

/* BARRE SWITCHEROO --- */
.switcheroo {
    &[position="static"] {
        position: relative;
    }
}


/* Positionnement des ronds */
.switcheroo__squircles {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    padding: var(--gap-size);
    gap: var(--gap-size);
}

/* BARRE --- */
.switcheroo {
    color: var(--blanco);
    background-color: var(--negro);
    font-size: 1rem;
}


/* AFFICHAGE DES COMPTES ---*/

/* Rond */
.switcheroo__squircle {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
}

/* Contenenur de l'avatar */
.switcheroo__avatar {

    >img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        object-position: center;
        border-radius: 5px;
        position: relative;
    }
}



/* Avatar du compte connecté */
.switcheroo__squircle.active {
    box-shadow: 0 0 20px red;

    &>img {
        border-radius: 5px;
        cursor: default;
    }
}


/* Bouton de suppression */
.switcheroo__delete {
    display: flex;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    background: var(--acento);
    transform: scale(0);
    opacity: 1;
    transition: transform 128ms var(--ease), opacity 64ms var(--ease);
    cursor: pointer;
    color: var(--blanco);
    position: absolute;
    top: -5px;
    right: -5px;
    height: 15px;
    width: 15px;
}

.switcheroo__squircle:hover .switcheroo__delete {
    opacity: 1;
    transform: scale(1);
}



/* TOOLTIP - INFOBULLE DU PSEUDO ---*/

/* Conteneur du pseudo */
.switcheroo__popper {
    background-color: var(--negro);
    padding: 0.68rem 1rem;
    position: absolute;
    width: -webkit-max-content;
    width: max-content;
    border-radius: 4px;
    z-index: 0;
    opacity: 0;
    transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
    pointer-events: none;
    color: var(--blanco);
}

/* Conteneur du pseudo : si horizontal */
.switcheroo__popper {
    top: 155%;
    left: 50%;
    transform-origin: top;
    transform: translateX(-50%) scale(0.98);
}

/* Flèche tooltip */
.switcheroo__popper:before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: var(--negro);
    z-index: -1;
}

.switcheroo__popper:before {
    left: 50%;
    top: -2px;
    transform: translateX(-50%) rotate(-45deg);
}

.switcheroo__squircle:hover .switcheroo__popper {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}


/* DIVIDER : barre de séparation --- */
.switcheroo__divider {
    display: none;
}


/* AJOUTER UN COMPTE ---*/

/* button : ajouter un compte */
.switcheroo__squircle--button {
    transition: border-radius 128ms var(--ease);
    color: var(--negro);
    background: var(--color_grupo);
}

.switcheroo__squircle--button:hover {
    color: var(--blanco);
    font-weight: bold;
}


/* MODAL : FENETRE DE CONNEXION --- */

/* Fond de l'afficage connexion */
.monomer-overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: 0.2s opacity ease;
    background: color-mix(in srgb, var(--negro), transparent 50%);
}

/* Boîte de connexion */
.monomer-modal {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 94%;
    padding: 24px 20px;
    transition: 0.2s opacity ease;
    transform: translate(-50%, -50%);
    border-radius: 30px;
    background: #212121;
    box-shadow: 15px 15px 30px rgb(25, 25, 25),
        -15px -15px 30px rgb(60, 60, 60);
    color: var(--blanco);
}

/* Formulaire */
.switcheroo__form {
    padding: 2rem;
}

/* Champs à remplir */
.switcheroo__form-row {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin-bottom: 1rem;

    .switcheroo__form-label {
        text-transform: uppercase;
        font: 100 var(--fs_e) var(--titulo);
        padding: .5rem 0;
    }

}

/* Nom du champs */
.switcheroo__form-label {
    text-transform: uppercase;
    font: 100 var(--fs_e) var(--titulo);
    padding: .5rem 0;
}

/* Zone de texte */
.switcheroo__form-input {
    padding: 6px;
    font-size: 16px;
    border-radius: 4px;
    width: 100%;
    background-color: #2d2d2d;
    border: var(--borde_general) !important;
    color: var(--blanco);
    cursor: text;
    border: 1px solid rgb(63, 63, 63);

    &:focus-within {
        border: 1px solid rgb(110, 110, 110);
    }
}

/* Bouton de connexion */
.switcheroo__form-button {
    border-radius: .25rem;
    width: 100%;
    padding: .5rem 1rem;
    border: none;
    outline: none;
    box-shadow: none;
    text-transform: uppercase;
    font: var(--fs_e) var(--deco);
    background-color: var(--acento);
    cursor: pointer;
}


.monomer-modal.monomer-open,
.monomer-overlay.monomer-open {
    opacity: 1;
}

/* Fermer la boîte de connexion */
.monomer-close {
    position: absolute;
    cursor: pointer;
    color: #fff;
    border: 0;
    background: var(--color_grupo);
    height: 30px;
    width: 30px;
    right: 0;
    top: 0;
    border-radius: .25rem;
    transition: .5s var(--ease);
}

.monomer-close:hover {
    transform: scale(1.2);
    transition: .5s var(--ease);

}

/***SIN AVATAR***/

.post-wrap:has(.sinavatar) {
    grid-template-columns: 70px auto;
    
    .aside {display: none;}
    
}

/***PNJS****/

.post-wrap:has(.post_pnj) {
    .aside {
        .avatar {
            background-size: cover;
            background-position: center;

            a>img {
                display: none;
            }
        }

        .username {
            span {
                font-size: 0;
            }
        }
    }

    &:has(.pnj_theodore) {
        .avatar {
            background-image: url(https://i.imgur.com/6njAiS4.png);
        }

        .username {
            &:before {
                content: "THEODORE";
            }
        }
    }

    &:has(.pnj_wolfie) {
        .avatar {
            background-image: url(https://i.imgur.com/mIyRt5u.png);
        }

        .username {
            &:before {
                content: "WOLFIE";
            }
        }
    }
}