@charset "UTF-8"; /* Define codificação UTF-8 */

/* Reset global para consistência */
* {
    margin: 0; /* Remove margens */
    padding: 0; /* Remove espaçamentos */
    box-sizing: border-box; /* Inclui padding e border no cálculo do tamanho */
}

/* Variáveis globais */
:root {
    --cor-fundo: #cfcea4;           /* Cor de fundo padrão */
    --cor-texto: #232221;           /* Cor do texto padrão */
    --cor-menu: var(--cor-texto);    /* Cor do menu (igual à do texto) */
    --cor-primaria: #cea76b;         /* Cor primária */
    --cor-secundaria: #a78964;       /* Cor secundária */
    --cor-destaque: #d9534f;         /* Cor de destaque */
    --cor-sucesso: #28a745;          /* Cor para sucesso */
    --cor-alerta: #ffc107;           /* Cor para alerta */
    --cor-informacao: #17a2b8;        /* Cor para informação */
    --cor-link: #007bff;             /* Cor para links */
    --card-bg: #ffffff;             /* Fundo dos cards */
    --campo-readonly-bg: #e0e0e0;    /* Fundo para campos não editáveis */
    --campo-readonly-border: #ccc;   /* Borda para campos não editáveis */
    --campo-readonly-color: #555;    /* Texto para campos não editáveis */

    /* Miniaturas dos temas originais */
    --theme0-primary: #cea76b;  /* Tema Padrão */
    --theme1-primary: #d4af37;  /* Tema Sagrado */
    --theme2-primary: #8a2be2;  /* Tema Arcano */
    --theme3-primary: #6c7ae0;  /* Tema Oráculo */
    --theme4-primary: #90a4ae;  /* Tema Lunar */
    --theme5-primary: #fb8c00;  /* Tema Solar */
    --theme6-primary: #4a148c;  /* Tema Estelar */
    --theme7-primary: #00acc1;  /* Tema Sereno */
    --theme8-primary: #8e24aa;  /* Tema Etereo */
    --theme9-primary: #1565c0;  /* Tema Místico */

    /* Miniaturas dos novos temas Neon e Magia */
    --theme10-primary: #39ff14;  /* Neon Arcanum */
    --theme11-primary: #00ff9c;  /* Neon Arcane */
    --theme12-primary: #ff6ec7;  /* Neon Eclipse */
    --theme13-primary: #66ff66;  /* Neon Enchantment */
    --theme14-primary: #00e5ff;  /* Neon Spellbound */
    --theme15-primary: #ff007f;  /* Neon Mystic */
    --theme16-primary: #00ccff;  /* Neon Wizardry */
    --theme17-primary: #00ffcc;  /* Neon Sorcery */
    --theme18-primary: #ff66a3;  /* Neon Enigma */
    --theme19-primary: #00ff99;  /* Neon Fantasia */
}

/* ================================
   Definição dos Temas
================================ */

/* Tema 0 – Padrão */
body.theme0 {
    --cor-fundo: #cfcea4;
    --cor-texto: #232221;
    --cor-menu: var(--cor-texto);
    --cor-primaria: #cea76b;
    --cor-secundaria: #a78964;
    --cor-destaque: #d9534f;
    --cor-sucesso: #28a745;
    --cor-alerta: #ffc107;
    --cor-informacao: #17a2b8;
    --cor-link: #007bff;
    --card-bg: #ffffff;
}

/* Tema 1 – Sagrado */
body.theme1 {
    --cor-fundo: #1c1c2e;
    --cor-texto: #e0e0e0;
    --cor-menu: #232221;
    --cor-primaria: #d4af37;
    --cor-secundaria: #6a0dad;
    --cor-destaque: #dc143c;
    --cor-sucesso: #27ae60;
    --cor-alerta: #e67e22;
    --cor-informacao: #16a085;
    --cor-link: #d4af37;
    --card-bg: #2c2c3e;
}

/* Tema 2 – Arcano */
body.theme2 {
    --cor-fundo: #f7f3f2;
    --cor-texto: #333333;
    --cor-menu: #f7f3f2;
    --cor-primaria: #8a2be2;
    --cor-secundaria: #b19cd9;
    --cor-destaque: #ff69b4;
    --cor-sucesso: #2ecc71;
    --cor-alerta: #f39c12;
    --cor-informacao: #3498db;
    --cor-link: #8a2be2;
    --card-bg: #ffffff;
}

/* Tema 3 – Oráculo */
body.theme3 {
    --cor-fundo: #2b2b2b;
    --cor-texto: #e0e0e0;
    --cor-menu: #232221;
    --cor-primaria: #6c7ae0;
    --cor-secundaria: #8e44ad;
    --cor-destaque: #e74c3c;
    --cor-sucesso: #27ae60;
    --cor-alerta: #f1c40f;
    --cor-informacao: #3498db;
    --cor-link: #2980b9;
    --card-bg: #3a3a3a;
}

/* Tema 4 – Lunar */
body.theme4 {
    --cor-fundo: #e0e0e0;
    --cor-texto: #333333;
    --cor-menu: var(--cor-texto);
    --cor-primaria: #90a4ae;
    --cor-secundaria: #78909c;
    --cor-destaque: #ff7043;
    --cor-sucesso: #66bb6a;
    --cor-alerta: #ffca28;
    --cor-informacao: #29b6f6;
    --cor-link: #039be5;
    --card-bg: #ffffff;
}

/* Tema 5 – Solar */
body.theme5 {
    --cor-fundo: #fff3e0;
    --cor-texto: #4e342e;
    --cor-menu: var(--cor-texto);
    --cor-primaria: #fb8c00;
    --cor-secundaria: #f57c00;
    --cor-destaque: #e64a19;
    --cor-sucesso: #43a047;
    --cor-alerta: #fdd835;
    --cor-informacao: #1e88e5;
    --cor-link: #1976d2;
    --card-bg: #ffffff;
}

/* Tema 6 – Estelar */
body.theme6 {
    --cor-fundo: #0d0d0d;
    --cor-texto: #e0e0e0;
    --cor-menu: #ffffff;
    --cor-primaria: #4a148c;
    --cor-secundaria: #6a1b9a;
    --cor-destaque: #f06292;
    --cor-sucesso: #66bb6a;
    --cor-alerta: #ffeb3b;
    --cor-informacao: #2196f3;
    --cor-link: #1e88e5;
    --card-bg: #222222;
}

/* Tema 7 – Sereno */
body.theme7 {
    --cor-fundo: #e0f7fa;
    --cor-texto: #006064;
    --cor-menu: #232221;
    --cor-primaria: #00acc1;
    --cor-secundaria: #26c6da;
    --cor-destaque: #ff7043;
    --cor-sucesso: #66bb6a;
    --cor-alerta: #ffa726;
    --cor-informacao: #29b6f6;
    --cor-link: #039be5;
    --card-bg: #ffffff;
}

/* Tema 8 – Etereo */
body.theme8 {
    --cor-fundo: #fafafa;
    --cor-texto: #212121;
    --cor-menu: #e0e0e0;
    --cor-primaria: #8e24aa;
    --cor-secundaria: #ab47bc;
    --cor-destaque: #f44336;
    --cor-sucesso: #43a047;
    --cor-alerta: #ff9800;
    --cor-informacao: #1e88e5;
    --cor-link: #1976d2;
    --card-bg: #ffffff;
}

/* Tema 9 – Místico */
body.theme9 {
    --cor-fundo: #e3f2fd;
    --cor-texto: #0d47a1;
    --cor-menu: #e0e0e0;
    --cor-primaria: #1565c0;
    --cor-secundaria: #1976d2;
    --cor-destaque: #d81b60;
    --cor-sucesso: #2e7d32;
    --cor-alerta: #f9a825;
    --cor-informacao: #0288d1;
    --cor-link: #0277bd;
    --card-bg: #ffffff;
}

/* Tema 10 – Neon Arcanum */
body.theme10 {
    --cor-fundo: #000000;
    --cor-texto: #e0e0e0;
    --cor-menu: #111111;
    --cor-primaria: #39ff14;
    --cor-secundaria: #ff073a;
    --cor-destaque: #00ffff;
    --cor-sucesso: #7fff00;
    --cor-alerta: #ff8c00;
    --cor-informacao: #ff00ff;
    --cor-link: #39ff14;
    --card-bg: #111111;
}

/* Tema 11 – Neon Arcane */
body.theme11 {
    --cor-fundo: #0a0a0a;
    --cor-texto: #f0f0f0;
    --cor-menu: #0a0a0a;
    --cor-primaria: #00ff9c;
    --cor-secundaria: #ff0090;
    --cor-destaque: #eaff00;
    --cor-sucesso: #00ff00;
    --cor-alerta: #ff5e00;
    --cor-informacao: #7df9ff;
    --cor-link: #00ff9c;
    --card-bg: #121212;
}

/* Tema 12 – Neon Eclipse */
body.theme12 {
    --cor-fundo: #121212;
    --cor-texto: #f8f8f8;
    --cor-menu: #1c1c1c;
    --cor-primaria: #ff6ec7;
    --cor-secundaria: #a0c4ff;
    --cor-destaque: #ffd700;
    --cor-sucesso: #00fa9a;
    --cor-alerta: #ff4500;
    --cor-informacao: #7b68ee;
    --cor-link: #ff6ec7;
    --card-bg: #1c1c1c;
}

/* Tema 13 – Cyber */
body.theme13 {
    --cor-fundo: #0f0f0f;
    --cor-texto: #e6e6e6;
    --cor-menu: #0f0f0f;
    --cor-primaria: #66ff66;
    --cor-secundaria: #ff66ff;
    --cor-destaque: #66ccff;
    --cor-sucesso: #99ff99;
    --cor-alerta: #ff9933;
    --cor-informacao: #cc99ff;
    --cor-link: #66ff66;
    --card-bg: #202020;
}

/* Tema 14 – Neon Spellbound */
body.theme14 {
    --cor-fundo: #1a1a1a;
    --cor-texto: #fafafa;
    --cor-menu: #1a1a1a;
    --cor-primaria: #00e5ff;
    --cor-secundaria: #ff00d4;
    --cor-destaque: #ffea00;
    --cor-sucesso: #00ff00;
    --cor-alerta: #ff6f00;
    --cor-informacao: #b388ff;
    --cor-link: #00e5ff;
    --card-bg: #262626;
}

/* Tema 15 – Neon Mystic */
body.theme15 {
    --cor-fundo: #0d0d0d;
    --cor-texto: #e0e0e0;
    --cor-menu: #e0e0e0;
    --cor-primaria: #ff007f;
    --cor-secundaria: #00ffef;
    --cor-destaque: #fffb00;
    --cor-sucesso: #00ff7f;
    --cor-alerta: #ff4500;
    --cor-informacao: #ff00ff;
    --cor-link: #ff007f;
    --card-bg: #1b1b1b;
}

/* Tema 16 – Neon Wizardry */
body.theme16 {
    --cor-fundo: #101010;
    --cor-texto: #f5f5f5;
    --cor-menu: #f5f5f5;
    --cor-primaria: #00ccff;
    --cor-secundaria: #ff66cc;
    --cor-destaque: #ccff00;
    --cor-sucesso: #66ff66;
    --cor-alerta: #ff9933;
    --cor-informacao: #ff33cc;
    --cor-link: #00ccff;
    --card-bg: #1a1a1a;
}

/* Tema 17 – Neon Sorcery */
body.theme17 {
    --cor-fundo: #080808;
    --cor-texto: #f0f0f0;
    --cor-menu: #080808;
    --cor-primaria: #00ffcc;
    --cor-secundaria: #ff3399;
    --cor-destaque: #ffff33;
    --cor-sucesso: #66ff33;
    --cor-alerta: #ff7700;
    --cor-informacao: #cc66ff;
    --cor-link: #00ffcc;
    --card-bg: #121212;
}

/* Tema 18 – Neon Enigma */
body.theme18 {
    --cor-fundo: #0b0b0b;
    --cor-texto: #e8e8e8;
    --cor-menu: #e8e8e8;
    --cor-primaria: #ff66a3;
    --cor-secundaria: #66d9ff;
    --cor-destaque: #ffff66;
    --cor-sucesso: #66ff66;
    --cor-alerta: #ff884d;
    --cor-informacao: #a366ff;
    --cor-link: #ff66a3;
    --card-bg: #1d1d1d;
}

/* Tema 19 – Neon Fantasia */
body.theme19 {
    --cor-fundo: #0e0e0e;
    --cor-texto: #f7f7f7;
    --cor-menu: #0e0e0e;
    --cor-primaria: #00ff99;
    --cor-secundaria: #ff3399;
    --cor-destaque: #ffff00;
    --cor-sucesso: #33ff33;
    --cor-alerta: #ff5e33;
    --cor-informacao: #9933ff;
    --cor-link: #00ff99;
    --card-bg: #171717;
}

/* Painel Seletor de Temas */
#theme-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* Define a cor específica de cada opção via custom property */
#theme-panel .theme-option[data-theme="theme0"] { --option-bg: var(--theme0-primary); }
#theme-panel .theme-option[data-theme="theme1"] { --option-bg: var(--theme1-primary); }
#theme-panel .theme-option[data-theme="theme2"] { --option-bg: var(--theme2-primary); }
#theme-panel .theme-option[data-theme="theme3"] { --option-bg: var(--theme3-primary); }
#theme-panel .theme-option[data-theme="theme4"] { --option-bg: var(--theme4-primary); }
#theme-panel .theme-option[data-theme="theme5"] { --option-bg: var(--theme5-primary); }
#theme-panel .theme-option[data-theme="theme6"] { --option-bg: var(--theme6-primary); }
#theme-panel .theme-option[data-theme="theme7"] { --option-bg: var(--theme7-primary); }
#theme-panel .theme-option[data-theme="theme8"] { --option-bg: var(--theme8-primary); }
#theme-panel .theme-option[data-theme="theme9"] { --option-bg: var(--theme9-primary); }
#theme-panel .theme-option[data-theme="theme10"] { --option-bg: var(--theme10-primary); }
#theme-panel .theme-option[data-theme="theme11"] { --option-bg: var(--theme11-primary); }
#theme-panel .theme-option[data-theme="theme12"] { --option-bg: var(--theme12-primary); }
#theme-panel .theme-option[data-theme="theme13"] { --option-bg: var(--theme13-primary); }
#theme-panel .theme-option[data-theme="theme14"] { --option-bg: var(--theme14-primary); }
#theme-panel .theme-option[data-theme="theme15"] { --option-bg: var(--theme15-primary); }
#theme-panel .theme-option[data-theme="theme16"] { --option-bg: var(--theme16-primary); }
#theme-panel .theme-option[data-theme="theme17"] { --option-bg: var(--theme17-primary); }
#theme-panel .theme-option[data-theme="theme18"] { --option-bg: var(--theme18-primary); }
#theme-panel .theme-option[data-theme="theme19"] { --option-bg: var(--theme19-primary); }

.theme-option {
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

.theme-option::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--option-bg);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease-in-out;
    z-index: 0;
}

.theme-option.active::before {
    transform: scaleY(1);
}

.theme-option > * {
    position: relative;
    z-index: 1;
}

.theme-option .color-box {
    width: 65px;
    height: 15px;
    border-radius: 6px 6px 0 0;
    border: 3px solid rgba(0, 0, 0, 0);
}

#theme-panel .theme-option[data-theme="theme0"] .color-box { background-color: var(--theme0-primary); }
#theme-panel .theme-option[data-theme="theme1"] .color-box { background-color: var(--theme1-primary); }
#theme-panel .theme-option[data-theme="theme2"] .color-box { background-color: var(--theme2-primary); }
#theme-panel .theme-option[data-theme="theme3"] .color-box { background-color: var(--theme3-primary); }
#theme-panel .theme-option[data-theme="theme4"] .color-box { background-color: var(--theme4-primary); }
#theme-panel .theme-option[data-theme="theme5"] .color-box { background-color: var(--theme5-primary); }
#theme-panel .theme-option[data-theme="theme6"] .color-box { background-color: var(--theme6-primary); }
#theme-panel .theme-option[data-theme="theme7"] .color-box { background-color: var(--theme7-primary); }
#theme-panel .theme-option[data-theme="theme8"] .color-box { background-color: var(--theme8-primary); }
#theme-panel .theme-option[data-theme="theme9"] .color-box { background-color: var(--theme9-primary); }
#theme-panel .theme-option[data-theme="theme10"] .color-box { background-color: var(--theme10-primary); }
#theme-panel .theme-option[data-theme="theme11"] .color-box { background-color: var(--theme11-primary); }
#theme-panel .theme-option[data-theme="theme12"] .color-box { background-color: var(--theme12-primary); }
#theme-panel .theme-option[data-theme="theme13"] .color-box { background-color: var(--theme13-primary); }
#theme-panel .theme-option[data-theme="theme14"] .color-box { background-color: var(--theme14-primary); }
#theme-panel .theme-option[data-theme="theme15"] .color-box { background-color: var(--theme15-primary); }
#theme-panel .theme-option[data-theme="theme16"] .color-box { background-color: var(--theme16-primary); }
#theme-panel .theme-option[data-theme="theme17"] .color-box { background-color: var(--theme17-primary); }
#theme-panel .theme-option[data-theme="theme18"] .color-box { background-color: var(--theme18-primary); }
#theme-panel .theme-option[data-theme="theme19"] .color-box { background-color: var(--theme19-primary); }

.theme-option span {
    font-size: 14px;
    color: var(--cor-texto);
}

.theme-option.active .theme-name {
    color: var(--cor-menu);
}