/*
    NOVO ESTILO: TEMA ESCURO MODERNO (Space-Tech)
    Cores:
    - Fundo: #0c0c0e (Agora é o fallback, o principal é o gradiente)
    - Principal: #ececec (branco suave)
    - Destaque: #44aaff (azul claro)
    - Secundário (sanidade): #8a4dff (roxo)
    - Perigo (vida): #ff5555 (vermelho)
    - Bordas e divisores: #333333
*/

:root {
    --dominant-color: #44aaff;
    --secondary-color: #8a4dff;
    --danger-color: #ff5555;
}

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

body {
    background: #0c0c0e; /* Cor de fallback caso a animação não carregue */
    color: #ececec;
    font-family: 'Share Tech Mono', monospace;
    padding: 20px;
    position: relative;
}

/* ================================== */
/* ESTILOS DO HISTÓRICO DE ROLAGENS */
/* ================================== */

.secao-historico {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #333333;
    width: 100%;
}

.secao-historico h3 {
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
    margin-bottom: 15px;
    text-align: center;
}

.historico-controles {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.historico-controles button {
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}

#btn-limpar-historico {
    background-color: var(--danger-color);
    color: white;
}

#btn-limpar-historico:hover {
    background-color: #ff3333;
    transform: translateY(-2px);
}

#btn-exportar-historico {
    background-color: var(--dominant-color);
    color: #0c0c0e;
}

#btn-exportar-historico:hover {
    background-color: #fff;
    transform: translateY(-2px);
}

.lista-historico {
    max-height: 400px;
    overflow-y: auto;
    background: #1a1a1e;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 10px;
}

.item-historico {
    background: #28282e;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.item-historico:hover {
    background: #333338;
    border-color: var(--dominant-color);
}

.item-historico:last-child {
    margin-bottom: 0;
}

.historico-tipo {
    font-weight: bold;
    color: var(--dominant-color);
    margin-bottom: 5px;
    font-size: 0.9em;
}

.historico-detalhes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.historico-resultado {
    font-weight: bold;
    font-size: 1.1em;
}

.historico-dados {
    color: #999;
    font-size: 0.85em;
    font-family: 'Courier New', monospace;
}

.historico-timestamp {
    color: #666;
    font-size: 0.8em;
    text-align: right;
    width: 100%;
    margin-top: 5px;
}

/* Classes de resultado para o histórico */
.historico-sucesso { color: #00ff00; }
.historico-falha { color: #ff4444; }
.historico-extremo { 
    color: gold; 
    text-shadow: 0 0 5px gold;
}
.historico-otimo { color: chartreuse; }
.historico-normal { color: #cccccc; }
.historico-desastre { 
    color: #ff0000; 
    font-weight: bold;
}

/* Scrollbar personalizada para o histórico */
.lista-historico::-webkit-scrollbar {
    width: 8px;
}

.lista-historico::-webkit-scrollbar-track {
    background: #1a1a1e;
    border-radius: 4px;
}

.lista-historico::-webkit-scrollbar-thumb {
    background: var(--dominant-color);
    border-radius: 4px;
}

.lista-historico::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

/* Responsividade */
@media (max-width: 768px) {
    .historico-controles {
        flex-direction: column;
        align-items: center;
    }
    
    .historico-controles button {
        max-width: 100%;
        width: 100%;
    }
    
    .historico-detalhes {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .lista-historico {
        max-height: 300px;
    }
}

/* ================================== */
/* ESTILOS DO MENU DE CONFIGURAÇÕES */
/* ================================== */

.config-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: rgba(26, 26, 30, 0.9);
    border: 2px solid var(--dominant-color);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 5px;
    z-index: 1000;
    transition: all 0.3s ease;
}

.config-toggle:hover {
    background: var(--dominant-color);
    transform: scale(1.1);
}

.config-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--dominant-color);
    transition: all 0.3s ease;
}

.config-toggle:hover span {
    background: #0c0c0e;
}

.config-menu {
    position: fixed;
    top: 0;
    right: -400px;
    width: 350px;
    height: 100vh;
    background: rgba(26, 26, 30, 0.95);
    backdrop-filter: blur(10px);
    border-left: 2px solid var(--dominant-color);
    z-index: 999;
    transition: right 0.3s ease;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
}

.config-menu.open {
    right: 0;
}

.config-sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.config-header {
    padding: 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(42, 42, 46, 0.8);
}

.config-header h3 {
    color: var(--dominant-color);
    margin: 0;
    text-shadow: 0 0 5px var(--dominant-color);
}

.btn-close {
    background: none;
    border: none;
    color: var(--dominant-color);
    font-size: 24px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.btn-close:hover {
    background: var(--dominant-color);
    color: #0c0c0e;
}

.config-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.config-section {
    margin-bottom: 30px;
}

.config-section h4 {
    color: var(--dominant-color);
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
    text-shadow: 0 0 3px var(--dominant-color);
}

.config-btn {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: #2a2a2e;
    border: 1px solid #333;
    border-radius: 6px;
    color: #ececec;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Share Tech Mono', monospace;
    text-align: left;
}

.config-btn:hover {
    background: var(--dominant-color);
    color: #0c0c0e;
    transform: translateX(5px);
    border-color: var(--dominant-color);
}

.config-btn.danger {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.config-btn.danger:hover {
    background: var(--danger-color);
    color: #fff;
}

.config-color {
    margin-top: 15px;
}

.config-color label {
    display: block;
    margin-bottom: 8px;
    color: var(--dominant-color);
    font-size: 0.9em;
}

/* Overlay para quando o menu estiver aberto */
.config-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 998;
    display: none;
}

.config-overlay.active {
    display: block;
}

/* Responsividade */
@media (max-width: 480px) {
    .config-menu {
        width: 300px;
    }
    
    .config-toggle {
        top: 10px;
        right: 10px;
    }
}

/* Ajuste para o seletor de cores no menu */
#config-cor-picker .cor-picker-display {
    width: 100%;
    height: 40px;
}

#config-cor-picker .cor-picker-paleta {
    width: 100%;
    left: 0;
}

/* NOVO: Fundo animado que cobre toda a tela */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    transition: background-image 0.5s ease-in-out;
    background-image:
        radial-gradient(at 0% 0%, var(--dominant-color), transparent 40%),
        radial-gradient(at 100% 0%, var(--dominant-color), transparent 40%),
        radial-gradient(at 0% 100%, var(--dominant-color), transparent 40%),
        radial-gradient(at 100% 100%, var(--dominant-color), transparent 40%);
    background-size: 200vw 200vh, 180vw 180vh, 220vw 220vh, 190vw 190vh;
    background-repeat: no-repeat;
    animation: move-gradient 30s linear infinite alternate;
    filter: brightness(0.8); /* Suaviza a cor do fundo */
    opacity: 0.2; /* Deixa o efeito sutil e elegante */
}

/* Animação para mover o gradiente */
@keyframes move-gradient {
    0% { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; }
    25% { background-position: 50% 100%, 0% 50%, 50% 0%, 100% 50%; }
    50% { background-position: 100% 0%, 0% 100%, 100% 100%, 0% 0%; }
    75% { background-position: 0% 50%, 50% 0%, 100% 50%, 50% 100%; }
    100% { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; }
}

.ficha-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(26, 26, 30, 0.9); /* Fundo semi-transparente */
    backdrop-filter: blur(5px); /* Efeito de vidro fosco */
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.ficha-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    z-index: 1000;
    transition: background 0.5s;
}

/* Efeitos de Status (Lesão Grave, Choque, etc.) */
.ficha-container.lesao-grave {
    box-shadow: 0 0 15px var(--danger-color);
    border: 2px solid var(--danger-color);
    animation: pulsarVermelhoBorda 1s infinite;
}

.ficha-container.em-choque {
    box-shadow: 0 0 15px var(--dominant-color);
    border: 2px solid var(--dominant-color);
    animation: pulsarAzul 1.2s infinite;
}

.ficha-container.inconsciente::before {
    background: rgba(0, 0, 0, 0.7);
}

.ficha-container.inconsciente .foto-personagem {
    filter: grayscale(100%);
}

@keyframes pulsarVermelhoBorda {
    0%, 100% { box-shadow: 0 0 10px var(--danger-color); border-color: var(--danger-color); }
    50% { box-shadow: 0 0 25px var(--danger-color); border-color: #ff0000; }
}

@keyframes pulsarAzul {
    0%, 100% { box-shadow: 0 0 10px var(--dominant-color); border-color: var(--dominant-color); }
    50% { box-shadow: 0 0 25px var(--dominant-color); border-color: #0088ff; }
}

.vida-barra {
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-shadow: 0 0 5px red;
}

.sanidade-barra {
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-shadow: 0 0 5px purple;
}

/* --- ESTILOS PARA BARRAS NEGATIVAS (NOVO) --- */
.preenchimento, .barra-negativa {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0; /* Ambas começam zeradas */
    transition: width 0.3s ease-in-out;
}

.barra-negativa {
    z-index: 2;
}

#barra-vida-negativa {
    background-color: #2b0000; 
}

/* Cor Escura para a Sanidade (Trauma Extremo) */
#barra-sanidade-negativa {
    background-color: #1b0025; 
}

.barra-texto {
    z-index: 4; 
}

/* Sistema de Abas */
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #333333;
    padding-bottom: 10px;
}

.tabs button {
    background: #2a2a2e;
    border: none;
    color: #ececec;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s;
}

.tabs button:hover {
    background: #3a3a3e;
}

.tabs button.active {
    background: #3a3a3e;
    border-bottom: 2px solid var(--dominant-color);
}

.tab-content {
    display: none;
    padding: 20px;
    background: rgba(42, 42, 46, 0.9); /* Fundo semi-transparente */
    backdrop-filter: blur(5px);
    border-radius: 0 8px 8px 8px;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Cabeçalho */
.info-personagem {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.foto-container {
    position: relative;
    width: 150px;
    height: 150px;
    border: 3px solid #333333;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s;
}

/* Efeito de Borda da Foto */
.foto-container.pulsar-vermelho { animation: pulsarVermelhoBordaFoto 1s infinite; }
.foto-container.pulsar-azul { animation: pulsarAzulBordaFoto 1.2s infinite; }
.foto-container.pulsar-vermelho-azul { animation: pulsarVermelhoAzul 1.2s infinite; }
.foto-container.pulsar-vermelho-roxo { animation: pulsarVermelhoRoxo 1.2s infinite; }
.foto-container.pulsar-azul-roxo { animation: pulsarAzulRoxo 1.2s infinite; }

@keyframes pulsarVermelhoBordaFoto {
    0%, 100% { border-color: var(--danger-color); }
    50% { border-color: #ff0000; }
}
@keyframes pulsarAzulBordaFoto {
    0%, 100% { border-color: var(--dominant-color); }
    50% { border-color: #0088ff; }
}
@keyframes pulsarVermelhoAzul {
    0% { border-color: var(--danger-color); } 25% { border-color: var(--dominant-color); } 50% { border-color: var(--danger-color); } 75% { border-color: var(--dominant-color); } 100% { border-color: var(--danger-color); }
}
@keyframes pulsarVermelhoRoxo {
    0% { border-color: var(--danger-color); } 25% { border-color: var(--secondary-color); } 50% { border-color: var(--danger-color); } 75% { border-color: var(--secondary-color); } 100% { border-color: var(--danger-color); }
}
@keyframes pulsarAzulRoxo {
    0% { border-color: var(--dominant-color); } 25% { border-color: var(--secondary-color); } 50% { border-color: var(--dominant-color); } 75% { border-color: var(--secondary-color); } 100% { border-color: var(--dominant-color); }
}

.foto-personagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s;
}

.dados-basicos {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.dados-basicos label {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
}

.dados-basicos input,
.dados-basicos select {
    background: #28282e; /* Fundo escuro */
    border: 1px solid #333333; /* Borda sutil */
    border-radius: 6px;
    color: #ececec;
    padding: 8px;
    width: 100%;
    transition: border-color 0.3s;
    font-family: 'Share Tech Mono', monospace;
}

.dados-basicos input:focus, .dados-basicos select:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

.dados-basicos select {
    background: #1a1a1e;
}

/* Estilos para o Seletor de Cores Personalizado */
.cor-tema-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cor-picker {
    position: relative;
    display: inline-block;
}

.cor-picker-display {
    width: 100%;
    height: 35px;
    background-color: var(--dominant-color);
    box-shadow: 0 0 10px var(--dominant-color), 0 0 20px var(--dominant-color);
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cor-picker-paleta {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    padding: 10px;
    background-color: #2a2a2e;
    border: 1px solid #333;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.2s;
}

.cor-picker-paleta.hidden {
    display: none;
}

.cor-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.cor-swatch:hover {
    transform: scale(1.1);
}

.cor-swatch.active {
    border-color: var(--dominant-color);
    transform: scale(1.15);
}

/* Atributos */

/* --- NOVO ESTILO PARA CAMPO COM PORCENTAGEM (Corrupção) --- */

/* Contêiner que alinha o campo e o símbolo */
.input-com-porcentagem {
    display: flex;
    align-items: center;
    position: relative; 
    grid-column: 3;
    /* Centraliza o bloco na coluna */
    width: 60px; 
    margin: 0 auto;
}

/* O campo de input dentro do contêiner */
.input-com-porcentagem input {
    width: 100%;
    /* AUMENTO NO ESPAÇAMENTO: Agora, com 22px, garantimos espaço para 2 dígitos e o % */
    padding-right: 22px; 
    padding-left: 2px;
    /* Centraliza o texto dentro do campo */
    text-align: center; 
}

/* O símbolo de porcentagem fixo */
.simbolo-porcentagem {
    position: absolute;
    /* POSIÇÃO AJUSTADA: Move o % mais para a esquerda dentro do padding que criamos */
    right: 4px; 
    
    /* AUMENTA O TAMANHO DO SÍMBOLO */
    font-size: 1.6em; 
    
    color: #ececec;
    /* Centraliza verticalmente */
    top: 50%;
    transform: translateY(-50%);
    
    pointer-events: none; 
}

/* Garante que os valores de todos os atributos fiquem centralizados (se não estiverem) */
.atributo-item input[type="number"] {
    text-align: center;
}

.atributo-nome.pericia-link {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--dominant-color);
    transition: text-decoration-color 0.2s ease-in-out;
}

.atributo-nome.pericia-link:hover {
    text-decoration-color: #fff;
}

.secao-atributos {
    background: rgba(42, 42, 46, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #333333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.secao-atributos h3 {
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
}

.atributos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.atributo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: #28282e;
    border-radius: 8px;
    border: 1px solid #333333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.atributo-nome {
    text-align: center;
    font-weight: bold;
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
}

.atributo-nome small {
    display: block;
    font-size: 0.7em;
    color: #999999;
}

.atributo-valor {
    font-size: 28px;
    font-weight: bold;
    width: 70px;
    text-align: center;
    background: #1a1a1e;
    color: #ececec;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.atributo-valor:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

/* Barras de Status */
.barra-container {
    margin: 20px 0;
}

.barra-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
}

.barra {
    height: 35px;
    background: #333333;
    border-radius: 8px;
    border: 1px solid #555555;
    position: relative;
    overflow: hidden;
}

#barra-vida.lesao-grave .preenchimento {
    animation: pulsarVermelhoBarra 1s infinite;
}

@keyframes pulsarVermelhoBarra {
    0%, 100% { background-color: var(--danger-color); }
    50% { background-color: #ff0000; }
}

#barra-sanidade.insano .preenchimento {
    animation: pulsarRoxo 1s infinite;
}

@keyframes pulsarRoxo {
    0%, 100% { background-color: var(--secondary-color); }
    50% { background-color: #c0a0ff; }
}

.preenchimento {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.3s;
    z-index: 3;
}

/* ADICIONAR isto: */
#barra-vida-preenchimento, #barra-sanidade-preenchimento {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.3s ease; /* Adicionar transição suave para a cor também */
}

/* Controles (botões) */
.controles-barra {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    gap: 5px;
}

.controles-barra.controles-esquerda {
    left: 10px;
}

.controles-barra.controles-direita {
    right: 10px;
}

.controles-barra button {
    background: #2a2a2e;
    border: none;
    color: #ececec;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.controles-barra button:hover {
    background: #3a3a3e;
}

.barra-texto {
    position: absolute;
    width: 100%;
    text-align: center;
    font-weight: bold;
    line-height: 35px;
    z-index: 3;
}

.barra-max {
    width: 60px;
    text-align: center;
    background: #1a1a1e;
    color: #ececec;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 5px;
    margin-left: 10px;
}

/* Pop-up de Fotos */
.modal-fotos {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.modal-conteudo {
    background: rgba(26, 26, 30, 0.95);
    backdrop-filter: blur(5px);
    padding: 30px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    text-align: center;
    animation: slideIn 0.5s;
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.campos-fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.campo-foto-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.campo-foto-item label {
    font-size: 14px;
    margin-bottom: 5px;
}

.campo-foto-item input[type="file"] {
    background: #1a1a1e;
    color: #ececec;
    border: 1px solid #333333;
    padding: 8px;
    border-radius: 6px;
    width: 100%;
    font-family: 'Share Tech Mono', monospace;
}

.btn-fechar {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-fechar:hover {
    background: #ff0000;
}

/* Checkboxes */
.secao-status {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    padding: 15px;
    background: rgba(42, 42, 46, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    border: 1px solid #333333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.status-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-item input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--dominant-color);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.status-item input[type="checkbox"]:checked {
    background-color: var(--dominant-color);
}

.status-item input[type="checkbox"]:checked::before {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1a1a1e;
    font-size: 14px;
}

.status-item label {
    cursor: pointer;
}

/* Estilos para a seção de rolagem de dados */
.secao-dados {
    background: rgba(42, 42, 46, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #333333;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.secao-dados h3 {
    color: var(--dominant-color);
    border-bottom: 1px solid #555555;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--dominant-color);
}

.dado-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 15px;
}

.dado-item label {
    font-size: 1em;
    font-weight: bold;
    color: #ececec;
}

.dado-item select,
.dado-item input {
    background: #1a1a1e;
    border: 1px solid #333333;
    color: #ececec;
    padding: 10px;
    border-radius: 6px;
    width: 120px;
    text-align: center;
    transition: all 0.2s;
    font-family: 'Share Tech Mono', monospace;
}

.dado-item input[type="number"] {
    appearance: textfield; /* Para Firefox */
}

.dado-item input[type="number"]::-webkit-inner-spin-button,
.dado-item input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dado-item select:focus,
.dado-item input:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

#btn-rolar {
    background-color: var(--dominant-color);
    color: #0c0c0e;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.2s;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#btn-rolar:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

#btn-rolar:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#resultado-dado {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
    background: #1a1a1e;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 15px;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ================================== */
/* ESTILOS DE ATAQUES        */
/* ================================== */

.secao-ataques {
    padding: 20px;
    background: #1a1a1e;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.secao-ataques h3 {
    text-align: center;
    color: var(--dominant-color);
    border-bottom: 1px solid #555555;
    text-shadow: 0 0 5px var(--dominant-color);
}

.input-ataque {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.input-ataque input {
    flex-grow: 1;
    min-width: 150px;
    background: #28282e;
    border: 1px solid #333333;
    border-radius: 6px;
    color: #ececec;
    padding: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.input-ataque input:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

.input-ataque button {
    flex-grow: 1;
    background-color: var(--dominant-color);
    color: #0c0c0e;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.2s, transform 0.2s;
}

.input-ataque button:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ataques-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ataque-item {
    background: #28282e;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 15px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ataque-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333333;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.ataque-item h4 {
    margin: 0;
    font-size: 1.2em;
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
}

.ataque-item p {
    margin: 0;
    font-size: 0.9em;
}

.ataque-item span {
    color: #fff;
}

.btn-remover {
    background-color: var(--danger-color);
    color: #fff;
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8em;
    transition: transform 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.btn-remover:hover {
    transform: scale(1.1);
    background-color: #ff3333;
}

/* Media query para telas menores */
@media (max-width: 600px) {
    .input-ataque {
        flex-direction: column;
    }
    .input-ataque input,
    .input-ataque button {
        width: 100%;
    }
}


/* ================================== */
/* ESTILOS DE INVENTÁRIO ATUALIZADOS */
/* ================================== */

.secao-inventario {
    padding: 20px;
    background: #1a1a1e;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.secao-inventario h3 {
    text-align: center;
    color: var(--dominant-color);
    border-bottom: 1px solid #555555;
    text-shadow: 0 0 5px var(--dominant-color);
}

.inventario-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.input-item input {
    flex: 1;
    min-width: 120px;
    background: #28282e;
    border: 1px solid #333333;
    border-radius: 6px;
    color: #ececec;
    padding: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

/* Campos numéricos (peso e quantidade) mais estreitos */
.input-item input[type="number"] {
    min-width: 80px;
    flex: 0.5;
}

.input-item input:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

.input-item button {
    background-color: var(--dominant-color);
    color: #0c0c0e;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.input-item button:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.lista-itens {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-inventario {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #28282e;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 10px;
    transition: background-color 0.2s;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.item-inventario:hover {
    background-color: #333338;
}

.item-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-right: 30px; /* Espaço para o botão de remover */
}

.item-nome {
    font-weight: bold;
    margin-bottom: 4px;
    color: #fff;
}

.item-detalhes {
    font-size: 0.8em;
    color: #999;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.item-detalhe {
    display: inline-block;
}

.btn-remover {
    background-color: var(--dominant-color);
    color: black;
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8em;
    transition: transform 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.btn-remover:hover {
    transform: scale(1.1);
    background-color: #ff3333;
}

/* Media query para telas menores */
@media (max-width: 768px) {
    .input-item {
        flex-direction: column;
    }
    
    .input-item input,
    .input-item button {
        width: 100%;
    }
    
    .input-item input[type="number"] {
        min-width: auto;
        flex: 1;
    }
    
    .item-detalhes {
        flex-direction: column;
        gap: 2px;
    }
}

/* Para telas muito pequenas */
@media (max-width: 480px) {
    .item-info {
        padding-right: 25px;
    }
    
    .item-detalhes {
        font-size: 0.75em;
    }
}

/* Contador de Inventário */
.contador-inventario {
    display: flex;
    justify-content: space-around;
    background: rgba(30, 30, 35, 0.8);
    border: 1px solid var(--dominant-color);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
}

.contador-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.contador-item span:first-child {
    color: #ccc;
    font-size: 12px;
}

.contador-item span:last-child {
    color: var(--dominant-color);
    font-weight: bold;
    font-size: 18px;
}

/* Controles de quantidade nos itens */
.controles-quantidade {
    font-family: 'Share Tech Mono', monospace;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.btn-quantidade {
    font-family: 'Share Tech Mono', monospace;
    background: var(--dominant-color);
    color: black;
    border: none;
    border-radius: 4px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-quantidade:hover {
    background: #fff;
    color: var(--dominant-color);
    transform: scale(1.1);
}

.quantidade-display {
    min-width: 40px;
    text-align: center;
    font-weight: bold;
    color: var(--dominant-color);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Contador de Inventário */
.contador-inventario {
    display: flex;
    justify-content: space-around;
    background: rgba(30, 30, 35, 0.8);
    border: 1px solid var(--dominant-color);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
}

.contador-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.contador-item span:first-child {
    color: #ccc;
    font-size: 12px;
}

.contador-item span:last-child {
    color: var(--dominant-color);
    font-weight: bold;
    font-size: 18px;
}

#zeraritens {
    background: var(--dominant-color);
    font-family: 'Share Tech Mono', monospace;
    color: black;
    border: none;
    border-radius: 4px;
    width: 50px;
    height: 25px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.secao-anotacoes h3 {
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
}

/* Estilos para as Perícias */
.sub-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #333333;
    padding-bottom: 10px;
    flex-wrap: wrap;
}

.sub-tabs button {
    background: #2a2a2e;
    border: none;
    color: #ececec;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.3s;
}

.sub-tabs button:hover {
    background: #3a3a3e;
}

.sub-tabs button.active {
    background: #3a3a3e;
    border-bottom: 2px solid var(--dominant-color);
}

.pericias-header h3 {
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
}

.pericias-categoria-item {
    display: none;
    animation: fadeIn 0.5s;
}

.pericias-categoria-item.active {
    display: block;
}

.lista-pericias-categoria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pericia-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #28282e;
    border: 1px solid #333333;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pericia-item:hover {
    background: #333338;
    transform: translateY(-2px);
    border-color: var(--dominant-color);
}

.pericia-item.hidden {
    display: none;
}

.pericia-input {
    width: 60px;
    text-align: center;
    background: #1a1a1e;
    color: #ececec;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 5px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pericia-input:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

#pericia-search {
    width: 100%;
    margin-bottom: 15px;
    background: #1a1a1e;
    color: #ececec;
    border: 1px solid #333333;
    padding: 10px;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#pericia-search:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

#anotacoes-texto {
    width: 100%;
    min-height: 100px;
    background: #1a1a1e;
    color: #ececec;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 15px;
    font-family: 'Share Tech Mono', monospace;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#anotacoes-texto:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

/* Responsividade */
@media(max-width: 768px) {
    .atributos { grid-template-columns: repeat(2, 1fr); }
    .info-personagem { flex-direction: column; }
    .foto-container { align-self: center; }
    .lista-pericias-categoria { grid-template-columns: 1fr; }
    .tabs, .sub-tabs { flex-wrap: wrap; }
    .tabs button, .sub-tabs button { flex-grow: 1; }
}

.btn-perigo {
    background-color: var(--danger-color);
    color: #fff;
    border: none;
    padding: 5px 10px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.btn-perigo:hover {
    background-color: #ff0000;
}

.modal-reset {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-reset-content {
  background: #1a1a1e;
  color: #fff;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 0 20px #000;
  font-family: 'Share Tech Mono', monospace;
}

.modal-reset-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px; /* Adiciona um espaço entre os botões */
}

.modal-reset-buttons button {
  padding: 10px 20px; /* Reduz o padding horizontal */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
  text-transform: uppercase;
  max-width: 150px; /* **CORREÇÃO: Limita a largura máxima do botão** */
  width: 100%; /* Permite que ele se estique em telas menores, mas limitado pelo max-width */
}

#btn-reset-1-confirm, #btn-reset-2-confirm {
  background-color: var(--danger-color);
  color: #fff;
}

#btn-reset-1-confirm:hover, #btn-reset-2-confirm:hover {
  background-color: #ff0000;
}

#btn-reset-1-cancel, #btn-reset-2-cancel {
  background-color: #444;
  color: #fff;
}

#btn-reset-1-cancel:hover, #btn-reset-2-cancel:hover {
  background-color: #666;
}

.hidden {
  display: none;
}

.modal-reset1, .modal-reset2 {
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    font-size: 20px;
    color: var(--danger-color);
    text-shadow: 0 0 5px var(--danger-color);
    text-transform: uppercase;
}

.modal-paragrafo-reset1, .modal-paragrafo-reset2 {
    font-size: 15px;
}

.rolagem-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.rolagem-modal {
    background-color: #1a1a1e;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    border: 2px solid var(--dominant-color);
    transform: scale(0.8);
    animation: zoomIn 0.3s forwards;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.rolagem-titulo {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
}

.rolagem-resultado {
    font-size: 3em;
    font-weight: bolder;
    text-transform: uppercase;
}

.rolagem-dados {
    font-size: 1.2em;
    opacity: 0.8;
}

.rolagem-resultado.falha {
    color: crimson
}

.rolagem-resultado.normal {
    color: darkgrey
}

.rolagem-resultado.otimo {
    color: chartreuse
}

.rolagem-resultado.extremo {
  color: gold; /* a cor do texto */
  text-shadow: 
    0 0 5px gold,   /* sombra perto */
    0 0 20px gold,  /* mais afastada */
    0 0 40px gold,  /* ainda mais longe */
    0 0 60px gold;  /* o halo neon */
}

.rolagem-resultado.desastre {
    color: black
}

.rolagem-resultado.sucesso {
    color: #00ff00; /* Verde para sucesso */
    text-shadow: 0 0 10px #00ff00;
}

.sanidade-barra.pericia-link {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--secondary-color);
    transition: text-decoration-color 0.2s ease-in-out;
}

.sanidade-barra.pericia-link:hover {
    text-decoration-color: #fff;
}

.pericia-link {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--dominant-color);
    transition: text-decoration-color 0.2s ease-in-out;
}

.pericia-link:hover {
    text-decoration-color: #fff;
}

/* Estilos para a seção de background, traumas e informações importantes */
.secao-importantes {
    background: #1a1a1e;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #333333;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.secao-importantes h3 {
    color: var(--dominant-color);
    border-bottom: 1px solid #555555;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--dominant-color);
}

.secao-importantes textarea {
    width: 100%;
    min-height: 100px;
    background: #1a1a1e;
    color: #ececec;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 15px;
    font-family: 'Share Tech Mono', monospace;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.secao-importantes textarea:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

/* Correção definitiva para o layout de Traumas e Fobias */
.input-trauma-fobia {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.input-trauma-fobia input {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    background: #1a1a1e;
    border: 1px solid #333333;
    border-radius: 6px;
    color: #ececec;
    padding: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.input-trauma-fobia button {
    flex-shrink: 0;
    background-color: var(--dominant-color);
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.2s;
    box-sizing: border-box;
}

.input-trauma-fobia button:hover {
    background-color: #3884ff;
    transform: translateY(-1px);
}

.input-trauma-fobia button:active {
    transform: translateY(0);
}

/* Media Query para telas menores */
@media (max-width: 480px) {
    .input-trauma-fobia {
        flex-direction: column;
        align-items: stretch;
    }
    
    .input-trauma-fobia button {
        margin-top: 5px;
        width: 100%;
    }
}

/* ================================== */
/* ESTILOS DE MOVIMENTO E DEFESA OTIMIZADOS */
/* ================================== */
.secao-movimento-defesa {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 20px;
    padding: 20px;
    background: rgba(42, 42, 46, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    border: 1px solid #333333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.campo-deslocamento-defesa {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza horizontalmente o conteúdo */
}

.campo-deslocamento-defesa label {
    font-size: 1em;
    font-weight: bold;
    color: var(--dominant-color);
    text-shadow: 0 0 5px var(--dominant-color);
    margin-bottom: 10px;
}

.deslocamento-container {
    display: flex;
    gap: 15px; /* Espaço para a barra divisória */
    align-items: center;
}

.deslocamento-campo {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative; /* Para posicionar a barra divisória */
}

/* Estilo para os inputs (Defesa, Deslocamento m, Deslocamento q) */
.deslocamento-campo input,
#defesa-input {
    width: 35px; /* Largura mínima para os números */
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--dominant-color); /* ADICIONA A LINHA ABAIXO */
    color: #ececec;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.2em;
    text-align: center;
    padding: 0;
}

/* Ajusta a largura do campo de defesa */
#defesa-input {
    width: 60px; /* Aumenta a largura para o campo de defesa */
    text-align: center;
}

/* Oculta as setas de incremento/decremento nos inputs numéricos */
.deslocamento-campo input::-webkit-outer-spin-button,
.deslocamento-campo input::-webkit-inner-spin-button,
#defesa-input::-webkit-outer-spin-button,
#defesa-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Tira qualquer destaque ao focar no campo, mantendo o visual invisível */
.deslocamento-campo input:focus,
#defesa-input:focus {
    outline: none;
    box-shadow: none;
    background: transparent;
}

#btn-portrait {
    width: 75px;
    height: 28px;
    background-color: var(--dominant-color);
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s
}

/* Estilos para os botões de Exportar/Importar */
.btn-exportar, .btn-importar {
    background-color: var(--dominant-color);
    color: #0c0c0e;
    border: none;
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s ease, transform 0.2s;
    font-family: 'Share Tech Mono', monospace;
    text-transform: uppercase;
    font-weight: bold;
    display: block;
    width: 100%;
}

.btn-exportar:hover, .btn-importar:hover {
    background-color: #fff;
    transform: translateY(-2px);
}

.btn-exportar:active, .btn-importar:active {
    transform: translateY(0);
}

/* Modal de Importação/Exportação */
.modal-import-export {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-import-export-content {
    background: #1a1a1e;
    color: #fff;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 0 20px #000;
    font-family: 'Share Tech Mono', monospace;
}

.modal-import-export-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.modal-import-export-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    text-transform: uppercase;
    max-width: 150px;
    width: 100%;
}

#btn-import-confirm {
    background-color: var(--dominant-color);
    color: #fff;
}

#btn-import-confirm:hover {
    background-color: #3884ff;
}

#btn-import-cancel, #btn-export-close {
    background-color: #444;
    color: #fff;
}

#btn-import-cancel:hover, #btn-export-close:hover {
    background-color: #666;
}

/* Adicione ao final do style.css */

/* Melhorias de responsividade para mobile */
@media (max-width: 768px) {
    .secao-controles {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-exportar, .btn-importar {
        padding: 12px 15px;
        font-size: 1em;
    }
    
    .modal-import-export-content {
        width: 95vw;
        margin: 20px;
        padding: 20px;
    }
    
    .modal-import-export-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-import-export-buttons button {
        max-width: 100%;
        padding: 12px;
    }
}

/* Melhorias para telas muito pequenas */
@media (max-width: 480px) {
    .modal-import-export-content {
        padding: 15px;
    }
    
    .modal-import-export-content h2 {
        font-size: 1.3em;
    }
    
    .modal-import-export-content p {
        font-size: 0.9em;
    }
}

/* Estilo para o textarea de dados manuais */
#dados-manuais {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    line-height: 1.4;
}

/* Feedback visual para botões em mobile */
.btn-exportar:active, .btn-importar:active {
    transform: scale(0.98);
    transition: transform 0.1s;
}

/* ================================== */
/* ESTILOS DO ORGANIZADOR DE PERÍCIAS */
/* ================================== */

.pericias-controles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
    flex-wrap: wrap;
}

.organizador-pericias {
    display: flex;
    align-items: center;
    gap: 10px;
}

.organizador-pericias label {
    color: var(--dominant-color);
    font-weight: bold;
    white-space: nowrap;
}

.organizador-pericias select {
    background: #1a1a1e;
    border: 1px solid #333333;
    color: #ececec;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Share Tech Mono', monospace;
    min-width: 150px;
    transition: border-color 0.2s;
}

.organizador-pericias select:focus {
    outline: none;
    border-color: var(--dominant-color);
    box-shadow: 0 0 5px var(--dominant-color);
}

/* Cores para os valores das perícias */
.pericia-valor-baixo {
    color: gray !important;
    font-weight: normal;
}

.pericia-valor-medio {
    color: white !important;
    font-weight: bold;
}

.pericia-valor-alto {
    color: var(--dominant-color) !important;
    font-weight: bold;
}

/* Destaque para o input quando tem cor */
.pericia-input.colorizado {
    border-color: currentColor !important;
    box-shadow: 0 0 4px currentColor !important;
}

/* Responsividade */
@media (max-width: 768px) {
    .pericias-controles {
        flex-direction: column;
        align-items: stretch;
    }
    
    .organizador-pericias {
        justify-content: space-between;
    }
}