body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', sans-serif; background-color: #011936; color: #F4FFFD; overflow: hidden; }
#scanner-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    background: #000;
    /* NUEVO: Esto centra el contenido vertical y horizontalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}
.ui-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
#feedback-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 3;}
.flash-success { background-color: rgba(68, 207, 108, 0.6); }
.flash-error { background-color: rgba(237, 37, 78, 0.6); }

/* BARRA SUPERIOR */
.top-bar { 
    padding: 15px; 
    display: flex; 
    justify-content: flex-end; 
    pointer-events: auto; 
}
.menu-btn { 
    background: transparent;  
    color: #F9DC5C;           
    border: none;             
    font-size: 2.5rem;        
    cursor: pointer;
    line-height: 1;
    padding: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* PANEL INFERIOR */
.info-panel { background: #011936; padding: 20px; border-top: 4px solid #F9DC5C; pointer-events: auto; min-height: 15vh; text-align: center; }
.last-scanned { font-size: 1.5rem; font-weight: 700; color: #F9DC5C; margin-bottom: 5px; }
.stock-status { font-size: 1.1rem; color: #fff; opacity: 0.9; }

/* MODALES Y MENUS */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #011936; z-index: 10; display: none; flex-direction: column; padding: 20px; box-sizing: border-box; overflow-y: auto; }
.modal.active { display: flex; }

/* Botones Generales */
.btn-action { width: 100%; padding: 15px; margin: 8px 0; border: none; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; text-transform: uppercase; }
.btn-danger { background: #FF6B6B; color: #e0e1dd; }
.btn-close { background: #465362; color: #fff; margin-top: auto; }
.btn-copy { background: #F9DC5C; color: #011936; }
.btn-edit { background: transparent; border: 2px solid #F9DC5C; color: #F9DC5C; }
.btn-save { background: #44CF6C; color: #011936; }

/* Listas dentro del menú */
/* EN style.css */

.scrollable-list { 
    background: rgba(255,255,255,0.05); 
    border-radius: 8px; 
    padding: 10px; 
    margin-bottom: 15px; 
    
    /* CAMBIO IMPORTANTE: Quitamos max-height: 200px */
    /* Usamos unidades relativas a la pantalla (vh = viewport height) */
    max-height: 40vh; 
    min-height: 150px; /* Para asegurar que siempre tenga un tamaño decente */
    
    overflow-y: auto; 
    
    /* Añadimos borde sutil para que se vea donde acaba */
    border: 1px solid #465362;
}
.shopping-box { background: #fff; color: #000; }

/* Estilos para el Editor */
.edit-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid #465362; padding-bottom: 8px; }
.qty-input { width: 70px; padding: 8px; border-radius: 5px; border: none; text-align: center; font-size: 1.1rem; font-weight: bold; }

/* Modal de Confirmación (Overlay) */
.confirm-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 20;
    display: flex; align-items: center; justify-content: center;
}
.confirm-box {
    background: #011936; border: 2px solid #FF6B6B;
    padding: 20px; border-radius: 10px; width: 85%; text-align: center;
}
.confirm-buttons { display: flex; gap: 10px; margin-top: 20px; }
.input-dark {
    width: 100%;
    padding: 10px;
    background: #000;
    border: 1px solid #465362;
    color: #F9DC5C;
    border-radius: 5px;
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
}
.input-dark::placeholder {
    color: #465362;
}
/* --- ARREGLO DE CÁMARA A PANTALLA COMPLETA --- */

/* Forzamos al vídeo a ocupar todo el fondo sin deformarse */
#scanner-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Esto es la clave: hace zoom para llenar */
    border-radius: 0 !important;
}

/* Ajustamos el lienzo donde se dibujan las esquinas verdes */
#scanner-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Opcional: Ocultar el botón de "pausa" o textos raros que a veces salen */
#scanner-container button {
    display: none !important;
}