/* index.css - Design Completo UNIFICADO e RESPONSIVO (FINAL) */

/* --- 1. Variáveis de Cor --- */
:root {
    --color-background-start: #00304b;
    --color-background-end: #00b0aa;
    --color-primary: #00b0aa; 
    --color-primary-hover: #008f8a;
    --color-white: #ffffff;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-text-dark: #1f2937; 
    --color-text-medium: #4b5563; 
    --color-text-light: #6b7280; 
    --color-reset-button: #d1d5db; 
    --color-reset-button-hover: #9ca3af; 
    --color-close-modal: #ef4444; 
}

/* Adiciona regra global para prevenir transbordamento */
img, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- 2. Base Body and Layout --- */

body {
    /* Gradiente para ser o fundo das partículas */
    background: linear-gradient(
        to top right,
        var(--color-background-start), 
        var(--color-background-end)
    );
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

/* NOVO: Estilo para o container de Partículas (Fixo e atrás do conteúdo) */
.particles-background {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* CRÍTICO: Fica atrás de tudo */
}

.main-body {
    font-family: Arial, sans-serif;
    background-color: transparent; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Container para limitar o CONTEÚDO abaixo do header */
.content-wrapper {
    max-width: 1440px; 
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- 3. Header (Cabeçalho - AGORA 100% DA TELA) --- */
.header {
    width: 100vw;
    background-color: var(--color-white);
    color: var(--color-text-dark);
    padding: 1rem 0;
    box-shadow: 0 4px 6px -1px var(--color-shadow);
    margin-bottom: 2rem;
}

.header-content {
    max-width: 1440px;
    margin: 0 auto; 
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    min-height: 40px; 
}

.header-content img {
    max-height: 200px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* --- 4. File Input (Seleção de Imagem) --- */
.input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
    width: 100%;
}

.file-input {
    margin-bottom: 1rem;
    max-width: 100%; 
}

.input-description {
    color: var(--color-white); 
    font-size: 0.875rem;
    text-align: center;
    padding: 0 1rem;
}

/* --- 5. Screens Grid (Grade de Telas) --- */
.screens-grid-container {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1.5rem;
    width: 100%;
    padding: 0 1.5rem; 
    margin-bottom: 3rem;
}

@media (min-width: 640px) {
    .screens-grid-container {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (min-width: 1024px) {
    .screens-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.screen-card {
    background-color: var(--color-white);
    box-shadow: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    position: relative; 
    
    /* ANIMAÇÃO HOVER - Cartões de Tela */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer; 
}

.screen-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.2), 0 6px 10px -5px rgba(0, 0, 0, 0.1); 
}

/* ------------------------------------- */
/* ESTILO E POSICIONAMENTO DA VINHETA */
/* ------------------------------------- */

.vignette-overlay {
    position: absolute;
    pointer-events: none; 
    transition: opacity 0.3s ease-in-out;
    
    background: radial-gradient(
        ellipse at center, 
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.6) 80%,
        rgba(0, 0, 0, 0.8) 100%
    );
}

.canvas-wrapper {
    position: relative;
    max-width: 100%;
    display: inline-block; 
}

.canvas-wrapper .vignette-overlay {
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem; 
}

.screen-card .vignette-overlay {
    z-index: 2;
    top: 1rem;
    left: 1rem;
    width: calc(100% - 2rem); 
    height: auto; 
    max-height: 12rem; 
    border-radius: 0.5rem;
}

@media (min-width: 640px) {
    .screen-card .vignette-overlay {
        max-height: 16rem;
    }
}

.screen-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.screen-image {
    border-radius: 0.5rem;
    max-height: 12rem; 
    object-fit: contain;
    cursor: pointer;
    width: 100%;
    position: relative;
    z-index: 1; 
}

@media (min-width: 640px) {
    .screen-image {
        max-height: 16rem;
    }
}

/* --- 6. Simulação de Filtros (Nenhuma alteração) --- */
.amoled-screen {
    filter: contrast(1.4) saturate(1.3) brightness(0.95);
}
.lcd-screen {
    filter: brightness(1.15) contrast(0.85) saturate(0.9);
}
.ips-screen {
    filter: brightness(1.05) contrast(1.05) saturate(1.1);
}
.tn-screen {
    filter: brightness(1.1) contrast(0.8) saturate(0.85);
}

/* --- 7. Manual Controls (Ajustes Manuais) --- */
.manual-controls-container {
    max-width: 64rem; 
    width: 100%;
    padding: 0 1.5rem;
    margin-bottom: 3rem;
}

.manual-controls-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--color-white); 
}

.manual-controls-panel {
    background-color: var(--color-white);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px var(--color-shadow);
    
    /* ANIMAÇÃO HOVER */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.manual-controls-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.15), 0 4px 8px -4px rgba(0, 0, 0, 0.05); 
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.range-input {
    width: 100%;
}

.canvas-controls-group {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.custom-canvas {
    border-radius: 0.5rem;
    max-height: 16rem;
    max-width: 100%;
    width: auto;
}

.button-group {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

@media (max-width: 480px) {
    .button-group {
        flex-direction: column;
        gap: 0.5rem;
        max-width: 300px; 
    }
    .download-button, .reset-button {
        flex-grow: 1; 
        text-align: center;
        padding: 0.75rem 0.5rem;
        width: 100%;
    }
}

.download-button {
    background-color: var(--color-primary); 
    color: var(--color-white);
}

.download-button:hover {
    background-color: var(--color-primary-hover);
}

.reset-button {
    background-color: var(--color-reset-button);
    color: var(--color-text-dark);
}

.reset-button:hover {
    background-color: var(--color-reset-button-hover);
}

/* --- 8. Explanation Section (Seção Explicativa) --- */
.explanation-section {
    max-width: 50rem;
    width: 100%;
    padding: 0 1.5rem;
    margin-bottom: 3rem;
}

.explanation-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--color-white);
}

.explanation-panel {
    background-color: var(--color-white);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px var(--color-shadow);
    color: var(--color-text-medium);
    line-height: 1.625;
    
    /* ANIMAÇÃO HOVER */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.explanation-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.15), 0 4px 8px -4px rgba(0, 0, 0, 0.05); 
}

.explanation-panel p {
    margin-bottom: 0.5rem;
}

/* --- 9. Modal (Visualização em Tela Cheia) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.modal-overlay.hidden {
    display: none;
}

.modal-content {
    position: relative;
    background-color: var(--color-white);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5p var(--color-shadow), 0 10px 10px -5px var(--color-shadow);
    max-width: 90%; 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--color-text-light);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    background: none;
    border: none;
}

.modal-close:hover {
    color: var(--color-close-modal);
}

.modal-image {
    max-height: 70vh; 
    max-width: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
}

.modal-label {
    margin-top: 0.5rem;
    color: var(--color-text-medium);
    font-weight: 600;
}