/* =========================================================
   MU-SANMIGUEL FORUM
   Custom Theme Stylesheet
   musanmiguel.css
   ========================================================= */


/* =========================================================
   01. ESTRUCTURA GENERAL
   ========================================================= */

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at top,
            #252a31 0%,
            #15181d 38%,
            #0d0f13 100%
        );

    background-attachment: fixed;

    color: #d8d8d8;

    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}


/* Contenedor general de MyBB */
#container {
    margin: 0;
    padding: 0;

    color: #d8d8d8;

    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 14px;

    min-width: 0;
}


/* Área central del foro */
.wrapper {
    width: 94%;
    max-width: 1450px;
    min-width: 0;

    margin: 0 auto;
}


/* Contenido principal */
#content {
    width: auto !important;

    padding: 24px 18px 30px;

    background: rgba(16, 18, 23, 0.96);

    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);

    box-sizing: border-box;
}


/* =========================================================
   02. ENLACES GENERALES
   ========================================================= */

a:link,
a:visited {
    color: #d7b45a;
    text-decoration: none;
}

a:hover,
a:active {
    color: #f0d27a;
    text-decoration: none;
}


/* =========================================================
   03. TEXTOS AUXILIARES
   ========================================================= */

.smalltext {
    color: #a8abb0;
}

.largetext {
    color: #ffffff;
}


/* =========================================================
   04. RESPONSIVE BASE
   ========================================================= */

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

    .wrapper {
        width: 96%;
    }

    #content {
        padding: 16px 10px 24px;
    }
}


@media screen and (max-width: 600px) {

    body {
        font-size: 13px;
    }

    .wrapper {
        width: 98%;
    }

    #content {
        padding: 12px 6px 20px;
    }
}


/* =========================================================
   05. TABLAS Y CATEGORIAS - MU-SANMIGUEL
   ========================================================= */

.tborder {
    background: #20242a;

    border: 1px solid #343941;
    border-radius: 6px;

    overflow: hidden;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.30);
}


.thead {
    background:
        linear-gradient(
            180deg,
            #2d3239 0%,
            #1b1f24 100%
        );

    color: #e8c86a;

    border-bottom: 1px solid #4a4030;

    padding: 10px 12px;

    font-weight: 600;

    text-shadow:
        0 1px 2px #000;
}


.thead a:link,
.thead a:visited {
    color: #e8c86a;
}

.thead a:hover,
.thead a:active {
    color: #ffe39a;
}


.tcat {
    background:
        linear-gradient(
            180deg,
            #191c20 0%,
            #111317 100%
        );

    color: #c8c8c8;

    border-top: 1px solid #30343a;
    border-bottom: 1px solid #30343a;

    padding: 7px 10px;

    font-weight: 600;
}


.trow1 {
    background: #181b20;
    color: #c9cbd0;
    border-color: #292d33;
}


.trow2 {
    background: #1d2025;
    color: #c9cbd0;
    border-color: #292d33;
}


.trow1:hover,
.trow2:hover {
    background: #24282f;
}


.trow1 a:link,
.trow1 a:visited,
.trow2 a:link,
.trow2 a:visited {
    color: #d7b45a;
    font-weight: 600;
}

.trow1 a:hover,
.trow2 a:hover {
    color: #f3d77e;
}


.tborder td {
    border-color: #292d33;
}


.trow1 .smalltext,
.trow2 .smalltext {
    color: #92969c;
}


/* =========================================================
   06. HEADER MU-SANMIGUEL
   ========================================================= */

/*
   Imagen:
   images/musanmiguel/header_bg.jpg
*/

#header {
    margin: 0;
    padding: 0;

    background-color: #111419;

    background-image:
        url(../../../images/musanmiguel/header_bg.jpg);

    background-repeat: no-repeat;

    /* =====================================================
       AJUSTE VERTICAL DEL FONDO

       ESTE ES EL VALOR QUE PUEDES MODIFICAR:

       35% = posición actual

       PARA SUBIR LA IMAGEN:
       40%
       45%
       50%

       PARA BAJAR LA IMAGEN:
       30%
       25%
       20%
       ===================================================== */

    background-position: center 35%;

    background-size: cover;

    border-top: 0;
    border-bottom: 1px solid #44351f;
}


/* Zona principal del header */
#logo {
    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;

    height: 220px;

    box-sizing: border-box;

    position: relative;
}


/* Contenedor interno del header */
#logo .wrapper {
    height: 100%;

    position: relative;
}


/* =========================================================
   LOGO OFICIAL MU-SANMIGUEL
   ========================================================= */

#logo img {
    width: auto;

    /* Logo más grande */
    max-width: 260px;

    height: auto;
    max-height: 195px;

    display: block;

    /* Centrado horizontal */
    margin: 5px auto 0;

    filter:
        drop-shadow(
            0 5px 8px rgba(0, 0, 0, 0.90)
        );
}


/* =========================================================
   07. MENU SUPERIOR
   Portal / Búsqueda / Lista / Calendario / Ayuda
   ========================================================= */

#logo ul.top_links {
    position: absolute;

    right: 0;
    bottom: 8px;

    margin: 0;

    padding: 7px 10px;

    line-height: 18px;

    background: rgba(7, 9, 12, 0.82);

    border: 1px solid rgba(215, 180, 90, 0.32);

    border-radius: 5px;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(2px);
}


/* Separación entre opciones */
#header ul.menu li {
    margin: 0 7px;
}


/* Links superiores */
#header ul.menu li a {
    color: #f0cd69;

    line-height: 18px;

    vertical-align: middle;

    font-weight: 600;

    text-shadow:
        0 1px 3px #000,
        0 0 5px rgba(0, 0, 0, 0.95);
}


/* Hover */
#header ul.menu li a:hover {
    color: #fff0ae;
}


/* =========================================================
   08. SEPARACION VISUAL DEL HEADER
   ========================================================= */

#header::after {
    content: "";

    display: block;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215, 180, 90, 0.65),
            transparent
        );
}


/* =========================================================
   09. BARRA DE USUARIO / PANEL
   ========================================================= */

#panel .lower {
    background:
        linear-gradient(
            180deg,
            #1b1e23 0%,
            #13161a 100%
        );

    color: #aeb3b9;

    border-top: 1px solid #2b2f35;
    border-bottom: 1px solid #3b3120;

    padding: 7px 8px;
}


#panel .lower a:link,
#panel .lower a:visited {
    color: #c5c8cc;

    text-decoration: none;
}

#panel .lower a:hover,
#panel .lower a:active {
    color: #e8c86a;

    text-decoration: none;
}


#panel .lower ul.user_links li a {
    color: #c5c8cc;
}

#panel .lower ul.user_links li a:hover {
    color: #e8c86a;
}


#panel .lower ul.panel_links li a {
    color: #c5c8cc;
}

#panel .lower ul.panel_links li a:hover {
    color: #e8c86a;
}


/* =========================================================
   10. BARRA INFERIOR DE TABLAS / TFOOT
   ========================================================= */

.tfoot {
    background:
        linear-gradient(
            180deg,
            #1b1e23 0%,
            #121519 100%
        );

    color: #aeb3b9;

    border-top: 1px solid #30343a;

    padding: 7px 10px;
}


.tfoot a:link,
.tfoot a:visited {
    color: #c5c8cc;

    text-decoration: none;
}


.tfoot a:hover,
.tfoot a:active {
    color: #e8c86a;

    text-decoration: none;
}


/* =========================================================
   11. FOOTER MU-SANMIGUEL
   ========================================================= */

#footer {
    background:
        linear-gradient(
            180deg,
            #181b20 0%,
            #101216 100%
        );

    color: #8f949b;

    border-top: 1px solid #3b3120;
}


#footer a:link,
#footer a:visited {
    color: #aeb3b9;

    text-decoration: none;
}

#footer a:hover,
#footer a:active {
    color: #e8c86a;

    text-decoration: none;
}


#footer ul.menu {
    margin: 0;

    padding: 9px 0;
}

#footer ul.menu li {
    color: #aeb3b9;
}


/* Selectores de tema e idioma */
#footer select {
    background: #181b20;

    color: #d8d8d8;

    border: 1px solid #3a3f46;

    border-radius: 4px;

    padding: 3px 7px;
}


/* Botones "Ir" */
#footer input.button,
#footer input[type="submit"] {
    background:
        linear-gradient(
            180deg,
            #2d3239 0%,
            #1b1f24 100%
        );

    color: #e8c86a;

    border: 1px solid #444a52;

    border-radius: 4px;

    padding: 3px 8px;

    cursor: pointer;
}


#footer input.button:hover,
#footer input[type="submit"]:hover {
    border-color: #8b7138;

    color: #ffe39a;
}


#footer .upper {
    background: transparent;
}

#footer .lower {
    background: #0d0f13;

    color: #73777d;

    border-top: 1px solid #24282e;
}


/* =========================================================
   12. NAVEGACION / TITULO ACTIVO
   Foro Oficial MU-SANMIGUEL
   ========================================================= */

.navigation {
    color: #aeb3b9;
}


.navigation .active {
    color: #e8c86a;

    font-size: 14px;

    font-weight: 600;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.80);
}


.navigation a:link,
.navigation a:visited {
    color: #c5c8cc;

    text-decoration: none;
}

.navigation a:hover,
.navigation a:active {
    color: #ffe294;

    text-decoration: none;
}