Ingresos Registro Medio Ambiente

Formulario Ingreso HSEC – AC Perforaciones

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

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}

.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}

.header {
background: linear-gradient(135deg, #1F4E78 0%, #2E5C8A 100%);
color: white;
padding: 30px;
text-align: center;
}

.header h1 {
font-size: 28px;
margin-bottom: 10px;
}

.header p {
font-size: 14px;
opacity: 0.9;
}

.fecha-hora {
text-align: right;
padding: 15px 30px;
background: #f5f5f5;
font-size: 14px;
color: #666;
border-bottom: 1px solid #ddd;
}

.content {
padding: 30px;
}

.screen {
display: none;
}

.screen.active {
display: block;
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 8px;
font-size: 14px;
}

input[type=»text»],
input[type=»number»],
select {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
font-family: inherit;
transition: border-color 0.3s;
}

input[type=»text»]:focus,
input[type=»number»]:focus,
select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

input[type=»text»].error,
select.error {
border-color: #d32f2f;
background: #ffebee;
}

.error-message {
color: #d32f2f;
font-size: 12px;
margin-top: 5px;
display: none;
}

.error-message.visible {
display: block;
}

.combobox-container {
position: relative;
width: 100%;
}

.combobox-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
font-family: inherit;
}

.combobox-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 6px 6px;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
}

.combobox-dropdown.visible {
display: block;
}

.combobox-option {
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
}

.combobox-option:hover {
background: #f5f5f5;
}

.otros-input-container {
margin-top: 10px;
padding: 12px;
background: #fafafa;
border-radius: 6px;
border: 1px solid #e0e0e0;
display: none;
}

.otros-input-container.visible {
display: block;
}

.otros-input-container label {
font-size: 13px;
font-weight: 600;
color: #666;
margin-bottom: 6px;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.form-row.full {
grid-template-columns: 1fr;
}

.buttons {
display: flex;
gap: 15px;
margin-top: 30px;
justify-content: space-between;
}

button {
padding: 12px 30px;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
}

.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
flex: 1;
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
background: #f5f5f5;
color: #333;
flex: 1;
}

.btn-secondary:hover {
background: #e0e0e0;
}

.resumen-expandible {
background: #f9f9f9;
padding: 12px;
border-radius: 6px;
margin-top: 8px;
font-size: 13px;
color: #666;
display: none;
}

.resumen-expandible.visible {
display: block;
}

.resumen-expandible-item {
margin-bottom: 6px;
padding: 8px;
background: white;
border-left: 3px solid #667eea;
border-radius: 3px;
}

.resumen-expandible-total {
font-weight: 600;
color: #1F4E78;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #ddd;
}

.expandible-row {
display: none;
}

.expandible-row.visible {
display: block;
}

.fotos-section {
background: #f5f5f5;
padding: 15px;
border-radius: 6px;
margin-top: 10px;
display: none;
}

.fotos-section.visible {
display: block;
}

.foto-input {
margin-bottom: 10px;
}

.foto-input label {
margin-bottom: 5px;
}

.foto-input input {
padding: 8px;
}

input[type=»checkbox»] {
width: 18px;
height: 18px;
cursor: pointer;
margin-right: 8px;
}

.progress {
background: #e0e0e0;
height: 4px;
margin: 0;
}

.progress-bar {
background: #667eea;
height: 100%;
width: 50%;
transition: width 0.3s;
}

.resumen {
background: #f0f4ff;
padding: 20px;
border-radius: 6px;
margin-top: 20px;
border-left: 4px solid #667eea;
}

.resumen h3 {
color: #333;
margin-bottom: 15px;
font-size: 16px;
}

.resumen-item {
display: grid;
grid-template-columns: 200px 1fr;
margin-bottom: 10px;
font-size: 14px;
}

.resumen-item strong {
color: #1F4E78;
}

.success-message {
background: #4caf50;
color: white;
padding: 15px;
border-radius: 6px;
margin-top: 20px;
display: none;
text-align: center;
}

.success-message.visible {
display: block;
}

@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
}

Fecha y Hora:

Paso 1: Información General

Faena *

Selecciona una faena
Litio RCA 94
Emba Norte III
Proyecto Sur

RUT *

Proceso *

Especificar otro proceso

Área *

Especificar otra área

Ubicación *

Paso 2: Ingresos de Residuos

📸 Sección 2: Fotos por Categoría

🔄 Sección 3: Fotos 360 del Patio de Stock

✓ Ingreso guardado exitosamente

// DATOS
const tipos = [
‘Agua potable’,
‘Agua industrial’,
‘Residuos domiciliarios’,
‘Residuos industrial no peligroso’,
‘Residuos peligrosos Líquidos’,
‘Residuos peligrosos Sólidos’,
‘Fluidos de perforación’
];

const envases = [‘Bolsas’, ‘Tinetas’, ‘Tambores’, ‘Otros’];
const unidades = [‘Ltr’, ‘cc’, ‘Mtr³’, ‘Kg’];
const procesosLista = [‘Operación’, ‘Mantenimiento’, ‘Administración’, ‘Otros’];
const areasLista = [‘Operación’, ‘Bodega’, ‘Taller’, ‘Campamento’, ‘Otros’];

const categoriasEspeciales = [
‘Respel’, ‘Suspel’, ‘Aceites y grasas’, ‘Aerosoles’, ‘Baterías’,
‘Gasas’, ‘Susquímicas’, ‘Almacenamiento de aditivos’, ‘Residuos domiciliarios industriales’
];

const fotos360 = [‘Frente’, ‘Atrás’, ‘Izquierda’, ‘Derecha’];

// FUNCIONES GENERALES
function actualizarFecha() {
const ahora = new Date();
const fecha = ahora.toLocaleDateString(‘es-CL’);
const hora = ahora.toLocaleTimeString(‘es-CL’);
document.getElementById(‘fechaHora’).textContent = `${fecha} ${hora}`;
}

function limpiarErrores() {
document.querySelectorAll(‘.error-message’).forEach(e => e.classList.remove(‘visible’));
document.querySelectorAll(‘input, select’).forEach(e => e.classList.remove(‘error’));
}

function validarPantalla1() {
limpiarErrores();
const campos = {
‘faena’: ‘Faena’,
‘rut’: ‘RUT’,
‘proceso’: ‘Proceso’,
‘area’: ‘Área’,
‘ubicacion’: ‘Ubicación’
};

return valido;
}

function siguientePantalla() {
if (validarPantalla1()) {
document.getElementById(‘screen1’).classList.remove(‘active’);
document.getElementById(‘screen2’).classList.add(‘active’);
document.getElementById(‘progressBar’).style.width = ‘100%’;
construirTabla();
}
}

function pantallaPrincipal() {
document.getElementById(‘screen2’).classList.remove(‘active’);
document.getElementById(‘screen1’).classList.add(‘active’);
document.getElementById(‘progressBar’).style.width = ‘50%’;
document.getElementById(‘resumen’).style.display = ‘none’;
}

// COMBOBOX GENÉRICO
function crearCombobox(inputId, dropdownId, opciones, otrosContainerId = null) {
const input = document.getElementById(inputId);
const dropdown = document.getElementById(dropdownId);
const otrosContainer = otrosContainerId ? document.getElementById(otrosContainerId) : null;

if (!input) return;

function filtrarOpciones() {
const valor = input.value.toLowerCase();
dropdown.innerHTML = »;
const filtradas = opciones.filter(opt => opt.toLowerCase().includes(valor));

if (filtradas.length === 0 && valor.trim()) {
const div = document.createElement(‘div’);
div.className = ‘combobox-option’;
div.textContent = `Usar: «${valor}»`;
div.onclick = () => {
input.value = valor;
dropdown.classList.remove(‘visible’);
if (otrosContainer) otrosContainer.classList.remove(‘visible’);
};
dropdown.appendChild(div);
} else {
filtradas.forEach(opt => {
const div = document.createElement(‘div’);
div.className = ‘combobox-option’;
div.textContent = opt;
div.onclick = () => {
input.value = opt;
dropdown.classList.remove(‘visible’);
// Si se selecciona «Otros», mostrar el contenedor
if (opt === ‘Otros’ && otrosContainer) {
otrosContainer.classList.add(‘visible’);
const otrosInput = otrosContainer.querySelector(‘.combobox-input’);
if (otrosInput) otrosInput.focus();
} else if (otrosContainer) {
otrosContainer.classList.remove(‘visible’);
}
};
dropdown.appendChild(div);
});
}

if (filtradas.length > 0 || (valor.trim())) {
dropdown.classList.add(‘visible’);
}
}

input.addEventListener(‘focus’, mostrarOpciones);
input.addEventListener(‘input’, filtrarOpciones);
document.addEventListener(‘click’, (e) => {
if (e.target !== input && !dropdown.contains(e.target)) {
dropdown.classList.remove(‘visible’);
}
});
}

// CONSTRUIR TABLA
function construirTabla() {
construirResiduos();
construirFotosCategoria();
construirFotos360();
}

// SECCIÓN 1: RESIDUOS
function construirResiduos() {
const seccion = document.getElementById(‘seccionResiduos’);
let html = »;

tipos.forEach((tipo, idx) => {
const resumenId = `resumen-${idx}`;
html += `

${tipo}

Envase *

Especificar otro envase

Cantidad de envases *

Contenido del envase *

Unidad *

Especificar otra unidad

📸 Carga de Fotos

Foto 1

Foto 2

Foto 3 (opcional)

`;
});

seccion.innerHTML = html;

tipos.forEach((_, idx) => {
crearCombobox(`envase-${idx}`, `envase-dropdown-${idx}`, envases, `envase-otros-container-${idx}`);
crearCombobox(`unidad-${idx}`, `unidad-dropdown-${idx}`, unidades, `unidad-otros-container-${idx}`);

// Crear combobox para los campos «Otros»
crearCombobox(`envase-otros-input-${idx}`, `envase-otros-dropdown-${idx}`, envases);
crearCombobox(`unidad-otros-input-${idx}`, `unidad-otros-dropdown-${idx}`, unidades);
});
}

function toggleResiduo(idx) {
const checkbox = document.getElementById(`check-${idx}`);
const expandible = document.getElementById(`expand-${idx}`);

if (checkbox.checked) {
expandible.classList.add(‘visible’);
} else {
expandible.classList.remove(‘visible’);
document.getElementById(`fotos-${idx}`).classList.remove(‘visible’);
limpiarResiduo(idx);
}
}

function toggleFotos(idx) {
const seccion = document.getElementById(`fotos-${idx}`);
seccion.classList.toggle(‘visible’);
}

if (envase && contenido && unidad && cantidad) {
const totalContenido = parseFloat(contenido) * parseFloat(cantidad);
const resumenText = `${cantidad} ${envase} de ${contenido} ${unidad}`;
const totalText = `Total: ${totalContenido} ${unidad}`;

let html = `

📝 ${resumenText}

${totalText}

resumenDiv.innerHTML = html;
resumenDiv.classList.add(‘visible’);
} else {
resumenDiv.classList.remove(‘visible’);
}
}

// SECCIÓN 2: FOTOS POR CATEGORÍA
function construirFotosCategoria() {
const seccion = document.getElementById(‘seccionFotosCategoria’);
let html = »;

categoriasEspeciales.forEach((cat, idx) => {
const catId = `cat-${idx}`;
html += `

${cat}
Opcional

📸 Foto

`;
});

seccion.innerHTML = html;
}

function toggleFotoCategoria(idx) {
const div = document.getElementById(`fotos-cat-${idx}`);
div.classList.toggle(‘visible’);
}

// SECCIÓN 3: FOTOS 360
function construirFotos360() {
const seccion = document.getElementById(‘seccionFotos360’);
let html = `

Requiere foto 360
Opcional

fotos360.forEach((dir, idx) => {
html += `

📷 Foto ${dir}

`;
});

html += `

seccion.innerHTML = html;
}

function toggleFotos360() {
const container = document.getElementById(‘fotos360-container’);
container.classList.toggle(‘visible’);
}

// MOSTRAR RESUMEN
function mostrarResumen() {
const datos = {
faena: document.getElementById(‘faena’).value,
rut: document.getElementById(‘rut’).value,
proceso: document.getElementById(‘proceso’).value,
area: document.getElementById(‘area’).value,
ubicacion: document.getElementById(‘ubicacion’).value,
fecha: document.getElementById(‘fechaHora’).textContent
};

let html = `

Faena: ${datos.faena}

RUT: ${datos.rut}

Proceso: ${datos.proceso}

Área: ${datos.area}

Ubicación: ${datos.ubicacion}

Fecha/Hora: ${datos.fecha}

Registros ingresados:

• ${tipo}: ${cantidad} ${envase} × ${contenido} ${unidad} = ${total} ${unidad}

`;
}
}
});

if (!tieneData) {
alert(‘Por favor ingresa al menos un valor’);
return;
}

document.getElementById(‘contenidoResumen’).innerHTML = html;
document.getElementById(‘resumen’).style.display = ‘block’;
document.getElementById(‘successMessage’).classList.remove(‘visible’);
}

function guardarIngreso() {
document.getElementById(‘successMessage’).classList.add(‘visible’);
setTimeout(() => {
alert(‘✓ Ingreso guardado en Dataverse’);
location.reload();
}, 2000);
}

// INICIALIZAR
actualizarFecha();
setInterval(actualizarFecha, 1000);
crearCombobox(‘proceso’, ‘procesoDropdown’, procesosLista, ‘proceso-otros-container’);
crearCombobox(‘area’, ‘areaDropdown’, areasLista, ‘area-otros-container’);

// Crear combobox para los campos «Otros» de Step 1
crearCombobox(‘proceso-otros-input’, ‘proceso-otros-dropdown’, procesosLista);
crearCombobox(‘area-otros-input’, ‘area-otros-dropdown’, areasLista);

📋 Formulario de Ingreso HSEC

Paso 1: Información General

Paso 2: Ingresos de Residuos

📸 Sección 2: Fotos por Categoría

🔄 Sección 3: Fotos 360 del Patio de Stock

📋 Resumen del Ingreso

📸 Carga de Fotos

Registros ingresados: