MediaWiki:Common.css: mudanças entre as edições

Edição das 16h45min de 30 de janeiro de 2026

/* =====================================
   EVERLIGHT WIKI - COMMON.CSS
   ===================================== */

/* -----------------------------
   SIDEBAR LOGO
   ----------------------------- */
.sidebar-logo img {
    max-width: 100px;         /* LARGURA MÁXIMA IGUAL AO PRINT */
    height: auto;             /* ALTURA AUTOMÁTICA PROPORCIONAL */
    display: block;           /* EXIBE COMO BLOCO */
    margin: 0 auto;           /* CENTRALIZA HORIZONTALMENTE */
}

/* -----------------------------
   FONTE E FUNDO PADRÃO
   ----------------------------- */
body {
    font-family: "Segoe UI", Arial, sans-serif;  /* FONTE PADRÃO IGUAL AO PRINT */
    background-color: #ffffff;                   /* FUNDO BRANCO IGUAL AO PRINT */
}

/* -----------------------------
   REMOVE LARGURA QUEBRADA PADRÃO
   ----------------------------- */
.mw-body {
    max-width: 100%;          /* LARGURA MÁXIMA PARA EVITAR QUEBRA */
}

/* -----------------------------
   CONTAINER PRINCIPAL DA PÁGINA
   ----------------------------- */
.everlight-container {
    max-width: 1200px;        /* LARGURA MÁXIMA IGUAL AO PRINT */
    margin: 0 auto;           /* CENTRALIZA CONTAINER */
    padding: 10px;            /* ESPAÇAMENTO INTERNO PADRÃO */
}

/* =========================
   BARRA SUPERIOR DE LINKS
   ========================= */
.everlight-top-links {
    text-align: center;       /* CENTRALIZA TEXTO IGUAL AO PRINT */
    font-size: 14px;          /* TAMANHO DE FONTE IGUAL AO PRINT */
    margin-bottom: 15px;      /* ESPAÇAMENTO INFERIOR IGUAL AO PRINT */
}

.everlight-top-links a {
    color: #2a4bd7;           /* COR DO LINK IGUAL AO PRINT */
    text-decoration: none;    /* REMOVE SUBLINHADO PADRÃO */
    margin: 0 6px;            /* ESPAÇAMENTO ENTRE LINKS IGUAL AO PRINT */
}

.everlight-top-links a:hover {
    text-decoration: underline; /* SUBLINHADO AO PASSAR O MOUSE */
}

/* =========================
   BANNER PRINCIPAL
   ========================= */
.everlight-banner {
    height: 220px;            /* ALTURA DO BANNER IGUAL AO PRINT */
    background: #9b1c1c;      /* COR DE FUNDO DO BANNER */
    border-radius: 10px;       /* CANTOS ARREDONDADOS */
    display: flex;             /* FLEX PARA CENTRALIZAR CONTEÚDO */
    align-items: center;       /* CENTRALIZA VERTICALMENTE */
    justify-content: center;   /* CENTRALIZA HORIZONTALMENTE */
    color: #ffffff;            /* COR DO TEXTO DO BANNER */
    font-size: 32px;           /* TAMANHO DA FONTE DO BANNER */
    font-weight: bold;         /* NEGRITO */
    margin-bottom: 20px;       /* ESPAÇAMENTO ABAIXO DO BANNER */
}

/* =========================
   BOTÃO DE EVENTO
   ========================= */
.everlight-event-button {
    text-align: center;        /* CENTRALIZA O BOTÃO */
    margin-bottom: 25px;       /* ESPAÇAMENTO ABAIXO DO BOTÃO */
}

.everlight-event-button a {
    background: #c62828;       /* COR DE FUNDO DO BOTÃO */
    color: #fff;               /* COR DO TEXTO */
    padding: 12px 30px;        /* PADDING DO BOTÃO */
    font-size: 20px;           /* TAMANHO DA FONTE DO BOTÃO */
    text-decoration: none;     /* REMOVE SUBLINHADO */
    border-radius: 6px;        /* CANTOS LEVEMENTE ARREDONDADOS */
    transition: background 0.3s; /* TRANSIÇÃO SUAVE AO HOVER */
}

.everlight-event-button a:hover {
    background: #a11f1f;       /* COR DE FUNDO AO PASSAR O MOUSE */
}

/* ================================================= */
/* CARDS PRINCIPAIS – VERSÃO CONSOLIDADA             */
/* ================================================= */

.everlight-cards {
    display: flex;                                      /* FLEX PARA CARDS */
    gap: 14px;                                          /* ESPAÇAMENTO ENTRE CARDS */
    justify-content: center;                             /* CENTRALIZA HORIZONTALMENTE */
    flex-wrap: wrap;                                    /* QUEBRA DE LINHA AUTOMÁTICA */
}

/* Card individual - Versão consolidada com suporte a imagens */
.everlight-card {
    width: 160px;                                      /* LARGURA DO CARD */
    background: #ffffff;                               /* FUNDO BRANCO */
    border: 1px solid #cfd6dd;                        /* BORDA LEVE */
    border-radius: 2px;                                /* CANTOS LEVEMENTE ARREDONDADOS */
    overflow: hidden;                                  /* ESCONDE EXCESSO DE CONTEÚDO */
    text-align: center;                                /* CENTRALIZA TEXTO */
    font-family: Arial, sans-serif;                    /* FONTE PADRÃO */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    padding-bottom: 8px;
}

.everlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    background: #ffffff;
}

/* Imagem do card */
.everlight-img {
    width: 100%;                                       /* OCUPA TODA A LARGURA */
    height: 100px;                                     /* ALTURA IGUAL AO PRINT */
    background-size: cover;                             /* IMAGEM COBRE TODO O ESPAÇO */
    background-position: center;                        /* CENTRALIZA IMAGEM */
    background-repeat: no-repeat;                       /* SEM REPETIÇÃO */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Área da imagem alternativa */
.everlight-card-img {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.everlight-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Link do card */
.everlight-card a {
    display: block;
    padding: 8px 4px;                                  /* PADDING INTERNO */
    font-weight: bold;                                 /* TEXTO NEGRITO */
    color: #0033cc;                                    /* COR DO LINK */
    text-decoration: none;                             /* REMOVE SUBLINHADO */
}

.everlight-card a:hover {
    text-decoration: underline;                        /* SUBLINHADO AO PASSAR O MOUSE */
}

.everlight-card .img {
    transition: transform 0.25s ease;
}

.everlight-card:hover .img {
    transform: scale(1.05);
}

/* =========================
   CONTEÚDOS EXCLUSIVOS
   ========================= */

/* Container geral */
.everlight-exclusive-wrapper {
    margin-top: 30px;                                        /* MARGEM SUPERIOR */
}

/* Grid dos conteúdos exclusivos */
.everlight-exclusive-grid {
    display: grid;                                           /* GRID PARA ITENS */
    grid-template-columns: repeat(3, 1fr);                  /* 3 COLUNAS IGUAIS */
    gap: 15px;                                               /* ESPAÇAMENTO ENTRE ITENS */
}

/* Item individual */
.everlight-exclusive-item {
    border: 1px solid #cfcfcf;                               /* BORDA LEVE */
    background: #f7f7f7;                                     /* FUNDO CINZA CLARO */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* TRANSIÇÃO SUAVE */
}

/* Efeito hover no item */
.everlight-exclusive-item:hover {
    transform: translateY(-5px);                              /* LEVE ELEVAÇÃO */
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);                /* SOMBRA SUAVE */
}

/* Imagem do item exclusivo */
.everlight-exclusive-img {
    height: 140px;                                            /* ALTURA IGUAL AO PRINT */
    background: #dcdcdc;                                      /* FUNDO CINZA CLARO */
}

/* Título do item exclusivo */
.everlight-exclusive-title {
    padding: 10px;                                           /* ESPAÇAMENTO INTERNO */
    font-weight: bold;                                       /* TEXTO EM NEGRITO */
    text-align: center;                                      /* CENTRALIZA TEXTO */
    background: #ffffff;                                     /* FUNDO BRANCO */
}

/* =========================
   GUIAS – EverLight
   ========================= */

/* Container geral das guias */
.hr-guides-wrapper {
    max-width: 1200px;          /* LARGURA MÁXIMA IGUAL AO PRINT */
    margin: 25px auto;          /* CENTRALIZA E MARGEM SUPERIOR */
    background: #ffffff;        /* FUNDO BRANCO */
}

/* Título das guias */
.hr-guides-title {
    text-align: center;         /* CENTRALIZA TEXTO */
    font-weight: bold;          /* NEGRITO */
    font-size: 14px;            /* TAMANHO DA FONTE */
    letter-spacing: 1px;        /* ESPAÇAMENTO ENTRE LETRAS */
    padding: 6px 0;             /* ESPAÇAMENTO INTERNO */
    margin-bottom: 10px;        /* MARGEM INFERIOR */
    border-top: 1px solid #cfcfcf;
    border-bottom: 1px solid #cfcfcf;
}

/* Grid dos itens das guias */
.hr-guides-grid {
    display: grid;                                      /* GRID PARA ITENS */
    grid-template-columns: repeat(5, 1fr);             /* 5 COLUNAS IGUAIS */
    column-gap: 30px;                                  /* ESPAÇAMENTO ENTRE COLUNAS */
    row-gap: 6px;                                      /* ESPAÇAMENTO ENTRE LINHAS */
    padding: 5px 10px 10px;                            /* PADDING INTERNO */
}

/* Item individual da guia */
.hr-guide-item {
    display: flex;                                     /* FLEX PARA ÍCONE + TEXTO */
    align-items: center;                               /* CENTRALIZA VERTICALMENTE */
    font-size: 13px;                                   /* TAMANHO DA FONTE */
    line-height: 1.6;                                  /* ALTURA DE LINHA */
}

/* Ícone do item da guia */
.hr-guide-item img {
    margin-right: 6px;                                 /* ESPAÇAMENTO ENTRE ÍCONE E TEXTO */
}

/* Link do item da guia */
.hr-guide-item a {
    color: #0033cc;                                    /* COR DO LINK */
    text-decoration: none;                             /* REMOVE SUBLINHADO */
}

.hr-guide-item a:hover {
    text-decoration: underline;                        /* SUBLINHADO AO PASSAR O MOUSE */
}

/* RESPONSIVO */
@media (max-width: 900px) {
    .hr-guides-grid {
        grid-template-columns: repeat(2, 1fr);         /* 2 COLUNAS EM TELAS PEQUENAS */
    }
}

/* =========================
   CARDS
   ========================= */

/* Container geral de cards */
.everlight-cards {
    display: flex;                                      /* FLEX PARA CARDS */
    gap: 14px;                                          /* ESPAÇAMENTO ENTRE CARDS */
    justify-content: center;                             /* CENTRALIZA HORIZONTALMENTE */
    flex-wrap: wrap;                                    /* QUEBRA DE LINHA AUTOMÁTICA */
}

/* Card individual */
.everlight-card {
    width: 160px;                                      /* LARGURA DO CARD */
    background: #ffffff;                               /* FUNDO BRANCO */
    border: 1px solid #cfd6dd;                        /* BORDA LEVE */
    border-radius: 2px;                                /* CANTOS LEVEMENTE ARREDONDADOS */
    overflow: hidden;                                  /* ESCONDE EXCESSO DE CONTEÚDO */
    text-align: center;                                /* CENTRALIZA TEXTO */
    font-family: Arial, sans-serif;                    /* FONTE PADRÃO */
}

/* =========================
   CLASSES TABLE
   ========================= */

/* Tabela de classes */
.classes-table {
    width: 100%;                                       /* OCUPA 100% DA LARGURA */
    border-collapse: collapse;                         /* REMOVE ESPAÇAMENTO ENTRE CELULAS */
    text-align: center;                                /* CENTRALIZA TEXTO */
    background: #fff;                                  /* FUNDO BRANCO */
}

/* Células da tabela */
.classes-table td {
    border: 1px solid #cfcfcf;                         /* BORDA LEVE */
    padding: 10px;                                     /* ESPAÇAMENTO INTERNO */
    vertical-align: middle;                             /* ALINHA TEXTO NO CENTRO */
}

/* Nome da classe */
.class-name {
    color: #2a5db0;                                    /* COR AZUL */
    font-weight: bold;                                  /* TEXTO NEGRITO */
}

/* =========================
   BARRAS DE TÍTULO
   ========================= */

/* Barra padrão */
.row-title td {
    font-weight: bold;                                  /* TEXTO NEGRITO */
    padding: 6px;                                       /* PADDING INTERNO */
    border: 1px solid #bdbdbd;                          /* BORDA LEVE */
}

/* Barra inicial */
.row-title.initial td {
    background: #fdecc8;                                /* FUNDO LARANJA CLARO */
}

/* Barras de cores alternativas */
.row-title.c1 td {
    background: #f6ef99;                                /* FUNDO AMARELO CLARO */
}

.row-title.c2 td {
    background: #f2ddc7;                                /* FUNDO BEGE CLARO */
}

.row-title.trans td {
    background: #dce8dc;                                /* FUNDO VERDE CLARO */
}

.row-title.expand td {
    background: #f6ef99;                                /* FUNDO AMARELO CLARO */
}

.row-title.expand2 td {
    background: #f2ddc7;                                /* FUNDO BEGE CLARO */
}

/* ===============================
   LAYOUT DAS CLASSES – EVERLIGHT
   =============================== */

/* Grid principal das classes */
.classes-grid {
    display: grid;                                /* GRID PARA ITENS */
    gap: 0;                                       /* SEM ESPAÇAMENTO ENTRE ITENS */
    border-left: 1px solid #cfcfcf;              /* BORDA ESQUERDA */
    border-top: 1px solid #cfcfcf;               /* BORDA SUPERIOR */
    margin-bottom: 25px;                          /* MARGEM INFERIOR */
    background: #ffffff;                          /* FUNDO BRANCO */
}

/* Configurações por quantidade de colunas */
.classes-grid-2  { grid-template-columns: repeat(2, 1fr); }
.classes-grid-4  { grid-template-columns: repeat(4, 1fr); }
.classes-grid-6  { grid-template-columns: repeat(6, 1fr); }
.classes-grid-10 { grid-template-columns: repeat(5, 1fr); }

/* [CONSOLIDADO] Versão única de .class-item (removidas duplicatas das linhas 994 e 1044) */
.class-item {
    text-align: center;                           /* CENTRALIZA TEXTO */
    padding: 20px 10px;                           /* ESPAÇAMENTO INTERNO */
    border-right: 1px solid #cfcfcf;             /* BORDA DIREITA */
    border-bottom: 1px solid #cfcfcf;            /* BORDA INFERIOR */
    background: #ffffff;                          /* FUNDO BRANCO */
    font-size: 14px;                              /* TAMANHO DA FONTE */
    line-height: 1.4;                             /* ALTURA DE LINHA */
    position: relative;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Hover no card */
.class-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    background: #fdfdfd;
}

/* Imagem dentro do item da classe */
.class-item img {
    display: inline-block;                        /* EXIBE EM LINHA */
    margin: 0 2px;                                /* MARGEM LATERAL PEQUENA */
    vertical-align: middle;                       /* ALINHA AO MEIO */
    max-width: 100%;                              /* NÃO ULTRAPASSA CONTAINER */
    height: auto;                                 /* ALTURA PROPORCIONAL */
}

/* =========================
   TÍTULOS DE CLASSES
   ========================= */

/* Títulos genéricos */
h2 {
    margin: 0;
    padding: 6px;
    text-align: center;
    font-weight: bold;
}

/* Classes de cores específicas (substitui :contains) */
.classe-inicial-title            { background: #f6e7c6; border: 1px solid #e0c99c; }
.classe-1-title                  { background: #f2ea8c; border: 1px solid #e0d87c; }
.classe-2-title                  { background: #efd7c4; border: 1px solid #dcc2a9; }
.classe-transcendental-title     { background: #dce6d8; border: 1px solid #c5d4c1; }
.classe-expandida-title           { background: #f2ea8c; border: 1px solid #e0d87c; }

/* =========================
   RESPONSIVIDADE DAS CLASSES
   ========================= */

/* Para telas até 1200px */
@media (max-width: 1200px) {
    .classes-grid-6  { grid-template-columns: repeat(4, 1fr); }
    .classes-grid-10 { grid-template-columns: repeat(5, 1fr); }
}

/* Para telas até 900px */
@media (max-width: 900px) {
    .classes-grid-6  { grid-template-columns: repeat(3, 1fr); }
    .classes-grid-10 { grid-template-columns: repeat(3, 1fr); }
    .classes-grid-4  { grid-template-columns: repeat(2, 1fr); }
}

/* Para telas até 600px */
@media (max-width: 600px) {
    .classes-grid-6, 
    .classes-grid-10, 
    .classes-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Para telas até 400px */
@media (max-width: 400px) {
    .classes-grid-6, 
    .classes-grid-10, 
    .classes-grid-4,
    .classes-grid-2 { grid-template-columns: 1fr; }
}

/* ================================================= */
/* SISTEMA DE CLASSES - WIKI EVERLIGHT              */
/* ================================================= */

/* -----------------------------
   RESET E CONTAINER
   ----------------------------- */
.everlight-classes-system {
    max-width: 1000px;                                  /* LARGURA MÁXIMA DO SISTEMA */
    margin: 20px auto;                                  /* CENTRALIZA HORIZONTALMENTE */
    padding: 0 15px;                                    /* PADDING LATERAL */
    font-family: -apple-system, BlinkMacSystemFont,     /* FONTE PADRÃO */
                 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* -----------------------------
   TÍTULO DA PÁGINA
   ----------------------------- */
.everlight-page-title {
    text-align: center;                                 /* CENTRALIZA TEXTO */
    margin-bottom: 40px;                                /* MARGEM INFERIOR */
    padding-bottom: 20px;                               /* PADDING INFERIOR */
    border-bottom: 2px solid #e0e0e0;                  /* LINHA SEPARADORA */
}

.everlight-page-title h1 {
    color: #2c3e50;                                    /* COR DO TÍTULO */
    font-size: 32px;                                    /* TAMANHO DO TÍTULO */
    margin-bottom: 15px;                                /* MARGEM INFERIOR */
    font-weight: 700;                                   /* NEGRITO */
}

.everlight-page-title p {
    color: #666;                                        /* COR DO SUBTÍTULO */
    font-size: 16px;                                    /* TAMANHO DA FONTE */
    line-height: 1.6;                                   /* ALTURA DE LINHA */
    max-width: 800px;                                   /* LARGURA MÁXIMA DO TEXTO */
    margin: 0 auto;                                     /* CENTRALIZA TEXTO */
}

/* -----------------------------
   GRADE PRINCIPAL (3 COLUNAS)
   ----------------------------- */
.everlight-main-grid {
    display: grid;                                      /* GRID PARA CARDS */
    grid-template-columns: repeat(3, 1fr);             /* 3 COLUNAS IGUAIS */
    gap: 25px;                                         /* ESPAÇAMENTO ENTRE CARDS */
    margin-bottom: 40px;                               /* MARGEM INFERIOR */
}

/* Responsividade da grade principal */
@media (max-width: 900px) {
    .everlight-main-grid {
        grid-template-columns: repeat(2, 1fr);         /* 2 COLUNAS EM TELAS MÉDIAS */
    }
}

@media (max-width: 600px) {
    .everlight-main-grid {
        grid-template-columns: 1fr;                    /* 1 COLUNA EM TELAS PEQUENAS */
    }
}

/* -----------------------------
   CARD DA CLASSE (ESTILO SITE)
   ----------------------------- */
.everlight-class-card {
    background: white;                                 /* FUNDO DO CARD */
    border-radius: 12px;                               /* CANTOS ARREDONDADOS */
    overflow: hidden;                                  /* ESCONDE EXCESSO */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);          /* SOMBRA SUAVE */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* TRANSIÇÃO SUAVE */
    cursor: pointer;                                   /* CURSOR DE MÃO */
    border: 2px solid transparent;                     /* BORDA TRANSPARENTE INICIAL */
    position: relative;                                /* POSICIONAMENTO RELATIVO */
}

.everlight-class-card:hover {
    transform: translateY(-8px);                       /* LEVE ELEVAÇÃO */
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);         /* SOMBRA AO HOVER */
    border-color: #3498db;                             /* BORDA AZUL AO HOVER */
}

.everlight-class-card.active {
    border-color: #2980b9;                             /* BORDA AZUL ESCURO */
    background: #f8fafc;                               /* FUNDO LEVE DIFERENCIADO */
}

/* -----------------------------
   IMAGEM DO CARD
   ----------------------------- */
.everlight-class-image {
    height: 220px;                                     /* ALTURA IGUAL AO PRINT */
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%); /* GRADIENTE DE FUNDO */
    display: flex;                                     /* FLEX PARA CENTRALIZAR IMAGENS */
    align-items: center;
    justify-content: center;
    gap: 10px;                                         /* ESPAÇAMENTO ENTRE IMAGENS */
    padding: 20px;                                     /* PADDING INTERNO */
    overflow: hidden;
}

/* -----------------------------
   IMAGENS COM EFEITO HOVER
   ----------------------------- */
.everlight-img-hover {
    transition: all 0.4s ease;                        /* TRANSIÇÃO SUAVE */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));  /* SOMBRA LEVE */
    max-height: 180px;                                /* ALTURA MÁXIMA */
    object-fit: contain;                               /* PROPORÇÃO CORRETA */
}

.everlight-class-card:hover .everlight-img-hover {
    transform: scale(1.08);                            /* AMPLIAÇÃO AO HOVER */
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));  /* SOMBRA MAIOR AO HOVER */
}

/* -----------------------------
   NOME DA CLASSE
   ----------------------------- */
.everlight-class-name {
    padding: 20px;                                    /* PADDING INTERNO */
    text-align: center;                                /* CENTRALIZA TEXTO */
    background: white;                                 /* FUNDO BRANCO */
    border-top: 1px solid #f1f1f1;                   /* LINHA SEPARADORA */
}

.everlight-class-title {
    display: block;
    color: #2c3e50;                                   /* COR DO TÍTULO */
    font-size: 20px;                                   /* TAMANHO DA FONTE */
    font-weight: 700;                                  /* NEGRITO */
    margin-bottom: 5px;                                /* MARGEM INFERIOR */
}

.everlight-class-subtitle {
    display: block;
    color: #7f8c8d;                                   /* COR DO SUBTÍTULO */
    font-size: 14px;                                   /* TAMANHO DA FONTE */
    font-weight: 500;                                  /* PESO MÉDIO */
    text-transform: uppercase;                         /* MAIÚSCULAS */
    letter-spacing: 1px;                               /* ESPAÇAMENTO ENTRE LETRAS */
}

/* ================================================= */
/* ÁREA DE EXPANSÃO (ABRE AO CLICAR)                */
/* ================================================= */

/* Container da área expansível */
.everlight-expansion-area {
    display: none;                                     /* OCULTO POR PADRÃO */
    background: white;                                 /* FUNDO BRANCO */
    border-radius: 12px;                               /* CANTOS ARREDONDADOS */
    margin: 20px 0 40px;                               /* MARGEM SUPERIOR E INFERIOR */
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);           /* SOMBRA LEVE */
    border: 1px solid #e0e0e0;                        /* BORDA CINZA CLARO */
    animation: everlightSlideDown 0.4s ease-out;       /* ANIMAÇÃO AO ABRIR */
}

/* Área ativa (quando clicada) */
.everlight-expansion-area.active {
    display: block;                                    /* EXIBE CONTEÚDO */
}

/* Animação de abertura */
@keyframes everlightSlideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);                 /* LEVE SUBIDA INICIAL */
    }
    to {
        opacity: 1;
        transform: translateY(0);                     /* POSIÇÃO FINAL */
    }
}

/* Conteúdo interno da expansão */
.everlight-expansion-content {
    padding: 30px;                                     /* PADDING INTERNO */
}

/* Título da expansão */
.everlight-expansion-title {
    color: #2c3e50;                                   /* COR DO TÍTULO */
    font-size: 28px;                                   /* TAMANHO DA FONTE */
    margin-bottom: 15px;                               /* MARGEM INFERIOR */
    padding-bottom: 15px;                              /* PADDING INFERIOR */
    border-bottom: 2px solid #3498db;                 /* LINHA AZUL */
    font-weight: 700;                                  /* NEGRITO */
}

/* Descrição da expansão */
.everlight-expansion-description {
    color: #555;                                       /* COR DO TEXTO */
    font-size: 16px;                                   /* TAMANHO DA FONTE */
    line-height: 1.7;                                  /* ALTURA DE LINHA */
    margin-bottom: 30px;                               /* MARGEM INFERIOR */
    padding-bottom: 20px;                              /* PADDING INFERIOR */
    border-bottom: 1px solid #eee;                     /* LINHA LEVE */
}

/* ================================================= */
/* GRADE DE SUB-CLASSES (DENTRO DA EXPANSÃO)        */
/* ================================================= */

/* Grid de sub-classes */
.everlight-subclasses-grid {
    display: grid;                                     /* GRID PARA ITENS */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* COLUNAS FLEXÍVEIS */
    gap: 25px;                                         /* ESPAÇAMENTO ENTRE CARDS */
    margin-top: 20px;                                  /* MARGEM SUPERIOR */
}

/* Card individual de sub-classe */
.everlight-subclass-card {
    background: #f8fafc;                               /* FUNDO LEVE */
    border-radius: 10px;                                /* CANTOS ARREDONDADOS */
    padding: 20px;                                      /* PADDING INTERNO */
    transition: all 0.3s ease;                          /* TRANSIÇÃO SUAVE */
    border: 1px solid #e2e8f0;                          /* BORDA CLARA */
    display: flex;                                      /* FLEX PARA IMAGEM + INFO */
    align-items: center;
    gap: 20px;                                          /* ESPAÇAMENTO ENTRE IMAGEM E INFO */
}

/* Hover no card de sub-classe */
.everlight-subclass-card:hover {
    background: white;                                  /* FUNDO BRANCO AO HOVER */
    border-color: #3498db;                              /* BORDA AZUL */
    box-shadow: 0 6px 12px rgba(52, 152, 219, 0.15);   /* SOMBRA AO HOVER */
    transform: translateY(-3px);                        /* LEVE ELEVAÇÃO */
}

/* Imagem da sub-classe */
.everlight-subclass-image {
    flex-shrink: 0;                                     /* NÃO REDUZIR */
}

.everlight-subclass-img {
    width: 100px;
    height: 100px;                                      /* TAMANHO FIXO */
    object-fit: contain;                                 /* MANDA PROPORÇÃO CORRETA */
    transition: transform 0.3s ease;                    /* TRANSIÇÃO SUAVE */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));     /* SOMBRA LEVE */
}

/* Hover na imagem */
.everlight-subclass-card:hover .everlight-subclass-img {
    transform: scale(1.1);                              /* LEVE AMPLIAÇÃO */
}

/* Informações da sub-classe */
.everlight-subclass-info {
    flex-grow: 1;                                       /* OCUPA ESPAÇO RESTANTE */
}

/* Título da sub-classe */
.everlight-subclass-info h3 {
    margin: 0 0 8px 0;                                  /* MARGEM INFERIOR */
    font-size: 18px;                                    /* TAMANHO DO TÍTULO */
    font-weight: 700;                                   /* NEGRITO */
}

/* Link do título da sub-classe */
.everlight-subclass-info h3 a {
    color: #2c3e50;                                    /* COR PADRÃO */
    text-decoration: none;                              /* SEM SUBLINHADO */
    transition: color 0.2s;                             /* TRANSIÇÃO DE COR */
}

.everlight-subclass-info h3 a:hover {
    color: #3498db;                                    /* AZUL AO PASSAR O MOUSE */
}

/* Descrição da sub-classe */
.everlight-subclass-info p {
    color: #666;                                        /* COR DO TEXTO */
    font-size: 14px;                                    /* TAMANHO DA FONTE */
    line-height: 1.5;                                   /* ALTURA DE LINHA */
    margin: 0;
}

/* ================================================= */
/* ANIMAÇÕES EXTRAS E MELHORIAS                      */
/* ================================================= */

/* -----------------------------
   EFEITO DE CARREGAMENTO PARA AS IMAGENS
   ----------------------------- */
.everlight-class-image {
    position: relative;  /* Necessário para pseudo-elemento de shimmer */
}

.everlight-class-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: loadingShimmer 1.5s infinite;
    pointer-events: none;
}

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

/* -----------------------------
   SETA INDICADORA NO CARD ATIVO
   ----------------------------- */
.everlight-class-card.active::after {
    content: '▼';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    color: #2980b9;
    font-size: 20px;
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from { transform: translateX(-50%) translateY(0); }
    to { transform: translateX(-50%) translateY(5px); }
}

/* -----------------------------
   BOTÃO DE FECHAR (OPCIONAL)
   ----------------------------- */
.everlight-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e74c3c;
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
}

.everlight-close-btn:hover {
    background: #c0392b;
}

/* ================================================= */
/* RESPONSIVIDADE ADICIONAL                         */
/* ================================================= */

/* TABLETS MENORES */
@media (max-width: 768px) {
    .everlight-class-image {
        height: 180px;
        padding: 15px;
    }
    
    .everlight-img-hover {
        max-height: 150px;
    }
    
    .everlight-expansion-content {
        padding: 20px;
    }
    
    .everlight-subclass-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* CELULARES */
@media (max-width: 480px) {
    .everlight-classes-system {
        padding: 0 10px;
    }
    
    .everlight-page-title h1 {
        font-size: 24px;
    }
    
    .everlight-page-title p {
        font-size: 14px;
    }
    
    .everlight-main-grid {
        gap: 15px;
    }
    
    .everlight-class-image {
        height: 150px;
    }
    
    .everlight-img-hover {
        max-height: 120px;
    }
    
    .everlight-class-name {
        padding: 15px;
    }
    
    .everlight-class-title {
        font-size: 18px;
    }
    
    .everlight-subclasses-grid {
        grid-template-columns: 1fr;
    }
}

/* DARK MODE SUPPORT (OPCIONAL) */
@media (prefers-color-scheme: dark) {
    .everlight-classes-system {
        background: transparent;
    }
    
    .everlight-class-card,
    .everlight-expansion-area,
    .everlight-subclass-card {
        background: #2d3748;
        border-color: #4a5568;
    }
    
    .everlight-class-name,
    .everlight-expansion-content {
        background: #2d3748;
    }
    
    .everlight-class-title,
    .everlight-expansion-title,
    .everlight-subclass-info h3 a {
        color: #e2e8f0;
    }
    
    .everlight-class-subtitle,
    .everlight-expansion-description,
    .everlight-subclass-info p {
        color: #a0aec0;
    }
    
    .everlight-class-image {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    }
    
    .everlight-subclass-card:hover {
        background: #4a5568;
    }
}

/* [REMOVIDO] Duplicação de .classes-grid e versão duplicada de .class-item
   Mantida apenas a versão consolidada nas linhas anteriores. */

/* ================================================= */
/* PÁGINA DE CLASSES – EVERLIGHT                     */
/* ================================================= */

/* Container principal da página */
.job-page {
    max-width: 750px;
    margin: 0 0 40px 0;       /* remove auto horizontal */
    padding-left: 0;          /* remove recuo herdado */
}

/* Header da página */
.job-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f6f7f9;
    border: 1px solid #dcdcdc;
    margin-bottom: 25px;
}

/* Título da página */
.job-title h1 {
    margin: 0;
    font-size: 28px;
}

.job-title p {
    margin: 0;
    color: #666;
    font-weight: bold;
}

/* Seções da página - Versão consolidada */
.job-section {
    margin-bottom: 25px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.job-section h2 {
    font-size: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 4px;
}

.job-section h3 {
    font-size: 16px;
    margin-top: 15px;
}

/* Lista de itens */
.job-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
    margin: 10px 0;
}

.job-list li {
    list-style: disc;
    margin-left: 18px;
}

/* ================================================= */
/* TABELA DE ATRIBUTOS                               */
/* ================================================= */
.everlight-attr-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    margin: 20px 0 30px;
    font-size: 14px;
}

.everlight-attr-table th {
    background: #f2ea8c;
    border: 1px solid #cfcfcf;
    padding: 8px;
    text-align: center;
}

.everlight-attr-table td {
    border: 1px solid #cfcfcf;
    padding: 8px;
    text-align: center;
}

/* Hover nas linhas da tabela */
.everlight-attr-table tbody tr:hover {
    background: #f9f9f9;
}

/* ================================================= */
/* PÁGINA DA CLASSE – APRENDIZ                       */
/* ================================================= */

/* Container principal */
.aprendiz-page {
    max-width: 1200px;
    margin: 25px auto;
    padding: 10px;
}

/* Conteúdo principal: texto + infobox */
.aprendiz-content {
    display: flex;
    gap: 24px;
}

/* -----------------------------
   TEXTO PRINCIPAL
   ----------------------------- */
.aprendiz-text {
    flex: 3;
    background: #ffffff;
    padding: 18px;
    border: 1px solid #cfcfcf;
    font-size: 14px;
    line-height: 1.6;
}

.aprendiz-text h2 {
    margin-top: 25px;
    padding-bottom: 5px;
    border-bottom: 2px solid #e0e0e0;
}

/* -----------------------------
   INFOBOX LATERAL
   ----------------------------- */
.aprendiz-infobox {
    flex: 1;
    background: #f8f8f8;
    border: 1px solid #cfcfcf;
    font-size: 13px;
}

/* Título da infobox */
.infobox-title {
    background: #f2ea8c;
    text-align: center;
    font-weight: bold;
    padding: 8px;
    font-size: 16px;
}

/* Área de imagens dentro da infobox */
.infobox-images {
    text-align: center;
    padding: 10px;
}

/* Tabela da infobox */
.infobox-table {
    width: 100%;
    border-collapse: collapse;
}

.infobox-table th,
.infobox-table td {
    border-top: 1px solid #cfcfcf;
    padding: 6px;
    text-align: left;
}

.infobox-table th {
    background: #eeeeee;
    width: 45%;
}

/* ================================================= */
/* INFOBOX – APRENDIZES (VERSÃO CONSOLIDADA)        */
/* ================================================= */

/* Container da infobox - Versão consolidada com flex e float */
.aprendiz-infobox {
    width: 300px;
    background: #f8f8f8;
    border: 1px solid #cfcfcf;
    font-size: 13px;
    float: right;
    margin: 0 0 10px 10px;
    font-family: Arial, sans-serif;
}

/* Para layouts flex (alternativo) */
.aprendiz-content .aprendiz-infobox {
    flex: 1;
    float: none;
    width: auto;
    margin: 0;
}

/* Cabeçalho da infobox */
.aprendiz-header {
    border-radius: 8px;
    color: #0645ad;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    line-height: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

/* Imagem principal */
.aprendiz-main-image {
    text-align: center;
    padding: 10px;
    background: #e6e6e6;
}

/* Título das seções da infobox */
.aprendiz-section-title {
    background: #4a4a4a;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 4px;
    margin-top: 5px;
}

.aprendiz-section-title.dark {
    background: #333;
}

/* Tabs */
.aprendiz-tabs {
    display: flex;
    gap: 10px;
    padding: 6px;
    font-size: 12px;
}

.aprendiz-tabs .tab {
    color: #0645ad;
    cursor: pointer;
}

.aprendiz-tabs .active {
    font-weight: bold;
    text-decoration: underline;
}

/* Sprites */
.aprendiz-sprites {
    text-align: center;
    padding: 6px;
}

/* Tabela de informações */
.aprendiz-info-table {
    width: 100%;
    border-collapse: collapse;
}

.aprendiz-info-table th {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 4px;
    width: 40%;
    text-align: left;
}

.aprendiz-info-table td {
    border: 1px solid #ccc;
    padding: 4px;
}

.aprendiz-info-table a {
    color: #0645ad;
    text-decoration: none;
}

.aprendiz-info-table a:hover {
    text-decoration: underline;
}

/* Ícones de armas na infobox */
.aprendiz-weapons img {
    margin: 2px;
    padding: 2px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    width: 24px;
    height: 24px;
}

/* Tabela de bônus */
.aprendiz-bonus-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.aprendiz-bonus-table th {
    color: #0645ad;
    font-weight: bold;
    padding: 4px;
    border: 1px solid #ccc;
}

.aprendiz-bonus-table td {
    padding: 4px;
    border: 1px solid #ccc;
}

/* [REMOVIDO] Duplicações de .everlight-attr-table, .everlight-cards e .hover-images
   Estas classes já foram definidas anteriormente (linhas 1140 e 331).
   Mantidas apenas as versões principais para evitar conflitos CSS. */

.img-hover img:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* ============================= */
/* TESTE SCRIPTS - CLASSES inicio*/
/* ============================= */

/* =====================================
   SLIDER HORIZONTAL – CONTEÚDOS EXCLUSIVOS
   ===================================== */

/* Container principal do carrossel */
.everlight-carousel {
    position: relative;  /* Permite posicionar setas dentro */
    display: flex;       /* Organiza os elementos horizontalmente */
    align-items: center; /* Centraliza verticalmente conteúdo e setas */
}

/* Botões de navegação (setas) */
.nav-btn {
    background: rgba(0,0,0,0.5); /* Transparência inicial */
    color: white;
    border-radius: 50%;           /* Circulares */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;             /* Suaviza mudanças visuais */
}

/* Hover nos botões deixa a seta totalmente preta */
.nav-btn:hover { 
    background: #000; 
}

/* Wrapper que segura a faixa rolável */
.exclusive-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;  /* Esconde overflow horizontal */
    margin: 20px 0;
}

/* Área rolável (slider real) */
.exclusive-slider {
    display: flex;          /* Mantém imagens lado a lado */
    gap: 18px;              /* Espaçamento entre slides */
    overflow-x: auto;       /* Permite rolagem horizontal */
    scroll-behavior: smooth; /* Rolagem suave */
    padding: 10px 40px;     /* Espaçamento interno */
}

/* Remove barra de rolagem no Webkit (Chrome/Safari) */
.exclusive-slider::-webkit-scrollbar {
    display: none;
}
/* Remove barra de rolagem em Firefox */
.exclusive-slider {
    scrollbar-width: none;
}

/* Cada slide individual */
.exclusive-slide {
    flex: 0 0 auto; /* Impede que o slide encolha ou cresça */
}

/* Imagens dentro do slide */
.exclusive-slide img {
    display: block;
    border-radius: 6px;      /* Cantos arredondados */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* Animação suave */
}

/* Hover sobre a imagem do slide */
.exclusive-slide img:hover {
    transform: translateY(-6px) scale(1.03); /* Leve elevação + zoom */
    box-shadow: 0 10px 22px rgba(0,0,0,0.25); /* Sombra realista */
}

/* Setas de navegação absolutas */
.exclusive-arrow {
    position: absolute;
    top: 50%;                  /* Centraliza verticalmente */
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    width: 34px;
    height: 60px;
    cursor: pointer;
    font-size: 28px;
    z-index: 5;                /* Fica acima dos slides */
}

/* Setas esquerda/direita */
.exclusive-arrow.left { left: 0; }
.exclusive-arrow.right { right: 0; }

/* Hover nas setas aumenta contraste */
.exclusive-arrow:hover {
    background: rgba(0,0,0,0.85);
}

/* [REMOVIDO] Versão duplicada de .everlight-carousel com .carousel-track e .carousel-btn
   Mantida apenas a versão consolidada com .carousel-wrapper abaixo. */

/* ================================================= */
/* CARROSSEL – VERSÃO CONSOLIDADA                    */
/* (Versão principal consolidada com .carousel-wrapper) */
/* ================================================= */

.everlight-carousel {
  position: relative;   /* Permite posicionar setas e elementos dentro */
  width: 100%;          /* Ocupa toda largura do container pai */
  overflow: hidden;     /* Esconde conteúdo que extrapola horizontalmente */
  margin: 30px auto;    /* Centraliza horizontalmente e adiciona espaçamento vertical */
}

/* Wrapper interno do carrossel */
.carousel-wrapper {
    display: flex;         /* Alinha os itens horizontalmente */
    gap: 20px;             /* Espaço entre os itens */
    overflow-x: hidden;    /* Oculta barra de rolagem, JS controla movimentação */
    scroll-behavior: smooth; /* Rolagem suave ao usar setas via JS */
    padding: 40px 0;       /* Espaço vertical para que itens ativos (scale) não sejam cortados */
    white-space: nowrap;    /* Garante que os itens fiquem em linha única */
}

/* Cada item do carrossel */
.carousel-item {
    flex: 0 0 auto;           /* Impede que o item encolha ou cresça */
    transition: transform 0.4s ease, opacity 0.4s ease; /* Suaviza zoom e opacidade */
}

/* Item ativo (em destaque) */
.carousel-item.active {
  opacity: 1;            /* Totalmente visível */
  transform: scale(1.1); /* Leve zoom para destacar */
}

/* Título do item (abaixo da imagem) */
.carousel-title {
  margin-top: 8px;
  font-weight: bold;
}

/* Botões de navegação */
.nav-btn {
  position: absolute;       /* Fixa posição dentro do carrossel */
  top: 50%;                 /* Centraliza verticalmente */
  transform: translateY(-50%);
  font-size: 30px;
  cursor: pointer;
  z-index: 10;              /* Fica acima dos itens */
  user-select: none;        /* Impede seleção de texto */
  padding: 10px;
}

/* Posições específicas das setas */
.left-btn { left: 0; }
.right-btn { right: 0; }

/* ================================================= */
/* CARD – CONTEÚDOS EXCLUSIVOS                       */
/* ================================================= */
/* (Sem regras específicas ainda, mas é placeholder para estilo dos cards) */

/* ================================================= */
/* HIDE – SEÇÕES DOBRÁVEIS (accordion) - CONSOLIDADA */
/* ================================================= */
/* Estilos adicionais para .job-section com accordion */

/* Estilo do título da seção (summary da tag <details>) */
.job-section summary {
    padding: 12px 15px;
    cursor: pointer;          /* Indica que é clicável */
    font-weight: bold;
    list-style: none;         /* Remove a seta padrão do browser */
    transition: background 0.3s; /* Suaviza mudança de cor no hover */
    outline: none;            /* Remove contorno padrão ao focar */
    margin-bottom: 0;
}

/* Hover no título da seção */
.job-section summary:hover {
    filter: brightness(0.95); /* Leve escurecimento ao passar o mouse */
}

/* Cores específicas por categoria de classe */
.human-job summary { background-color: #fdf2d9; } /* Bege */
.expanded-job summary { background-color: #eef2ad; } /* Amarelo */
.doram-job summary { background-color: #e9f5e9; } /* Verde */

/* Container interno da seção (conteúdo que abre) */
.job-content {
    display: flex;               /* Alinha conteúdo horizontalmente */
    align-items: center;         /* Centraliza verticalmente */
    justify-content: space-around; /* Espaço igual entre elementos */
    background: #f9f9f9;
    padding: 20px;
    flex-wrap: wrap;             /* Quebra linha em telas menores */
    gap: 15px;                   /* Espaçamento entre elementos */
}

/* Estilo das transclasses (sub-classes) */
.trans-name {
    color: #2e7d32;       /* Verde destaque */
    font-weight: bold;
}

/* ================================================= */
/* ÁRVORE DE CLASSE                                 */
/* ================================================= */

/* [CONSOLIDADO] Versão duplicada de .job-section já consolidada nas linhas anteriores.
   Mantida apenas a estrutura do .job-container sem redundância de estilos. */

.job-container { 
    font-family: sans-serif;
    max-width: 649px;
    margin: 10px auto;
}

/* Conteúdo interno da seção */
.content { 
    display: flex;               /* Alinha os elementos em linha */
    align-items: center;         /* Centraliza verticalmente */
    justify-content: center;     /* Centraliza horizontalmente */
    background: #fff;            /* Fundo branco */
    padding: 20px;               /* Espaçamento interno */
    flex-wrap: wrap;             /* Permite quebra de linha em telas menores */
    gap: 15px;                   /* Espaço entre elementos */
}

/* Caixa de evolução (sub-itens dentro da árvore) */
.evo-box { 
    border: 1px dashed #bbb;    /* Borda tracejada */
    padding: 12px;               /* Espaçamento interno */
    background: #fafafa;         /* Fundo levemente cinza */
    border-radius: 5px;          /* Cantos arredondados */
    display: flex;
    flex-direction: column;      /* Itens empilhados verticalmente */
    gap: 10px;                   /* Espaçamento interno entre itens */
}

/* Linha horizontal dentro da caixa de evolução */
.row { 
    display: flex;               /* Alinha itens horizontalmente */
    align-items: center;         /* Centraliza verticalmente */
    gap: 10px;                   /* Espaçamento entre elementos da linha */
}

/* Nome de transclasses / sub-classes */
.trans { 
    color: #2e7d32;              /* Verde para destaque */
    font-weight: bold;
}

/* Setas indicativas */
.arrow { 
    color: #888;                 /* Cinza neutro */
    font-weight: bold;
}

/* ================================================= */
/* CARROSSEL INFOBOX CLASSES                         */
/* ================================================= */

/* Container principal do carrossel da Infobox */
.carrossel-everlight { 
    width: 200px;                /* Largura do container */
    height: 300px;               /* Altura ideal para artes de Ragnarok */
    margin: 0 auto !important;   /* Centraliza o carrossel */
    overflow: hidden;            /* Esconde imagens fora do frame */
    position: relative;          /* Permite animação e posicionamento interno */
    display: block;
}

/* Wrapper interno que desliza */
.carrossel-slider { 
    display: flex;               /* Itens alinhados horizontalmente */
    width: 400px;                /* Largura total (2 imagens de 200px cada) */
    animation: animaCarrossel 10s infinite ease-in-out; /* Animação automática do carrossel */
}

/* Cada item do carrossel */
.carrossel-item { 
    width: 200px;                /* Largura fixa igual ao container */
    flex-shrink: 0;              /* Evita que encolha */
    text-align: center;          /* Centraliza imagem e título */
}

/* Imagem dentro do item */
.carrossel-item img { 
    max-width: 200px;            /* Largura máxima */
    height: auto;                /* Mantém proporção */
    margin: 0 auto;              /* Centraliza horizontalmente */
}

/* Keyframes da animação do carrossel */
@keyframes animaCarrossel { 
    0%, 45% { transform: translateX(0); }     /* Começa parado */
    50%, 95% { transform: translateX(-200px); } /* Desliza para a próxima imagem */
    100% { transform: translateX(0); }        /* Retorna ao início */
}

/* ================================================= */
/* GUIA MARÉ INFERNAL                               */
/* ================================================= */

/* Container geral do guia */
.guia-mare { 
    background: #f9f9f9;       /* Fundo neutro */
    border: 1px solid #aaa;    /* Borda clara */
    padding: 15px;             /* Espaçamento interno */
    border-radius: 8px;        /* Cantos arredondados */
}

/* Cabeçalho do guia */
.header-mare { 
    background: linear-gradient(90deg, #4b0082, #800000); /* Gradiente roxo/bermelo */
    color: white;             /* Texto branco */
    padding: 10px;            /* Espaçamento */
    border-radius: 5px;       /* Cantos arredondados */
    font-weight: bold;        
    font-size: 1.2em;         /* Texto maior */
    text-align: center;
    margin-bottom: 10px;      /* Espaço abaixo do header */
}

/* Caixas de regra individual */
.regra-box { 
    border-left: 5px solid #800000; /* Barra lateral vermelha */
    background: #fff5f5;            /* Fundo rosa bem claro */
    padding: 10px;                   /* Espaço interno */
    margin: 10px 0;                  /* Espaço entre caixas */
}

/* Títulos de mapas ou seções internas */
.map-title { 
    font-weight: bold;
    color: #800000;                /* Vermelho */
    border-bottom: 1px solid #ddd; /* Linha de separação */
    margin-bottom: 5px;
    display: block;                /* Garante que fique em linha própria */
}

/* ================================================= */
/* CSS DOS COMANDOS                                 */
/* ================================================= */

/* Cabeçalho de comandos */
.header-comandos { 
    background: linear-gradient(90deg, #333, #555); /* Gradiente escuro */
    color: white;           
    padding: 10px;         
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
}

/* Código de comando */
.cmd-code { 
    color: #800000;           /* Vermelho */
    font-weight: bold;
    background: #eee;         /* Fundo claro */
    padding: 2px 5px;         /* Espaçamento interno */
    border-radius: 3px;       
    font-family: monospace;   /* Fonte de código */
}

/* Código VIP */
.vip-code { 
    color: #b8860b;           /* Dourado */
    font-weight: bold;
    background: #fffdf5;      
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
    border: 1px solid #daa520; /* Borda dourada */
}

/* ================================================= */
/* ÁRVORE DE HABILIDADES – DORAM                     */
/* ================================================= */

/* Container geral da árvore */
.doram-container {
    position: relative;       /* Permite posicionamento absoluto das caixas */
    width: 100%;
    max-width: 850px;         /* Limita tamanho */
    height: 900px;            /* Altura fixa para a árvore */
    background-color: #f9f9f9; 
    font-family: sans-serif;  
    margin: 0 auto;           /* Centraliza horizontalmente */
    overflow-x: auto;         /* Scroll horizontal se ultrapassar largura */
}

/* Cada caixa de habilidade */
.doram-skill { 
    position: absolute;       /* Posicionamento livre dentro do container */
    display: flex;            
    align-items: center;      
    width: 170px;             
    height: 42px;             
    background: linear-gradient(180deg, #5baaff 0%, #3090f0 100%); /* Azul gradiente */
    border: 1px solid #2b80dd; 
    border-radius: 6px;       
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    color: white;             
    font-size: 13px;          
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    z-index: 10;              
    padding: 0 5px;           
    box-sizing: border-box;   
}

/* Área do ícone da habilidade */
.doram-icon { 
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.2); 
    border-radius: 4px;      
    margin-right: 8px;        
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;         
}

/* Remove margens de imagens */
.doram-icon img { 
    margin: 0;
    padding: 0;
    background: none;
}

/* Nome da habilidade */
.doram-name { 
    line-height: 1.1;        
    flex: 1;                  
}

/* Etiquetas de nível */
.doram-lvl { 
    position: absolute;       
    background: white;        
    color: black;             
    font-size: 11px;          
    font-weight: bold;        
    padding: 1px 4px;         
    border-radius: 4px;       
    z-index: 11;              
    white-space: nowrap;      
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Posições padrões das etiquetas */
.lvl-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); } /* Centro embaixo */
.lvl-right { top: 12px; right: -40px; } /* Lateral direita */

/* ================================================= */
/* LINHAS CONECTORAS (CSS PURO)                     */
/* ================================================= */
/* Faz as colunas ficarem lado a lado */
.skill-grid-aprendiz {
    display: flex;
    gap: 30px; /* Espaço entre as colunas */
    align-items: flex-start;
}

/* Estilo de cada linha de habilidade */
.skill-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    padding-left: 8px;
    min-width: 200px;
}

/* Cores das barrinhas laterais (conforme Foto 2) */
.s-passiva  { border-left: 5px solid #90EE90; } /* Verde */
.s-ofensiva { border-left: 5px solid #FFB6C1; } /* Vermelho/Rosa */
.s-suporte  { border-left: 5px solid #B0E0E6; } /* Azul claro */
.s-outros   { border-left: 5px solid #BEBEBE; } /* Cinza */

.skill-link {
    margin-left: 10px;
    font-size: 14px;
}



/* --- FIM DO CSS --- */
/* Container da Infobox à direita */
.skill-box-right {
    float: right;
    width: 350px;
    border: 1px solid #aaaaaa;
    background-color: #f9f9f9;
    margin: 0 0 1em 1em;
    padding: 0;
    font-family: sans-serif;
    font-size: 90%;
}

/* Cabeçalhos cinzas da Infobox e da Tabela */
.skill-header-main {
    background-color: #eaecf0;
    border-bottom: 1px solid #aaaaaa;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

.skill-table-subhead {
    background-color: #d1d4d9;
    font-weight: bold;
    text-align: center;
}

/* Tabela de Níveis à esquerda */
.skill-levels-table {
    border-collapse: collapse;
    width: 50%;
    float: left;
    margin-bottom: 1em;
}

.skill-levels-table th, .skill-levels-table td {
    border: 1px solid #aaaaaa;
    padding: 4px 8px;
    font-size: 13px;
}

.skill-levels-table th {
    background-color: #eaecf0;
}

/* Ajustes de texto e imagem */
.skill-img-frame {
    background: white;
    padding: 10px;
    text-align: center;
}

.skill-label {
    background-color: #eaecf0;
    font-weight: bold;
    width: 30%;
    border-top: 1px solid #aaaaaa;
}

.skill-value {
    background-color: #fdfdfd;
    border-top: 1px solid #aaaaaa;
}
MediaWiki:Common.css: mudanças entre as edições

Edição das 16h45min de 30 de janeiro de 2026

Menu de navegação

Pesquisa
