/* vr_gaussian_splatting.css */

/* Variables CSS para facilitar futuras modificaciones */
:root {
    --panel-bg-color: rgba(255, 255, 255, 0.95);
    --panel-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    --panel-border-radius: 8px;
    --panel-padding: 20px;
    --control-label-color: #333;
    --control-value-color: #555;
    --button-bg-color: #007BFF;
    --button-hover-bg-color: #0056b3;
    --button-active-bg-color: #28a745; /* Verde para botones activos */
    --button-text-color: white;
    --button-padding: 12px 24px; /* Aumentado para mayor tamaño */
    --button-border-radius: 6px;
    --button-font-size: 16px;
    --slider-width: 100%;
    --section-margin-bottom: 25px;
    --source-panel-bg: rgba(255, 255, 255, 0.9);
    --source-panel-box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    --source-btn-bg: #28a745;
    --source-btn-hover-bg: #218838;
    --source-btn-active-bg: #1e7e34;
    --source-btn-color: white;
    --source-info-color: #333;
    --source-btn-padding: 12px;
    --source-info-font-size: 16px;
    --source-panel-width: 400px; /* Aumentado para más ancho */
    --source-info-padding: 10px; /* Padding interno */
    --character-btn-bg: #6c757d;
    --character-btn-hover-bg: #5a6268;
    --character-btn-active-bg: #28a745;
    --transition-duration: 0.3s;
    --font-family: 'Roboto', sans-serif;
}

/* Reset de márgenes y overflow */
body { 
    margin: 0; 
    overflow: hidden; 
    font-family: var(--font-family);
    background-color: #f0f2f5;
}

/* Estilo del Canvas */
canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

/* Panel de Configuración Fijo */
.fixed-config-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--panel-bg-color);
    box-shadow: var(--panel-box-shadow);
    border-radius: var(--panel-border-radius);
    padding: var(--panel-padding);
    width: 340px;
    z-index: 10;
    font-size: var(--button-font-size);
    transition: all var(--transition-duration) ease;
}

/* Contenedores de Botones de Acción */
.button-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--section-margin-bottom);
}

.action-btn {
    flex: 1;
    margin: 0 5px;
    padding: var(--button-padding);
    border: none;
    border-radius: var(--button-border-radius);
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    font-size: var(--button-font-size);
    cursor: pointer;
    transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    outline: none;
    position: relative;
}

.action-btn:hover {
    background-color: var(--button-hover-bg-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.action-btn:active {
    background-color: var(--button-active-bg-color);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.action-btn.active {
    background-color: var(--button-active-bg-color);
    color: var(--button-text-color);
}

/* Sección de Configuración para Cada Acción */
.config-section {
    margin-bottom: var(--section-margin-bottom);
}

.config-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    font-size: 18px;
    color: var(--control-label-color);
}

.config-section label {
    display: block;
    margin-bottom: 8px;
    color: var(--control-label-color);
    font-size: 14px;
}

.config-section input[type="range"] {
    width: var(--slider-width);
    margin-bottom: 5px;
}

.config-section span {
    display: block;
    text-align: right;
    font-size: 14px;
    color: var(--control-value-color);
    margin-top: 5px;
}

.config-section button {
    width: 100%;
    padding: var(--button-padding);
    margin-top: 15px;
    border: none;
    border-radius: var(--button-border-radius);
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    font-size: var(--button-font-size);
    cursor: pointer;
    transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    outline: none;
}

.config-section button:hover {
    background-color: var(--button-hover-bg-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.config-section button:active {
    background-color: var(--button-active-bg-color);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Estilos para el Panel de Fuentes */
.source-panel {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--source-panel-bg);
    box-shadow: var(--source-panel-box-shadow);
    border-radius: var(--panel-border-radius);
    padding: var(--panel-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    width: var(--source-panel-width);
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho total */
    transition: all var(--transition-duration) ease;
}

.source-btn {
    background-color: var(--source-btn-bg);
    border: none;
    color: var(--source-btn-color);
    padding: var(--source-btn-padding);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--button-font-size);
    border-radius: var(--button-border-radius);
    cursor: pointer;
    transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    outline: none;
}

.source-btn:hover {
    background-color: var(--source-btn-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.source-btn:active {
    background-color: var(--source-btn-active-bg);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.source-info {
    flex: 1;
    text-align: center;
    font-size: var(--source-info-font-size);
    color: var(--source-info-color);
    padding: var(--source-info-padding);
}

.source-info span {
    display: block;
    margin-bottom: 5px;
}

/* Panel del Botón Character */
.character-panel {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10;
    transition: all var(--transition-duration) ease;
}

.character-btn {
    padding: var(--button-padding);
    border: none;
    border-radius: var(--button-border-radius);
    background-color: var(--character-btn-bg);
    color: var(--button-text-color);
    font-size: var(--button-font-size);
    cursor: pointer;
    transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    outline: none;
}

.character-btn:hover {
    background-color: var(--character-btn-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.character-btn:active {
    background-color: var(--character-btn-active-bg);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.character-btn.active {
    background-color: var(--character-btn-active-bg);
    color: var(--button-text-color);
}