:root {
    --fondo-sidebar: #111827; --texto-sidebar: #ffffff; --fondo-app: #f3f4f6;
    --texto-principal: #1f2937; --blanco: #ffffff; --borde: #e5e7eb;
    --azul: #2563eb; --verde: #16a34a; --rojo-fondo: #fee2e2;
    --rojo-texto: #b91c1c; --amarillo-fondo: #fef3c7; --amarillo-texto: #b45309;
    --naranja: #f59e0b;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
body { background-color: var(--fondo-app); color: var(--texto-principal); overflow-x: hidden; }

/* --- RESPONSIVO Y ESTRUCTURA --- */
.contenedor-app { display: flex; height: 100vh; position: relative; }
.header-mobile { display: none; align-items: center; padding: 15px; background: var(--fondo-sidebar); color: white; width: 100%; }
.btn-menu-movil { background: transparent; border: none; color: white; font-size: 1.8rem; cursor: pointer; }

.sidebar { width: 250px; background-color: var(--fondo-sidebar); color: var(--texto-sidebar); padding: 20px; flex-shrink: 0; transition: transform 0.3s ease; z-index: 1000; }
.sidebar h2 { margin-bottom: 30px; font-size: 1.5rem; text-align: center; }
.btn-nav { display: block; width: 100%; text-align: left; padding: 12px 15px; margin-bottom: 10px; background: none; border: none; color: var(--texto-sidebar); cursor: pointer; border-radius: 5px; font-size: 1rem; transition: background 0.3s; }
.btn-nav:hover, .btn-nav.activo { background-color: #374151; }

/* El contenedor principal es el que hace scroll ahora */
.contenido-principal { flex: 1; padding: 30px; overflow-y: auto; width: 100%; scroll-behavior: smooth; }
.modulo { display: none; }
.modulo.activo { display: block; }
h2 { font-size: 1.8rem; margin-bottom: 20px; }

.contenedor-flex { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.contenedor-flex > .tarjeta { flex: 1; min-width: 300px; margin-bottom: 0; }

.alerta { padding: 15px; margin-bottom: 15px; border-left: 5px solid; border-radius: 4px; }
.alerta-peligro { background-color: var(--rojo-fondo); color: var(--rojo-texto); border-color: var(--rojo-texto); }
.tarjeta { background-color: var(--blanco); padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 20px; width: 100%; }
.formulario-horizontal { display: flex; flex-direction: column; gap: 15px; }

input[type="text"], input[type="number"], select { padding: 10px; border: 1px solid var(--borde); border-radius: 4px; width: 100%; }

.btn { padding: 10px 20px; border: none; border-radius: 4px; color: var(--blanco); cursor: pointer; font-weight: bold; transition: opacity 0.2s; text-align: center; }
.btn:hover { opacity: 0.9; }
.btn-primario { background-color: var(--azul); }
.btn-exito { background-color: var(--verde); }
.btn-editar { background-color: var(--naranja); color: white; }
.btn-peligro { background-color: #ef4444; color: white; border: 1px solid #b91c1c; }
.oculto { display: none !important; }

/* Checklist de Insumos */
.checklist-contenedor { max-height: 250px; overflow-y: auto; border: 1px solid var(--borde); padding: 10px; border-radius: 4px; background: #f9fafb; margin-bottom: 10px; }
.checklist-item { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #eee; cursor: pointer; }
.checklist-item:last-child { border-bottom: none; }
.checklist-item input { width: auto; margin-right: 10px; transform: scale(1.2); cursor: pointer; }

/* Tablas y Listas responsivas */
.tabla-contenedor { overflow-x: auto; }
table { width: 100%; text-align: left; border-collapse: collapse; min-width: 500px; }
th, td { padding: 10px; border-bottom: 1px solid var(--borde); }

.item-lista { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; gap: 10px; }
.item-lista:last-child { border-bottom: none; }
.control-cantidad { display: flex; align-items: center; gap: 5px; }
.btn-circulo { width: 35px; height: 35px; border-radius: 4px; border: none; background: #e5e7eb; font-size: 1.2rem; cursor: pointer; font-weight: bold; color: #374151;}
.btn-circulo:hover { background: #d1d5db; }
.input-cant { width: 70px; text-align: center; padding: 8px; border: 1px solid var(--borde); border-radius: 4px; font-weight: bold; font-size: 1.1rem;}
.gran-total { font-size: 1.3rem; font-weight: bold; text-align: right; margin-top: 15px; color: var(--texto-principal); }

/* MEDIA QUERIES PARA CELULARES */
@media (max-width: 768px) {
    .contenedor-app { flex-direction: column; }
    .header-mobile { display: flex; }
    .sidebar { position: absolute; height: 100%; top: 0; left: 0; transform: translateX(-100%); }
    .sidebar.abierta { transform: translateX(0); box-shadow: 4px 0 15px rgba(0,0,0,0.5); }
    .contenido-principal { padding: 15px; }
    .item-lista { flex-direction: column; align-items: stretch; text-align: center; }
    .control-cantidad { justify-content: center; margin-bottom: 10px; }
}