/* =========================================================
   STRATGIAMU - TEMPLATE 14
   BASE VISUAL
   ========================================================= */

:root {
    --st-green: #16ff6b;
    --st-green-soft: #86efac;
    --st-bg: #050807;
    --st-bg-2: #080d0a;
    --st-panel: #0b120e;
    --st-panel-2: #101812;
    --st-border: rgba(22, 255, 107, 0.20);
    --st-border-hover: rgba(22, 255, 107, 0.50);
    --st-text: #f0fdf4;
    --st-text-muted: #8a9b90;
    --st-red: #ff4d4d;
}

/* =========================================================
   RESET VISUAL
   ========================================================= */

html {
    background: #050807 !important;
    color: var(--st-text);
}

body {
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(5, 8, 7, 0.35),
            rgba(5, 8, 7, 0.70)
        ),
        url("../img/Fondo.png") center top / cover no-repeat fixed !important;

    background-color: #050807 !important;

    color: var(--st-text);
}

/* Selecci贸n de texto */
::selection {
    background: rgba(22, 255, 107, 0.30);
    color: #ffffff;
}

/* =========================================================
   WRAPPER
   ========================================================= */

.wrapper {
    background: transparent !important;
}

/* =========================================================
   HEADER
   ========================================================= */

.header-top,
.header {
    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 7, 0.15) 0%,
            rgba(5, 8, 7, 0.35) 100%
        ),
        url("../img/header-stratgiamu.png") center center / cover no-repeat !important;

    border-bottom: 1px solid var(--st-border) !important;

    box-shadow:
        0 1px 0 rgba(22, 255, 107, 0.05),
        0 10px 40px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   NAVBAR
   ========================================================= */

.top-panel {
    background: rgba(5, 8, 7, 0.75) !important;
}

.top-panel a {
    transition:
        color 0.2s ease,
        text-shadow 0.2s ease,
        border-color 0.2s ease;
}

.top-panel a:hover {
    color: var(--st-green) !important;
    text-shadow: 0 0 12px rgba(22, 255, 107, 0.45);
}

/* =========================================================
   LOGO
   ========================================================= */

.logo {
    position: relative;
}

.logo img {
    filter:
        drop-shadow(0 0 8px rgba(22, 255, 107, 0.18))
        drop-shadow(0 0 25px rgba(22, 255, 107, 0.08));

    transition:
        filter 0.25s ease,
        transform 0.25s ease;
}

.logo img:hover {
    filter:
        drop-shadow(0 0 12px rgba(22, 255, 107, 0.40))
        drop-shadow(0 0 35px rgba(22, 255, 107, 0.15));

    transform: scale(1.02);
}

/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.container_web {
    background: transparent !important;
}

.content {
    color: var(--st-text);
}

/* =========================================================
   PANELES / WIDGETS
   ========================================================= */

.widget,
.login-block,
.download-button,
.registration-button {
    background:
        linear-gradient(
            145deg,
            rgba(16, 24, 18, 0.96),
            rgba(8, 13, 10, 0.96)
        ) !important;

    border: 1px solid var(--st-border) !important;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.widget:hover {
    border-color: var(--st-border-hover) !important;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.40),
        0 0 25px rgba(22, 255, 107, 0.04);
}

/* =========================================================
   TITULOS DE WIDGET
   ========================================================= */

.widget-title {
    color: var(--st-green) !important;

    border-bottom: 1px solid var(--st-border) !important;

    text-shadow:
        0 0 10px rgba(22, 255, 107, 0.25);
}

/* =========================================================
   TEXTOS
   ========================================================= */

.content,
.sidebar,
.widget-menu,
.widget-menu li {
    color: var(--st-text);
}

.widget-menu a {
    color: #cbd5cf;
}

.widget-menu a:hover {
    color: var(--st-green) !important;
}

/* =========================================================
   INPUTS
   ========================================================= */

input,
textarea,
select,
.input-menu,
.input-re {
    background: #070c09 !important;
    color: #ffffff !important;

    border: 1px solid rgba(22, 255, 107, 0.16) !important;

    outline: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus,
.input-menu:focus,
.input-re:focus {
    border-color: rgba(22, 255, 107, 0.60) !important;

    box-shadow:
        0 0 0 2px rgba(22, 255, 107, 0.06),
        0 0 15px rgba(22, 255, 107, 0.08);
}

input::placeholder,
textarea::placeholder {
    color: #607067 !important;
}

/* =========================================================
   BOTONES
   ========================================================= */

button,
.button,
.button-small {
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

button:hover,
.button:hover,
.button-small:hover {
    border-color: var(--st-green) !important;
    color: #000000 !important;

    background: var(--st-green) !important;

    box-shadow:
        0 0 18px rgba(22, 255, 107, 0.25);

    transform: translateY(-1px);
}

/* =========================================================
   DOWNLOAD
   ========================================================= */

.download-button a {
    color: var(--st-green) !important;
}

.download-button a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(22, 255, 107, 0.35);
}

/* =========================================================
   SERVER STATUS
   ========================================================= */

.status-online,
.online,
.online-number {
    color: var(--st-green) !important;
}

.progress-block,
.progress-bar-webengine {
    background: #050805 !important;
    border: 1px solid rgba(22, 255, 107, 0.12);
}

.progress-bar,
.progress-bar-webengine span {
    background:
        linear-gradient(
            90deg,
            #16ff6b,
            #86efac
        ) !important;

    box-shadow:
        0 0 10px rgba(22, 255, 107, 0.35);
}

/* =========================================================
   RANKINGS
   ========================================================= */

.top-list {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.top-list:hover {
    background: rgba(22, 255, 107, 0.035) !important;
}

.top-number {
    color: var(--st-green) !important;
}

.top-name a,
.top-name {
    color: #e5f7eb;
}

.top-name a:hover {
    color: var(--st-green) !important;
}

/* =========================================================
   LINKS
   ========================================================= */

a {
    transition:
        color 0.2s ease,
        text-shadow 0.2s ease;
}

a:hover {
    color: var(--st-green);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    background:
        linear-gradient(
            180deg,
            #080d0a,
            #030504
        ) !important;

    border-top: 1px solid var(--st-border) !important;

    box-shadow:
        0 -15px 40px rgba(0, 0, 0, 0.30);
}

.footer a:hover {
    color: var(--st-green) !important;
}

.copyright {
    color: #65736a;
}

.copyright a {
    color: var(--st-green) !important;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #030504;
}

::-webkit-scrollbar-thumb {
    background: #12351f;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--st-green);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .container_web {
        width: 100% !important;
    }

}
/* =========================================================
   STRATGIAMU - CONTENIDO / RANKINGS
   ========================================================= */

/* Fondo general del área central */
.container_web,
.content,
.content > div {
    background: transparent !important;
}

/* Cualquier contenedor blanco de WebEngine */
.content .row,
.content .col-md-12,
.content .panel,
.content .table-responsive {
    background: transparent !important;
}

/* =========================================================
   TABLAS
   ========================================================= */

.content table {
    width: 100%;
    background: #080d0a !important;
    color: #d9e7dd !important;
    border-collapse: collapse !important;
    border: 1px solid rgba(22, 255, 107, 0.15) !important;
}

/* Cabecera */
.content table thead,
.content table thead tr,
.content table th {
    background:
        linear-gradient(
            180deg,
            #111b14 0%,
            #080d0a 100%
        ) !important;

    color: var(--st-green) !important;

    border-bottom: 1px solid rgba(22, 255, 107, 0.35) !important;

    text-shadow:
        0 0 8px rgba(22, 255, 107, 0.20);
}

/* Celdas */
.content table td {
    background: #080d0a !important;
    color: #cbd8cf !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
}

/* Filas */
.content table tbody tr {
    background: #080d0a !important;
    transition: background 0.15s ease;
}

.content table tbody tr:hover {
    background: rgba(22, 255, 107, 0.045) !important;
}

/* =========================================================
   RANKING ESPECÍFICO
   ========================================================= */

.rankings,
.rankings-content,
.rankings-table {
    background: transparent !important;
}

/* Nombres */
.content table a {
    color: #dceee2 !important;
}

.content table a:hover {
    color: var(--st-green) !important;
    text-shadow: 0 0 8px rgba(22, 255, 107, 0.25);
}

/* Números */
.content table td:first-child {
    color: #9fb0a5 !important;
}

/* =========================================================
   TEXTO DEL RANKING
   ========================================================= */

.content h1,
.content h2,
.content h3,
.content h4,
.content h5 {
    color: var(--st-green) !important;

    text-shadow:
        0 0 12px rgba(22, 255, 107, 0.20);
}

/* =========================================================
   AVATARES
   ========================================================= */

.content table img {
    border-radius: 4px;
}

/* =========================================================
   SELECTORES / FILTROS DE RANKING
   ========================================================= */

.content select {
    background: #080d0a !important;
    color: #dceee2 !important;

    border: 1px solid rgba(22, 255, 107, 0.20) !important;
}

.content select option {
    background: #080d0a !important;
    color: #ffffff !important;
}

/* =========================================================
   PAGINACIÓN
   ========================================================= */

.content .pagination > li > a,
.content .pagination > li > span {
    background: #080d0a !important;
    color: #aebdb3 !important;

    border: 1px solid rgba(22, 255, 107, 0.12) !important;
}

.content .pagination > li > a:hover,
.content .pagination > li.active > a,
.content .pagination > li.active > span {
    background: var(--st-green) !important;
    color: #020503 !important;

    border-color: var(--st-green) !important;
}

/* =========================================================
   CONTENEDORES BLANCOS GENÉRICOS
   ========================================================= */

.content .panel,
.content .panel-heading,
.content .panel-body,
.content .well {
    background: #080d0a !important;
    color: #dceee2 !important;

    border-color: rgba(22, 255, 107, 0.15) !important;
}

.content .panel-heading {
    color: var(--st-green) !important;
}

/* =========================================================
   RANKING - EFECTO VERDE
   ========================================================= */

.content table tbody tr:hover td {
    color: #effff3 !important;
}

/* Primer puesto */
.content table tbody tr:first-child td:first-child {
    color: var(--st-green) !important;
    font-weight: bold;
}
/* ==================================================
   STRATGIAMU - CONTENIDO PRINCIPAL
   ================================================== */

.content {
    background: #050a07 !important;
    color: #d8e8dc !important;
    border: 1px solid rgba(45, 255, 100, 0.25) !important;
    box-shadow:
        0 0 25px rgba(0, 255, 80, 0.10),
        inset 0 0 30px rgba(0, 0, 0, 0.45) !important;
}

.content-title {
    color: #9cffaa !important;
    border-bottom: 1px solid rgba(45, 255, 100, 0.25) !important;
}

.content-title a {
    color: #b8ffc2 !important;
}

.content p,
.content li {
    color: #d8e8dc !important;
}

.content a {
    color: #79ff8a;
}

.content a:hover {
    color: #baffc2;
}