/* style.css - ATUALIZADO 23/03/2026 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0; overflow: hidden;
    font-family: 'Press Start 2P', cursive;
    background: 
        radial-gradient(circle at center, #2e1a47 0%, #110522 70%),
        linear-gradient(to top, #ff0055 0%, #ff8800 100%),
        rgba(0,0,0,0); /* placeholder para animação */
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
}


body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 200vh;
    background-image: 
        linear-gradient(90deg, transparent 0%, transparent 2%, #00ffff 2%, #00ffff 3%, transparent 3%, transparent 100%), /* Linhas Verticais Cyan */
        linear-gradient(0deg, transparent 0%, transparent 2%, #ff00ff 2%, #ff00ff 3%, transparent 3%, transparent 100%);  /* Linhas Horizontais Magenta */
    background-size: 50px 50px; /* Tamanho da grade pixelada */
    
    /* Animação para mover a grade */
    animation: retro-grid 2s linear infinite;
    
    /* Posição e transparência */
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* TÍTULO PRINCIPAL */
.titulo-topo {
    position: fixed; 
    top: 30px; 
    width: 100%; 
    text-align: center; 
    z-index: 100;
}

.titulo-topo span {
    background-color: #000; 
    color: #fff; 
    padding: 15px 30px;
    border: 4px solid #fff; 
    box-shadow: 6px 6px 0px #e67e22;
    display: inline-block; 
    font-size: 1.5rem;
}

/* CARROSSEL E NAVEGAÇÃO */
form.carrossel {
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    white-space: nowrap; 
    display: flex; 
    align-items: center;
}

input[type="radio"] { 
    display: none; 
}

.tela {
    transition: transform 600ms cubic-bezier(0.2, 1, 0.3, 1);
    display: inline-block;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
}

/* LÓGICA DE MOVIMENTO (ORDEM REVISADA) */
#comum:checked ~ .tela { transform: translate3d(0, 0, 0); }
#juros:checked ~ .tela { transform: translate3d(-100%, 0, 0); }
#bi:checked ~ .tela { transform: translate3d(-200%, 0, 0); }

/* SETAS */
.seta-esq, .seta-dir {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    color: white;
    cursor: pointer;
    text-shadow: 5px 5px #000;
    z-index: 200;
    padding: 40px;
    transition: 0.2s;
    user-select: none;
}

.seta-esq:hover, .seta-dir:hover { color: #ffff00; scale: 1.2; }
.seta-esq { left: 2%; }
.seta-dir { right: 2%; }

/* ESTRUTURA DAS CALCULADORAS */
.calculadora-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titulo-calculadora {
    color: #fff; 
    font-size: 0.9rem; 
    margin-bottom: 15px;
    background: #e67e22; 
    padding: 10px; 
    border: 3px solid #000;
}

.calculadora {
    width: 440px;
    background-color: #1c1c1c;
    padding: 20px;
    border: 6px solid #000;
    box-shadow: 12px 12px 0px rgba(0,0,0,0.4);
}

/* DISPLAY */
.display input {
    width: 100%; 
    height: 80px; 
    margin-bottom: 15px;
    background-color: #9bbc0f; 
    border: 4px solid #000;
    color: #0f380f; 
    text-align: right; 
    padding: 15px;
    font-size: 1.3rem; 
    font-family: 'Press Start 2P', cursive;
}

/* BOTÕES GERAIS */
.botoes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

button {
    height: 65px;
    border: none;
    background-color: #2e2e2e;
    color: white;
    font-size: 0.8rem;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    box-shadow: 4px 4px 0px #000;
}

button:hover { background-color: #444; }
button:active { transform: translate(2px, 2px); box-shadow: 0px 0px #000; }

.btn-igual { background-color: #888; color: #000; }

/* CALCULADORA DE JUROS COMPOSTOS (ESPECÍFICO) */
.juros-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.campo-juros {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.campo-juros label {
    color: #fff;
    font-size: 0.6rem;
    text-align: left;
}

.campo-juros input {
    background-color: #fff;
    border: 3px solid #000;
    padding: 10px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    width: 100%;
}

.btn-calcular {
    width: 100%;
    height: 50px;
    background-color: #e67e22;
    color: #fff;
    border: 4px solid #000;
    margin-top: 10px;
    font-size: 0.8rem;
}

.btn-calcular:hover { background-color: #d35400; }

.display-juros {
    margin-top: 10px;
    border-top: 2px dashed #444;
    padding-top: 15px;
}

.display-juros small {
    color: #9bbc0f;
    font-size: 0.5rem;
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

.display-juros input {
    height: 60px;
    font-size: 1rem;
}

/* MENSAGENS E FOOTER */
.pixel-msg {
    color: #fff; border: 4px solid #fff; padding: 40px;
    background: #000; font-size: 1.2rem; text-align: center;
}

footer {
  position: fixed;   
  bottom: 0;         
  width: 100%;       
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px 10px; 
  font-size: 10px;
  font-family: 'Press Start 2P', cursive;
  z-index: 9999;     
}

footer p { margin: 0; }

/* DEFINIÇÃO DA ANIMAÇÃO DO FUNDO */
@keyframes retro-grid {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50px);
    }
}
/* CALCULADORA BINÁRIA */
.radio-conv {
    display: inline-block !important;
    width: auto !important;
    accent-color: #00ffff;
    cursor: pointer;
}

#conteudo-conv input[type="text"],
#conteudo-conv input[type="number"] {
    background-color: #1c1c1c;
    border: 2px solid #00ffff;
    color: #00ffff;
    padding: 6px 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
}

#conteudo-conv input[readonly] {
    border-color: #444;
    color: #888;
}

#conteudo-calc input[type="text"] {
    background-color: #fff;
    border: 3px solid #000;
    padding: 10px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    width: 100%;
}

/*BY GASPAR/